项目工程.md · 林杨/毕业精讲

# VUE后台系统管理项目

## 1. 后台系统管理项目的权限的问题

1. 什么是后台系统管理项目?

- 后台系统管理项目是指用于管理和控制一个或多个应用程序的后端系统的开发和维护. 这些系统通常负责处理数据存储、用户认证、权限管理、日记记录、性能监控等任务.后台系统管理项目的目标是确保应用程序能够高效、安全的运行,并提供对系统资源的合理分配和监控;

2. 后台系统管理项目分为几种?

1. 用户管理系统: 负责用户注册、登录、权限管理等功能;
   2. 内容管理系统 (CMS): 负责网站内容的创建、编辑、发布和管理;
   3. 订单管理系统: 负责处理订单的生成、支付、发货、退款等流程;
   4. 库存管理系统: 负责商品的入库、出库、库存盘点等功能;
   5. 财务管理系统; 负责财务数据的统计、报表生成、成本核算等功能;

3. 什么是后台管理系统的权限?

1. 概念: 后台管理权限就是根据用户的角色为其分配相应的权限.管理者可以访问所有的权限,而普通用户只可以访问部分的权限功能;

4. 后台管理系统的项目的权限步骤?

1. 用户认证: 这是权限管理的第一步,需要验证用户的身份. 这通常通过用户名和密码进行, 但也可以包括其他形式的身份验证,如电子邮箱地址或者电话号码;
   2. 角色分配: 一旦用户被认证,他们将被分配一个或多个角色,这些角色定义了用户可以执行的操作和访问的资源;管理者和访客的权限就是一个很大的对比;
   3. 权限检查: 在用户尝试执行操作或访问资源时,系统将检查用户的角色以确定他们是否有权执行该操作,如果没有该权限,一般都会作出一些提示或者报错;
   4. 动态权限管理: 在某些情况下,可能需要在运行时更改用户的权限,就是一个用户的角色发送变化的时候,相对应的权限也应该实时的更新;

5. 菜单权限

1. 拆分路由
      - 静态路由: 就是不管谁都可以拥有的路由 login | home | 404
      - 异步路由: 就是根据用户权限信息所能获取到的动态路由;
      - 任意路由: any
   2. 按钮的权限:
      - 一般按钮的权限都是自定义指令 : v-has

6. 路由鉴权
   1. 身份验证: 确保用户是他们本人声称的,通常就是通过用户名和密码进行验证;
   2. 授权: 确定用户是否具有访问特定资源的权限,例如查看、编辑或删除数据;
   3. 路由保护: 根据用户的角色和权限,限制对特定的路由的访问;

## 2. 项目接口的替换

1. 第一步: axios 的二次封装

1. axios 简单来说就是一个基于 Promise 的 HTTP 库,可以用于浏览器和 node.js 环境,它允许你发送 HTTP 请求并处理响应;

2. 支持 Promise API: 基于 Promise,所以对于 axios 的请求可以使用 then() 和 catch() 方法来处理成功和失败的情况;

3. 拦截请求和响应: Axios 允许你在请求或者响应被处理之前进行拦截,以便添加自定义处理逻辑;

4. 转换请求和响应数据: Axios 可以自动转换 JSON 数据,同时也支持自定义转换函数;

5. axios 的二次封装:一般封装在 utils 文件中,

```js
          //引入axios
          import axios, { type AxiosResponse } from 'axios';
          import type { AxiosRequestConfig, AxiosRequestHeaders } from 'axios';
          //消息提示框
          import { ElMessage, ElMessageBox } from 'element-plus';
          //引入pinia大仓库
          import pinia from '@/stores/index';
          //引入用户相关的小仓库
          import { useUserInfoStore } from '../stores/userInfo';
          /*定义response对象的data接口*/
          interface ResponseData<T> {
          code: number;
          data: T;
          message: string;
          }

//创建一个axios实例
          const service = axios.create({
          baseURL: import.meta.env.VITE_API_URL,//基础路径  /app-dev
          timeout: 5000,//超时的时间5S
          });

// 添加请求拦截器
          service.interceptors.request.use((config: AxiosRequestConfig) => {
          //获取用户相关的仓库,请求头携带token
          //获取用户相关的仓库
          const userStore = useUserInfoStore(pinia);
          //仓库有token请求头携带
          if (userStore.token) {
          //ts类型
          (config.headers as AxiosRequestHeaders).token = userStore.token;
          }
          return config;
          });

// 添加响应拦截器
          service.interceptors.response.use(async (response: AxiosResponse<ResponseData<any>>) => {
          // 对响应数据做点什么
          const res = response.data;
          if (res.code !== 20000 && res.code !== 200) {
          // 统一的错误提示
          ElMessage({
          message: (typeof res.data == 'string' && res.data) || res.message || 'Error',
          type: 'error',
          duration: 5 * 1000
          })

// 录`token` 过期或者账号已在别处登
          if (response.status === 401) {
          const storeUserInfo = useUserInfoStore(pinia)
          await storeUserInfo.reset()
          window.location.href = '/' // 去登录页
          console.log('响应式')
          ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
              .then(() => { })
              .catch(() => { })
          }
          return Promise.reject(service.interceptors.response);
          } else {
          return res.data; /* 返回成功响应数据中的data属性数据 */
          }
          },
          (error) => {
          // 对响应错误做点什么
          if (error.message.indexOf('timeout') != -1) {
          ElMessage.error('网络超时');
          } else if (error.message == 'Network Error') {
          ElMessage.error('网络连接错误');
          } else {
          if (error.response.data) ElMessage.error(error.response.statusText);
          else ElMessage.error('接口路径找不到');
          }
          return Promise.reject(error);
          }
          );
          export default service;
      ```

