相思资源网

微信小程序以ssm做后台开发的实现示例
站长资源 2024/11/6 佚名
53 1538
相思资源网 Design By www.200059.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、数据库的那些方法和接口就不写了，重点是小程序的前段和后端的交互。

标签：
小程序ssm后台开发,小程序ssm开发
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com

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

暂无微信小程序以ssm做后台开发的实现示例的评论...
www.200059.com 相思资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
相思资源网 Design By www.200059.com