微信小程序以ssm做后台开发的实现示例

2023-07-27 14:08:03 204

微信小程序任何的语言都可以做后台，现在微信小程序推出云函数，做后台也可以。但是自己感觉想要完整的后台，做后台用java和php更好点。下面以典型的例证给大家做一下讲解，注册。

1、wmxl

微信小程序的前段代码（提交数据主要以from表单实现的）


请完善注册信息




姓名






性别
{{industryarr[industryindex]}}




账号





登录密码





邮箱





注册vip
{{statusarr[statusindex]}}




提交
置空

2、wxss

/**app.wxss**/
/**app.wxss**/
page{
height:100%;
color:#333;
display:flex;
flex-direction:column;

font:normal30rpx/1.68-apple-system-font,'HelveticaNeue',Helvetica,'MicrosoftYaHei',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:1rpxsolid#ddd;
background:#fff;
}
.container-footertext{
flex:1;
display:block;
text-align:center;
height:88rpx;
line-height:88rpx;
font-size:34rpx;
border-left:1rpxsolid#ddd;
}
.container-footertext: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:020rpx;
margin:20rpx0;
background:#fff;
border-top:1rpxsolid#ddd;
border-bottom:1rpxsolid#ddd;
}
.input-list.input-item{
padding:20rpx;
line-height:2;
display:flex;
font-size:30rpx;
border-top:1rpxsolid#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-fulltextarea{
padding:0;
height:150rpx;
border:1rpxsolid#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-groupradio{
position:absolute;
left:-999em;
}
radio-grouplabel{
margin-right:16rpx;
}
radio-grouplabel: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:1rpxsolid#ddd;
position:relative;
z-index:13;
background:#f9f9f9;
/*transform:translateY(-100%);*/
margin-top:0;
transition:all0.3s;
}
.search-flex.tophide{
margin-top:-117rpx;
}
.search-flexbutton{
background:#f7982a;
color:#fff;
line-height:72rpx;
height:72rpx;
font-size:30rpx;
border-radius:6rpx;
}
.search-bar{
flex:1;
display:flex;
border:1rpxsolid#e8e8e8;
border-radius:6rpx;
}
.search-barinput{
flex:1;
height:72rpx;
line-height:72rpx;
padding:010rpx;
background:#fff;
}
.search-extra-btn{
margin-left:20rpx;
white-space:nowrap;
}
.filter-tab{
display:flex;
width:100%;
line-height:80rpx;
border-bottom:1rpxsolid#ddd;
position:relative;
z-index:2;
background:#fff;
}
.filter-tabtext{
flex:1;
text-align:center;
}
.filter-tabtext:after{
content:'';
display:inline-block;
vertical-align:4rpx;
width:0;
height:0;
border-left:12rpxsolidtransparent;
border-right:12rpxsolidtransparent;
border-top:12rpxsolid#bbb;
margin-left:8rpx;
}
.filter-tabtext.active{
color:#f7982a;
}
.filter-tab:not(.sort-tab)text.active:after{
border-top:0;
border-bottom:12rpxsolid#f7982a;
}
.filter-tab.sort-tabtext.active:after{
border-top:12rpxsolid#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:all0.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:020rpx;
background:#f9f9f9;
}
.group-body{
background:#fff;
border-top:1rpxsolid#ddd;
border-bottom:1rpxsolid#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:1rpxsolidtransparent;
}
.img-upload.img-add{
border:1rpxdashed#ddd;

}
.img-upload.img-itemimage{
width:100rpx;
height:100rpx;
}
.img-upload.img-item{
position:relative;
}
.img-upload.img-itemicon{
position:absolute;
right:-12rpx;
top:-12rpx;
}
.container{
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
padding:200rpx0;
box-sizing:border-box;
}

3、js

js是重点，他是一个中间桥梁，获取微信小程序前端的数值和传导ssm的后台。

wx.request这是微信的接口，也就是发起请求。

url:‘http://localhost:8080/lg/wechat/add',这就是你的项目的地址，也就是controller。

dada就是你要传到后台的数据。

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,
},

