SpringBoot+Vue的一个小Demo

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