铁雪资源网 Design By www.gsvan.com
微信小程序任何的语言都可以做后台,现在微信小程序推出云函数,做后台也可以。但是自己感觉想要完整的后台,做后台用java和php更好点。下面以典型的例证给大家做一下讲解,注册。
1、wmxl
微信小程序的前段代码(提交数据主要以from表单实现的)
<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
/**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.tophide{ 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就是你要传到后台的数据。
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){ // 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"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包,打下自行下载。
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、数据库的那些方法和接口就不写了,重点是小程序的前段和后端的交互。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无微信小程序以ssm做后台开发的实现示例的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?