SpringBoot+MyBatis+微信小程序案例 迈不过友情╰ 2021-09-25 12:32 601阅读 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中添加以下内容 ## <view wx:for="{ {userList}}" > { {item.id}}--{ {item.name}}--{ {item.age}} </view> ## 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
还没有评论,来说两句吧...