每天都会分享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继承JpaRepository
public 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页面，具体代码如下
Vue.js-访问API接口数据-蓝墨云班课练习
.container{
display: flex;
flex-direction: column;
}
.card{
display: flex;
margin-bottom: 10px;
}
.cover{
width: 100px;
height: 100px;
}
.cover img{
width: 100%;
height: 100%;
}
{{users.length}}个人在线
{{user.id}}
{{user.name}}
var app = new Vue({
el: '#app',
data: {
users: []
},
created: function() {
var _this = this;
axios.get('http://localhost:8888/api/getAll')
.then(function(response) {
_this.users = response.data;
})
}
})
目录结构和运行结果如下
完美收官！！！！！！！
彩蛋时间：免费分享Java技术相关资料，需要的朋友可以关注我，在后台私信即可。
来源：知乎
作者：白天不懂夜的黑
原文：https://zhuanlan.zhihu.com/p/74010362
网友评论