初试【Vue+Springboot+SpringMVC+Druid+Mybatis+Caching+Redis】实现完整版前后端分离项目

by

2019-12-10

12:23:58

Leave a comment on 初试【Vue+Springboot+SpringMVC+Druid+Mybatis+Caching+Redis】实现完整版前后端分离项目

Spring, Web

, , , ,

最近喉咙不适，没法说话，只能做个安静的美男子了，上周住在医院病床上还想着自己可以从0开始完善整套WEB项目，出院后兴致勃勃地做起来了，调试了这两三晚，前端太难弄了

下面就是用到的一些常规框架：

前端框架：Vue
后端工程：Springboot
后端WEB框架：SpringMVC
连接池：Druid
持久层：Mybatis
缓存抽象：Caching
缓存类型：Redis

下面就是整个页面结果

NewImage

由于用了Mybatis持久框架，不像Hibernate可以在工程启动初始化的时候创建表，因此需要一开始手动创建一下数据表

CREATE TABLE user_info (
	id BIGINT ( 20 ) NOT NULL AUTO_INCREMENT,
	NAME VARCHAR ( 20 ),
	phone VARCHAR ( 30 ),
	age BIGINT ( 20 ),
	email VARCHAR ( 30 ),
	createTime datetime,
	updateTime datetime,
PRIMARY KEY ( id ) 
) ENGINE = INNODB DEFAULT CHARSET = utf8;

假如不想手动建表，也可以通过第三方工具来完成，具体参考链接：https://github.com/YoWenhow/mybatis-enhance-actable

 

下面就是每个模块的内容

1、后端Springboot工程

直接列出pom依赖，包括springboot，springmvc，spring data redis，druid，mybatis等

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid-spring-boot-starter</artifactId>
    <version>1.1.21</version>
</dependency>
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.0.0</version>
</dependency>

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.10</version>
    <scope>provided</scope>
</dependency>
<dependency>
    <groupId>org.testng</groupId>
    <artifactId>testng</artifactId>
    <version>7.0.0</version>
    <scope>test</scope>
</dependency>

2、model层，对应ORM实体，其中createTime和updateTime不可编辑，不可输入，只是在mvc里写入持久层的时候打一个时间戳，最终web上只是显示出来，再者新增序列化是因为后面要进行redis缓存

package com.lihuia.web.model;

import java.io.Serializable;
import java.util.Date;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

/**
 * Copyright (C), 2018-2019
 * FileName: User
 * Author:   lihui
 * Date:     2019/12/9
 */

@Data
@Builder
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class User implements Serializable {

    private static final long serialVersionUID = 2182129585108022309L;

    private String id;

    private Date createTime;

    private Date updateTime;
    
    private String name;
    
    private String phone;
    
    private Integer age;
    
    private String email;
}

这里加了两个构造方法的注解@NoArgsConstructor和@AllArgsConstructor，不可丢弃，具体classes文件如下

public User() {
}

public User(final String id, final Date createTime, final Date updateTime, final String name, final String phone, final Integer age, final String email) {
    this.id = id;
    this.createTime = createTime;
    this.updateTime = updateTime;
    this.name = name;
    this.phone = phone;
    this.age = age;
    this.email = email;
}

3、持久化层基于Mybatis框架，同时由于web查询较频繁，新增缓存，基于Spring的Caching缓存抽象在redis里，Mapper接口如下

package com.lihuia.web.mapper;

import java.util.List;

import com.lihuia.web.model.User;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Options;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import org.springframework.cache.annotation.Cacheable;

/**
 * Copyright (C), 2018-2019
 * FileName: UserMapper
 * Author:   lihui
 * Date:     2019/12/9
 */

@Mapper
public interface UserMapper {

    @Insert("insert into user_info (name, phone, age, email, createTime) " +
            "values (#{name}, #{phone}, #{age}, #{email}, #{createTime})")
    @Options(useGeneratedKeys = true, keyColumn = "id", keyProperty = "id")
    int insert(User user);

