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

最新推荐文章于 2024-07-30 13:51:05 发布

A.Wang

最新推荐文章于 2024-07-30 13:51:05 发布

阅读量480

点赞数

本文链接：https://blog.csdn.net/wangsdsdfds/article/details/103034190

版权

服务端接口技术

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

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);

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信息
 //整理数据
 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;

main.ts 引入

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

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': ''
                    }
                }
            }
        },
    }

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