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


Posted in Javascript onApril 08, 2020

微信小程序任何的语言都可以做后台,现在微信小程序推出云函数,做后台也可以。但是自己感觉想要完整的后台,做后台用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做后台开发内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
js表单登陆验证示例
Oct 19 Javascript
Vue中使用vux的配置详解
May 05 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 #Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 #Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 #Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 #Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 #Javascript
vue开发移动端底部导航条功能
Apr 08 #Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 #Javascript
You might like
PHP函数eval()介绍和使用示例
2014/08/20 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
python的类变量和成员变量用法实例教程
2014/08/25 Python
python3简单实现微信爬虫
2015/04/09 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
python调用fortran模块
2016/04/08 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python验证码图片处理(二值化)
2019/11/01 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
python能开发游戏吗
2020/06/11 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
C#实现启动一个进程
2016/10/01 面试题
三年大学生活自我鉴定
2014/01/21 职场文书
感恩寄语大全
2014/04/11 职场文书
大学生社会实践评语
2014/04/25 职场文书
创先争优一句话承诺
2014/05/29 职场文书
单位收入证明范本
2015/06/18 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
Redis Lua脚本实现ip限流示例
2022/07/15 Redis