SpringBoot前后端分离项目搭建
一,SpringBoot框架的搭建①创建项目Group:项目包的名称Artifict:工件的名字(项目访问的名称)name:项目的名称②依赖的选择1.Lombok2.Spring Web3.MySql Driver4.MyBatis FrameWork③目录的选择选择自行喜欢的目录④删除不必要的文件保留如下⑤配置数据库信息1.使用properties进行配置2.使用yml进行配置(推荐)sprin
·
一,SpringBoot框架的搭建
①创建项目
Group:项目包的名称
Artifict:工件的名字(项目访问的名称)
name:项目的名称
②依赖的选择
1.Lombok
2.Spring Web
3.MySql Driver
4.MyBatis FrameWork
③目录的选择
选择自行喜欢的目录
④删除不必要的文件
保留如下
⑤配置数据库信息
1.使用properties进行配置
2.使用yml进行配置(推荐)
spring:
#配置数据源信息
datasource:
#配置数据源类型
type: com.zaxxer.hikari.HikariDataSource
#配置连接数据库的各个信息
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/boot_crud?serverTimezone=GMT%2B8&characterEncoding=utf-8&useSSL=false
username: root
password: 111111
⑥打开数据库图形化管理界面
⑦测试服务器是否正常
若打开页面后为ok则没有问题
⑧在数据库中创建对应的表
根据需求进行创建
⑨在pojo包中创建对应的实体类
⑩编写对应的mapper接口进行测试数据库连接是否正常
1.编写数据库表对应的mapper接口 ,在主方法中编写方法进行测试
调用数据库后无误则可以
2.再使用postman测试增删改查方法,确保无误
二,springboot结合vue进行开发
①在springboot写好接口方法
②使用postman测试都无误后,使用axois进行前后端交接
★交接前需要解决跨域问题
遇到前端跨域访问问题,类似于这样的:
在Springboot项目里加上这个配置文件CorsConfig.java
,重启之后即可实现跨域访问,前端无需再配置跨域。
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
// 当前跨域请求最大有效时长。这里默认1天
private static final long MAX_AGE = 24 * 60 * 60;
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
corsConfiguration.setMaxAge(MAX_AGE);
source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
return new CorsFilter(source);
}
}
③再将数据渲染到前端的表单即可
tip:
忽略某个字段,不展示给前端
更多推荐
已为社区贡献1条内容
所有评论(0)