本文主要是讲述一下uniapp前端，springboot后端，mysql数据库三者如何进行最基础的互动，能实现一个很简单的基础功能。虽然蕴含的知识不多而且很简单，但是对于刚入门的新手还是有一定参考意义，可以帮助大伙快速整一个能跑的工程感受一下。
首先是springboot和mysql之间的通信springboot创建时勾选web和mysql相关的依赖，具体配置可以看黑马程序员SpringBoot教程，6小时快速入门Java微服务架构Spring Boot_哔哩哔哩_bilibili
前几章（建议1-2小时快速看完前20章），我的pom.xml如下：
4.0.0 org.springframework.boot spring-boot-starter-parent2.5.5 com.example selfstudy-spring20.0.1-SNAPSHOT selfstudy-spring2 selfstudy-spring2 1.8 org.springframework.boot spring-boot-starter-weborg.springframework.boot spring-boot-starter-testtest org.springframework.boot spring-boot-configuration-processortrue org.mybatis.spring.boot mybatis-spring-boot-starter2.1.0 mysql mysql-connector-javaruntime org.springframework.boot spring-boot-maven-plugin
我的数据库表格式：
+-------+-------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------+-------------+------+-----+---------+----------------+ | id | int | NO | PRI | NULL | auto_increment | | name | varchar(40) | YES | | NULL | | | money | float | YES | | NULL | | +-------+-------------+------+-----+---------+----------------+
我的application.yml配置
#datasource
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql:///bjpowernode
username: 数据库用户名
password: 数据库密码
首先创建一个类用来接收数据库返回结果
package com.example.selfstudyspring2.domain;
public class User {
private Integer id;
private String name;
private Integer money;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getMoney() {
return money;
}
public void setMoney(Integer money) {
this.money = money;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", name='" + name + ''' +
", money=" + money +
'}';
}
}
创建一个接口，用来执行mysql指令
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
@Mapper
public interface IAccountMapper {
@Select("select * from account")
public List findAll();
}
select语句只要作为@Select注释的参数即可，同理其他类型的指令也写在对应注释的参数里即可
然后写个类调用接口
package com.example.selfstudyspring2;
import com.example.selfstudyspring2.domain.User;
import com.example.selfstudyspring2.mapper.IAccountMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@CrossOrigin
@RestController
public class textController {
@Autowired
private IAccountMapper accountMapper;
@RequestMapping("/get")
public List findAll(){
return accountMapper.findAll();
}
}
其中@RequestMapping("/get")的作用是，设置访问该函数的url。比如“/get”，则启动服务器以后，浏览器访问http://localhost:8080/get即可访问注释下面的findAll()函数。
注意@CrossOrigin注解一定要加，否则uniapp前端访问服务端会出问题
将查询到的所有数据变成User对象集合返回。浏览器访问结果如下：
[{"id":1,"name":"aaa","money":800},{"id":2,"name":"bbb","money":1200},{"id":3,"name":"ccc","money":1000},{"id":5,"name":"test","money":6666}]
这就是无参函数访问数据库，下面演示有参函数：
@Repository
@Mapper
public interface IAccountMapper {
@Select("select * from account")
public List findAll();
@Insert("insert into account(name,money) values(#{name},#{money})")
public void insertUser(String name, Float money);
}
其中用#{name}将函数的对应参数name传入mysql语句中，其余同理
@CrossOrigin
@RestController
public class textController {
@Autowired
private IAccountMapper accountMapper;
@RequestMapping("/get")
public List findAll(){
return accountMapper.findAll();
}
@RequestMapping("/set")
public String insertUser(){
accountMapper.insertUser("Tom", 5f);
return "OK";
}
}
然后添加一个insertUser函数，调用接口里的insertUser方法。
开启服务器后，访问http://localhost:8080/set，网页显示OK，查看数据库，可以看到数据添加成功。
+----+------+-------+ | id | name | money | +----+------+-------+ | 1 | aaa | 800 | | 2 | bbb | 1200 | | 3 | ccc | 1000 | | 5 | test | 6666 | | 7 | Tom | 5 | +----+------+-------+然后是springboot和uniapp之间的通信
其实很简单，在uniapp写一个按钮，对应的method方法按照如下格式：
methods:{
fuc(){
uni.request({
url:"http://localhost:8080/set",
data:{
name:"uniapp",
money: 88,
},
success(res) {
console.log(res.data)
},
method: "GET",
header:{
}
})
},
关于请求的官方文档uni-app官网
其中url就是之前在浏览器访问的url，data是访问时要传输的数据，本案例是静态数据，也可以动态传入网页用户的数据。对于 GET 方法，会将数据转换为 query string。例如 { name: 'uniapp', money:88 } 转换后的结果是 name=uniapp&money=88。而success的参数res就是服务器return的对象。
与此同时对应springboot代码中的函数改为如下
@RequestMapping("/set")
public String insertUser(@RequestParam(name="name") String Name,
@RequestParam(name="money") String Money){
accountMapper.insertUser(Name, Float.parseFloat(Money));
return "OK";
}
@RequestParam注释就是把网页传过来的参数放到函数的参数中，比如@RequestParam(name="money") String Money就是把money=88中money等号右边的88赋值给参数Money，然后传给accountMapper.insertUser()函数，此时的88是字符串类型，所以要转化成float类型。
点击前端的按钮，可以看到Console输出OK
查询数据库，可以看到数据插入成功
+----+--------+-------+ | id | name | money | +----+--------+-------+ | 1 | aaa | 800 | | 2 | bbb | 1200 | | 3 | ccc | 1000 | | 5 | test | 6666 | | 7 | Tom | 5 | | 8 | uniapp | 88 | +----+--------+-------+
上面基础的功能实现了，就可以丰富一下实现更多的功能，比如点击按钮把用户前端填写的数据存到数据库，点另一个按钮读取数据库信息显示在网页之类的。
