SpringBoot+Vue的一个小Demo
前端项目地址:https://gitee.com/CurvedMirror/untitled
后端项目地 https://gitee.com/CurvedMirror/demo/tree/master
一、统一环境
- 开发工具webstorm+idea
- nodejs
- axios
- elementui
- router
- vuex
二、实际的开发步骤
前台代码编写
首先第一步建立一个vue项目
然后在package.json中引入依赖
"dependencies": {
"axios": "^0.17.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"element-ui": "2.7.2",
"vuex": "3.0.1"
},
建立一个可以发送restful风格的工具类,建议建立在自己建立的utils文件夹下
import axios from 'axios'
import {
Message} from 'element-ui'
axios.interceptors.request.use(config=> {
return config;
}, err=> {
Message.error({
message: '请求超时!'});
return Promise.resolve(err);
})
axios.interceptors.response.use(data=> {
if (data.status && data.status == 200 && data.data.status == 'error') {
Message.error({
message: data.data.msg});
return;
}
return data;
}, err=> {
if (err.response.status == 504||err.response.status == 404) {
Message.error({
message: '服务器被吃了⊙﹏⊙∥'});
} else if (err.response.status == 403) {
Message.error({
message: '权限不足,请联系管理员!'});
}else {
Message.error({
message: '未知错误!'});
}
return Promise.resolve(err);
})
let base = '';
export const postRequest = (url, params) => {
return axios({
method