一,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:

忽略某个字段,不展示给前端

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