微信小程式任何的語言都可以做後臺，現在微信小程式推出雲函式，做後臺也可以。但是自己感覺想要完整的後臺，做後臺用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,.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?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',//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包，打下自行下載。

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,sex,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做後臺開發內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！