devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

从零开始快速搭建SpringBoot+Mybatis+小程序应用--微信小程序的入门和前后端的联调_小程序前后端联调

作者：笔触狂放9 | 2024-02-27 15:42:01

赞

踩

小程序前后端联调

目录

项目介绍

 vx小程序简介

VX开发工具介绍

列表页开发

list的编写 

 列表页前后端联调

 信息编辑页开发

operation的编写

区域信息编辑页的联调

项目介绍

从0搭建后端的Springboot+mybatis框架

实现后端的业务功能

实现本地微信小程序的前端开发

前端与后端的调控

技术储备要求

1.基础的java知识

2.基础的前端开发知识（简单了解HTML，JS等）

3.Spring，Mybatis基础知识（不会也没关系）

 vx小程序简介

是一种连接用户服务的方式，小程序是vx内嵌的微小程序。

 根目录有一个app.json和project.json，是用来做全职配置的

 

每生成一个页面，就在pages上写一个路由 。

工具配置 project.config.json（vx会自动，透明的完成）

页面配置 page.json

xxx.json就是针对xxx页面下的风格、配色等相关的配置

 WXML模板 充当HTML的角色

具体不同参照vx开发者文档

WXSS模板 充当CSS的角色 

JS交互文件

VX开发工具介绍

集成了公众号网页调试和小程序调试两种开发模式

打开我们的开发工具：

 vx的开发者工具主要由模拟器，编辑器和调试器

模拟器就类似我们的页面UI，我们对页面做的任何改变都能看到我们小程序的样子。

 编辑器就是我们能够在里面写我们的wxml，wxss，还有js等，

 调试器就类似我们网页Chrome里面的开发者工具，我们能够在控制台里看见报错的信息。

3.创建新的小程序

创建新的小程序，指定项目的目录

 项目一旦启动，就会初始化两个界面出来

 

列表页开发

1.列表展示

2.删除功能

最终效果：

首先我们要掌握一些主键的功能：

 view与div一样是个视图容器

 scroll-view可滚动视图区

 text文本

 navigator类似html的a标签（超链接）

 button 按钮

 block区块 可以在里面写逻辑

项目准备：

index.js:

  1. //index.js
  2. //获取应用实例
  3. const app = getApp()
  4.  
  5. Page({
  6.   data: {
  7.     motto: 'Hello World',
  8.     userInfo: {},
  9.     hasUserInfo: false,
  10.     canIUse: wx.canIUse('button.open-type.getUserInfo')
  11.   },
  12.   //事件处理函数
  13.   bindViewTap: function() {
  14.     wx.navigateTo({//导航到list页面下
  15.       url: '../list/list'
  16.     })
  17.   },
  18.   onLoad: function () {
  19.     if (app.globalData.userInfo) {
  20.       this.setData({
  21.         userInfo: app.globalData.userInfo,
  22.         hasUserInfo: true
  23.       })
  24.     } else if (this.data.canIUse){
  25.       // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
  26.       // 所以此处加入 callback 以防止这种情况
  27.       app.userInfoReadyCallback = res => {
  28.         this.setData({
  29.           userInfo: res.userInfo,
  30.           hasUserInfo: true
  31.         })
  32.       }
  33.     } else {
  34.       // 在没有 open-type=getUserInfo 版本的兼容处理
  35.       wx.getUserInfo({
  36.         success: res => {
  37.           app.globalData.userInfo = res.userInfo
  38.           //
  39.           this.setData({
  40.             userInfo: res.userInfo,
  41.             hasUserInfo: true
  42.           })
  43.         }
  44.       })
  45.     }
  46.   },
  47.   getUserInfo: function(e) {
  48.     console.log(e)
  49.     app.globalData.userInfo = e.detail.userInfo
  50.     this.setData({
  51.       userInfo: e.detail.userInfo,
  52.       hasUserInfo: true
  53.     })
  54.   }
  55. })

index.wxml:

  1. <!--index.wxml-->
  2. <view class="container">
  3.   <view class="userinfo">
  4.     <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
  5.     <block wx:else>
  6.       <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  7.     </block>
  8.   </view>
  9.   <view class="usermotto">
  10.     <text class="user-motto">{{motto}}</text>
  11.   </view>
  12. </view>

