微信小程序怎么用ssm做后臺開發

這篇文章主要講解了“微信小程序怎么用ssm做后臺開發”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序怎么用ssm做后臺開發”吧！

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

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做后臺開發這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！