前置知识:
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全家桶的东西,设置起来也方便。