uniapp-springboot-mysql之间的简单通信

本文主要是讲述一下uniapp前端，springboot后端，mysql数据库三者如何进行最基础的互动，能实现一个很简单的基础功能。虽然蕴含的知识不多而且很简单，但是对于刚入门的新手还是有一定参考意义，可以帮助大伙快速整一个能跑的工程感受一下。

 首先是springboot和mysql之间的通信

springboot创建时勾选web和mysql相关的依赖，具体配置可以看黑马程序员SpringBoot教程，6小时快速入门Java微服务架构Spring Boot_哔哩哔哩_bilibili

前几章（建议1-2小时快速看完前20章），我的pom.xml如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>selfstudy-spring2</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>selfstudy-spring2</name>
    <description>selfstudy-spring2</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <scope>true</scope>
        </dependency>

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.0</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

 我的数据库表格式：

+-------+-------------+------+-----+---------+----------------+
| 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<User> 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<User> 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<User> 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<User> 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 |
+----+--------+-------+

上面基础的功能实现了，就可以丰富一下实现更多的功能，比如点击按钮把用户前端填写的数据存到数据库，点另一个按钮读取数据库信息显示在网页之类的。