服務(wù)端接口技術(shù)
- SpringBoot + Shiro + mybatis-plus + MySql + Redis
前端技術(shù)框架
服務(wù)接口
創(chuàng)建maven多模塊項目丐箩，分別創(chuàng)建一下子項目
項目文檔結(jié)構(gòu)圖
- domain項目主要就是實體和數(shù)據(jù)操作層
主要就是配置數(shù)據(jù)源等信息异袄。 - server項目業(yè)務(wù)服務(wù)層
- vueweb項目控制層
主要shiro的配置
參考: SpringBoot 集成Shiro 注：數(shù)據(jù)操作層JPA換成MyBatis-Plus春宣。
前端項目搭建
直接使用的vue-cli 3.0版本腳手架創(chuàng)建項目即可 炫贤。具體步驟百度卑雁。
文檔結(jié)構(gòu)
編輯器使用的是WebStorm
執(zhí)行npm server 即可訪問初始頁面了跌榔。
注: vue.config.js 這個文件是手動新增的地熄。之后就集成各種第三方庫即可了
- ElementUI
- npm i element-ui -S 安裝想要集成的庫。
- main.ts引入 使用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/fonts/element-icons.ttf';
import 'element-ui/lib/theme-chalk/fonts/element-icons.woff';
# 也可以單獨引入某個組件
# import {Message} from 'element-ui'
Vue.use(ElementUI);
- Login.vue 使用
ElementUI使用示例
- 使用axios訪問接口
-
配置axios-->axios.tool.ts
import axios from 'axios' import {Message} from 'element-ui' axios.defaults.baseURL = "/api/"; // 默認地址 //axios.defaults.baseURL = "http://www.ping-w.com/vueweb"; // 默認地址 //axios.defaults.withCredentials = true; // 準許攜帶cookie信息 //整理數(shù)據(jù) axios.defaults.transformRequest = function (data) { data = JSON.stringify(data); return data; }; // 路由請求攔截 // http request 攔截器 axios.interceptors.request.use(config => { config.headers['Accept'] = 'application/json'; config.headers['Content-Type'] = 'application/json;charset=UTF-8'; //判斷是否存在token窘行，如果存在的話饥追，則每個http header都加上token const token = localStorage.getItem("token"); if(token != undefined){ config.headers['Authorization'] = token; } return config; }, error => { return Promise.reject(error.response); }); // 路由響應(yīng)攔截 // http response 攔截器 axios.interceptors.response.use(resp=> { if (resp.status && resp.status == 200 && resp.data.code != '0') { Message.error({message: resp.data.message}) if (resp.data.code == '20301') { // Token過期 setTimeout(() => { window.location.href = location.origin + location.pathname; }, 1000); } return Promise.resolve(resp); } return resp.data; }, err=> { if(err.response == undefined){ Message.error({message: err.message}) }else{ if (err.response.status == 504||err.response.status == 404) { Message.error({message: '服務(wù)器被吃了⊙﹏⊙∥'}); } else if (err.response.status == 403) { Message.error({message: '權(quán)限不足,請聯(lián)系管理員!'}); }else { Message.error({message: '未知錯誤!'}); } } return Promise.resolve(err); }) export default axios; main.ts 引入
import axios from "./config/axios.tool";
import vueAxios from "vue-axios";
Vue.use(vueAxios, axios);
-
Login.vue 使用--登錄時調(diào)用接口
const _this = this; this.loading = true; localStorage.clear(); _this.axios.a // 登錄 _this.axios.post('/login',, _this.user) .then(resp => { _this.loading = false; // 設(shè)置全局的用戶信息 localStorage.setItem("token", resp.data.token); localStorage.setItem("username", resp.data.user.name) _this.$router.replace({path: '/home'}); })
注意問題：
1： 開發(fā)過程中，訪問接口出現(xiàn)跨域問題罐盔。lcoalhost:8080 - localhost:10000?
2： 打包部署后js和css等文件404（NGINX添加了項目名）
處理方式 vue.config.js
module.exports = {
runtimeCompiler: true,
// 設(shè)置打包文件相對路徑-項目名后綴 http://www.ping-w.com/webview/
publicPath: '/webview/',
devServer: {
port: 8080, // 知道端口號
//開發(fā)過程中服務(wù)跨域問題
proxy: {
'/api': {
target: 'http://localhost:10000/vueweb/', //對應(yīng)自己的接口
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},
}
創(chuàng)建項目完成但绕！ 示例項目. 服務(wù)器不續(xù)費了
