Vue+Spring Boot前后端分离测试

前后端分离的开发模式大大提高了开发效率

早期的Java web开发模式，不论是servlet还是JSP，都需要开发人员同时掌握前端和后端知识

而前后端分离开发，可以让前端开发人员专注视图层，后端开发人员专注业务层，达到事半功倍的效果

前后端分离的核心思想是 前端页面通过AJAX调用后端的RESTFUL API接口并使用JSON数据进行交互

在开发的时候，前端用前端的服务器（Nginx），后端用后端的服务器（Tomcat），开发前端内容的时候，可以把前端的请求通过前端服务器转发给后端（称为反向代理）

这里使用的是Vue的axios

一、后端MVC三层的编写

pojo

public class User {
    String username;
    String password;
    String type;

    public User() {
    }

    public User(String username, String password, String type) {
        this.username = username;
        this.password = password;
        this.type = type;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    @Override
    public String toString() {
        return "User{" +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", type='" + type + '\'' +
                '}';
    }
}

Mapper

@Mapper
@Repository
public interface UserMapper {
    List<User> queryAllUser();
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="xxx.dao.UserMapper"><!--对应的实体类包名-->

    <select id="queryAllUser" resultType="User">
        select * from programme_databases.user;
    </select>
</mapper>

application.yaml里配置

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/数据库名?characterEncoding=utf-8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true
    username: root
    password: password
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource

mybatis:
  typeAliasesPackage: xxx.pojo
  mapper-locations: classpath:mybatis/mapper/*.xml

Service

@Component
public interface UserService {
    List<User> queryAllUser();
}

@Service
public class UserServiceImpl implements UserService{
    @Autowired
    private UserMapper userMapper;public List<User> queryAllUser() {
        return userMapper.queryAllUser();
    }
}

Controller

@RestController
public class UserController {
    @Autowired
    UserService userService;

    @CrossOrigin
    @GetMapping("api/user")
    @ResponseBody
    public List<User> queryAllUser(){
        return userService.queryAllUser();
    }
}

这里就简单写一个查询全部User的请求

最后还要配置一个端口，以免前后端项目端口冲突

server:
  port: 8000

到这里后端的请求就已经准备好了，可以用浏览器访问试试能不能获得json数据

二、前端发送请求获取json

首先引入axios模块

var axios=require('axios')
//设置反向代理，前端请求默认发送到http://localhost:8000/api
axios.defaults.baseURL='http://localhost:8000/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios=axios
//因为使用了新的模块 axios，所以需要进入到项目文件夹中，执行 npm install --save axios，以安装这个模块。

配置跨域支持。

在 config\index.js 中，找到 proxyTable 位置

    proxyTable: {
      '/api': {
        target: 'http://localhost:8000',

        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

访问

      this.$axios.get('/user').then(function (resp) {
        console.log(resp.data);
      })