SpringBoot + Vue 后台管理系统(一):创建项目

服务端接口技术

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

前端技术框架

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

服务接口

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


SpringBoot + Vue 后台管理系统(一):创建项目_第1张图片
项目文档结构图
  • domain项目主要就是实体和数据操作层
    主要就是配置数据源等信息。
  • server项目业务服务层
  • vueweb项目控制层
    主要shiro的配置
    参考: SpringBoot 集成Shiro 注:数据操作层JPA换成MyBatis-Plus。

前端项目搭建

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

SpringBoot + Vue 后台管理系统(一):创建项目_第2张图片
文档结构

编辑器使用的是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);
  1. Login.vue 使用
SpringBoot + Vue 后台管理系统(一):创建项目_第3张图片
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);
  1. 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': ''
                    }
                }
            }
        },
    }

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

你可能感兴趣的:(SpringBoot + Vue 后台管理系统(一):创建项目)