    @Update("update user_info set name = #{name}, phone = #{phone}, age = #{age}," +
            " email = #{email}, updateTime = #{updateTime} where id = #{id}")
    int update(User user);

    @Delete("delete from user_info where id = #{id}")
    int delete(@Param("id") String id);
    
    @Select("select * from user_info")
    @Cacheable(value = "user-system")
    List<User> getAll();
    
    @Select("select * from user_info where id = #{id}")
    @Cacheable(value = "user-system", key = "#a0")
    User getById(@Param("id") String id);
}

4、缓存层除了上面新增Cache描述外，还需要新增注入配置，因为@EnableCaching要用到CacheManager来操作redis缓存

package com.lihuia.web.config;

import java.time.Duration;

import org.springframework.cache.CacheManager;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.cache.RedisCacheConfiguration;
import org.springframework.data.redis.cache.RedisCacheManager;
import org.springframework.data.redis.cache.RedisCacheWriter;
import org.springframework.data.redis.connection.RedisConnectionFactory;

/**
 * Copyright (C), 2018-2019
 * FileName: RedisConfig
 * Author:   lihui
 * Date:     2019/12/9
 */

@Configuration
public class RedisCacheConfig {
    
    @Bean
    public CacheManager cacheManager(RedisConnectionFactory redisConnectionFactory) {
        RedisCacheConfiguration redisCacheConfiguration =
                RedisCacheConfiguration.defaultCacheConfig().entryTtl(Duration.ofSeconds(300));
        return RedisCacheManager
                .builder(RedisCacheWriter.nonLockingRedisCacheWriter(redisConnectionFactory))
                .cacheDefaults(redisCacheConfiguration)
                .build();
    }
}

5、持久化连接池基于Druid，springboot工程新增了druid-spring-boot-starter依赖，添加配置就可以直接使用了

spring.datasource.druid.url=jdbc:mysql://localhost:3306/user_center
spring.datasource.druid.username=root
spring.datasource.druid.password=123456
spring.datasource.druid.driver-class-name=com.mysql.cj.jdbc.Driver

spring.cache.type=redis
spring.cache.cache-names=user
spring.cache.redis.time-to-live=5000
spring.cache.redis.cache-null-values=false

spring.redis.host=127.0.0.1
spring.redis.port=6379
spring.redis.password=

6、Springboot的main方法新增mybatis的@MapperScan注解扫描mapper接口，以及开启缓存抽象

package com.lihuia.web;

import org.mybatis.spring.annotation.MapperScan;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cache.annotation.EnableCaching;

@SpringBootApplication
@MapperScan("com.lihuia.web.mapper")
@EnableCaching
public class WebApplication {

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

}

7、到这里持久层操作数据库基本就完成了，可以新建一个测试类校验一下Mapper接口正确性

package com.lihuia.web.mapper;

import javax.annotation.Resource;

import com.lihuia.web.model.User;
import lombok.extern.slf4j.Slf4j;
import org.testng.annotations.Test;

import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.testng.AbstractTestNGSpringContextTests;

/**
 * Copyright (C), 2018-2019
 * FileName: UserMapperTest
 * Author:   lihui
 * Date:     2019/12/9
 */

@SpringBootTest
@Slf4j
public class UserMapperTest extends AbstractTestNGSpringContextTests {

    @Resource
    private UserMapper userMapper;
    
    @Test(description = "查询所有Users列表")
    public void testGetAllUsers() {
        userMapper.getAll().forEach(e -> log.info("{}", e.toString()));
    }
    
    @Test(description = "查询lucy用户信息")
    public void testGetUserById() {
        log.info("{}", userMapper.getById("1"));
    }
    
    @Test(description = "插入用户信息")
    public void testInsertUser() {
        userMapper.insert(User.builder().name("lihui").phone("18888888888").age(18).build());
        userMapper.insert(User.builder().name("lilei").phone("19999999999").age(19).build());
        userMapper.insert(User.builder().name("lucy").phone("17777777777").age(17).build());
    }
    
