前端后端分离

最新推荐文章于 2024-04-20 09:22:43 发布

伯尔顿

最新推荐文章于 2024-04-20 09:22:43 发布

阅读量303

点赞数 1

分类专栏：前后端分离文章标签： spring srpringBoot vue swagger 前后端分离

本文链接：https://blog.csdn.net/qq_37904849/article/details/102791384

版权

前后端分离专栏收录该内容

2 篇文章 0 订阅

订阅专栏

spring boot 后端搭建 + Swagger + vue前端搭建 = 前后端分离项目
date: 2019-04-28 16:27:05

提示：我们下载架包感觉慢，可以看一下maven配置文件怎么配置阿里云仓库的镜像文件。

一、通过idea构建 spring boot 项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

二、配置相关信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

pom.xml引入配置文件：

    <dependencies>
        <!-- 构建WEB项目时候，自动添加 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- Lombok是一个Java库，能自动插入编辑器并构建工具，简化Java开发。通过添加注解的方式，不需要为类编写getter或eques方法，同时可以自动化日志变量。 -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!-- jpa -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <!-- mysql -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <!-- swagger -->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>${swagger.version}</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>${swagger.version}</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-bean-validators</artifactId>
            <version>${swagger.version}</version>
        </dependency>

        <!--devtools热部署-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
            <scope>true</scope>
        </dependency>
    </dependencies>

### 三、按照spring boot代码结构目录：###

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

项目代码层命名	名称
DemoApplication	工程启动类
domain	数据访问层
dao	数据访问层
service	数据服务层
controller	前端控制器
util	工具类
constant	常量接口类
vo	数据传输类
resources	资源

按照目录结构，这边粘贴处相应的代码：

DemoApplication：


@EnableAutoConfiguration
@EnableSwagger2
@ComponentScan(basePackages = {"com.example.demo.*"})
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

domain:

/**
 * @ApiModelProperty()用于方法，字段； 表示对model属性的说明或者数据操作更改 value–字段说明  name–重写属性名字
 * dataType–重写属性类型 required–是否必填 example–举例说明 hidden–隐藏
 * @Data 该注解使用在类上，该注解会提供getter、setter、equals、canEqual、hashCode、toString方法。
 * @GeneratedValue(strategy = GenerationType.IDENTITY) 通常我们采用的是 IDENTITY。主键由数据库自动生成（主要是自动增长型）。
 * @Table: 对应数据库中的表, 必须, name=表名, Indexes是声明表里的索引, columnList是索引的列, 同时声明此索引列是否唯一, 默认false
 * @GeneratedValue： 表明是否自动生成, 必须, strategy也是必写, 指明主键生成策略, 默认是Oracle
 * @Entity: 实体类, 必须
 * @Id: 指明id列, 必须
 * @Column： 对应数据库列名,可选, nullable 是否可以为空, 默认true
 **/


/**
 * @Author: chenyangyuan
 * @Description: //TODO 
 * @Date: 17:39 2019/8/9
 * @Param:
 * @return:
 **/
@ApiModel("用户信息")
@Data
@Entity
@Table(name = "user", indexes = {@Index(name = "id", columnList = "id", unique = true), @Index(name = "name", columnList = "name", unique = true)})
@GenericGenerator(name = "jpa-uuid", strategy = "uuid")
public class User {

    @Id
    @GeneratedValue(generator = "jpa-uuid")
    @Column(length = 32)
    private String id;

    @Null
    @ApiModelProperty(value = "用户名", example = "chenyangyuan")
    @Column(name = "name", nullable = false, length = 50)
    private String name;

    @ApiModelProperty(value = "密码", example = "123456")
    @Column(name = "passWord", nullable = false, length = 50)
    private String passWord;
}

dao:

public interface UserDao extends JpaRepository<User, Long>, Serializable {
}

service:

public interface UserService {

    /**
     * 保存用户
     * @param user
     */
    public void save(User user);

    /**
     * 删除用户
     * @param user
     */
    public void delete(User user);

    /**
     * 查询全部用户
     * @return
     */
    public List<User> findAll();

}

serviceImpl:

@Service
public class UserServiceImpl implements UserService {

    @Resource
    private UserDao userDao;

    @Override
    public void save(User user) {
        userDao.save(user);
    }

    @Override
    public void delete(User user) {
        userDao.delete(user);
    }

    @Override
    public List<User> findAll() {
        return userDao.findAll();
    }
}

controller:

/**
 * 登录控制器，前后端分离用的不同协议和端口，所以需要加入@CrossOrigin支持跨域。
 */
@Api(tags="用户模块")
@CrossOrigin
@RestController
@RequestMapping(value = "/api")
public class UserController {

    @Resource
    private UserService userService;


    @ApiOperation(value="新增用户", notes = "创建一个系统的新用户。")
    @PostMapping(value = "/save")
    public Object save(@RequestBody User user) {
        userService.save(user);
        return 1;
    }