index.wxss:

  1. /**index.wxss**/
  2. .userinfo {
  3.   display: flex;
  4.   flex-direction: column;
  5.   align-items: center;
  6. }
  7.  
  8. .userinfo-avatar {
  9.   width: 128rpx;
  10.   height: 128rpx;
  11.   margin: 20rpx;
  12.   border-radius: 50%;
  13. }
  14.  
  15. .userinfo-nickname {
  16.   color: #aaa;
  17. }
  18.  
  19. .usermotto {
  20.   margin-top: 200px;
  21. }

list的编写 

list.wxml:

  1. <!-- pages/list/list.wxml -->
  2.  
  3. <view class="container">
  4.   <view class="widget">
  5.     <text class="column">ID</text>
  6.     <text class="column">区域名</text>
  7.     <text class="column">优先级</text>
  8.     <text class="link-column">操作</text>
  9.   </view>
  10.    <!-- 滚动 -->
  11.   <scroll-view scroll-y="true">
  12.     <view>
  13.     <!-- 循环，list任意命名 -->
  14.       <block wx:for="{{list}}">
  15.         <view class="widget">
  16.           <view>
  17.           <!-- 取每一个的元素 -->
  18.             <text class="column">{{item.areaId}}</text>
  19.             <text class="column">{{item.areaName}}</text>
  20.             <text class="column">{{item.priority}}</text>
  21.             <view class="link-column">
  22.             <!-- 操作是固定的 url：是链接到我们需要的界面区域信息表单 -->
  23.             <!--传递了参数，areaId-->
  24.               <navigator class="link" url="../operation/operation?areaId={{item.areaId}}">编辑</navigator>|
  25.               <!-- 点击删除，会启动事件deleteArea 它会读取控件里的areaId 还有 areaName ，删除之后也要删除界面里的一条信息-->
  26.               <text class="link" bindtap="deleteArea" data-areaid="{{item.areaId}}" data-areaname="{{item.areaName}}" data-index="{{index}}">删除</text>
  27.             </view>
  28.           </view>
  29.         </view>
  30.       </block>
  31.     </view>
  32.   </scroll-view>
  33.   <!-- tap与点击相关 -->
  34.   <button type="primary" bindtap="addArea">添加区域信息</button>
  35. </view>

 list.wxss:

  1. /* pages/list/list.wxss */
  2.  
  3. .widget {
  4.   position: relative;
  5.   margin-top: 5rpx;
  6.   margin-bottom: 5rpx;
  7.   padding-top: 10rpx;
  8.   padding-bottom: 10rpx;
  9.   padding-left: 40rpx;
  10.   padding-right: 40rpx;
  11.   border: #ddd 1px solid;
  12. }
  13.  
  14. .container {
  15.   height: 100%;
  16.   display: table;
  17.   align-items: center;
  18.   justify-content: space-between;
  19.   box-sizing: border-box;
  20.   padding-top: 10rpx;
  21.   padding-bottom: 10rpx;
  22.   text-align: center;
  23. }
  24.  
  25. .column {
  26.   width: 4rem;
  27.   display: table-cell;
  28. }
  29.  
  30. .link-column {
  31.   width: 6rem;
  32.   display: table-cell;
  33. }
  34.  
  35. .link {
  36.   color: blue;
  37.   display: inline-table;
  38. }

