微信小程序选项卡功能开发步骤与方法全解析
340
2023-11-08
微信小程序以ssm做后台开发的实现示例
微信小程序任何的语言都可以做后台，现在微信小程序推出云函数，做后台也可以。但是自己感觉想要完整的后台，做后台用java和php更好点。下面以典型的例证给大家做一下讲解，注册。
1、wmxl
微信小程序的前段代码（提交数据主要以from表单实现的）
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<view class="btn-submit">
<button formType="reset">请完善注册信息</button>
</view>
<form catchsubmit="formSubmit" catchreset="formReset">
<view class="input-list">
<view class="input-item">
<text class="input-item-label">姓名</text>
<view class="input-item-content">
<input type="text" name="name" auto-focus placeholder="请输入您的姓名" bindinput="inputName"></input>
</view>
</view>
<view class="input-item">
<text class="input-item-label">性别</text>
<picker class="input-item-content" bindchange="bindPickerChange" data-pickername="industry" value="{{industryindex}}" range="{{industryarr}}" mode="selector">{{industryarr[industryindex]}}
</picker>
</view>
<view class="input-item">
<text class="input-item-label">账号</text>
<view class="input-item-content">
<input type="idcard" name="tel" placeholder="请输入您的手机号码" maxlength="11" bindinput="inputPhone"></input>
</view>
</view>
<view class="input-item">
<text class="input-item-label">登录密码</text>
<view class="input-item-content">
<input type="password" name="password" auto-focus placeholder="请设置登录密码" bindinput="inputName"></input>
</view>
</view>
<view class="input-item">
<text class="input-item-label">邮箱</text>
<view class="input-item-content">
<input type="text" name="email" auto-focus placeholder="请输入您的邮箱" bindinput="inputName"></input>
</view>
</view>
<view class="input-item">
<text class="input-item-label">注册vip</text>
<picker class="input-item-content" bindchange="bindPickerChange" data-pickername="status" value="{{statusindex}}" range="{{statusarr}}" mode="selector">{{statusarr[statusindex]}}
</picker>
</view>
</view>
<view class="btn-submit">
<button type="primary" formType="submit">提交</button>
<button formType="reset">置空</button>
</view>
</form>
2、wxss
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
/**app.wxss**/
/**app.wxss**/
page{
height: 100%;
color: #333;
display: flex;
flex-direction: column;
font: normal 30rpx/1.68 -apple-system-font, Helvetica Neue, Helvetica, Microsoft YaHei, sans-serif;
}
.container {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.container-body{
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
.container-footer{
width: 100%;
display: flex;
height: 88rpx;
border-top: 1rpx solid #ddd;
background: #fff;
}
.container-footer text{
flex: 1;
display: block;
text-align: center;
height: 88rpx;
line-height: 88rpx;
font-size: 34rpx;
border-left: 1rpx solid #ddd;
}
.container-footer text:first-child{
border-left: none;
}
.container-footer .btn-block{
border-radius: 0;
}
.container-footer .btn-block:after{
border: none;
}
.container-gray{
background: #f9f9f9;
}
input{
height: 60rpx;
line-height: 60rpx;
font-family: inherit;
}
.input-list{
padding: 0 20rpx;
margin: 20rpx 0;
background: #fff;
border-top: 1rpx solid #ddd;
border-bottom: 1rpx solid #ddd;
}
.input-list .input-item{
padding: 20rpx;
line-height: 2;
display: flex;
font-size: 30rpx;
border-top: 1rpx solid #e8e8e8;
}
.input-list .input-item:first-child{
border-top: 0;
}
.input-item-label{
display: block;
width: 5em;
color: #666;
}
.input-item-content{
color: #333;
flex:1;
}
.input-item.input-item-full{
display: block;
}
.input-item.input-item-full .input-item-label{
width: 100%;
}
.input-item.input-item-full .input-item-content{
width: 100%;
}
.input-item.input-item-full textarea{
padding: 0;
height: 150rpx;
border: 1rpx solid #e8e8e8;
padding: 10rpx;
}
.input-item.input-item-full .img-upload{
padding: 0;
}
.input-item.input-item-adaption .input-item-label{
width: auto;
margin-right: 20rpx;
}
button{
font-size: 32rpx;
line-height: 72rpx;
}
textarea{
width: 100%;
padding: 20rpx;
box-sizing: border-box;
}
radio-group radio{
position:absolute;
left: -999em;
}
radio-group label{
margin-right: 16rpx;
}
radio-group label:before{
content: ;
display: inline-block;
width: 40rpx;
height: 40rpx;
vertical-align: -8rpx;
margin-right: 4rpx;
}
.btn-submit{
padding: 20rpx;
}
.btn-block{
width: 100%;
line-height: 88rpx;
}
.btn-orange{
background: #f7982a;
color: #fff;
}
.btn-gray{
background: #e8e8e8;
color: #333;
}
.search-flex{
display: flex;
padding: 20rpx;
border-bottom: 1rpx solid #ddd;
position: relative;
z-index: 13;
background: #f9f9f9;
/* transform: translateY(-100%); */
margin-top: 0;
transition: all 0.3s;
}
.search-flex-hide{
margin-top: -117rpx;
}
.search-flex button{
background: #f7982a;
color: #fff;
line-height: 72rpx;
height: 72rpx;
font-size: 30rpx;
border-radius: 6rpx;
}
.search-bar{
flex: 1;
display: flex;
border: 1rpx solid #e8e8e8;
border-radius: 6rpx;
}
.search-bar input{
flex: 1;
height: 72rpx;
line-height: 72rpx;
padding: 0 10rpx;
background: #fff;
}
.search-extra-btn{
margin-left: 20rpx;
white-space: nowrap;
}
.filter-tab{
display: flex;
width: 100%;
line-height: 80rpx;
border-bottom: 1rpx solid #ddd;
position: relative;
z-index: 2;
background: #fff;
}
.filter-tab text{
flex: 1;
text-align: center;
}
.filter-tab text:after{
content: ;
display: inline-block;
vertical-align: 4rpx;
width: 0;
height: 0;
border-left: 12rpx solid transparent;
border-right: 12rpx solid transparent;
border-top: 12rpx solid #bbb;
margin-left: 8rpx;
}
.filter-tab text.active{
color: #f7982a;
}
.filter-tab:not(.sort-tab) text.active:after{
border-top: 0;
border-bottom: 12rpx solid #f7982a;
}
.filter-tab.sort-tab text.active:after{
border-top: 12rpx solid #f7982a;
}
.filter-panel{
display: flex;
background: #f5f5f5;
position: absolute;
width: 100%;
z-index: 13;
overflow: hidden;
}
.filter-panel-left,.filter-panel-right{
flex: 1;
line-height: 80rpx;
text-align: center;
max-height: 480rpx;
overflow-y: auto;
}
.filter-panel-left .active{
background: #fff;
}
.filter-panel-right .active{
color: #f7982a;
}
.filter-panel-right{
background: #fff;
}
.filter-panel-right:empty{
display: none;
}
.filter-shadow{
position: absolute;
width: 100%;
top: 0;
bottom: 0;
z-index: 1;
background: rgba(0,0,0,.5);
}
.gototop{
width: 70rpx;
height: 70rpx;
position: fixed;
bottom: 20rpx;
right: 20rpx;
transition: all 0.3s;
opacity: 0;
transform: translateY(200rpx);
}
.gototop.active{
opacity: 1;
transform: translateY(0);
}
.group{
display: block;
width: 100%;
}
.group-header{
line-height: 70rpx;
display: flex;
padding: 0 20rpx;
background: #f9f9f9;
}
.group-body{
background: #fff;
border-top: 1rpx solid #ddd;
border-bottom: 1rpx solid #ddd;
}
.group-body .input-list{
margin: 0;
border: none;
}
.img-upload{
padding: 20rpx;
font-size: 0;
overflow: hidden;
}
.img-upload .img-item,
.img-upload .img-add{
width: 100rpx;
height: 100rpx;
float: left;
margin: 10rpx;
border: 1rpx solid transparent;
}
.img-upload .img-add{
border: 1rpx dashed #ddd;
}
.img-upload .img-item image{
width: 100rpx;
height: 100rpx;
}
.img-upload .img-item{
position: relative;
}
.img-upload .img-item icon{
position: absolute;
right: -12rpx;
top: -12rpx;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
3、js
js是重点，他是一个中间桥梁，获取微信小程序前端的数值和传导ssm的后台。
wx.request这是微信的接口，也就是发起请求。
url: ‘http://localhost:8080/lg/wechat/add,这就是你的项目的地址，也就是controller。
dada就是你要传到后台的数据。
接下来是完整的js代码（获取表单的数据，这里的js包括获取openid，如果你使用，直接删除就可以）
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
Page({
data: {
industryarr: [],
industryindex: 0,
statusarr: [],
statusindex: 0,
jobarr: [],
jobindex: 0,
},
onLoad: function () {
this.fetchData()
},
fetchData: function () {
this.setData({
industryarr: ["请选择","男", "女"],
statusarr: ["是否注册vip会员","是", "否"],
})
},
// bindPickerChange1: function (e){
// var sex = e.detail.value;
// console.log(sex)
// if(sex==1){
// var app=getApp()
// app.sex=男
// }else{
// var app = getApp()
// app.sex = 女
// }
// },
// bindPickerChange2: function (e) {
// var vip = e.detail.value;
// console.log(vip)
// if(vip==1){
// var app=getApp()
// app.vip=是
// }else{
// var app = getApp()
// app.vip = 否
// }
// },
bindPickerChange: function (e) { //下拉选择
const eindex = e.detail.value;
//onsole.log(industryarr[e.detail.value])
const name = e.currentTarget.dataset.pickername;
console.log(name)
// this.setData(Object.assign({},this.data,{name:eindex}))
switch (name) {
case industry:
var app=getApp()
app.sex = this.data.industryarr[eindex]
console.log(app.sex)
this.setData({
industryindex: eindex
})
case status:
var app = getApp()
app.vip = this.data.statusarr[eindex]
console.log(app.vip)
this.setData({
statusindex: eindex
})
break;
case job:
this.setData({
jobindex: eindex
})
break;
default:
return
}
},
formSubmit(e) {
var name = e.detail.value.name;
var tel = e.detail.value.tel;
var email = e.detail.value.email;
var userpassword = e.detail.value.password;
console.log(form发生了submit事件，携带数据为：, name, tel, email)
wx.login({
success: function (res) {
var code1 = res.code
var app = getApp()
var appid1 = app.globalData.appid
var secret1 = app.globalData.secret
console.log(获取的code, code1, appid1, secret1)
var ul = https://api.weixin.qq.com/sns/jscode2session?appid= + appid1 + &secret= + secret1 + &js_code= + code1 + &grant_type=authorization_code
wx.request({
url: ul,
method: GET,
success: function (e) {
var openid = e.data.openid
console.log(获取登录身份的唯一openid, openid)
// wx.setStorageSync(openid, openid)
//wx.setStorageSync(name, name)
wx.request({
url: http://localhost:8080/lg/wechat/add,
data: {
openid: openid,
userpassword: userpassword,
name: name,
sex: app.sex,
tel: tel,
email: email,
vip: app.vip,
},
//method:POST,
success: function (res) {
const mess=res.data
if (res.data){
console.log("fhgdshxcbxcbxcbcxbxcbxcfj")
wx.showToast({
title: 注册成功,
icon:success,
})
}else{
wx.showModal({
title: 温馨提示,
content: 您已注册过，请不要重复注册,
success: function (res) {
if (res.confirm) {
wx.navigateTo({
url: ../../pages/login/login,
})
} else if (res.cancel) {
wx.navigateTo({
url: ../../pages/hotel/hotel
})
}
}
})
}
}
})
}
})
}
})
},
})
4、ssm的后端实现
因为小程序的数据格式都是json格式，所以我们的ssm后台也必须是就json的格式，Java要实现json的格式，需要对应的jar包，打下自行-。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
package org.lg.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.lg.entity.user;
import org.lg.entity.wcuser;
import org.lg.service.roomlistService;
import org.lg.service.roomtypesService;
import org.lg.service.wcuserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.fasterxml.jackson.databind.util.JSONPObject;
import net.sf.json.JSON;
import net.sf.json.JSONObject;
@Controller
@RequestMapping("wechat")
public class wechatController {
@Autowired
public wcuserService wcservice;
@Autowired
public roomlistService roomlistservice;
@Autowired
public roomtypesService roomtypesservice;
//用户注册
@RequestMapping("add")
@ResponseBody
public JSONObject adduser(@RequestParam("openid") String openid,@RequestParam("name") String name,@RequestParam("sex") String sex,@RequestParam("tel") String tel,
@RequestParam("email") String email,@RequestParam("vip") String vip,HttpServletRequest request,
HttpServletResponse response,@RequestParam("userpassword") String userpassword) {
System.out.println(openid+name+sex+tel+email+vip);
Map<String, String> map = new HashMap<String, String>();
if(openid!=null) {
//判断openid在注册的列表中是否存在
wcuser queryopenid = wcservice.queryopenid(openid);
//String openid2 = queryopenid.getOpenid();
if(queryopenid!=null) {
map.put("msg","您已经注册过，请不要重复注册");
JSONObject json = JSONObject.fromObject(map);
return json;
}else{
wcservice.adduc(openid,name, sex, tel, email, vip,userpassword);
//map.put("status","succ");
map.put("msg","注册成功");
JSONObject json = JSONObject.fromObject(map);
return json;
}
}else {
wcuser wcuser1 = wcservice.queryopenid(openid);
String openid2 = wcuser1.getOpenid();
if(openid2!=null) {
map.put("msg","请不要重复注册");
JSONObject json = JSONObject.fromObject(map);
return json;
}else {
map.put("msg","完善信息");
JSONObject json = JSONObject.fromObject(map);
return json;
}
}
}
}
5、数据库的那些方法和接口就不写了，重点是小程序的前段和后端的交互。
到此这篇关于微信小程序以ssm做后台开发的实现示例的文章就介绍到这了,更多相关小程序ssm做后台
您可能感兴趣的文章:微信小程序云开发之模拟后台增删改查
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~