【微信小程序独立开发 5】后端搭建联调

前言：上节我们完成了个人信息页的编写，本节完成将个人信息发给后端，并由后端存储

创建Spring Boot项目

配置maven仓库

使用自己下载的maven版本

添加pom文件

  1.   <dependencies>
  2.         <dependency>
  3.             <groupId>org.springframework.bootgroupId>
  4.             <artifactId>spring-boot-starter-webartifactId>
  5.         dependency>
  6.         <dependency>
  7.             <groupId>org.springframework.bootgroupId>
  8.             <artifactId>spring-boot-devtoolsartifactId>
  9.             <scope>runtimescope>
  10.             <optional>trueoptional>
  11.         dependency>
  12.         <dependency>
  13.             <groupId>org.projectlombokgroupId>
  14.             <artifactId>lombokartifactId>
  15.             <optional>trueoptional>
  16.         dependency>
  17.         <dependency>
  18.             <groupId>mysqlgroupId>
  19.             <artifactId>mysql-connector-javaartifactId>
  20.             <scope>runtimescope>
  21.             <version>5.1.47version>
  22.         dependency>
  23.         
  24.         <dependency>
  25.             <groupId>com.alibabagroupId>
  26.             <artifactId>druidartifactId>
  27.             <version>1.1.17version>
  28.         dependency>
  29.         
  30.         <dependency>
  31.             <groupId>com.baomidougroupId>
  32.             <artifactId>mybatis-plus-boot-starterartifactId>
  33.             <version>3.2.0version>
  34.         dependency>
  35.  
  36.  
  37.         
  38.         <dependency>
  39.             <groupId>org.apache.httpcomponentsgroupId>
  40.             <artifactId>httpclientartifactId>
  41.             <version>4.5.13version>
  42.         dependency>
  43.         <dependency>
  44.             <groupId>com.alibabagroupId>
  45.             <artifactId>fastjsonartifactId>
  46.             <version>1.2.79version>
  47.         dependency>
  48.         
  49.         
  50.         
  51.         <dependency>
  52.             <groupId>com.auth0groupId>
  53.             <artifactId>java-jwtartifactId>
  54.             <version>4.2.2version>
  55.         dependency>
  56.  
  57.  
  58.         <dependency>
  59.             <groupId>io.jsonwebtokengroupId>
  60.             <artifactId>jjwtartifactId>
  61.             <version>0.7.0version>
  62.         dependency>
  63.         <dependency>
  64.             <groupId>jdomgroupId>
  65.             <artifactId>jdomartifactId>
  66.             <version>1.0version>
  67.         dependency>
  68.         <dependency>
  69.             <groupId>dom4jgroupId>
  70.             <artifactId>dom4jartifactId>
  71.             <version>1.1version>
  72.         dependency>
  73.         <dependency>
  74.             <groupId>commons-iogroupId>
  75.             <artifactId>commons-ioartifactId>
  76.             <version>2.5version>
  77.         dependency>
  78.         <dependency>
  79.             <groupId>junitgroupId>
  80.             <artifactId>junitartifactId>
  81.             <scope>testscope>
  82.         dependency>
  83.         <dependency>
  84.             <groupId>org.junit.jupitergroupId>
  85.             <artifactId>junit-jupiterartifactId>
  86.             <scope>testscope>
  87.         dependency>
  88.  
  89.         <dependency>
  90.             <groupId>org.springframework.bootgroupId>
  91.             <artifactId>spring-boot-starter-testartifactId>
  92.         dependency>
  93.     dependencies>

注：如果依赖引入错误，可参照以下办法进行处理

Idea Maven 项目Dependency not found 问题 - 知乎

apply后刷新maven

配置成功！ 

配置数据库

连接mysql数据库并新建数据库petRecord

