Vue+Spring Boot前後端分離測試
阿新 • • 發佈:2020-12-21
前後端分離的開發模式大大提高了開發效率
早期的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; } @Overridepublic 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); })