list.js

  1. // pages/list/list.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据，wxml想读取的list，就是从data中获取
  6.    */
  7.   data: {
  8.     list: []
  9.   },
  10.  
  11.   /**
  12.    * 生命周期函数--监听页面加载
  13.    * -当页面加载时，就会触发里面的方法
  14.    */
  15.   onLoad: function (options) {
  16.  
  17.   },
  18.  
  19.   /**
  20.    * 生命周期函数--监听页面初次渲染完成
  21.    */
  22.   onReady: function () {
  23.  
  24.   },
  25.  
  26.   /**
  27.    * 生命周期函数--监听页面显示
  28.    * 当页面显示时，就会触发里面的方法
  29.    */
  30.   onShow: function () {
  31.     var that = this;
  32.     //第一个this，表示的是整个页面
  33.     // 访问后台，获取区域信息
  34.     wx.request({
  35.       //url去访问后台的方法，获取它的areaList的值，127.0.0.1，端口8080，生效的是demo/superadmin/listarea
  36.       url: "http://127.0.0.1:8080/demo/superadmin/listarea",
  37.       data: {},
  38.       //访问方法
  39.       method: 'GET',
  40.       //访问成功之后需要做的事情
  41.       success: function (res) {
  42.         var list = res.data.areaList;
  43.         if (list == null) {
  44.           //弹出获取失败
  45.           var toastText = '获取数据失败' + res.data.errMsg;
  46.           wx.showToast({
  47.             title: toastText,
  48.             icon: '',
  49.             // 出错窗口，弹出两秒钟
  50.             duration: 2000
  51.           });
  52.         } else {
  53.           //此时this变化，所以要用最开始的this(that)才能够设置上data里面的list
  54.           that.setData({
  55.             list: list
  56.           });
  57.         }
  58.       }
  59.     })
  60.   },
  61.  
  62.   /**
  63.    * 生命周期函数--监听页面隐藏
  64.    */
  65.   onHide: function () {
  66.  
  67.   },
  68.  
  69.   /**
  70.    * 生命周期函数--监听页面卸载
  71.    */
  72.   onUnload: function () {
  73.  
  74.   },
  75.  
  76.   /**
  77.    * 页面相关事件处理函数--监听用户下拉动作
  78.    */
  79.   onPullDownRefresh: function () {
  80.  
  81.   },
  82.  
  83.   /**
  84.    * 页面上拉触底事件的处理函数
  85.    */
  86.   onReachBottom: function () {
  87.  
  88.   },
  89.  
  90.   /**
  91.    * 用户点击右上角分享
  92.    */
  93.   onShareAppMessage: function () {
  94.  
  95.   },
  96.   addArea: function () {
  97.     //跳转界面，但是没有传参
  98.     wx.navigateTo({
  99.       url: '../operation/operation',
  100.     })
  101.   },
  102.   deleteArea: function (e) {    
  103.     //保存窗口
  104.     var that = this;
  105.     //判断是否进行操作
  106.     wx.showModal({
  107.       title: '提示',
  108.       //区域名的获取通过，这里传入的参数是e，e代表的是控键text
  109.       content: '确定要删除[' + e.target.dataset.areaname + ']吗？',
  110.       //用户点击确认就能访问后台
  111.       success: function (sm) {
  112.         if (sm.confirm) {
  113.           // 用户点击了确定 可以调用删除方法了
  114.           wx.request({
  115.             url: "http://127.0.0.1:8080/demo/superadmin/removearea",
  116.             //传入areaId
  117.             data: { "areaId": e.target.dataset.areaid },
  118.             method: 'GET',
  119.            
  120.             success: function (res) {
  121.               //一旦返回获取result，获取success的字段
  122.               var result = res.data.success
  123.               var toastText = "删除成功！";
  124.               if (result != true) {
  125.                 toastText = "删除失败" + res.data.errMsg;
  126.               } else{
  127.                 //删除成功也需要将list原来的数据删除，index表示数组的第几行，删除1个
  128.                 that.data.list.splice(e.target.dataset.index, 1)
  129.                 //渲染数据
  130.                 //删除成功之后，重新setData
  131.                 that.setData({
  132.                   list: that.data.list
  133.                 });
  134.               }
  135.               //不管删除是否成功，都会弹出我们之前提前设定好的toastText
  136.               wx.showToast({
  137.                 title: toastText,
  138.                 icon: '',
  139.                 //弹出两秒钟
  140.                 duration: 2000
  141.               });
  142.             }
  143.           })
  144.         }
  145.       }
  146.     })
  147.   }
  148. })

onLoad与onShow的区别，即页面的加载与显示的区别：

当我们从operation返回list界面时，不会触发onLoad，只会触发onShow，通过触发列表访问方法，来更新此时我们页面最新的信息。所以我们要在onShow里面编写我们的方法。

