SpringBoot+MyBatis+微信小程序案例

迈不过友情╰ 2021-09-25 12:32 670阅读 0赞

### 文章目录 ###

*  1、在数据库创建表
 *  2、创建SpringBoot项目
 *   *  2.1 选择项目类型
     *  2.2 设置组名包名等（根据个人需求更改）
     *  2.3 选择依赖
     *   *  2.3.1 选择Web依赖
         *  2.3.2 选择MySQL和MyBatis依赖
     *  2.4 设置项目名和模板名（根据个人需求进行更改）
 *  3、在resources下新建配置文件application.yml
 *  4、编写文件
 *   *  4.1 在DemoApplication中添加MapperScan注解
     *  4.2 级别注意（DemoApplication所在位置应和其他包同级）
     *  4.3 整体文件结构
     *  4.4 User类
     *  4.5 UserController类
     *  4.6 UserService
     *  4.7 UserServiceImpl
     *  4.8 UserMapper
     *  4.9 UserMapper.xml文件
 *  5、环境准备
 *   *  5.1 注册
     *  5.2 获取APPID
     *  5.3 下载路径（建议使用稳定版）
 *  6、 新建小程序项目
 *   *  6.1 扫码登录
     *  6.2 新建小程序
     *  6.3 设置项目的信息
 *  7、新建文件
 *   *  7.1 选择pages文件 右键新建文件夹命名为user
     *  7.2 在user文件夹右键新建page文件，也命名为user（必须同名）
     *  7.3 在user.js下的data中新建userList，在onLoad中通过wx.request向后端发送请求
     *  7.4 在user.wxml中添加以下内容
     *  7.5 在app.json中将"pages/user/user"移动到pages数组中的第一个
 *  8、启动项目
 *   *  8.1 在IDEA中启动DemoApplication的main方法
 *  9、程序运行结果展示

# 1、在数据库创建表 #

![在这里插入图片描述][caea8218ccb047acb579f91e44716b66.png_pic_center]  
说明：id为主键且自增。

# 2、创建SpringBoot项目 #

## 2.1 选择项目类型 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center]

## 2.2 设置组名包名等（根据个人需求更改） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 1]

## 2.3 选择依赖 ##

### 2.3.1 选择Web依赖 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 2]

### 2.3.2 选择MySQL和MyBatis依赖 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 3]

## 2.4 设置项目名和模板名（根据个人需求进行更改） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 4]

设置完成后，选择Finish

# 3、在resources下新建配置文件application.yml #

![在这里插入图片描述][7a15fcb3c0bb40f6bbf34737aa4bf2db.png_pic_center]

