专栏首页java思维导图SpringBoot-Vue 前后端分离开发首秀

SpringBoot-Vue 前后端分离开发首秀

小Hub领读:

很简单的springboot-Vue入门示例,后面会逐渐增加难度,从简单到复杂!

作者:Joker 原文地址 https://juejin.im/post/5ccda966e51d456e51614b4b

需求:读取数据库的数据展现到前端页面 技术栈:后端有主要有 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>    <dependency>        <groupId>mysql</groupId>        <artifactId>mysql-connector-java</artifactId>        <version>8.0.11</version>    </dependency>    <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.Driverspring.datasource.password=Panbing936@spring.datasource.username=rootspring.datasource.url=jdbc:mysql://localhost:3306/test?characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8#SpringData JPA的配置spring.jpa.hibernate.ddl-auto=updatespring.jpa.database-platform=org.hibernate.dialect.MySQL5Dialect

实体类 User.java

@Entity@Datapublic 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@EnableSwagger2public 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 是实现跨域的配置,务必记得

@Configurationclass 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 >        <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>

上面前端的代码,主要是通过引入Vue的js文件实现Vue的组件功能,一般在功能复杂的项目中,我们不会这样使用,而是单独新建一个前端的项目,使用NPM来创建运行打包项目。具体的Vue教程,可以去看这个网站:https://www.runoob.com/vue2/vue-tutorial.html。

目录结构和运行结果如下

完美收官!!!!!!!

github 代码:https://github.com/pbw123/spring-boot-demo 个人网站:http://47.101.51.245/

(完)

本文分享自微信公众号 - java思维导图(java-mindmap)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Redis 备份、容灾及高可用实战

    Redis是一个高性能的key-value非关系型数据库,由于其具有高性能的特性,支持高可用、持久化、多种数据结构、集群等,使其脱颖而出,成为常用的非关系型数据...

    java思维导图
  • Java 10 已发布!时隔 6 月带来 109 项新特性

    关键时刻,第一时间送达! 期待已久,没有跳票的 Java 10 已正式发布! ? 为了更快地迭代,以及跟进社区反馈,Java 的版本发布周期变更为了每六个月一次...

    java思维导图
  • 提升10倍生产力:IDEA远程一键部署SpringBoot到Docker

    IDEA是Java开发利器,springboot是Java生态中最流行的微服务框架,docker是时下最火的容器技术,那么它们结合在一起会产生什么化学反应呢?

    java思维导图
  • SpringBoot,Vue前后端分离开发首秀

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

    道可道非常道
  • Eureka+SpringBoot2.X版本实现优雅停服

    https://docs.spring.io/spring-boot/docs/current/reference/html/production-ready-...

    Arebirth
  • 跟我学Spring Cloud(Finchley版)-02-构建分布式应用

    本书使用服务提供者与服务消费者来描述微服务之间的调用关系。下表解释了服务提供者与服务消费者。

    用户1516716
  • 初学java之触发响应事件

    1 2 import java.awt.*; 3 import javax.swing.*; 4 import java.awt.event.*...

    Gxjun
  • bootstrap 输入框组 常用搜索框样式

    div input-group span input-group-addon <div style="padding: 100px 100px 10px...

    用户5760343
  • SpringBoot整合MyBatis逆向工程

    4. 这样就自动生成了xml,mapper,entity。但是mapper只是个半成品,还需要自定义sql语句。

    南风
  • 服务链路跟踪 && 服务监控

    微服务以微出名,在实际的开发过程中,涉及到成百上千个服务,网络请求引起服务之间的调用极其复杂。

    Noneplus

扫码关注云+社区

领取腾讯云代金券