# harmonyos-2401-vue-admin **Repository Path**: mobiletrain/harmonyos-2401-vue-admin ## Basic Information - **Project Name**: harmonyos-2401-vue-admin - **Description**: 利用 vue 技术栈实现管理系统功能 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2024-09-09 - **Last Updated**: 2024-09-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # PC 项目案例 ## 电商管理系统 [在线开源商城系统](https://www.likeshop.cn/product_demo_center) ## 实现页面 - 登录 - 主界面 - 权限管理: 管理员 / 角色 / 菜单 - 仪表盘: eCharts - 富文本编辑器、地图 - ...... ## 接口 [接口地址](http://162.14.108.31:5945/swagger) ## 技术栈 vite + vue.js + vue-router + pinia + typescript + axios + element-plus + echarts + ...... ## 从0开始搭建项目 1. 利用 vite 创建项目，搭建最基本的结构 ```bash $ npm create vite pc-demo -- --template vue-ts ``` 2. 创建基本的常用目录结构 略 3. 工程化使用到的各种工具配置 - eslint: 用于进行 JS 代码检查 - stylelint: 用于进行 css/sass/less 等代码检查 - commitlint: 进行版本库代码检查 - prettier: 进行代码格式化 - husky: 用于进行 git hook 钩子管理 - lint-staged: 用于进行 git 暂存区中代码检查的工具 - ...... 4. 安装 normalize.css 统一进行默认样式初始化 ```bash $ npm i normalize.css ``` 5. 引入路由 vue-router ```bash $ npm i vue-router ``` `src/router/index.ts` 创建路由对象: ```typescript import { createRouter, createWebHistory } from 'vue-router' import routes from './routes' const router = createRouter({ history: createWebHistory(), routes, }) export default router ``` `src/main.ts` 中引入并使用路由: ```typescript import { createApp } from 'vue' import 'normalize.css' import router from './router' import App from './App.vue' createApp(App) .use(router) .mount('#app') ``` 6. 引入状态管理库的使用: pinia [官网](https://pinia.vuejs.org/zh/) > 概念 > > - store: 仓库，用于集中式管理应用中的状态 > - state: 状态，各组件需要全局共享的状态数据 > - action: 方法，可用于更新状态数据（同步异步都可以） > - getter: store 中的计算属性 使用 - 安装 ```bash $ npm i pinia ``` - 定义根实例 在 'src/store/index.ts' 中: ```typescript import { createPinia } from 'pinia' const store = createPinia() export default store ``` 在 'src/main.ts' 中: ```typescript import { createApp } from 'vue' import 'normalize.css' import router from './router' import store from './store' import App from './App.vue' createApp(App) .use(router) .use(store) .mount('#app') ``` 7. 引入 UI 组件库 安装: ```bash $ npm i element-plus ``` 配置自动按需引入，先安装插件: ```bash $ npm install -D unplugin-vue-components unplugin-auto-import ``` 再配置 `vite.config.ts`: ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], resolve: { alias: { '@': path.join(__dirname, './src'), // 在引入资源的路径中，使用 @ 别名开头，代表的是项目根目录中的 src 目录的绝对路径 }, }, }) ``` 国际化配置与主题定制处理 8. 网络请求: axios 二次封装 安装: ```bash $ npm i axios ``` 在 `src/utils/request.ts` 中: ```typescript import axios from 'axios' // 创建实例 const service = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000, }) // 请求拦截 service.interceptors.request.use( config => { // 请求头中添加 token 的传递 const token = '' if (token) { config.headers.Authorization = `Bearer ${token}` } return config } ) // 响应拦截 service.interceptors.response.use( response => { // status 是 http 状态码 // data 是后端响应返回的数据，规范格式为 { code, data, message } const {status, data: responseData} = response if (status >= 200 && status < 300) { // 从响应返回的数据中解构使用的值 const {code, data, message} = responseData if (code === 200) { return data } return Promise.reject(new Error(message)) } } ) export default service ``` 9. 搭建整体布局框架结构 在 element-plus 中利用 Container 布局容器组件，配合 Menu 等一起实现整体布局 ## 加解密 算法与密钥 算法通常是利用数学手段，经过一系列随机运算最后将原始明文的数据转换为密文数据。 密钥就是在转换过程中使用到的一个随机序列。 加密: 从明文向密文转换的过程 解密: 从密文向明文还原的过程 分类: - 对称加密: 加解密所使用到的密钥是相同的。经典算法: AES、DES - 非对称加密: 加解密所使用到的密钥不同。经典算法: RSA - 单向编码算法(hash): 即可以理解为只能加密不能解密。经典算法: MD5、SHA npm 包资源: - [crypto-js](https://www.npmjs.com/package/crypto-js) ## 数据可视化 - [ECharts](https://echarts.apache.org/zh/index.html) - [highcharts](https://www.highcharts.com/] - [Three.js](https://threejs.org/) - [D3](https://d3js.org/) - [antv](https://antv.antgroup.com/) - [Ant Design Charts](https://ant-design-charts.antgroup.com/) - ......... ### ECharts #### 安装 ```bash $ npm install echarts --save ``` #### 准备一个定义了宽高的 DOM 容器 ```html
``` 目的: 是为渲染 echarts 图表提供容器 #### 创建一个 echarts 实例 ```js import * as echarts from 'echarts' // 挂载后，创建 EChart 实例 onMounted(() => { // 初始化 echarts 实例 const myChart = echarts.init(barChart.value) }) ``` #### 配置图表数据 ```js const option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] } myChart.setOption(option) ``` ## 富文本编辑器 富文本编辑器是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂html用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。 - [Tinymce](https://www.tiny.cloud/) - [wangEditor](https://www.wangeditor.com/) - [uEditor](https://github.com/fex-team/ueditor) - [kindeditor](https://github.com/fex-team/kindeditor) - [CKEditor](https://ckeditor.com/) - ...... ### WangEditor #### 安装 ```bash $ npm i wangeditor --save ``` #### 准备一个DOM容器，用于放置编辑器 ```html
``` #### 创建并使用 ```js import Editor from 'wangeditor' onMounted(() => { // 创建编辑器实例 editor = new Editor('#editor') editor.config.height = 600 editor.config.zIndex = -1 // 挂载到页面 editor.create() }) // 获取富文本框中的内容数据 const getContent = () => { console.log('内容:', editor.txt.html()) } ``` ## 地图API 到对应的地图开放平台上注册账号 注册账号并认证后，在控制台上创建应用，获取密钥和应用ID 查找示例，c+v [示例中心](https://lbs.baidu.com/jsdemo.htm) ## Socket 通信 b/s 与 c/s 浏览器/服务器 与 客户端/服务器 这是如何访问服务端资源的模式，b 是通过浏览器访问，c 是通过客户端访问 现目前所定的 web 端应用，就是 b/s 架构的。 http、https 协议，在访问服务端资源时，是通过请求-响应的方式进行交互的。这种交互使用到的协议是单向的（即客户端向服务端发送请求，服务端向客户端发送响应，而服务端不会主动向客户端发送数据）。 如果需要客户端能够向服务端发送数据，服务端也能主动向客户端发送数据，则需要使用到 Socket（套接字）通信。 Socket 是一种双向的，全双工的，全连接的，基于 TCP 协议的通信协议。 TCP 与 UDP 的区别: - TCP 是面向连接的(保证数据传输的可靠性)，UDP 是无连接的(不保证数据传输的可靠性)。 三次握手与四次挥手: - 三次握手: 客户端向服务端发起连接请求，服务端接收到请求后，向客户端发送响应，客户端接收到响应后，向服务端发送确认信息，服务端接收到确认信息后，完成连接。 - 四次挥手: 客户端向服务端发起断开连接请求，服务端接收到请求后，向客户端发送确认信息，客户端接收到确认信息后，向服务端发送确认信息，服务端接收到确认信息后，完成断开连接。 > 服务端要做的事有这些： > > Step 1：创建服务端 Socket 对象，绑定监听的端口 > > Step 2：调用相应方法监听客户端的请求 > > Step 3：连接建立后，通过输入流读取客户端发送的请求信息 > > Step 4：通过输出流向客户端发送响应信息 > > Step 5：关闭相关资源 > 客户端要做的事有这些： > > Step 1：创建Socket对象，指明需要链接的服务器的地址和端号 > > Step 2：链接建立后，通过输出流向服务器发送请求信息 > > Step 3：通过输入流获取服务器响应的信息 > > Step 4：关闭相关资源 Web 开发时，浏览器端可以使用 `WebSocket` 来实现与服务端的连接并进行双向通信。 [WebSocket](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket) 1. 创建一个 WebSocket 实例 ```JavaScript const ws = new WebSocket('ws://localhost:8080') ``` 2. 向服务端发送消息 ```js ws.send('hello') ``` 3. 接收服务端发送的消息 ```js ws.onmessage = (e) => { e.data // 服务端发送的消息 } ``` 4. 关闭连接 ```js ws.close() ``` ## 用户登录及权限控制 权限控制是指在用户登录成功后，根据用户的角色和权限，对用户进行访问控制，从而保护用户数据的安全。通常是由后端来维护，向前端提供登录用户其对应角色所能访问到的菜单数据，前端根据菜单数据动态生成访问的路由与菜单信息。 前端会在 store 中保存登录成功的用户信息，包括用户基本信息、角色、权限以及所能访问到的菜单和路由信息等。 在菜单组件中，根据登录成功用户的菜单路由信息，动态生成侧边导航菜单数据（会使用到递归，因为菜单是树形结构，可以有多级） 还需要在全局前置守卫中，拦截当前登录用户所能访问到的页面资源。当前用户所能访问到的路由信息，通过调用 `router.addRoute()` 方法，将路由信息添加到路由表中，从而实现路由访问控制。也就是不需要在路由表中静态注册这些路由，只需要在当前登录用户所能访问到的路由表中，添加这些路由即可（为了避免无权限的用户，在知道某页面的 url 的情况下直接地址栏输入访问）。 # Vue 3 + TypeScript + Vite This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `