五天入门SpringBoot--SpringBoot+Mybatis+MySql创建数据接口，并通过VUECLI进行显示

Posted 2022-12-03 瀚岳-诸葛弩

前置知识：

1、VUECli

2、Java SpringBoot

3、Maven

创建过程：

1、在pom.xml中引入必须的运行依赖项

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.2.RELEASE</version>
    <relativePath />
</parent>
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Spring Boot热部署 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
        <optional>true</optional>
    </dependency>
    <!-- Mybatis与Spring Boot整合的启动器,自动完成整合的配置 -->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.2.2</version>
    </dependency>
    <!-- Mybatis是对JDBC的高级封装,所以还是需要JDBC驱动才可以使用 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.28</version>
    </dependency>
</dependencies>

2、在resources下创建mybatis配置文件application.properties

配置内容如下：

#数据库相关配置
spring.datasource.username=root
spring.datasource.password=kingsystem2003
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/test?characterEncoding=UTF-8&useUnicode=true&useSSL=false&tinyInt1isBit=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai
#热部署
mybatis.configuration.mapUnderscoreToCamelCase=true

注意：如果在pom中mysql-connector-java的版本是8.0，要按我下面的代码配置url，否则无法访问。

3、按顺序创建实体类、dao层（我建立的是mapper）、controller类

代码如下：

有道云笔记

注意：在写controller的时候，要注意添加@CorssOrigin标签，否则会报跨域访问错误。如下图：

也可以给每一个方法添加@ResponseBody，这个就看安全性要求了。个人觉得没有必要，如果一定要分开，重新开一个controller就行。

4、运行后端

运行App，正常启动后，可看到已经成功读取数据库数据，如下图：

从上图可以看出，这是一个标准的JSON格式数据。保持后端运行，转入前端

5、前端调用

创建VUECli程序，进行数据代用。

此处的axios.get("http://localhost:8080/users")就是我们刚刚通过springboot创建的数据接口，效果如下：

注意：

这个程序同时用到了前端和后端，后端从数据库获取程序，前端进行调用，要分别启动后端程序和前端程序。在编写代码时，一般相关的数据层和前端都要自己来写，所以不能仅仅只做前端或只做后端，两方面都要了解。

建议：

前后端用不同的IDE，前端：webstorm，后端：idea

都是jetbrain全家桶的东西，设置起来也方便。