持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

后台项目 Express-Mysql-Vue3-Ts-Pinia 项目搭建

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

介绍

项目技术栈

前端： Vue3、TS、Pinia、ElementPlus
后端：Express
数据库：Mysql

项目功能

目前准备先开发这几个功能

用户注册，用户登录

涉及 登录时 MD5 加密，token 身份验证，动态路由
文章
- 查看文章列表，查看文章详情，文章是否可读，增加文章，删除文章，修改文章，搜索文章
  
  主要是涉及 table 表格 及表格中每行数据的点击操作。

虽然看着功能不太多，但是涉及的知识点范围还是蛮广的。

先 牛刀小试 😄

准备开车 🚂

项目搭建

后端

后端 Express 的项目结构，其实在之前的学习中，已经搭建好了。

这里再说一下，目录结构

│  app.js             // 主入口文件
│  package.json
│  README.md
│
├─config
│      config.default.js  // 一些基础配置
│
├─controller          // 控制器
│  │  index.js        // 主要是导出 所有的请求处理逻辑
│  │
│  ├─init             // 初始化建表的操作
│  │      index.js    // 处理请求逻辑
│  │      sql.js      // sql 语句
│  │
│  ├─temp             // 模板文件
│  │      index.js
│  │      sql.js
│  │
│  └─user
│          index.js
│          sql.js
│
├─middleware          // 错误处理中间件
│      errorMiddle.js
│      errorNotExist.js
│
├─model               // mysql 数据库 的配置
│      index.js
│
└─router              // 访问过来的路由
    │  index.js       // 导出 所有的路由
    │
    ├─init
    │      index.js
    │
    ├─temp            // 模板文件
    │      index.js
    │
    └─user
           index.js

上面一些文件内容，均在之前的文章中有体现，这里我抽出来，主要是下面这几篇

前端

这里快速说一下，通过vite 安装 vue3

npm create vite@latest

安装 axios 、 vue-router 、pinia、 element-plus

npm i axios vue-router pinia element-plus

安装 sass 和 sass-loader

npm i sass sass-loader --save-dev

解决跨域

由于我们的后端项目地址为 http://localhost:8099/
而前端项目地址为 http://localhost:3000/

所以存在跨域

这里通过配置 vite.config.js 来解决跨域，配置主要代码如下

import vue from '@vitejs/plugin-vue'
const path = require('path')

export default {
  base: '/',
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  plugins: [
    vue()
  ],
  server: {
    open: '/',
    proxy: {
      '/api': {
        target: 'http://localhost:8099',
        changeOrigin: true // 确定代理
      }
    }
  }
}

前端的项目目录为

至此前后端项目准备工作已完毕🎉，后续加油把项目做出来。

会有不足，欢迎提出指正🙋‍♂️

后台项目 Express-Mysql-Vue3-TS-Pinia 项目搭建

后台项目 Express-Mysql-Vue3-Ts-Pinia 项目搭建

引言

介绍

项目技术栈

项目功能

项目搭建

后端

前端

解决跨域

总结