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

前置知识：

1、VUECli

2、Java SpringBoot

3、Maven

创建过程：

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

    org.springframework.boot
    spring-boot-starter-parent
    2.2.2.RELEASE
    


    
        org.springframework.boot
        spring-boot-starter-web
    
    
    
        org.springframework.boot
        spring-boot-devtools
        runtime
        true
    
    
    
        org.mybatis.spring.boot
        mybatis-spring-boot-starter
        2.2.2
    
    
    
        mysql
        mysql-connector-java
        8.0.28
    

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全家桶的东西，设置起来也方便。