勾选上：不校验合法域名等，此时我们才能使url有效，因为vx不会默认端口访问 

 列表页前后端联调

选择list.js,打开调试器，进行断点调试

第一个断点设置在deleteArea方法内

 我们还要在后台进行调试，即removerarea，这里设置一个断点，注意用debug的形式启动

启动好之后，回到我们的页面，选择删除东苑，它就会进入到我们deleteArea里设置好的断点，

我们可以查看this里面就是页面句柄。

 点击F10进入下一步，这里它就会弹出窗口，提示你是否删除东苑。

第二步将断点打在97行，就是if里面，如果用户操作点击了确定，点击F8跳入我们的下一个断点，

如果没有跳断点，就执行完所有的。它通过判断confirm，我们这里是true，所以就会wx.request去访问我们的后台。

接着我们要在在success方法里设置断点，因为它这时候会访问我们的后台，断点就会进入我们的后台方法中，执行完之后，才会返回来。

这里进入到我们idea的断点中，我们在idea中做调试，此时areaId传进来了，为1.

我们直接点击step over（F8）

我们可以看见modelMap， key为success，value为true，表示删除操作成功。我们完成了验证。接着我们跳出后台，就能发现我们的断点来到了103行，这里的success为true。

点击F10下一步删除成功，我们调用setData更新List，之后showToast，它将删除成功的弹窗弹出。

这里就完成了我们区域列表的开发。

 信息编辑页开发

区域信息添加

区域信息更新