    @Test(description = "删除用户信息")
    public void testDeleteUser() {
        userMapper.delete("3");
    }
    
    @Test(description = "更新用户信息")
    public void testUpdateUser() {
        userMapper.update(User.builder().name("lucy").phone("16666666666").age(16).build());
    }
}

8、SpringMVC的Controller层，insert的时候，createTime和updateTime是在写入的时候获取当前时间戳的，并不直接传参写入

package com.lihuia.web.controller;

import java.util.Date;
import java.util.List;

import javax.annotation.Resource;

import com.lihuia.web.model.User;
import com.lihuia.web.service.UserService;
import lombok.extern.slf4j.Slf4j;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

/**
 * Copyright (C), 2018-2019
 * FileName: UserController
 * Author:   lihui
 * Date:     2019/12/9
 */

@RestController
@RequestMapping("/api")
@Slf4j
public class UserController {
    
    @Resource
    private UserService userService;
    
    @RequestMapping(value = "/insert", method = RequestMethod.POST)
    public void insertUser(
            @RequestParam String name,
            @RequestParam String phone,
            @RequestParam Integer age,
            @RequestParam String email) {
        
        User user = User.builder()
                        .name(name)
                        .phone(phone)
                        .age(age)
                        .email(email)
                        .createTime(new Date(System.currentTimeMillis()))
                        .build();
        log.info("insert User: {}", user);
        if (user != null) {
            userService.insertUser(user);
        }
    }
    
    @RequestMapping(value = "/update", method = RequestMethod.PUT)
    public void updateUser(
            @RequestParam String id,
            @RequestParam String name,
            @RequestParam String phone,
            @RequestParam Integer age,
            @RequestParam String email) {
        
        User user = User.builder()
                        .id(id)
                        .name(name)
                        .phone(phone)
                        .age(age)
                        .email(email)
                        .updateTime(new Date(System.currentTimeMillis()))
                        .build();
        log.info("update User: {}", user);
        if (user != null) {
            userService.updateUser(user);
        }
    }
    
    @RequestMapping(value = "/delete", method = RequestMethod.DELETE)
    public void deleteUser(@RequestParam(value = "id") String id) {
        log.info("delete User id: {}", id);
        userService.deleteUser(id);
    }
    
    @RequestMapping(value = "/getAll", method = RequestMethod.GET)
    public List<User> getAllUsers() {
        List<User> users = userService.getAllUsers();
        log.info("get All Users: {}", users);
        return users;
    }
    
    @RequestMapping(value = "/getById", method = RequestMethod.GET)
    public User getUserById(@RequestParam(value = "id") String id) {
        User user = userService.getUserById(id);
        log.info("get User: {}", user);
        return user;
    }
}

9、Service层，我这里新增了一个校验方法，可以校验传入的参数，mapper接口封装在类方法里面

package com.lihuia.web.service;

import java.util.List;
import java.util.regex.Pattern;

import javax.annotation.Resource;

import com.lihuia.web.mapper.UserMapper;
import com.lihuia.web.model.User;

import org.springframework.stereotype.Service;

/**
 * Copyright (C), 2018-2019
 * FileName: UserService
 * Author:   lihui
 * Date:     2019/12/9
 */

@Service
public class UserService {
    
    @Resource
    private UserMapper userMapper;
    
    public void insertUser(User user) {
        checkUser(user);
        userMapper.insert(user);
    }
    
    public void deleteUser(String id) {
        userMapper.delete(id);
    }
    
    public void updateUser(User user) {
        checkUser(user);
        userMapper.update(user);
    }
    
    public List<User> getAllUsers() {
        return userMapper.getAll();
    }
    
    public User getUserById(String id) {
        return userMapper.getById(id);
    }
    
    public void checkUser(User user) {
 
        if (! Pattern.compile("^1\\d{10}$").matcher(user.getPhone()).find()) {
            throw new IllegalArgumentException("phone: 电话号码数据异常");
        }

        if (user.getAge() <= 0 || user.getAge() > 100) {
            throw new IllegalArgumentException("age: 年龄数据异常");
        }

        if (! Pattern.compile("^\\w+@.*").matcher(user.getEmail()).find()) {
            throw new IllegalArgumentException("email: 邮箱数据异常");
        }
    }
}

