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

前言

全局安装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
相关推荐
恋猫de小郭几秒前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
用户8356290780519 分钟前
从手动编辑到代码生成:Python 助你高效创建 Word 文档
后端·python
一枚前端小能手21 分钟前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码21 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
Undoom22 分钟前
大模型选型“炼狱”与终结:一份来自普通开发者的AI Ping深度评测报告
后端
用户40993225021223 分钟前
FastAPI的CI流水线怎么自动测端点,还能让Allure报告美到犯规?
后端·ai编程·trae
双向3326 分钟前
Docker 镜像瘦身实战:从 1.2GB 压缩到 200MB 的优化过程
后端
Cyan_RA928 分钟前
计算机网络面试题 — TCP连接如何确保可靠性?
前端·后端·面试
谢尔登28 分钟前
【CSS】层叠上下文和z-index
前端·css
鹏多多29 分钟前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript