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

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

不了解这些技术的可以去入门一下

lombok入门

swagger入门

SpringData JPA入门

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

首先创建一个Spring Boot项目,目录结构如下:

在pom.xml中加入如下依赖

	<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency> <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency> <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.11</version>
</dependency> <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-jpa -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
<version>2.1.4.RELEASE</version>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.7.0</version>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.7.0</version>
</dependency>
</dependencies>

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<User,Integer> {
}

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<User> 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");
}
};
}
}

点击localhost:8888/swagger-ui.html查看生成的接口文档,测试一下



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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js-访问API接口数据-蓝墨云班课练习</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 通过CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 通过CDN引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style type="text/css">
.container{
display: flex;
flex-direction: column;
}
.card{
display: flex;
margin-bottom: 10px;
}
.cover{
width: 100px;
height: 100px;
}
.cover img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<div class="top">
<p>{{users.length}}个人在线</p>
</div>
<hr>
<div class="container">
<div class="card" v-for="user in users">
<div class="cover">
<img :src="'img/'+user.avatarURL">
</div>
<div class="">
<p>{{user.id}}</p>
</div>
<div class="">
<p>{{user.name}}</p>
</div> </div> </div> </div>
<script type="text/javascript">
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;
})
}
})
</script>
</body>
</html>

目录结构和运行结果如下

完美收官!!!!!!!

github代码

个人网站

SpringBoot,Vue前后端分离开发首秀的更多相关文章

  1. beego-vue URL重定向(beego和vue前后端分离开发,beego承载vue前端分离页面部署)

    具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...

  2. SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题

    原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...

  3. Springboot+vue前后端分离项目,poi导出excel提供用户下载的解决方案

    因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...

  4. Jeecg-Boot 2.0 版本发布,基于Springboot+Vue 前后端分离快速开发平台

    目录 Jeecg-Boot项目简介 源码下载 升级日志 Issues解决 v1.1升级到v2.0不兼容地方 系统截图 Jeecg-Boot项目简介 Jeecg-boot 是一款基于代码生成器的智能开发 ...

  5. Spring Boot + Vue 前后端分离开发,权限管理的一点思路

    在传统的前后端不分的开发中,权限管理主要通过过滤器或者拦截器来进行(权限管理框架本身也是通过过滤器来实现功能),如果用户不具备某一个角色或者某一个权限,则无法访问某一个页面. 但是在前后端分离中,页面 ...

  6. SpringBoot+Vue前后端分离项目,maven package自动打包整合

    起因:看过Dubbo管控台的都知道,人家是个前后端分离的项目,可是一条打包命令能让两个项目整合在一起,我早想这样玩玩了. 1. 建立个maven父项目 next 这个作为父工程,next Finish ...

  7. SpringBoot +Vue 前后端分离实例

    今天下了Vue,想试一试前后端分离的实现,没想到坑还不少,这里就记录一下我遇到的坑和我的代码: 一.Vue的下载安装:从网上找就好了,没什么问题,除了下载以后,要把镜像库改成淘宝的,要不然太慢了. 二 ...

  8. Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置

    前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...

  9. SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(一)

    当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异. 笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方 ...

随机推荐

  1. Entity Framework Core 生成跟踪列-阴影属性

    摘自:https://www.cnblogs.com/tdfblog/p/entity-framework-core-generate-tracking-columns.html Ef Core 官方 ...

  2. delphi datetimepicker 修改时间无效问题

    今天用delphi写个程序,使用datetimepicker获得想要的时间.蛋疼的问题是无论怎么调整明明看着控件里面的日期变了,但是show出来的datetimepicker.datetime日期都不 ...

  3. Linux系统文件权限管理(6)

    Linux操作系统是多任务(Multi-tasks)多用户(Multi-users)分时操作系统,linux操作系统的用户就是让我们登录到linux的权限,每当我们使用用户名登录操作系统时,linux ...

  4. Android逆向进阶—— 脱壳的奥义(基ART模式下的dump)

    本文作者:i春秋作家HAI_ZHU 0×00 前言 市面上的资料大多都是基于Dalvik模式的dump,所以这此准备搞一个ART模式下的dump.HAI_的使用手册(各种好东西) Dalvik模式是A ...

  5. 【learning】 扩展欧几里得算法(扩展gcd)和乘法逆元

    有这样的问题: 给你两个整数数$(a,b)$,问你整数$x$和$y$分别取多少时,有$ax+by=gcd(x,y)$,其中$gcd(x,y)$表示$x$和$y$的最大公约数. 数据范围$a,b≤10^ ...

  6. Jmeter保存时,完美解决提示的“拒绝访问”

    使用Jmeter时,想保存测试计划,提示"拒绝访问“,这是为啥? 因为给Jmeter的权限不够,也就是说,在打开它的时候,直接双击打开,没有选择”以管理员身份运行“,就会导致”拒绝访问“ ! ...

  7. javascript数据结构与算法---检索算法(顺序查找、最大最小值、自组织查询)

    javascript数据结构与算法---检索算法(顺序查找.最大最小值.自组织查询) 一.顺序查找法 /* * 顺序查找法 * * 顺序查找法只要从列表的第一个元素开始循环,然后逐个与要查找的数据进行 ...

  8. Java时间类(转)

    package com.chinagas.common.utils; import java.text.ParseException; import java.text.SimpleDateForma ...

  9. ThreadLocal的练习代码

    场景: 有三个小孩儿,买了一个变形金刚玩具(Transformer).... 三个小孩都争着玩这个玩具....没有一个人可以玩... 第一种方式:每个人各玩一会.... 第二种方式:再买两个玩具,一个 ...

  10. 在Ubuntu Server上安装Postgresql

    首先更新一下源: sudo apt-get update 如果你不知道Postgresql具体的包的名称,可以使用一下语句进行查找: apt-cache search ^Postgresql 使用上述 ...