创建表

  1. CREATE TABLE `wx_user` (
  2.   `id` int NOT NULL AUTO_INCREMENT COMMENT '主键',
  3.   `nick_name` varchar(20) DEFAULT NULL COMMENT '昵称',
  4.   `avatar_url` varchar(50) DEFAULT NULL COMMENT '头像地址',
  5.   `birthday` datetime DEFAULT NULL COMMENT '生日',
  6.   `sex` varchar(10) DEFAULT NULL COMMENT '性别',
  7.   `region` varchar(20) DEFAULT NULL COMMENT '地区',
  8.   `phone_number` varchar(20) DEFAULT NULL COMMENT '电话号码',
  9.   PRIMARY KEY (`id`)
  10. ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

后端配置数据库连接

application.yaml

  1. # 应用服务 WEB 访问端口
  2. server:
  3.   port: 8080
  4.   servlet:
  5.     context-path: /
  6. spring:
  7.   datasource:
  8.     driver-class-name: com.mysql.jdbc.Driver
  9.     type: com.alibaba.druid.pool.DruidDataSource
  10.     url: jdbc:mysql://localhost:3306/petRecord?serverTimezone=Asia/Shanghai
  11.     username: root
  12.     password: 123456
  13.  
  14. mybatis-plus:
  15.   global-config:
  16.     db-config:
  17.       id-type: auto #id生成规则：数据库id自增
  18.   configuration:
  19.     map-underscore-to-camel-case: false # 开启驼峰功能
  20.     auto-mapping-behavior: full # 自动映射任何复杂的结果
  21.     log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  22.   mapper-locations: classpath:mybatis/mapper/*.xml

创建项目目录结构

创建返回工具类到entity中

  1. package com.petrecord.petrecord.entity;
  2.  
  3. import java.util.HashMap;
  4. import java.util.Map;
  5.  
  6. /**
  7.  * 页面响应entity
  8.  */
  9. public class R extends HashMap {
  10.     private static final long serialVersionUID = 1L;
  11.  
  12.     public R() {
  13.         put("code", 0);
  14.     }
  15.  
  16.     public static R error() {
  17.         return error(500, "未知异常，请联系管理员");
  18.     }
  19.  
  20.     public static R error(String msg) {
  21.         return error(500, msg);
  22.     }
  23.  
  24.     public static R error(int code, String msg) {
  25.         R r = new R();
  26.         r.put("code", code);
  27.         r.put("msg", msg);
  28.         return r;
  29.     }
  30.  
  31.     public static R ok(String msg) {
  32.         R r = new R();
  33.         r.put("msg", msg);
  34.         return r;
  35.     }
  36.  
  37.     public static R ok(Map map) {
  38.         R r = new R();
  39.         r.putAll(map);
  40.         return r;
  41.     }
  42.  
  43.     public static R ok() {
  44.         return new R();
  45.     }
  46.  
  47.     public R put(String key, Object value) {
  48.         super.put(key, value);
  49.         return this;
  50.     }
  51. }

创建用户实体类

  1. package com.petrecord.petrecord.entity;
  2.  
  3. import lombok.Getter;
  4. import lombok.Setter;
  5. import org.springframework.format.annotation.DateTimeFormat;
  6.  
  7. import java.util.Date;
  8.  
  9. /**
  10.  * 微信用户
  11.  */
  12. @Getter
  13. @Setter
  14. public class WxUser {
  15.  
  16.     /** 主键 */
  17.     private int id;
  18.  
  19.     /** 昵称 */
  20.     private String nickName;
  21.  
  22.     /** 头像 */
  23.     private String avatarUrl;
  24.  
  25.     /** 生日 */
  26.     @DateTimeFormat(pattern="yyyy-MM-dd")
  27.     private Date birthday;
  28.  
  29.     /** 性别 */
  30.     private String sex;
  31.  
  32.     /** 地区 */
  33.     private String region;
  34.  
  35.     /** 手机号 */
  36.     private String phoneNumber;
  37. }

创建视图层

  1. package com.petrecord.petrecord.controller;
  2.  
  3. import com.petrecord.petrecord.entity.R;
  4. import com.petrecord.petrecord.entity.WxUser;
  5. import com.petrecord.petrecord.service.WxUserService;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.web.bind.annotation.PostMapping;
  8. import org.springframework.web.bind.annotation.RequestBody;
  9. import org.springframework.web.bind.annotation.RequestMapping;
  10. import org.springframework.web.bind.annotation.RestController;
  11.  
  12. /**
  13.  * 微信用户视图
  14.  */
  15. @RestController
  16. @RequestMapping("/wxUser")
  17. public class WxUserController {
  18.  
  19.     @Autowired
  20.     private WxUserService wxUserService;
  21.  
  22.     /**
  23.      * 保存用户
  24.      * @param wxUser
  25.      * @return
  26.      */
  27.     @PostMapping("/save")
  28.     public R save(@RequestBody WxUser wxUser){
  29.         System.out.println(wxUser);
  30.         return wxUserService.save(wxUser);
  31.     }
  32. }

创建Service

  1. package com.petrecord.petrecord.service;
  2.  
  3. import com.petrecord.petrecord.entity.R;
  4. import com.petrecord.petrecord.entity.WxUser;
  5.  
  6. /**
  7.  * 微信用户Service
  8.  */
  9. public interface WxUserService {
  10.  
  11.     /**
  12.      * 保存用户
  13.      * @param wxUser
  14.      * @return
  15.      */
  16.     R save(WxUser wxUser);
  17. }

创建Service实现类

  1. package com.petrecord.petrecord.service.impl;
  2.  
  3. import com.petrecord.petrecord.entity.R;
  4. import com.petrecord.petrecord.entity.WxUser;
  5. import com.petrecord.petrecord.mapper.WxUserMapper;
  6. import com.petrecord.petrecord.service.WxUserService;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.stereotype.Service;
  9.  
  10. @Service
  11. public class WxUserServiceImpl implements WxUserService {
  12.  
  13.     @Autowired
  14.     private WxUserMapper wxUserMapper;
  15.  
  16.     @Override
  17.     public R save(WxUser wxUser) {
  18.         int count = wxUserMapper.save(wxUser);
  19.         if(count <= 0){
  20.             return R.error("保存失败");
  21.         }
  22.         return R.ok("保存成功");
  23.     }
  24. }

创建mapper接口

  1. package com.petrecord.petrecord.mapper;
  2.  
  3.  
  4. import com.petrecord.petrecord.entity.WxUser;
  5. import org.apache.ibatis.annotations.Mapper;
  6.  
  7. @Mapper
  8. public interface WxUserMapper {
  9.  
  10.     /**
  11.      * 保存用户
  12.      * @param wxUser
  13.      * @return
  14.      */
  15.     int save(WxUser wxUser);
  16. }

创建mapper.xml

  1. "1.0" encoding="UTF-8" ?>
  3.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  4.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  5. "com.petrecord.petrecord.mapper.WxUserMapper">
  6.  
  7.     "wxUserResult" type="com.petrecord.petrecord.entity.WxUser">
  8.         "id" property="id"/>
  9.         "nick_name" property="nickName"/>
  10.         "avatar_url" property="avatarUrl"/>
  11.         "birthday" property="birthday"/>
  12.         "sex" property="sex"/>
  13.         "region" property="region"/>
  14.         "phone_number" property="phoneNumber"/>
  15.     
  16.  
  17.     "save" keyProperty="id" useGeneratedKeys="true">
  18.         insert into wx_user
  19.         values (#{id},#{nickName},#{avatarUrl},#{birthday},#{sex},#{region},#{phoneNumber})
  20.     
  21.  
  22.

启动类加上注解扫描mapper接口

  1. package com.petrecord.petrecord;
  2.  
  3. import org.mybatis.spring.annotation.MapperScan;
  4. import org.springframework.boot.SpringApplication;
  5. import org.springframework.boot.autoconfigure.SpringBootApplication;
  6.  
  7. @SpringBootApplication
  8. @MapperScan("com.petrecord.petrecord.mapper")
  9. public class PetRecordApplication {
  10.  
  11.     public static void main(String[] args) {
  12.         SpringApplication.run(PetRecordApplication.class, args);
  13.     }
  14.  
  15. }

微信小程序前端修改

添加reques请求工具

  1. const baseUrl = 'http://localhost:8080'
  2.  
  3. export const getBaseUrl = ()=>{
  4.     return baseUrl;
  5. }
  6.  
  7. // 后端request请求工具类
  8. export const requestUtil = (params)=>{
  9.     return new Promise((resolve,reject)=>{
  10.         wx.request({
  11.             ...params,
  12.             url: baseUrl + params.url,
  13.             success: (res)=>{
  14.                 resolve(res)
  15.             },
  16.             fail: (err)=>{
  17.                 reject(err)
  18.             }
  19.         })
  20.     });
  21. }

修改userInfo.js

  1. // pages/userInfo/userInfo.js
  2. import {requestUtil,getBaseUrl} from '../../utils/requestUtil.js'
  3.  
  4. const app = getApp()
  5. Page({
  6.  
  7.   /**
  8.    * 页面的初始数据
  9.    */
  10.   data: {
  11.     userInfo: {
  12.         nickName: '',
  13.         avatarUrl: '',
  14.         userId: '',
  15.         birthday: '',
  16.         region: [],
  17.         phoneNumber: '',
  18.         sex: ''
  19.     },
  20.     date: '2000-09-01',
  21.     dateStatus: false,
  22.     sexStatus: false,
  23.     regionStatus: false,
  24.     array: ['男', '女', '未知'],
  25.     region:  ['广东省', '广州市', '海珠区'],
  26.     customItem: '全部',
  27.     baseUrl: ''
  28.   },
  29.  
  30.   /**
  31.    * 生命周期函数--监听页面加载
  32.    */
  33.   onLoad(options) {
  34.     const baseUrl = getBaseUrl();
  35.     let userInfo = wx.getStorageSync('userInfo') || ''
  36.     if(userInfo === ''){
  37.         this.setData({
  38.             userInfo: {
  39.                 nickName: app.globalData.userInfo.nickName,
  40.                 avatarUrl: app.globalData.userInfo.avatarUrl,
  41.                 userId: app.globalData.userInfo.userId
  42.             },
  43.             baseUrl
  44.         })
  45.     }else{
  46.         this.setData({
  47.             userInfo
  48.         })
  49.     }
  50.     
  51.   },
  52.   async saveUserInfo(){
  53.     const res = await requestUtil({url: '/wxUser/save',method: 'POST',data: this.data.userInfo})
  54.     if(res.data.code === 0){
  55.        //修改全局变量中的用户信息,将其存入缓存中
  56.        wx.setStorageSync('userInfo', this.data.userInfo)
  57.        wx.switchTab({
  58.          url: '/pages/Ta/Ta',
  59.        })
  60.     }else{
  61.         wx.showToast({
  62.           title: '保存失败，请重新输入',
  63.           icon: 'none'
  64.         })
  65.     }
  66.   },
  67.   phoneNumberMethod(e){
  68.       const data = e.detail.value;
  69.       if(data.length == 0){
  70.           wx.showToast({
  71.             title: '请输入手机号',
  72.             icon:'none'
  73.           })
  74.       }
  75.       if(data.length != 11 || !/^1[3456789]\d{9}$/.test(data)){
  76.         wx.showToast({
  77.             title: '请输入正确的手机号',
  78.             icon:'none'
  79.           })
  80.       }
  81.       this.setData({
  82.           userInfo: {
  83.             phoneNumber: data,
  84.             nickName: this.data.userInfo.nickName,
  85.             avatarUrl: this.data.userInfo.avatarUrl,
  86.             userId: this.data.userInfo.userId,
  87.             birthday: this.data.userInfo.birthday,
  88.             sex: this.data.userInfo.sex,
  89.             region: this.data.userInfo.region
  90.           }
  91.           
  92.       })
  93.   },
  94.   bindRegionChange: function (e) {
  95.     let region = e.detail.value
  96.     let regionStr = ""+region[0] +" " +region[1] +" "+ region[2]
  97.     this.setData({
  98.       userInfo: {
  99.         region: regionStr,
  100.  
  101.         nickName: this.data.userInfo.nickName,
  102.         avatarUrl: this.data.userInfo.avatarUrl,
  103.         userId: this.data.userInfo.userId,
  104.         phoneNumber: this.data.userInfo.phoneNumber,
  105.         birthday: this.data.userInfo.birthday,
  106.         sex: this.data.userInfo.sex
  107.       },
  108.       
  109.       regionStatus: true
  110.     })
  111.   },
  112.   bindSexChange(e){
  113.     console.log(e.detail.value);
  114.     this.setData({
  115.       userInfo: {
  116.         nickName: this.data.userInfo.nickName,
  117.         avatarUrl: this.data.userInfo.avatarUrl,
  118.         userId: this.data.userInfo.userId,
  119.         region: this.data.userInfo.region,
  120.         phoneNumber: this.data.userInfo.phoneNumber,
  121.         birthday: this.data.userInfo.birthday,
  122.         sex: this.data.array[e.detail.value]
  123.       },
  124.       sexStatus: true
  125.     })
  126.   },
  127.   bindDateChange(e){
  128.     console.log('picker发送选择改变，携带值为', e.detail.value)
  129.     this.setData({
  130.       userInfo: {
  131.         nickName: this.data.userInfo.nickName,
  132.         avatarUrl: this.data.userInfo.avatarUrl,
  133.         userId: this.data.userInfo.userId,
  134.         region: this.data.userInfo.region,
  135.         phoneNumber: this.data.userInfo.phoneNumber,
  136.         sex: this.data.userInfo.sex,
  137.  
  138.         birthday: e.detail.value,
  139.       },
  140.       dateStatus: true
  141.     })
  142.   },
  143.   onChooseAvatar(e) {
  144.     const { avatarUrl } = e.detail
  145.     app.globalData.userInfo.avatarUrl = avatarUrl 
  146.     this.setData({
  147.       userInfo: {
  148.           avatarUrl: avatarUrl,
  149.           nickName: this.data.userInfo.nickName,
  150.           userId: this.data.userInfo.userId,
  151.           region: this.data.userInfo.region,
  152.           birthday: this.data.userInfo.birthday,
  153.           sex: this.data.userInfo.sex,
  154.           phoneNumber: this.data.userInfo.phoneNumber,
  155.       }
  156.     })
  157.   },
  158.  
  159.   /**
  160.    * 生命周期函数--监听页面初次渲染完成
  161.    */
  162.   onReady() {
  163.  
  164.   },
  165.  
  166.   /**
  167.    * 生命周期函数--监听页面显示
  168.    */
  169.   onShow() {
  170.  
  171.   },
  172.  
  173.   /**
  174.    * 生命周期函数--监听页面隐藏
  175.    */
  176.   onHide() {
  177.  
  178.   },
  179.  
  180.   /**
  181.    * 生命周期函数--监听页面卸载
  182.    */
  183.   onUnload() {
  184.  
  185.   },
  186.  
  187.   /**
  188.    * 页面相关事件处理函数--监听用户下拉动作
  189.    */
  190.   onPullDownRefresh() {
  191.  
  192.   },
  193.  
  194.   /**
  195.    * 页面上拉触底事件的处理函数
  196.    */
  197.   onReachBottom() {
  198.  
  199.   },
  200.  
  201.   /**
  202.    * 用户点击右上角分享
  203.    */
  204.   onShareAppMessage() {
  205.  
  206.   }
  207. })

修改Ta.wxml

  2. <view class="pet_wrapper">
  3.     
  4.     <view class="user_info_wrapper">
  5.         <view class="user_info">
  6.             <image src="{{userInfo.avatarUrl}}" mode="widthFix" />
  7.             <view class="user">
  8.                 <view class="user_id">ID:{{userInfo.userId}}view>
  9.                 <view class="user_name">{{userInfo.nickName}}view>
  10.             view>
  11.             <button class="edit_user_info" bind:tap="editUserInfo">编辑个人信息button>
  12.         view>
  13.     view>
  14.     
  15.     
  16. view>

修改Ta.js

  1. // pages/Ta/Ta.js
  2. const app = getApp()
  3. Page({
  4.  
  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.     userInfo: {
  10.         userId: '',
  11.         nickName: '',
  12.         avatarUrl: ''
  13.     }
  14.   },
  15.  
  16.   /**
  17.    * 生命周期函数--监听页面加载
  18.    */
  19.   onLoad(options) {
  20.     let userInfo = wx.getStorageSync('userInfo') || ''
  21.     console.log(userInfo);
  22.     if(userInfo === ''){
  23.         this.setData({
  24.             userInfo: {
  25.                 nickName: app.globalData.userInfo.nickName,
  26.                 avatarUrl: app.globalData.userInfo.avatarUrl,
  27.                 userId: app.globalData.userInfo.userId
  28.             }
  29.         })
  30.     }else{
  31.         this.setData({
  32.             userInfo
  33.         })
  34.     }
  35.   },
  36.   editUserInfo(){
  37.     wx.navigateTo({
  38.       url: '/pages/userInfo/userInfo',
  39.     })
  40.   },
  41.  
  42.   /**
  43.    * 生命周期函数--监听页面初次渲染完成
  44.    */
  45.   onReady() {
  46.  
  47.   },
  48.  
  49.   /**
  50.    * 生命周期函数--监听页面显示
  51.    */
  52.   onShow() {
  53.     let userInfo = wx.getStorageSync('userInfo') || ''
  54.     if(userInfo === ''){
  55.         this.setData({
  56.             userInfo: {
  57.                 nickName: app.globalData.userInfo.nickName,
  58.                 avatarUrl: app.globalData.userInfo.avatarUrl,
  59.                 userId: app.globalData.userInfo.userId
  60.             }
  61.         })
  62.     }else{
  63.         this.setData({
  64.             userInfo
  65.         })
  66.     }
  67.   },
  68.  
  69.   /**
  70.    * 生命周期函数--监听页面隐藏
  71.    */
  72.   onHide() {
  73.  
  74.   },
  75.  
  76.   /**
  77.    * 生命周期函数--监听页面卸载
  78.    */
  79.   onUnload() {
  80.  
  81.   },
  82.  
  83.   /**
  84.    * 页面相关事件处理函数--监听用户下拉动作
  85.    */
  86.   onPullDownRefresh() {
  87.  
  88.   },
  89.  
  90.   /**
  91.    * 页面上拉触底事件的处理函数
  92.    */
  93.   onReachBottom() {
  94.  
  95.   },
  96.  
  97.   /**
  98.    * 用户点击右上角分享
  99.    */
  100.   onShareAppMessage() {
  101.  
  102.   }
  103. })

完成效果：

注：本文转载自blog.csdn.net的顾十方的文章"https://blog.csdn.net/qq_41481924/article/details/135715499"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！