10、到这里，后端基本就结束了，可以直接调用Rest请求来校验一下

NewImage

11、下面是前端了，这里用的是vue，首先是main入口，这里引用了axios，api方法绑定全局

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
import 'iview/dist/styles/iview.css'
import iView from 'iview'

// 引用axios，并设置基础URL为后端服务api地址
var axios = require('axios')
axios.defaults.baseURL = 'https://localhost:8080/api'

Vue.prototype.$axios = axios
Vue.config.productionTip = false

Vue.use(VueRouter)
Vue.use(iView)
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

12、接着就是axios依赖

axi0s/index.js

export default {
  /**
   * @description api请求基础路径
   */
  baseUrl: {
    dev: 'http://localhost:8080/api/'
  }
}

axios/api.request.js

import axios from "axios"
import config from './index'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

const HttpRequest = axios.create({
    baseURL: baseUrl,  // api的base_url
    timeout: 5000  // 请求超时时间
});
export default HttpRequest

13、页面路由

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import user from "@/components/user";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/user',
      name: 'user',
      component: user
    }
  ]
})

14、路由代理

module.exports = {
    lintOnSave: false,
    devServer: {
      port: 8000,
      proxy: {
        //配置跨域
        '/api': {
            target: 'https://localhost:8080',
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
          }
      }
    },
}

15、App.vue，不太清楚有啥用

<template>
  <div id="app">
   <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app',

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

16、比较重要的，对接后端Controller的

import HttpRequest from '@/axios/api.request'

export const UserSelectByIdAction = (parameter) => {
  return HttpRequest.request({
    url: 'getById/',
    method: 'get',
    params: {
      id: parameter
    }
  })
}

export const UserSelectAction = () => {
  return HttpRequest.request({
    url: 'getAll/',
    method: 'get'
  })
}

export const UserInsertAction = (parameter) => {
  return HttpRequest.request({
    url: 'insert/',
    method: 'post',
    params: parameter
  })
}

export const UserUpdateAction = (parameter) => {
  return HttpRequest.request({
    url: 'update/',
    method: 'put',
    params: parameter
  })
}

export const UserDeleteAction = (parameter) => {
  return HttpRequest.request({
    url: 'delete/',
    method: 'delete',
    params: {
      id: parameter
    }
  })
}

17、user.vue的内容，前端view一些数据内容和响应，UserxxxxAction相关的方法重要

<template>
  <div class="out-layer">
    <!-- 按钮 -->
    <div type="flex" class="right" justify="end">
      <Input v-model="searchStr" placeholder="请输入编号查询" style="width: 800px"/>
      <Button
          type="info"
          class="button"
          style="margin-right: 5px;margin-left: 5px"
          @click="UserSelectById(searchStr)"
      >查询</Button>
      <Button type="info" @click="AddBtnShow()">新增</Button>
    </div>
    <!-- 列表 -->
    <div>
      <Table border :columns="columns1" :data="dataList">
        <template slot-scope="{row}" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="EditBtnShow(row)">修改</Button>
          <Button type="error" size="small" @click="UserDelete(row)">删除</Button>
        </template>
      </Table>
    </div>

    <!-- 增加用户 -->
    <div>
      <Modal v-model="isAddShow" draggable footer-hide scrollable title="增加用户">
        <Form ref="addFormList" :model="addFormList" :rules="ruleValidate" :label-width="80">
          <FormItem label="编号" prop="id">
            <Input v-model="addFormList.id" placeholder="请输入你的编号"/>
          </FormItem>
          <FormItem label="姓名" prop="name">
            <Input v-model="addFormList.name" placeholder="请输入你的姓名"/>
          </FormItem>
          <FormItem label="电话" prop="phone">
            <Input v-model="addFormList.phone" placeholder="请输入你的电话"/>
          </FormItem>
          <FormItem label="年龄" prop="age">
            <Input v-model="addFormList.age" placeholder="请输入你的年龄"/>
          </FormItem>
          <FormItem label="邮箱" prop="email">
            <Input v-model="addFormList.email" placeholder="请输入你的邮箱"/>
          </FormItem>
