【文件增量备份系统】前端项目构建

🎯 导读：本文档记录了使用 Yarn 和 Vite 创建 Vue 项目的步骤，包括解决证书过期问题的方法。文档还介绍了如何安装和配置 Element Plus UI 组件库，以及如何通过 Vue Router 实现前端路由管理。最后，文档讲解了如何整合 Axios 作为 HTTP 客户端来处理前后端的数据交互，并展示了基本的请求封装方法。这些步骤共同构成了搭建一个具备现代化 UI 和高效数据通信功能的 Vue 应用的基础。
🏠️ 项目仓库：数据增量备份系统
📙 项目介绍：【文件增量备份系统】系统功能介绍与开源说明

创建项目

本文使用yarn来创建项目、安装工具包。Yarn 是一个快速、可靠且安全的 JavaScript 包管理器，旨在提高 Node.js 项目依赖安装的速度和一致性。它通过并行化安装、缓存已下载的包以及确保每次安装的一致性来提升开发体验。Yarn 与 npm 兼容，但提供了更快的安装速度和更多的功能。

执行如下命令来创建一个vue项目

yarn create vite [项目名称] --template vue

运行过程如下

dam@wangrunqindeMBP dev % yarn create vite increment-backup-client --template vue
yarn create v1.22.21
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-vite@5.1.0" with binaries:
      - create-vite
      - cva
[##] 2/2
Scaffolding project in /Users/dam/Projects/increment-backup/dev/increment-backup-client...

Done. Now run:

  cd increment-backup-client
  yarn
  yarn dev

✨  Done in 1.76s.

如果发生如下错误Error: certificate has expired，如下图所示：

解决方式：

1. 执行yarn config list查看yarn的配置信息
   
2. 如果发现strict-ssl设置为true，执行yarn config set strict-ssl false将strict-ssl设置为false
   

安装项目依赖

项目文件生成完成之后，打开项目文件，运行如下命令安装项目依赖

dam@wangrunqindeMBP increment-backup-client % sudo npm install

引入element plus组件

Element Plus 是一款基于 Vue 3 的现代化 UI 组件库，它提供了一套丰富且高度可定制的组件，旨在帮助开发者快速构建美观、响应式的 Web 应用程序。Element Plus 继承了 Element UI 的设计理念，同时利用了 Vue 3 的最新特性，如 Composition API 和 Teleport，以实现更高效、更灵活的开发体验。无论是构建企业级应用还是个人项目，Element Plus 都能提供强大的支持和优雅的解决方案。当然Element Plus也是适用于Vue 2的。

下载组件

yarn add element-plus

在main.js中使用组件

这段代码创建了一个使用 Vue 和 Element Plus 的简单应用程序，并将其挂载到页面上的某个元素中。这意味着当这段代码执行完毕后，Vue 应用就会在页面上呈现出来，并且可以使用 Element Plus 提供的各种组件。

import { createApp } from 'vue'
// 引入主键和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

// 使用 createApp 函数创建一个新的 Vue 应用实例
const app = createApp(App)

// 使用 use 方法将 Element Plus 注册到 Vue 应用实例中。这样就可以在整个应用中使用 Element Plus 的所有组件了
app.use(ElementPlus)
app.mount('#app')

测试

在页面上使用Element Plus的组件，如果可以正常显示，说明Element Plus使用成功

组件使用成功

整合路由router

Vue Router 是 Vue.js 官方的路由管理器，它允许你轻松地在单页应用中实现导航和视图切换。Vue Router 提供了一种声明式的方式定义路由规则，能够与 Vue.js 的核心紧密集成，使开发者能够轻松构建复杂的多视图应用。通过配置不同的路径映射到相应的组件，Vue Router 支持嵌套路由、导航守卫、过渡动画等功能，为用户提供流畅的浏览体验。

下载组件

sudo yarn add vue-router@4.1.6

创建路由管理器index.js

// 定义一些路由
import Index from "../views/index.vue";

const routes = [
    { path: '/', component: Index }
]

export default routes;

使用路由

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

import routes from './router/index.js'
import * as VueRouter from 'vue-router';

const app = createApp(App)

const router = VueRouter.createRouter({
    // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHistory(),
    // `routes: routes` 的缩写
    routes, 
})

app.use(router);
app.use(ElementPlus)
app.mount('#app')

App.vue上面使用

<script>
export default {
  name: 'App'
}
</script>

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

测试

引入成功

整合axios

Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 环境中使用。它被设计用于现代 Web 应用，提供了丰富的功能来处理 HTTP 请求，如拦截请求和响应、转换请求数据和响应数据、取消请求等。Axios 使用简单且直观，支持 JSON 数据的自动序列化和反序列化，使得前后端之间的数据交互变得非常方便。此外，Axios 还具有错误抛出机制，可以很好地处理网络错误和其他异常情况，从而帮助开发者构建健壮的应用程序。

下载组件

"axios": "^0.27.2"

工具类axiosRequest.js

import axios from 'axios'
import {ElMessage} from "element-plus";

//获取配置文件 .env.development 的数据
const BASE_URL = "http://localhost:8899";
const REQUEST_TIMEOUT = 5000;

// create an axios instance
const service = axios.create({
    baseURL: BASE_URL, // url = base url + request url
    // withCredentials: true, // send cookies when cross-domain requests
    timeout: REQUEST_TIMEOUT // request timeout
})

// 请求拦截器
service.interceptors.request.use(
    config => {
        return config
    },
    error => {
        console.log(error)
        return Promise.reject(error)
    }
)

// 相应拦截器
service.interceptors.response.use(
    response => {
        const res = response.data;
        if (res.code) {
            console.log("res：" + JSON.stringify(res));
            if (res.code !== '0') {
                ElMessage({
                    message: res.message || '请求出错了',
                    type: 'error',
                    duration: 2 * 1000
                })
                return Promise.reject(new Error(res.message || '请求出错了'))
            } else {
                // return res
                return Promise.resolve(res)
            }
        }else {
            return Promise.reject(new Error(res.message || '请求出错了'))
        }
    },
    error => {
        // alert("error：" + JSON.stringify(error))
        // console.log('err' + error)
        ElMessage({
            message: error.message,
            type: 'error',
            duration: 2 * 1000
        })
        return Promise.reject(error)
    }
)

export default service
export {BASE_URL}

工具类使用

import request from '../utils/axiosRequest.js'

const apiName = '/source'

export default {
    list(data) {
        return request({
            url: `${apiName}/list`,
            method: "post",
            data: data
        })
    }
 }