接下来是完整的js代码（获取表单的数据，这里的js包括获取openid，如果你使用，直接删除就可以）

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){
//varsex=e.detail.value;
//console.log(sex)
//if(sex==1){
//varapp=getApp()
//app.sex='男'
//}else{
//varapp=getApp()
//app.sex='女'
//}
//},
//bindPickerChange2:function(e){
//varvip=e.detail.value;
//console.log(vip)
//if(vip==1){
//varapp=getApp()
//app.vip='是'

//}else{
//varapp=getApp()
//app.vip='否'
//}
//},
bindPickerChange:function(e){//下拉选择
consteindex=e.detail.value;

//onsole.log(industryarr[e.detail.value])
constname=e.currentTarget.dataset.pickername;
console.log(name)
//this.setData(Object.assign({},this.data,{name:eindex}))
switch(name){
case'industry':
varapp=getApp()
app.sex=this.data.industryarr[eindex]
console.log(app.sex)
this.setData({
industryindex:eindex
})


case'status':
varapp=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){
varname=e.detail.value.name;
vartel=e.detail.value.tel;
varemail=e.detail.value.email;
varuserpassword=e.detail.value.password;
console.log('form发生了submit事件，携带数据为：',name,tel,email)
wx.login({
success:function(res){
varcode1=res.code
varapp=getApp()
varappid1=app.globalData.appid
varsecret1=app.globalData.secret
console.log('获取的code',code1,appid1,secret1)
varul='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){
varopenid=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){
constmess=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',
})

}elseif(res.cancel){
wx.navigateTo({
url:'../../pages/hotel/hotel'
})

}

}
})
}

}
})
}
})
}
})
},
})

4、ssm的后端实现

因为小程序的数据格式都是json格式，所以我们的ssm后台也必须是就json的格式，Java要实现json的格式，需要对应的jar包，打下自行下载。

packageorg.lg.controller;

importjava.util.HashMap;
importjava.util.List;
importjava.util.Map;

importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjavax.servlet.http.HttpSession;

importorg.lg.entity.user;
importorg.lg.entity.wcuser;
importorg.lg.service.roomlistService;
importorg.lg.service.roomtypesService;
importorg.lg.service.wcuserService;
importorg.springframework.beans.factory.annotation.Autowired;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestParam;
importorg.springframework.web.bind.annotation.ResponseBody;
importorg.springframework.web.servlet.ModelAndView;

importcom.fasterxml.jackson.databind.util.JSONPObject;

importnet.sf.json.JSON;
importnet.sf.json.JSONObject;

@Controller
@RequestMapping("wechat")
publicclasswechatController{

@Autowired
publicwcuserServicewcservice;

@Autowired
publicroomlistServiceroomlistservice;
@Autowired
publicroomtypesServiceroomtypesservice;
//用户注册
@RequestMapping("add")
@ResponseBody
publicJSONObjectadduser(@RequestParam("openid")Stringopenid,@RequestParam("name")Stringname,@RequestParam("sex")Stringsex,@RequestParam("tel")Stringtel,
@RequestParam("email")Stringemail,@RequestParam("vip")Stringvip,HttpServletRequestrequest,
HttpServletResponseresponse,@RequestParam("userpassword")Stringuserpassword){
System.out.println(openid+name+sex+tel+email+vip);
Mapmap=newHashMap();
if(openid!=null){
//判断openid在注册的列表中是否存在
wcuserqueryopenid=wcservice.queryopenid(openid);
//Stringopenid2=queryopenid.getOpenid();
if(queryopenid!=null){
map.put("msg","您已经注册过，请不要重复注册");
JSONObjectjson=JSONObject.fromObject(map);
returnjson;
}else{
wcservice.adduc(openid,name,sex,tel,email,vip,userpassword);
//map.put("status","succ");
map.put("msg","注册成功");
JSONObjectjson=JSONObject.fromObject(map);
returnjson;
}

}else{
wcuserwcuser1=wcservice.queryopenid(openid);
Stringopenid2=wcuser1.getOpenid();
if(openid2!=null){
map.put("msg","请不要重复注册");
JSONObjectjson=JSONObject.fromObject(map);
returnjson;
}else{
map.put("msg","完善信息");
JSONObjectjson=JSONObject.fromObject(map);
returnjson;
}
}
}
}

5、数据库的那些方法和接口就不写了，重点是小程序的前段和后端的交互。

到此这篇关于微信小程序以ssm做后台开发的实现示例的文章就介绍到这了,更多相关小程序ssm做后台开发内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

微信小程序以ssm做后台开发的实现示例

热门推荐

随机推荐