springboot+vue+elementui实现后台管理系统模板

SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（一）：搭建基本环境：https://www.cnblogs.com/l-y-h/p/12930895.html
SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（二）：引入 element-ui 定义基本页面显示：https://www.cnblogs.com/l-y-h/p/12935300.html

https://github.com/lyh-man/admin-vue-template.git

【使用 npm 安装：】
    npm install js-cookie

【在项目中引入 js-cookie：】
// 引入 token，此处直接引入，也可以在 main.js 中全局引入
import Cookies from ‘js-cookie‘

// 设置 token 存储的 key
const TokenKey = ‘Admin-Token‘

// 获取 token
export function getToken() {
  return Cookies.get(TokenKey)
}

// 设置 token
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

// 移除 token
export function removeToken() {
  return Cookies.remove(TokenKey)
}

【vue 引入 axios 并简单使用 参考地址：】
    https://www.cnblogs.com/l-y-h/p/11656129.html

【npm 安装】
    npm install axios

import Vue from ‘vue‘
import {
    getToken,
    removeToken
} from ‘@/http/auth.js‘
import router from ‘@/router‘
import {
    Message
} from ‘element-ui‘
import axios from ‘axios‘

// 创建 axios 实例
const http = axios.create({
    // 统一 url 配置，定义访问前缀 baseURL
    baseURL: ‘/api‘,
    // 定义请求超时时间
    timeout: 10000,
    // 请求带上 cookie
    withCredentials: true,
    // 定义消息头
    headers: {
        ‘Content-Type‘: ‘application/json; charset=utf-8‘
    }
})

// 定义请求拦截器
http.interceptors.request.use(
    config => {
        // 让每个请求携带 token
        config.headers[‘Admin-Token‘] = getToken()
        return config
    },
    error => {
        Promise.reject(error)
    }
)

// 定义响应拦截器
http.interceptors.response.use(
    response => {
        const res = response.data
        // 当 token 失效时，清除 cookie 保存的 token 值，并跳转到登陆界面
        if (res && res.code === 401) {
            removeToken()
            Message({
                message: res.message,
                type: ‘error‘,
                duration: 5000
            })
            router.push({
                name: ‘Login‘
            })
        }
        // 未找到页面时，跳转到 404 页面
        if (res && res.code === 404) {
            router.push({
                name: ‘404‘
            })
        }
        return response
    },
    error => {
        return Promise.reject(error)
    }
)

export default http

import http from ‘@/http/httpRequest.js‘

// 全局挂载 http（axios）,使用的时候直接使用 this.$http 即可。
Vue.prototype.$http=http

package com.lyh.template.back.controller;

import com.lyh.template.back.util.Result;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/auth")
@CrossOrigin
public class AuthController {
    @RequestMapping("/token")
    public Result getToken() {
        return Result.ok().data("token", "admin");
    }
}

module.exports = {
    lintOnSave: false,
    devServer: {
        port: process.env.NODE_ENV == "production" ? 8000 : 9000,
        proxy: {
            ‘/api‘: {
                target: process.env.VUE_APP_URL,
                // 允许跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    ‘^/api‘: ‘‘
                }
            }
        }
    }
}

methods: {
    // 提交表单
    dataFormSubmit() {
    // TODO：登录代码逻辑待完善
    // alert("登录代码逻辑未完善")
    this.$http({
        url: ‘/auth/token‘,
        method: ‘get‘
    }).then(response => {
        console.log(response)
        this.$router.replace({name: ‘Home‘})
    })
    }
}

【vue关于mock的简单使用 参考地址：】
    https://www.cnblogs.com/l-y-h/p/11691110.html

【npm 安装 mock：】
    npm install mockjs

import Mock from ‘mockjs‘
import * as login from ‘./modules/login.js‘

// 可以通过 isOpen 参数设置是否拦截整个模块的 mock 功能
fnCreate(login, true)

/**
 * 创建mock模拟数据
 * @param {*} mod 模块
 * @param {*} isOpen 是否开启?
 */
function fnCreate(mod, isOpen = true) {
    if (isOpen) {
        for (var key in mod) {
            ((res) => {
                if (res.isOpen !== false) {
                    Mock.mock(new RegExp(res.url), res.type, (opts) => {
                        opts[‘data‘] = opts.body ? JSON.parse(opts.body) : null
                        delete opts.body
                        console.log(‘
‘)
                        console.log(‘%cmock拦截, 请求: ‘, ‘color:blue‘, opts)
                        console.log(‘%cmock拦截, 响应: ‘, ‘color:blue‘, res.data)
                        return res.data
                    })
                }
            })(mod[key]() || {})
        }
    }
}

import Mock from ‘mockjs‘

// 登录
export function getToken() {
    return {
        // isOpen: false,
        url: ‘api/auth/token‘,
        type: ‘get‘,
        data: {
            ‘msg‘: ‘success‘,
            ‘code‘: 0,
            ‘expire‘: Mock.Random.natural(60 * 60 * 1, 60 * 60 * 12),
            ‘token‘: Mock.Random.string(‘abcdefghijklmnopqrstuvwxyz0123456789‘, 32)
        }
    }
}

// 非生产环境, 适配mockjs模拟数据
if (process.env.NODE_ENV !== ‘production‘) {
    require(‘@/mock‘)
}