本文共 3965 字，大约阅读时间需要 13 分钟。

每天都会分享Java技术文章，喜欢的关注一下呗！另外文末有彩蛋，不要错过！

需求：读取数据库的数据展现到前端页面

技术栈：后端有主要有SpringBoot,lombok,SpringData JPA,Swagger,跨域，前端有Vue和axios

配置：mysql 8.0.11,IntelliJ IDEA 2017.1.2,HBuilderX 1.9.3

首先创建一个Spring Boot项目，目录结构如下：

在pom.xml中加入如下依赖

 
   
      
    
       
     
      org.springframework.boot
       
     
      spring-boot-starter-web
       
      
    
       
     
      org.springframework.boot
       
     
      spring-boot-devtools
       
     
      runtime
       
      
    
       
     
      org.projectlombok
       
     
      lombok
       
     
      true
       
      
    
       
     
      org.springframework.boot
       
     
      spring-boot-starter-test
       
     
      test
       
      
      
    
       
     
      mysql
       
     
      mysql-connector-java
       
     
      8.0.11
       
      
      
    
       
     
      org.springframework.boot
       
     
      spring-boot-starter-data-jpa
       
     
      2.1.4.RELEASE
       
      
    
       
     
      io.springfox
       
     
      springfox-swagger2
       
     
      2.7.0
       
      
    
       
     
      io.springfox
       
     
      springfox-swagger-ui
       
     
      2.7.0
       
      
    application.properties配置#端口 server.port=8888 #连接数据库的配置 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.password=Panbing936@ spring.datasource.username=root spring.datasource.url=jdbc:mysql://localhost:3306/test?characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8 #SpringData JPA的配置 spring.jpa.hibernate.ddl-auto=update spring.jpa.database-platform=org.hibernate.dialect.MySQL5Dialect 实体类User.java@Entity @Data public class User{  @Id  @GeneratedValue(strategy = GenerationType.AUTO) private Integer id;  @Column(length = 55) private String name; private String avatarURL; } 接口UserMapper.java继承JpaRepositorypublic interface UserMapper extends JpaRepository
   
     { } Controller.java@RestController @RequestMapping(value = "/api",produces = APPLICATION_JSON_VALUE) @Api(description = "用户管理") public class UserController {  @Autowired private UserMapper userMapper;  @ApiOperation(value = "用户列表",notes = "查寻所有已注册过的用户信息")  @RequestMapping(value = "getAll",method = RequestMethod.GET) public List
    
      getAll()  { return userMapper.findAll();  } } SwaggerConfig.java@Configuration @EnableSwagger2 public class SwaggerConfig {  @Bean public Docket createRestApi() { return new Docket(DocumentationType.SWAGGER_2)  .apiInfo(apiInfo())  .select()  .apis(RequestHandlerSelectors.basePackage("cn.niit.controller"))  .paths(PathSelectors.any())  .build();  } private ApiInfo apiInfo() { return new ApiInfoBuilder()  .title("Spring Boot中使用Swagger2实现前后端分离开发")  .description("此项目只是练习如何实现前后端分离开发的小Demo")  .termsOfServiceUrl("https://www.jianshu.com/u/2f60beddf923")  .contact("WEN")  .version("1.0")  .build();  } } WebConfig.java是实现跨域的配置，务必记得@Configuration class WebMvcConfigurer extends WebMvcConfigurerAdapter {  //跨域配置  @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() {  @Override  //重写父类提供的跨域请求处理的接口 public void addCorsMappings(CorsRegistry registry) {  //添加映射路径 registry.addMapping("/**")  //放行哪些原始域  .allowedOrigins("*")  //是否发送Cookie信息  .allowCredentials(true)  //放行哪些原始域(请求方式)  .allowedMethods("GET", "POST", "PUT", "DELETE")  //放行哪些原始域(头部信息)  .allowedHeaders("*")  //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）  .exposedHeaders("Header1", "Header2");  }  };  } } 
    
   

查看生成的接口文档，测试一下

返回数据没有问题，接着可以根据文档开发前端代码了

用HBuilderX新建一个test.html页面，具体代码如下

     
       
     
     
       
             
   
      
    
       
     
{
  {users.length}}个人在线
  
    
  
    
  
    
       
     
        
      
         
         
      
  
      
         
       
{
  {user.id}}
  
      
  
      
         
       
{
  {user.name}}
  
      
  
     
  
    
  
   
      

目录结构和运行结果如下

完美收官！！！！！！！

彩蛋时间：免费分享Java技术相关资料，需要的朋友可以关注我，在后台私信即可。

来源：知乎

作者：白天不懂夜的黑

原文：https://zhuanlan.zhihu.com/p/74010362

转载地址：http://vdusi.baihongyu.com/