<!--          <FormItem label="创建时间" prop="createTime">-->
<!--            <Input v-model="addFormList.createTime" placeholder="请输入你的创建时间"/>-->
<!--          </FormItem>-->
<!--          <FormItem label="更新时间" prop="updateTime">-->
<!--            <Input v-model="addFormList.updateTime" placeholder="请输入你的创建时间"/>-->
<!--          </FormItem>-->
          <FormItem>
            <Button type="primary" @click="HandleSubmit('addFormList')">提交</Button>
            <Button @click="HandleReset('addFormList')" style="margin-left: 8px">重置</Button>
          </FormItem>
        </Form>
      </Modal>
    </div>

    <!-- 修改用户 -->
    <div>
      <Modal v-model="isEditShow" draggable footer-hide scrollable title="修改用户">
        <Form ref="editFormList" :model="editFormList" :rules="ruleValidate" :label-width="80">
          <FormItem label="工号" prop="id">
            <Input disabled v-model="editFormList.id" placeholder="请输入你的编号"/>
          </FormItem>
          <FormItem label="姓名" prop="name">
            <Input v-model="editFormList.name" placeholder="请输入你的姓名"/>
          </FormItem>
          <FormItem label="手机" prop="phone">
            <Input v-model="editFormList.phone" placeholder="请输入你的手机"/>
          </FormItem>
          <FormItem label="年龄" prop="age">
            <Input v-model="editFormList.age" placeholder="请输入你的年龄"/>
          </FormItem>
          <FormItem label="邮箱" prop="email">
            <Input v-model="editFormList.email" placeholder="请输入你的邮箱"/>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="HandleSubmit('editFormList')">提交</Button>
            <Button @click="HandleReset('editFormList')" style="margin-left: 8px">重置</Button>
          </FormItem>
        </Form>
      </Modal>
    </div>
  </div>
