위 챗 애플 릿 이 ssm 를 배경 으로 개발 한 실현 사례

18423 단어 애플 릿ssm백그라운드 개발
위 챗 애플 릿 은 모든 언어 를 배경 으로 할 수 있 습 니 다.현재 위 챗 애플 릿 은 클 라 우 드 함 수 를 내 놓 아 배경 으로 도 할 수 있 습 니 다.하지만 자신 은 완전한 백 스테이지 를 원한 다 고 생각 합 니 다.백 스테이지 용 자바 와 phop 이 좋 습 니 다.다음은 전형 적 인 예증 으로 여러분 께 설명 과 등록 을 해 드 리 겠 습 니 다.
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 코드 입 니 다.

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 형식 이 어야 합 니 다.자바 가 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 가 백 스테이지 개발 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!
자바 String 을 null 로 변환 하 는 방법
자바 기초 반사 와 범 형 및 주해

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage