SpringBoot + Vue 后台管理系统（一）：创建项目

服务端接口技术

• SpringBoot + Shiro + mybatis-plus + MySql + Redis

前端技术框架

• VUE + ElementUI + TypeScript
  具体代码已经上传GitHub。vue-web 和 study-jpa

服务接口

创建maven多模块项目，分别创建一下子项目

项目文档结构图

• domain项目主要就是实体和数据操作层
  主要就是配置数据源等信息。
• server项目业务服务层
• vueweb项目控制层
  主要shiro的配置
  参考: SpringBoot 集成Shiro 注：数据操作层JPA换成MyBatis-Plus。

前端项目搭建

直接使用的vue-cli 3.0版本脚手架创建项目即可 。具体步骤百度。

文档结构

编辑器使用的是WebStorm
执行npm server 即可访问初始页面了。
注: vue.config.js 这个文件是手动新增的。之后就集成各种第三方库即可了

• ElementUI

1. npm i element-ui -S 安装想要集成的库。
2. 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);

3. Login.vue 使用

ElementUI使用示例

• 使用axios访问接口

1. 配置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信息
    //整理数据
    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);
        });
    
    // 路由响应拦截
    // 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: '服务器被吃了⊙﹏⊙∥'});
            } else if (err.response.status == 403) {
                Message.error({message: '权限不足,请联系管理员!'});
            }else {
                Message.error({message: '未知错误!'});
            }
        }
        return Promise.resolve(err);
    })
    export default axios;
   

2. main.ts 引入

  import axios from "./config/axios.tool";
  import vueAxios from  "vue-axios";
  
  Vue.use(vueAxios, axios);

3. Login.vue 使用--登录时调用接口

   const _this = this;
   this.loading = true;
   localStorage.clear();
   _this.axios.a
   // 登录
   _this.axios.post('/login',, _this.user)
   .then(resp => {
      _this.loading = false;
      // 设置全局的用户信息
      localStorage.setItem("token", resp.data.token);
      localStorage.setItem("username", resp.data.user.name)
      _this.$router.replace({path: '/home'});
   })
   

注意问题：
1： 开发过程中，访问接口出现跨域问题。lcoalhost:8080 - localhost:10000?
2： 打包部署后js和css等文件404（NGINX添加了项目名）

处理方式 vue.config.js

    module.exports = {
        runtimeCompiler: true,
        // 设置打包文件相对路径-项目名后缀 http://www.ping-w.com/webview/
        publicPath: '/webview/',    
        devServer: {
            port: 8080,  // 知道端口号
            //开发过程中服务跨域问题
            proxy: {
                '/api': { 
                    target: 'http://localhost:10000/vueweb/', //对应自己的接口
                    changeOrigin: true,
                    ws: true,
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            }
        },
    }

创建项目完成！ 示例项目.