2. 第二步: 书写 API

3. 第三步: 替换真实的接口

4. 解决企业真实接口代理跨域问题

1. 什么是跨域?

- 一般是指当一个网页的脚本视图访问另一个域名下的资源时,由于浏览器的同源策略限制时无法访问的,同源策略是一种安全机制,用于防止恶意网站获取用户信息,网页的协议、域名或者端口与另一个网页不同时,就会发生跨域;

2. 跨域通常会出现的场景:

- 前端页面通过 AJAX 请求后端接口数据;
      - 前端页面引用其他域名下的 CSS、JavaScript 文件;
      - 前端页面通过`<img>、<script>`等标签加载其他域名下的资源;

3. 解决跨域的办法:

1. JSONP (JSON with Padding) : JSONP 是一种跨域数据交互的方法,他的基本思想是在网页上动态添加一个`<script>`标签,通过这个标签可以请求不同域名下的资源,服务器端需要返回一个函数调用,函数名由客户端决定;
      2. CORS : CORS 时钟跨域资源共享标准,它允许服务器在响应头中添加一些特定的字段,来告诉浏览器允许哪些域名、哪些 HTTP 方法、哪些头部字段等进行跨域访问;
         - 由服务器端设置响应头： Access-Control-Allow-Origin : * | 目标地址
         - 由兼容性问题， IE9以下不支持
         <https://cn.vitejs.dev/config/server-options.html#server-proxy>;

3. 使用代理服务器: 在客户端和目标服务器之间建立一个代理服务器,让代理服务器去请求目标服务器的数据,然后将数据返回给客户端,这样客户端与代理服务器之间就没有跨域问题了;
         tip:vite.config.ts

```ts
            //代理跨域
            server: 
            proxy: {
               '/app-dev': {
               //获取数据服务器地址
               target: 'http://gmall-h5-api.atguigu.cn',
               //是否代理跨域
               changeOrigin: true,
               //路径重写
               rewrite: (path) => path.replace(/^\/app-dev/, ''),
                  },
               }
               
         ```

## 3. 表单校验

1. 表单校验是在用户提交表单数据之前,对用户输入的数据进行验证的过程,这通常包括检查数据的格式、长度、范围等,以确保数据满足特定的要求;

2. 简单的示例代码:

```html
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>表单校验示例</title>
        </head>
        <body>
    <form id="myForm">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required>
        <br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">提交</button>
    </form>
    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

var username = document.getElementById('username').value;
            var email = document.getElementById('email').value;
            var password = document.getElementById('password').value;

// 必填项校验
            if (!username || !email || !password) {
                alert('请填写所有必填项');
                return;
            }

// 格式校验
            var emailRegex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
            if (!emailRegex.test(email)) {
                alert('请输入有效的邮箱地址');
                return;
            }

// 密码强度校验
            var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
            if (!passwordRegex.test(password)) {
                alert('密码必须包含至少一个大写字母、一个小写字母、一个数字和一个特殊字符，且长度至少为8位');
                return;
            }

// 如果通过所有校验，提交表单
            this.submit();
        });
    </script>
    </body>
    </html>
    ```

## 4. 如何修改第三方UI组件库以及vue当中的scoped

### 4.1 修改第三方UI组件库样式的方法

1. 使用内联样式（Inline Styles）：直接在HTML元素上添加style属性，覆盖组件库的默认样式。
2. 使用CSS类名（CSS Class Names）：为需要修改样式的元素添加自定义的CSS类名，然后在CSS文件中编写相应的样式规则。
3. 使用CSS选择器（CSS Selectors）：通过更具体的CSS选择器，覆盖组件库的默认样式
4. 使用！important（Important）：在CSS规则中添加！important，使该规则具有更高的优先级，覆盖其他样式。
5. 使用：:v-deep伪元素（Vue.js中的深度选择器）：在Vue.js项目中，可以使用：:v-deep伪元素来覆盖第三方UI组件库的样式。

### 4.2 vue当中的scoped

1. scoped: 在vue.js当中,scoped属性是用于限制Css样式的作用范围,当一个元素被标记为scoped时,它的样式只会应用到该元素及其子元素,而不会影响其他没有使用scoped的元素,简单来说就是可以实现局部样式;

2. 底层原理: Vue.js通过在每个组件的样式标签上添加一个特殊的属性（例如data-v-hash）来实现scoped功能。这个属性的值是一个基于组件模板内容的哈希值。当浏览器解析并渲染CSS规则时，只有具有相同属性和值的元素才会应用相应的样式。这样，即使有相同的类名或选择器，它们也不会相互影响。

林杨/毕业精讲

简介

发行版

贡献者

近期动态

林杨/毕业精讲 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

林杨/毕业精讲