从零搭建Vue3+TypeScript+Node.js后台管理系统（十七）

前端

2023-10-10 07:16:54

在构建现代化的网络应用程序时，Vue 3、TypeScript 和 Node.js 构成了一个强大的技术栈，提供了一系列优势，包括：

响应式和高效的用户界面： Vue 3 的响应式系统可以自动更新 UI，使应用程序对用户交互高度响应。
类型安全性： TypeScript 的类型系统可防止错误并简化代码维护，确保应用程序的鲁棒性和可维护性。
服务器端渲染： Node.js 允许在服务器端渲染应用程序，从而实现更快的初始加载时间和更好的 SEO。

在本系列的第十七篇文章中，我们将重点介绍如何将 Vue 3、TypeScript 和 Node.js 结合起来，构建一个功能齐全的后端管理系统。

接口文档、代理跨域和 Axios 请求库

在开始之前，我们已经完成了一些基本工作，包括：

创建了详细的接口文档，定义了后端 API 的所有端点。
设置了代理以处理跨域请求。
封装了一个 Axios 请求库，用于与后端 API 交互。

前端应用架构

我们的前端应用程序将遵循 Model-View-ViewModel (MVVM) 架构模式，将数据模型与 UI 视图和可观察的视图模型分开。我们将使用 Vuex 状态管理库来管理应用程序状态。

后端 API 设计

后端 API 将使用 Express.js 框架构建，并使用 MongoDB 作为数据库。我们将在上一篇文章中创建的 API 端点基础上进行构建，添加更多功能和改进。

部署和 CI/CD

我们将使用 Docker 来部署我们的应用程序，并设置一个 CI/CD 管道来自动化构建、测试和部署过程。

动手实践

接下来，让我们深入了解如何将 Vue 3、TypeScript 和 Node.js 结合起来，逐步构建我们的后台管理系统。

创建 Vue 3 应用程序

首先，使用 Vue CLI 创建一个新的 Vue 3 应用程序：

vue create my-admin-app --template vue-ts

安装 TypeScript

接下来，安装 TypeScript：

npm install -D typescript @vue/cli-plugin-typescript

配置 TypeScript

在 vue.config.js 文件中，配置 TypeScript 选项：

module.exports = {
  configureWebpack: {
    resolve: {
      extensions: ['.ts', '.js'],
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
  },
};

封装 Axios 请求库

在 src/utils 文件夹中，创建 request.ts 文件，并封装 Axios 请求库：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 10000,
});

export default instance;

创建 Vuex 状态管理库

在 src/store 文件夹中，创建 store.ts 文件，并定义 Vuex 状态管理库：

import Vuex from 'vuex';
import Vue from 'vue';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    // 定义应用程序状态
  },
  mutations: {
    // 定义状态变更方法
  },
  actions: {
    // 定义异步操作
  },
  getters: {
    // 定义状态计算属性
  },
});

export default store;

后端 API 开发

在 server 文件夹中，创建 app.js 文件，并使用 Express.js 创建后端 API：

const express = require('express');
const mongoose = require('mongoose');

const app = express();
app.use(express.json());

mongoose.connect('mongodb://localhost:27017/my-admin-app', { useNewUrlParser: true, useUnifiedTopology: true });

// 定义 API 路由

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

部署和 CI/CD

在 Dockerfile 文件中，定义 Docker 镜像：

FROM node:16

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

CMD ["npm", "start"]

在 .github/workflows 文件夹中，创建 ci-cd.yml 文件，定义 CI/CD 管道：

name: CI/CD

on:
  push:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run build
  deploy:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: docker build -t my-admin-app .
      - run: docker push ghcr.io/my-username/my-admin-app

总结

通过将 Vue 3、TypeScript 和 Node.js 结合起来，我们构建了一个功能齐全的后端管理系统，具有响应式 UI、类型安全和服务器端渲染。我们还探索了 MVVM 架构模式、Vuex 状态管理和 Docker 部署。通过遵循本系列文章，你可以深入了解如何利用这些强大的技术构建自己的企业级应用程序。