前後端分離的開發模式大大提高了開發效率

早期的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);
      })