</template>
<script>
  import {
    UserSelectAction,
    UserSelectByIdAction,
    UserInsertAction,
    UserDeleteAction,
    UserUpdateAction
  } from "../api/user.js";
  export default {
    data() {
      return {
        searchStr: "",
        isAddShow: false,
        isEditShow: false,
        columns1: [
          {
            title: "编号",
            key: "id"
          },
          {
            title: "姓名",
            key: "name"
          },
          {
            title: "电话",
            key: "phone"
          },
          {
            title: "年龄",
            key: "age"
          },
          {
            title: "邮箱",
            key: "email"
          },
          {
            title: "创建时间",
            key: "createTime"
          },
          {
            title: "更新时间",
            key: "updateTime"
          },
          {
            title: "操作",
            slot: "action",
            width: 150,
            align: "center"
          }
        ],
        dataList: [],
        data: [],
        addFormList: {
          id: "",
          name: "",
          phone: "",
          age: "",
          email: ""
          // createTime: "",
          // updateTime: ""
        },
        editFormList: {
          id: 0,
          name: "",
          phone: "",
          age: "",
          email: ""
        },
        ruleValidate: {
          id: [
            {
              required: true,
              // type: "number",
              message: "编号不能为空！",
              trigger: "blur"
            }
          ],
          name: [
            {
              required: true,
              message: "姓名不能为空！",
              trigger: "blur"
            }
          ],
          phone: [
            {
              required: true,
              message: "电话不能为空！",
              trigger: "blur"
            }
          ],
          age: [
            {
              required: true,
              type: "number",
              message: "年龄不能为空！",
              trigger: "blur"
            }
          ],
          email: [
            {
              required: true,
              message: "邮箱不能为空！",
              trigger: "blur"
            },
            {
              type: "email",
              message: "不合法的邮箱！",
              trigger: "blur"
            }
          ]
        }
      };
    },
    methods: {
      search() {
        if (this.searchStr.trim() !== "") {
          this.data.forEach(element => {
            if (element.id == this.searchStr) {
              var index = this.data.indexOf(element);
              this.dataList = [];
              this.dataList.push(this.data[index]);
            }
          });
        } else {
          this.dataList = this.data;
        }
      },
      UserSelect() {
        UserSelectAction().then(res => {
          this.dataList = res.data;
          this.data = res.data;
        });
      },
      UserSelectById(searchStr) {
        // eslint-disable-next-line no-unused-vars
        UserSelectByIdAction(searchStr).then(res => {
          this.$Message.success("查询该用户成功! ")
        })
      },
      UserInsert() {
        let flag = this.FindUser();
        if (flag) {
          this.$Message.error("编号已经存在！");
          return;
        }
        // eslint-disable-next-line no-unused-vars
        UserInsertAction(this.addFormList).then(res => {
          this.AddBtnNotShow();
          this.UserSelect();
          this.$Message.success("增加成功！");
        });
      },
      UserUpdate() {
        // eslint-disable-next-line no-unused-vars
        UserUpdateAction(this.editFormList).then(res => {
          this.EditBtnNotShow();
          this.UserSelect();
          this.$Message.success("修改成功！");
        });
      },
      UserDelete(item) {
        // eslint-disable-next-line no-unused-vars
        UserDeleteAction(item.id).then(res => {
          this.UserSelect();
          this.$Message.success("删除成功！");
        });
      },
      HandleSubmit(name) {
        this.$refs[name].validate(valid => {
          if (valid) {
            if (this.isAddShow) {
              this.UserInsert();
            } else if (this.isEditShow) {
              this.UserUpdate();
            }
          } else {
            this.$Message.error("填写信息错误!");
          }
        });
      },
      AddBtnShow() {
        this.HandleReset("addFormList");
        this.isAddShow = true;
      },
      AddBtnNotShow() {
        this.isAddShow = false;
      },
      EditBtnShow(item) {
        this.isEditShow = true;
        this.editFormList.id = item.id;
        this.editFormList.name = item.name;
        this.editFormList.phone = item.phone;
        this.editFormList.age = item.age;
        this.editFormList.email = item.email;
      },
      EditBtnNotShow() {
        this.isEditShow = false;
      },
      HandleReset(name) {
        this.$refs[name].resetFields();
      },
      FindUser() {
        let flag = false;
        this.dataList.forEach(item => {
          if (item.id == this.addFormList.id) flag = true;
        });
        return flag;
      }
    },
    mounted() {
      this.UserSelect();
    }
  };
</script>
<style>
  .out-layer {
    margin: 20px;
  }

  .right {
    margin: 15px;
  }
</style>

18、前端我用的是WebStorm，具体文件目录如下图

NewImage

19、本来以为这里就OK了，因为检查元素里可以查看到response的数据，但是页面显示报错

NewImage

20、google一下CORS相关报错，后端配置类需要注入

package com.lihuia.web.config;

import org.springframework.boot.autoconfigure.AutoConfigureAfter;
import org.springframework.boot.autoconfigure.web.servlet.DispatcherServletAutoConfiguration;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

/**
 * Copyright (C), 2018-2019
 * FileName: WebConfig
 * Author:   lihui
 * Date:     2019/12/9
 */

@Configuration
@AutoConfigureAfter(DispatcherServletAutoConfiguration.class)
public class WebConfig extends WebMvcConfigurationSupport {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
        registry.addResourceHandler("swagger-ui.html")
                .addResourceLocations("classpath:/META-INF/resources/");
        registry.addResourceHandler("/webjars/**")
                .addResourceLocations("classpath:/META-INF/resources/webjars/");
        super.addResourceHandlers(registry);
    }

    /**
     * CROS跨域的处理
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH")
                .allowCredentials(true).maxAge(3600);
    }
}

这样就结束了

 

OVER，接下来可以在该基础上来进行扩展了

发表回复