operation的编写

 operation.wxml:

  1. <!--pages/operation.wxml-->
  2. <view class="container">
  3. <!-- 属性绑定formSubmit方法，bindreset绑定框架默认自带的formReset，会自动清空里面的内容，包括区域名 -->
  4. <!-- formSubmit需要我们自己去编写 -->
  5.   <form bindsubmit="formSubmit" bindreset="formReset">
  6.     <view class="row">
  7.       <text>区域名：</text>
  8.       <input type="text" name="areaName" placeholder="请输入区域名" value="{{areaName}}" />
  9.     </view>
  10.     <view class="row">
  11.       <text>优先级：</text>
  12.       <input type="number" name="priority" placeholder="数值越大越靠前" value="{{priority}}" />
  13.     </view>
  14.     <view class="row">
  15.     
  16.       <button type="primary" form-type="submit">提交</button>
  17.       <!-- 点击，框架自带的formReset就会清空 -->
  18.       <button type="primary" form-type="reset">清空</button>
  19.     </view>
  20.  
  21.   </form>
  22. </view>

 operation.js:

  1. // pages/operation.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    * 需要用到的全局变量放在这里
  7.    */
  8.   data: {
  9.     // list里面我们会通过点击添加或者点击编辑进入到这个界面，我们通过有没有携带areaId参数来判断。
  10.     areaId: undefined,
  11.     areaName: '',
  12.     priority: '',
  13.     // 访问我们后台区域和修改区域的url
  14.     addUrl: "http://127.0.0.1:8080/demo/superadmin/addarea",
  15.     modifyUrl: "http://127.0.0.1:8080/demo/superadmin/modifyarea"
  16.  
  17.   },
  18.   /**
  19.    * 生命周期函数--监听页面加载
  20.    */
  21.   //这里用onLoad是因为这个界面没有返回按钮，每次打开它都是重新加载，当然用onShow也可以
  22.   onLoad: function (options) {
  23.     var that = this;
  24.     // 页面初始化 options为页面跳转所带来的参数
  25.     this.setData({
  26.       areaId: options.areaId
  27.     });
  28.     if (options.areaId == undefined) {
  29.       return;
  30.     }
  31.     wx.request({
  32.       url: "http://127.0.0.1:8080/demo/superadmin/getareabyid",
  33.       data: { "areaId": options.areaId },
  34.       method: 'GET',
  35.       success: function (res) {
  36.         var area = res.data.area;
  37.         if (area == undefined) {
  38.           var toastText = '获取数据失败' + res.data.errMsg;
  39.           wx.showToast({
  40.             title: toastText,
  41.             icon: '',
  42.             duration: 2000
  43.           });
  44.         } else {
  45.           that.setData({
  46.             areaName: area.areaName,
  47.             priority: area.priority
  48.           });
  49.         }
  50.       }
  51.     })
  52.   },
  53.  
  54.   /**
  55.    * 生命周期函数--监听页面初次渲染完成
  56.    */
  57.   onReady: function () {
  58.  
  59.   },
  60.  
  61.   /**
  62.    * 生命周期函数--监听页面显示
  63.    */
  64.   onShow: function () {
  65.  
  66.   },
  67.  
  68.   /**
  69.    * 生命周期函数--监听页面隐藏
  70.    */
  71.   onHide: function () {
  72.  
  73.   },
  74.  
  75.   /**
  76.    * 生命周期函数--监听页面卸载
  77.    */
  78.   onUnload: function () {
  79.  
  80.   },
  81.  
  82.   /**
  83.    * 页面相关事件处理函数--监听用户下拉动作
  84.    */
  85.   onPullDownRefresh: function () {
  86.  
  87.   },
  88.  
  89.   /**
  90.    * 页面上拉触底事件的处理函数
  91.    */
  92.   onReachBottom: function () {
  93.  
  94.   },
  95.  
  96.   /**
  97.    * 用户点击右上角分享
  98.    */
  99.   onShareAppMessage: function () {
  100.  
  101.   },
  102.   //参数e表示表单
  103.   formSubmit: function (e) {
  104.     var that = this;
  105.     //这个formData的json数据就是表单里的areaName，priorty的值
  106.     var formData = e.detail.value;
  107.     var url = that.data.addUrl;
  108.     if (that.data.areaId != undefined) {
  109.       //不为undefined，就是编辑的
  110.       formData.areaId = that.data.areaId;
  111.       url = that.data.modifyUrl;
  112.     }
  113.     //进入后台
  114.     wx.request({
  115.       url: url,
  116.       //通过JSON.stringify将json转化为字符串的形式
  117.       //formData如果为添加，仅有areaName和priority，如果是更改，还多了一个areaId
  118.       data: JSON.stringify(formData),
  119.       method: 'POST',
  120.       header: {
  121.         'Content-Type': 'application/json'
  122.       },
  123.       //添加或者更改成功就会返回一给success
  124.       success: function (res) {
  125.         var result = res.data.success
  126.         var toastText = "操作成功！";
  127.         if (result != true) {
  128.           toastText = "操作失败" + res.data.errMsg;
  129.         }
  130.         wx.showToast({
  131.           title: toastText,
  132.           icon: '',
  133.           duration: 2000
  134.         });
  135.         //这里一旦提交成功，它就会返回我们的list页面
  136.         if (that.data.areaId == undefined) {
  137.           wx.redirectTo({
  138.             url: '../list/list',
  139.           })
  140.         }
  141.       }
  142.     })
  143.   }
  144. })

operation.wxss:

  1. /* pages/operation/operation.wxss */
  2. .container{
  3.     padding: 1rem;
  4.     font-size: 0.9rem;
  5.     line-height: 1.5rem;
  6. }
  7. .row{
  8.     display: flex;
  9.     align-items: center;
  10.     margin-bottom: 0.8rem;
  11. }
  12. .row text{
  13.     flex-grow: 1;
  14.     text-align: right;
  15. }
  16. .row input{
  17.     font-size: 0.7rem;
  18.     flex-grow: 3;
  19.     border: 1px solid #0099CC;
  20.     display: inline-block;
  21.     border-radius: 0.3rem;
  22.     box-shadow: 0 0 0.15rem #aaa;
  23.     padding: 0.3rem;
  24. }
  25. .row button{
  26.     padding: 0 2rem;
  27.     margin: 3rem 1rem;
  28. }

区域信息编辑页的联调

设置断点

 

 后台也要设置想应断点

 开始调试：

 获取到了area信息

 f8获取，发现数据被填充进来

 修改优先级为3，

 

 后台接收到了。最后f8，发现更新成功。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/154135
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号