前言

全局安装Vue脚手架

安装方式:

bash 复制代码

npm install @vue/cli -g 
# or
cnpm install @vue/cli -g
# or
yarn global add @vue/cli

创建项目：

lua 复制代码

vue create manager-fe

一、前端架构设计

1、环境配置&目录规范

通过vite创建项目

官方文档：cn.vitejs.dev/

vite基于ES module的开发服务器，内置一个node server，不会编译ES6的语法。以前vue2 webpack会编译ES6成ES5，本地开发环境不需要编译，浏览器本身也支持语法，vite处理scss、less转成css，vue解析成render函数。

创建项目（不需要全局安装，本地初始化就行，插件方式安装）：

lua 复制代码

yarn create vite

安装项目所需插件

csharp 复制代码

# 安装项目生产依赖 
yarn add vue-router vuex element-plus axios
# 安装项目开发依赖 
yarn add sass -D

element-plus文档：element-plus.org/#/zh-CN/com...

制定目录结构

manager-fe 复制代码

dist 
node_modules 
public 
src 
api 
assets 
components 
config 
router 
store 
utils 
views 
App.vue 
main.js 
.gitignore 
.env.dev 
.env.test 
.env.prod 
index.html

2、路由封装

路由跳转的三种方式

router-link

ini 复制代码

<router-link to="/login">去登录</router-link>

传统跳转

xml 复制代码

<template> 
    <el-button @click="goHome">回首页</el-button> 
</template> 

<script> 
    export default { 
        name:'login', 
        methods:{ 
            goHome(){ 
                this.$router.push('/welcome') 
            }
       }
    } 
</script>

Composition API跳转

xml 复制代码

<script setup> 
 import { useRouter } from 'vue-router' 
 let router = useRouter() 
 const goHome = ()=>{ 
   router.push('/welcome') 
 }
</script>

3、环境配置

arduino 复制代码

/**
* 环境配置封装
*/
const env = import.meta.env.MODE || 'prod';
const EnvConfig = {
  dev:{
    baseApi:'/api',
    mockApi:'https://www.fastmock.site/mock/api'
  },

  test:{
    baseApi:'//test.futurefe.com/api',
    mockApi:'https://www.fastmock.site/mock/api'
  },

  prod:{
    baseApi:'//futurefe.com/api',
    mockApi:'https://www.fastmock.site/mock/api'
  }
}

export default {
  env,
  mock:false,
  namespace:'manager',
  ...EnvConfig[env]
}

4、request封装

javascript 复制代码

/**
* axios二次封装
*/

import axios from 'axios'
import config from './../config'
import { ElMessage } from 'element-plus'
import router from './../router'
import storage from './storage'

const TOKEN_INVALID = 'Token认证失败，请重新登录'
const NETWORK_ERROR = '网络请求异常，请稍后重试'
  
// 创建axios实例对象，添加全局配置
const service = axios.create({
    baseURL: config.baseApi,
    timeout: 8000
})

// 请求拦截
service.interceptors.request.use((req) => {
    const headers = req.headers;
    const { token = "" } = storage.getItem('userInfo') || {};
    if (!headers.Authorization) headers.Authorization = 'Bearer ' + token;
    return req;
})

// 响应拦截
service.interceptors.response.use((res) => {
    const { code, data, msg } = res.data;
    if (code === 200) {
        return data;
    } else if (code === 500001) {
        ElMessage.error(TOKEN_INVALID)
        setTimeout(() => {
            router.push('/login')

        }, 1500)
        return Promise.reject(TOKEN_INVALID)
    } else {
        ElMessage.error(msg || NETWORK_ERROR)
        return Promise.reject(msg || NETWORK_ERROR)
    }
})

/**
* 请求核心函数
* @param {*} options 请求配置
*/

function request(options) {
    options.method = options.method || 'get'
    if (options.method.toLowerCase() === 'get') {
        options.params = options.data;
    }
    let isMock = config.mock;
    if (typeof options.mock != 'undefined') {
        isMock = options.mock;
    }

    if (config.env === 'prod') {
        service.defaults.baseURL = config.baseApi
    } else {
        service.defaults.baseURL = isMock ? config.mockApi : config.baseApi
    }
    return service(options)
}

['get', 'post', 'put', 'delete', 'patch'].forEach((item) => {
    request[item] = (url, data, options) => {
        return request({
            url,
            data,
            method: item,
            ...options
        })
    }
})
export default request;

5、Storage二次封装

javascript 复制代码

/**
* Storage二次封装
* @author JackBean
*/

import config from './../config'
export default {
    setItem(key, val) {
        let storage = this.getStroage();
        storage[key] = val;
        window.localStorage.setItem(config.namespace, JSON.stringify(storage));
    },

    getItem(key) {
        return this.getStroage()[key]
    },

    getStroage() {
        return JSON.parse(window.localStorage.getItem(config.namespace) || "{}");
    },

    clearItem(key) {
        let storage = this.getStroage()
        delete storage[key]
        window.localStorage.setItem(config.namespace, JSON.stringify(storage));
    },

    clearAll() {
        window.localStorage.clear()
    }
}

二、后端架构

1、Koa2项目初始化

bash 复制代码

# koa2+项目名 
koa2 manager-server

2、mongodb下载配置

执行下面命令，配置文件启动mongodb。

ruby 复制代码

ln -s /Users/****/mongodb/bin/mongo /usr/local/bin/mongo
ln -s /Users/****/mongodb/bin/mongod /usr/local/bin/mongod
mongod --config /Users/****/mongodb/mongo/conf/mongo.conf

3、JWT

数据传输简单、高效
jwt会生成签名，保证传输安全
jwt具有时效性
jwt更高效利用集群做好单点登录

原理

服务器认证后，生成一个json对象，后续通过json进行通信。

数据结构

Header(头部)
Payload(负载)
Signature(签名)

使用方式

/api?token=***
cookie写入token
storage写入token，请求头添加：Authorization:Bearer

Vue3+ElementPlus+Koa2 全栈开发后台系统

前言