spring:
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/app0728?serverTimezone=GMT%2B8&useSSL=true
        username: root
        password: 123456
    
    
    mybatis:
      mapper-locations: classpath:mapping/*.xml

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 5]

# 4、编写文件 #

## 4.1 在DemoApplication中添加MapperScan注解 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 6]

## 4.2 级别注意（DemoApplication所在位置应和其他包同级） ##

![在这里插入图片描述][75259a9b21024761b6bdfec74470d8c6.png_pic_center]

## 4.3 整体文件结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 7]

## 4.4 User类 ##

package com.tjetc.domain;
    
    public class User { 
        private Integer id;
        private String name;
        private Integer age;
    
        @Override
        public String toString() { 
            return "User{" +
                    "id=" + id +
                    ", name='" + name + '\'' +
                    ", age=" + age +
                    '}';
        }
    
        public User() { 
        }
    
        public User(Integer id, String name, Integer age) { 
            this.id = id;
            this.name = name;
            this.age = age;
        }
    
        public Integer getId() { 
            return id;
        }
    
        public void setId(Integer id) { 
            this.id = id;
        }
    
        public String getName() { 
            return name;
        }
    
        public void setName(String name) { 
            this.name = name;
        }
    
        public Integer getAge() { 
            return age;
        }
    
        public void setAge(Integer age) { 
            this.age = age;
        }
    }

## 4.5 UserController类 ##

package com.tjetc.controller;
    
    import com.tjetc.domain.User;
    import com.tjetc.service.UserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    
    import java.util.List;
    
    @RestController //相当于ResponseBody+Controller
    @CrossOrigin 	//解决跨域问题的注解
    @RequestMapping("/user")
    public class UserController { 
        @Autowired
        private UserService userService;
    
        @RequestMapping("/list")
        @ResponseBody
        public List<User> userList(@RequestParam(defaultValue = "")String name){ 
           List<User> userList  =   userService.listByName(name);
           return userList;
        }
    }

## 4.6 UserService ##

package com.tjetc.service;
    
    import com.tjetc.domain.User;
    
    import java.util.List;
    
    public interface UserService { 
        List<User> listByName(String name);
    }

## 4.7 UserServiceImpl ##

package com.tjetc.service.impl;
    
    import com.tjetc.domain.User;
    import com.tjetc.mapper.UserMapper;
    import com.tjetc.service.UserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    
    @Service
    public class UserServiceImpl implements UserService { 
        @Autowired
        private UserMapper userMapper;
    
        @Override
        public List<User> listByName(String name) { 
            return userMapper.listByName(name);
        }
    }

## 4.8 UserMapper ##

package com.tjetc.mapper;
    
    import com.tjetc.domain.User;
    import org.apache.ibatis.annotations.Mapper;
    import org.springframework.stereotype.Repository;
    
    import java.util.List;
    
    @Mapper
    @Repository
    public interface UserMapper { 
        List<User> listByName(String name);
    }

## 4.9 UserMapper.xml文件 ##

<?xml version="1.0" encoding="utf-8" ?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    <mapper namespace="com.tjetc.mapper.UserMapper">
        <select id="listByName" resultType="com.tjetc.domain.User">
            select * from user where name like concat('%',#{name},'%')
        </select>
    </mapper>

# 5、环境准备 #

## 5.1 注册 ##

建议使用全新的邮箱，没有注册过其他小程序。访问注册页面，耐心完成注册即可。（https://mp.weixin.qq.com/cgi-bin/wx）。当然也可以申请测试号，但是测试账号无法完成支付，发布上线等功能。

## 5.2 获取APPID ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 9]

## 5.3 下载路径（建议使用稳定版） ##

稳定版  
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

# 6、 新建小程序项目 #

## 6.1 扫码登录 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 10]

## 6.2 新建小程序 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 11]

## 6.3 设置项目的信息 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 12]

# 7、新建文件 #

## 7.1 选择pages文件 右键新建文件夹命名为user ##

![在这里插入图片描述][785eb3692a1c4993a2fd913d8dd29a3d.png_pic_center]

## 7.2 在user文件夹右键新建page文件，也命名为user（必须同名） ##

同名可以自动生成以下文件  
![在这里插入图片描述][f07c4a0f3e504d2cb1942eab98f6c37f.png_pic_center]

## 7.3 在user.js下的data中新建userList，在onLoad中通过wx.request向后端发送请求 ##

data: { 
        userList:[]
    },
    onLoad: function (options) { 
        wx.request({ 
        //后端的路径
            url: 'http://localhost:8080/user/list',
            method:"GET",
            //content-type:接收的内容类型为json串数据
            header : { 
                'content-type' : 'application/json'
            },
            //得到返回的数据
            success : res => { 
                this.setData({ 
                  userList : res.data
                })
            }
          })
    },

## 7.4 在user.wxml中添加以下内容 ##

## 7.5 在app.json中将"pages/user/user"移动到pages数组中的第一个 ##

这样它就可以在首页直接显示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 13]

# 8、启动项目 #

## 8.1 在IDEA中启动DemoApplication的main方法 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 14]

# 9、程序运行结果展示 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 15]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 16]

[caea8218ccb047acb579f91e44716b66.png_pic_center]: /images/20210923/6309134329e94814b75a6916deedfdd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/8806722d68f84e468b509adb7bf38c9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210923/6c303f65e41b475e8f583565fbdc481d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210923/04af98a930bb4a3d8e3b54b33ac5fa95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210923/95cab39db65c434a85dda9bc71bc0c53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210923/dfe9ca02f8bd4be0b888e3105727aa0a.png
[7a15fcb3c0bb40f6bbf34737aa4bf2db.png_pic_center]: /images/20210923/44e552db732f451eb775ad89e83d1a7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210923/dcd0723462bf48fdada6d00f03369132.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20210923/2c22105eb4874236a6f24a10ad55b29f.png
[75259a9b21024761b6bdfec74470d8c6.png_pic_center]: /images/20210923/a2f1f6c6d3cd4dbabaf0e3f17fb3267b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20210923/bb046375a8b845c5aed4ad0e54f2a98d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20210923/fd53430a20c1498ca67e450ad3067707.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20210923/a4925af836584d8994c4af0d119f2d46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20210923/893db029c01448c488aca00ba3972468.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20210923/ff6809b03524438190e0e123f4ed751c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20210923/2373772f2d0b4c448e31b6d7abbbad9b.png
[785eb3692a1c4993a2fd913d8dd29a3d.png_pic_center]: /images/20210923/3129bcb74318444d9750275e302cfef1.png
[f07c4a0f3e504d2cb1942eab98f6c37f.png_pic_center]: /images/20210923/08431a9537944522b44dca9e568fb2ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20210923/46f2996c90a94f7c893d1544fed1ddab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20210923/dc02615587254bc29f5a4df156e4a8df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20210923/e9bd4dc9e5bb4a71b89442a4ee7ebcf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20210923/ac0a3e30c19e408785c8e235fffe9cfc.png