1、在数据库创建表
 说明:id为主键且自增。
2、创建SpringBoot项目
2.1 选择项目类型

2.2 设置组名包名等(根据个人需求更改)

2.3 选择依赖
2.3.1 选择Web依赖

2.3.2 选择MySQL和MyBatis依赖

2.4 设置项目名和模板名(根据个人需求进行更改)

设置完成后,选择Finish
3、在resources下新建配置文件application.yml

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

4、编写文件
4.1 在DemoApplication中添加MapperScan注解

4.2 级别注意(DemoApplication所在位置应和其他包同级)

4.3 整体文件结构

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
@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
 
5.3 下载路径(建议使用稳定版)
稳定版 https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
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向后端发送请求
data: {
userList:[]
},
onLoad: function (options) {
wx.request({
url: 'http://localhost:8080/user/list',
method:"GET",
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数组中的第一个
这样它就可以在首页直接显示 
8、启动项目
8.1 在IDEA中启动DemoApplication的main方法

9、程序运行结果展示


|