    @ApiOperation(value = "用户删除" ,  notes="用户删除")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "userId", value = "用户标识", required = true, paramType = "query", dataType = "String")
    })
    @PostMapping(value = "/delete")
    public Object delete(@RequestBody User user) {
        userService.delete(user);
        return 1;
    }

    @ApiOperation(value = "查询用户" ,  notes="查询用户")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "userId", value = "用户标识", required = true, paramType = "query", dataType = "String")
    })
    @GetMapping(value = "/findAll")
    public Object findAll() {
        return userService.findAll();
    }
}

util.:

@Configuration
@EnableSwagger2
public class SwaggerConfig {

    /**
     * 创建API应用
     * apiInfo() 增加API相关信息
     * 通过select()函数返回一个ApiSelectorBuilder实例,用来控制哪些接口暴露给Swagger来展现，
     * 本例采用指定扫描的包路径来定义指定要建立API的目录。
     */
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.example.demo.controller"))
                .paths(PathSelectors.any())
                .build();
    }

    /**
     * 创建该API的基本信息（这些基本信息会展现在文档页面中）
     * 访问地址：http://localhost:8080/swagger-ui.html
     */
    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("API后台接口模块")
                .description("力挽狂来")
                .termsOfServiceUrl("http://code.gefork.com/service")
                .version("1.0")
                .contact(new Contact("猿猴", "http://www.yuanhou.fun", "1358178064@qq.com"))
                .build();
    }
}

三、启动DemoApplication

1、 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

2、通过postman，或者直接请求controller访问数据库数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

四、Swagger查看使用

1、访问Swagger进入页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

2、点开/api/findAll，并且测试Swagger

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

五、vue安装

1、安装node环境，首先要安装node.js，咯？—>下载地址：https://nodejs.org/en/，安装完成，进入cmd窗口

2、输入node-v 检查是否安装成功：如果输出版本号，说明我们安装node环境成功

3、npm install npm -g 这是用npm下载安装npm的命令,检查是否安装成功，输入npm -v

4、在执行 npm install cnpm -g -registry=https://registry.npm.taobao.org 即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了

5、全局安装vue-cli命令：npm install --global vue-cli

6、在cmd中，想在那个目录下面创建项目，直接cd过去。然后执行： vue init webpack projectName

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述
6_1、正在下载咯……

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

6_2、在后面是创建一些信息：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述
6_3、然后回车，完成喽！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述
7、我们进入刚刚创建的路径下面查看一下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

8、接着我们用webstrom打开刚刚创建的项目，直接运行cnpm run dev

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

8_1、直接去Chrome访问地址：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

六、简单的前后台请求的例子

1、首先安装跨域，axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

2、写一个简单的demo页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述
2_1、新建utils文件夹，在建utils.js 文件

/**
 * Created by Administrator on 2019/8/12.
 */
import axios from 'axios'

const utils = {
  axiosMethod: (config) => {
    axios({
      method: config.method,
      url: config.url,
      params: config.params ? config.params : null,
      data: config.data ? config.data : null
    }).then(config.callback).catch(config.catch ? config.catch : () => {})
  }
}

export default utils

2_2、App.vue文件

<script>
export default {
  name: 'App'
}
</script>

<template>
  <div id="login">
    <form>
      <lable for="username">用户名</lable><input type="text" v-model.trim="loginData.username" name="username">
      <lable for="password">密码</lable><input type="password" v-model.trim="loginData.password" name="password">
      <input type="button" value="登录" @click="doLogin"/>
    </form>
  </div>
</template>

<script>
  import utils from "./utils/utils"
  export default {
    name: 'findAll',
    data () {
      return {
        loginData: {
          username: "",
          password: ""
        }
      }
    },
    methods: {
      doLogin() {
        let succsee=(response) => {
          alert("id:" + response.data["0"].id + "     " +"name:" + response.data["0"].name)

          sites: response
        }
        utils.axiosMethod({
          method: "GET",
          url: "/api/findAll",
          data: this.loginData,
          callback: succsee
        })
      }
    }
  }
</script>

2_3、main.js文件

import Vue from 'vue'
import App from './App'
import router from './router'
// 引用axios，并设置基础URL为后端服务api地址
var axios = require('axios')
axios.defaults.baseURL = 'http://127.0.0.1:8086'// 域名+端口号
// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

七、在次启动后台spring boot 项目，在启动vue项目，进行访问

1、打开vue页面：localhost:8081

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

2、我这边做的是查询的请求，点击查询就会返回数据库的数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

八、学习总结

写的不好，多多包涵，不要喷我就ok了，适合初学者。若有什么不妥地方，请指示！

总体来说，蛮多的，慢慢消化其实也不怎么难，主要是demo，还有很多功能没有加入进去，后期慢慢添加一些新的框架！丰富起来

伯尔顿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端后端分离

spring boot 后端搭建 + Swagger + vue前端搭建 = 前后端分离项目date: 2019-04-28 16:27:05 提示：我们下载架包感觉慢，可以看一下maven配置文件怎么配置阿里云仓库的镜像文件。一、通过idea构建 spring boot 项目[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DTj1i0w6-1572278...
复制链接

扫一扫