Vue3+ElementPlus+Koa2 全栈开发后台系统
9 18
'第1章 项目规划/1-1.mp4'
Vue3+ElementPlus+Koa2全栈开发后台系统@河畔一角
前端Vue3+ElementPlus后台Koa2+MongoDB
如何构建通用型的后台管理系统如何搭建完备的前后台系统架构
掌握开发工作技巧
开发概述全栈后台管理系统
架构设计菜单按钮权限编程技巧JWT认证审批流日志规范常规CRUD数据库读写模块化/组件化
包括的技术栈Vite2.0ElementPlusVueCli4.5Koa2/Mongo4.4Vue3全家桶
系统模块用户登录系统首页用户管理菜单管理角色管理部门管理休假申请待我审批
核心技术架构设计Vite2.0Vue3全家桶Koa2log4jsaxios封装模块/组件化递归菜单Mongo4.4JWT审批流菜单权限开发脚手架LowCode
权限RBAC (Role-Based Access Control)用户角色权限
审批流环节角色节点场景必要信息通知
-base-scripter tooler—iframe–pro-sercial + vh
课程目标介绍第一章项目规划第二章前端架构设计第三章Koa架构设计第四章用户登录前后台实现
第五章 前台首页实现第六章JWT方案讲解第七章用户管理前后端实现
第八章菜单模块前后端实现第十二章休假申请前后端实现第十三章待我审批前后端实现第九章角色管理前后端实现第十章部门管理前后端实现第十四章造轮子第十一章工作流设计
plaint place luosding
第十五章课程总结
学会使用Vue3全家桶开发后台系统学会前后端项目架构搭建学会组件化、模块化开发、工具函数封装
学会JWT认证方案、审批流业务、后台日志规范学会Koa2+Mongo技术栈开发环境配置、数据Mock、接口联调.
课程目标介绍第一章项目规划·第一节：项目开发流程·第二节：如何理解通用后台·第三节：本项目需求介绍·第四节：Vue3直通车
项目开发流程团队组成&分工项目开发整体流程
项目开发流程团队组成&分工产品前端后端测试Android/lOSUED运维运营算法大数据
项目开发流程开发流程需求开发测试上线回顾
项目开发流程
开发流程
需求：需求调研、需求设计、需求评审、用例评审
开发：接口设计、接口评审、前后端开发、CR、自测
测试：Bug修复、功能优化、需求调整、遗漏功能开发
上线：预发验证、灰度测试、checklist、权限配置、版本回退
回顾：事故复盘、问题总结、数据总览
[讨论题]你了解到的开发流程都有哪些？
不同体量的公司流程往往不同，团队配比也不同，你所在的公司，开发流程都有哪些？
1.产品这个角色重不重要？
2.前端通常跟谁对接？
关键提炼：
1.需求调研、概要设计是必须的吗？
2.开发完后一定要做CodeReview吗？
3.开发完成后。前端自测有没有必要？
4.前端都要跟哪些团队做对接？
如何理解通用后台Vue3ElementPlusNode/Koa2Mongoimpoc
如何理解通用后台·何为通用?·通用模块和通用后台有什么区别?
如何理解通用后台AntDElementMintVantWeUIVueReactAngularJquerycookieswiperlodashUnderscoreVue-AdminAntd-ProEgg
如何理解通用后台·掌握后台开发的共性·开发通用模块·开发通用架构·掌握常用技能、开发技巧、语法
如何理解通用后台Vue3全家桶全栈标准前后端架构ElementPlusRBAC权限审批流动态菜单CRUDJWT
需求介绍开发流程需求开发测试上线回顾
需求介绍·需求调研·需求设计·需求评审（交互评审、技术评审）·工期评估（开发)
需求介绍·后台管理系统・技术栈选型（Vue3全家桶+Node+Mongo)·技术评审：权限、审批流·交互评审：统一页面结构
活动礼包功能首页礼包入口、礼包弹窗Ul交互开发、业务逻辑功能开发H5界面优化/统计上报UI层优化(模块调整/进度/中奖信息等）、抽奖逻辑调整集碎片v1.1自测自测、UI走查礼包领取、抽奖、首页配置接口联调合计
Vue3直通车Vue-Router@4.0Vue@3.0Vuex@4.0
Vue3直通车设计目标·更小·更快·加强API设计一致性·加强TypeScript支持·提高自身可维护性·开发更多底层功能00:02:05
Vue3直通车更小·全局APl和内置组件/功能支持tree-shaking·核心代码尺寸控制在10kb gzipped 上下
Vue3直通车更快·基于Proxy的变动侦测，性能整体优于getter/ setter・Virtual DOM重构
VDOM重构·传统VDOMDi算法对比的颗粒度是组件
Vue3直通车VDOM重构·单个组件内，需要遍历整个DOM树
注：实际开发中，大量的节点都是静态节点
VDOM重构・1000个v-for循环·三层嵌套-12个Dom节点·2个动态class绑定·1个动态文字绑定、1个动态属性绑定·计算方法：更新100次，取平均值
Vue3直通车TypeScript·3.0本身用TypeScript重写，内置typing优化（增加静态标记）·TSX支持·不会影响不使用TS的用户
Vue3直通车Composition APIFunction-based API
Vue3直通车Composition API·定义响应式：ref/reactive·入口函数：setup·钩子函数：computed/onMounted/・上下文：getCurrentlnstance/globalProperties
ViteVite，一个基于浏览器原生ES imports的开发服务器。利用浏览器去解析imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有Vue文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用rollup打包。
'第1章 项目规划/1-2.mp4'
'第1章 项目规划/1-3.png'
'第1章 项目规划/1-4.mp4'
'第1章 项目规划/1-5.mp4'
'第1章 项目规划/1-6.mp4'
'第1章 项目规划/1-7 【知识点梳理】本章重难点总结_慕课网.pdf'
'第2章 前端架构设计/2-1.mp4'
fastmock.site/#/
2021/6/10
2-11 【知识点梳理】本章重难点总结--环境配置&目录规范_慕课网
https://coding.imooc.com/lesson/502.html#mid=43519
1/1
2-11 【知识点梳理】本章重难点总结--环境配置&目录规范
通过vite创建项目
官方文档：
https://cn.vitejs.dev/
创建项目：
安装项目所需插件
element-plus文档：https://element-plus.org/#/zh-CN/component/quickstart
VSCode****安装插件
制定目录结构
下一节：【知识点梳理】本章重难点总结--路由封装
下一节
npm init @vitejs/app
# or
cnpm init @vitejs/app
# or
yarn create @vitejs/app manager-fe
# 安装项目生产依赖
yarn add vue-router@next vuex@next element-plus axios -S
# 安装项目开发依赖
yarn add sass -D
Eslint
Vetur
TypeScript
Prettier
manager-fe
dist
node_modules
public
src
api
assets
components
config
router
store
utils
views
App.vue
main.js
.gitignore
.env.dev
.env.test
.env.prod
index.html
k
j
返回
章节
问答
课签
笔记
资料
我的慕课
2021/6/10
2-12 【知识点梳理】本章重难点总结--路由封装_慕课网
https://coding.imooc.com/lesson/502.html#mid=43520
1/1
2-12 【知识点梳理】本章重难点总结--路由封装
【知识点梳理】本章重难点总结--路由封装
路由跳转的三种方式
router-link
传统跳转
Composition API跳转
下一节：【讨论题】你接触到的前端架构设计包括哪些？
下一节
<el-button @click="goHome">回首页
返回
章节
问答
课签
笔记
资料
我的慕课
【讨论题】你接触到的前端架构设计包括哪些?如何提高自己的架构思维和能力？
1.什么是前端架构？
什么是前端架构
前端架构是指在前端开发中，设计和组织应用程序的基本结构和组件之间的关系的方法和原则。它涉及到如何组织代码、管理数据、处理业务逻辑以及实现用户界面等方面。一个好的前端架构能够提高开发效率、代码可维护性和项目的可扩展性。以下是一些常见的前端架构模式：MVC（Model-View-Controller）：MVC 是一种将应用程序分为模型（Model）、视图（View）和控制器（Controller）三个部分的架构模式。模型负责处理数据逻辑，视图负责呈现用户界面，而控制器负责接受用户输入并处理业务逻辑。
MVVM（Model-View-ViewModel）：MVVM 是一种基于数据绑定的架构模式，它将应用程序分为模型（Model）、视图（View）和视图模型（ViewModel）三个部分。视图模型负责管理视图和模型之间的数据绑定和交互逻辑，简化了视图和模型间的耦合。
Flux：Flux 是一种用于构建可预测的、单向数据流的架构模式。它包括四个核心概念：Action（动作）、Dispatcher（派发器）、Store（数据存储）和View（视图）。数据从 Action 经过 Dispatcher 被分发到 Store 中进行更新，然后 View 根据 Store 中的数据进行渲染。
Redux：Redux 是基于 Flux 架构思想的状态管理库。它通过一个单一的存储（Store）来保存整个应用程序的状态，并通过纯粹的函数（Reducers）来处理状态的变化。组件通过派发（Dispatch）动作（Actions）来触发状态的更新，并通过订阅（Subscribe）来获取状态变化的通知。
微前端（Micro Frontends）：微前端是一种将前端应用拆分为多个独立的、可独立运行的小型应用的架构模式。每个独立的应用可以由不同团队开发、部署和维护，并且可以在一个容器中协同工作，从而实现解耦、独立部署和复用性。
2.架构都需要做什么？
业务架构、数据架构、技术架构.
架构是什么
1、系统与子系统
2、模块与组件
3、框架与架构
框架的英文是 Framework
架构的英文是 Architecture
一个系统基本的构件(子系统, 模块, 组件)，体现在它的各个构件、构件间的相互关系、构件与环境间的关系，以及对系统设计和演进进行治理的原则中。
架构的组成 = 要素 + 结构 + 连接https://www.21cto.com/article/9141848419849717
涉及四方面：
1、系统性思考的合理决策：比如技术选型、解决实施方案(包括执行目标计划)、成本评估、性价比评估等等。
2、结构：明确的系统骨架（结构）：明确系统有哪些构件组成。
3、连接：系统协作关系：各个组成部分如何协作来实现业务请求。
4、规范：约束规范和指导原则：保证系统有序，高效、稳定运行，包括规范、原则、流程等内容。
架构师在软件开发和IT项目中的角色非常重要，他们负责设计系统的整体结构，并确保这个结构能够满足业务需求和技术要求。架构师的工作范围非常广泛，但可以概括为以下几个主要方面：
-
需求分析：
- 与利益相关者（如客户、产品经理等）沟通，理解业务需求。
- 分析这些需求，确定系统应该实现的功能和非功能性需求。
-
技术选型：
- 根据需求选择合适的技术栈，包括编程语言、框架、数据库等。
- 考虑到性能、安全性、可扩展性等因素来决定使用哪些技术和工具。
-
设计系统架构：
- 设计高层次的系统组件及其相互之间的关系。
- 定义数据流、控制流以及模块间的接口。
- 制定系统的分层或微服务架构，以提高灵活性和可维护性。
-
制定标准和指导方针：
- 建立编码规范、测试策略和其他最佳实践。
- 确保团队成员遵循一致的方法论和质量保证流程。
-
性能优化和安全考量：
- 对系统进行性能调优，确保它能够在预期负载下正常运行。
- 规划并实施必要的安全措施，保护系统免受潜在威胁。
-
文档编写：
- 创建详细的架构文档，包括图表、说明书等，以便其他开发人员理解和维护系统。
-
协调和管理变更：
- 在项目生命周期中处理需求的变化，调整架构设计以适应新的挑战。
- 协调不同团队之间的工作，确保整个项目的顺利推进。
-
原型开发和验证：
- 可能需要创建原型来验证某些假设或者展示给利益相关者。
- 进行初步的技术探索，评估新技术的风险和可行性。
-
持续学习和发展：
- 关注行业趋势和技术进步，不断更新自己的知识体系。
- 通过培训、会议等方式提升专业技能。
每个架构师的具体职责可能会根据组织的不同而有所差异，但是上述内容构成了大多数情况下架构师工作的核心部分。
关键提炼：
1.目录结构怎么规范，有没有必要性？
目录结构的规范化对于项目的可维护性、团队协作效率以及项目的长期发展来说非常重要。一个良好的目录结构可以使得代码更易于理解、查找和扩展，同时也方便了自动化工具（如构建工具、测试框架等）的集成。以下是一些关于规范目录结构的理由及其建议：
规范化目录结构的必要性
-
提高可读性和可维护性：
- 一个清晰的目录结构有助于开发者快速定位文件，了解项目组织方式，从而更容易进行开发和维护工作。
-
促进团队协作：
- 当所有成员都遵循相同的目录结构时，新加入的成员可以更快地上手，减少沟通成本和误解。
-
便于自动化处理：
- 很多现代开发工具和CI/CD管道依赖于预定义的文件路径来执行任务，例如编译、打包、部署等。标准化的目录结构能够简化这些过程。
-
利于版本控制：
- 清晰的目录结构可以帮助避免冲突，并且在合并分支时更加直观地解决差异。
-
支持模块化和组件化设计：
- 合理的目录布局可以使项目更好地适应模块化或微服务架构，方便拆分和重组。
目录结构的建议
虽然具体的目录结构会根据项目类型和个人偏好有所不同，但这里提供一些常见的最佳实践：
- src/ 或 app/：存放应用程序的主要源代码。
- tests/：单元测试、集成测试等测试代码的位置。
- config/：配置文件，比如环境变量配置、数据库连接信息等。
- docs/：文档资料，包括README、API文档、使用指南等。
- scripts/：辅助脚本，用于构建、部署或其他操作。
- assets/：静态资源文件，如图片、字体等。
- public/：公共访问的静态文件，如HTML页面、CSS样式表等（主要用于Web应用）。
- lib/ 或 vendor/：第三方库或依赖项（如果适用）。
- bin/：可执行文件或命令行工具入口。
- logs/：日志文件存储位置（如果需要）。
- database/：数据库迁移脚本、种子数据等。
对于大型项目或者特定类型的项目（如前端项目、后端服务、移动应用等），还有更多专门的约定和习惯。例如，在JavaScript/TypeScript的Node.js项目中，可能会有routes/用于存放路由逻辑，controllers/用于控制器代码等。
总之，建立一套适合你项目需求并被团队一致遵守的目录结构是非常重要的。同时，随着项目的成长，目录结构也应适时调整以适应新的挑战。
2.路由如何封装才好用？
路由封装的好坏直接影响到Web应用的可维护性和扩展性。良好的路由封装可以简化代码逻辑，提高开发效率，并使代码更易于理解和测试。以下是一些建议和最佳实践，可以帮助你更好地封装路由：
1. 遵循单一职责原则
每个路由文件应该只负责处理特定的功能或模块的请求。这样可以使路由更加专注于某一业务领域，便于维护和管理。
2. 分层结构
将不同功能的路由按模块或业务逻辑进行划分，并放置在不同的目录中。例如，对于一个电商网站，可能会有如下结构：
/routes/├── users/│ └── index.js├── products/│ └── index.js└── orders/└── index.js
3. 使用中间件
创建通用的中间件来处理跨路由的需求，如身份验证、日志记录、错误处理等。这有助于减少重复代码并保持一致性。
// 中间件示例
const authMiddleware = (req, res, next) => {// 验证用户身份...next();
};
4. 参数化路由配置
通过参数化的方式定义路由规则，使得路由配置更具灵活性。比如，可以接受动态路径片段或者查询参数。
app.get('/users/:id', getUserById);
5. 利用库函数
许多Web框架（如Express.js）提供了强大的路由管理功能。利用这些库提供的工具可以大大简化路由的设置过程。例如，在Express中，你可以使用express.Router()来组织和复用路由逻辑。
const express = require('express');
const router = express.Router();router.get('/', (req, res) => {res.send('GET request to the homepage');
});module.exports = router;
然后在主应用文件中引入并使用这个路由器：
const express = require('express');
const app = express();
const userRouter = require('./routes/users');app.use('/api/v1/users', userRouter);app.listen(3000, () => console.log('Server running on port 3000'));
6. 集中式错误处理
为所有路由设置统一的错误处理器，确保未捕获的异常能够被正确处理，并返回给客户端适当的响应信息。
app.use((err, req, res, next) => {console.error(err.stack);res.status(500).send('Something broke!');
});
7. 文档化和注释
为你的路由添加详细的注释和文档，特别是API端点的行为、输入输出格式等，这对于团队协作和后续维护非常重要。
8. 自动化测试
编写单元测试和集成测试来验证路由的行为是否符合预期，保证更改不会破坏现有功能。
9. 版本控制
如果你的应用程序对外提供API服务，考虑对API进行版本化，以支持向后兼容性和逐步升级。
app.use('/api/v1/', versionedRoutesV1);
app.use('/api/v2/', versionedRoutesV2);
通过上述方法，你可以构建出既灵活又健壮的路由系统，从而提升整个Web应用的质量和用户体验。根据具体的项目需求和技术栈选择最适合的方法来进行路由封装。
3.环境配置是什么？
环境配置指的是为软件应用程序设置特定的运行条件，以确保它能够在不同的开发、测试和生产环境中正确地工作。良好的环境配置是软件开发流程中的关键部分，因为它直接影响到应用的行为、性能、安全性和可维护性。以下是一些关于环境配置的重要概念：
1. 配置项
- 数据库连接：包括数据库类型、主机地址、端口、用户名、密码等信息。
- API密钥和认证凭证：用于访问第三方服务或内部系统的API。
- 路径和URL：例如静态资源的位置、外部服务的URL等。
- 环境变量：可以用来动态调整应用行为，如启用调试模式、指定日志级别等。
- 依赖库版本：确保所有开发者使用相同版本的依赖库，避免兼容性问题。
2. 配置文件格式
- JSON/YAML/Properties：这些是常见的配置文件格式，易于阅读和编辑。
- 环境变量：通过操作系统级别的环境变量来传递配置信息，这种方式对于敏感数据尤其有用，因为它们不会被包含在代码库中。
- 命令行参数：某些情况下可以通过命令行参数来覆盖默认配置。
3. 多环境支持
为了适应不同阶段的需求，通常会定义多个环境配置：
- 开发环境（Development）：主要用于本地开发，允许更多的调试选项和灵活性。
- 测试环境（Testing/QA）：用于集成测试和质量保证，尽可能模拟生产环境。
- 预发布环境（Staging）：作为生产前的最后一道防线，进行最终的功能验证。
- 生产环境（Production）：实际面向用户的运行环境，需要最严格的配置和最高的性能优化。
4. 管理工具
有许多工具可以帮助管理和自动化环境配置过程，比如：
- Docker 和 Kubernetes：容器化技术，确保应用及其依赖在任何环境下都能一致运行。
- Ansible/Puppet/Chef：配置管理工具，可以自动部署和配置服务器。
- CI/CD 管道：持续集成和持续交付工具，可以在构建过程中自动加载正确的环境配置。
- Secrets Manager：如AWS Secrets Manager, HashiCorp Vault等，用于安全存储和管理敏感信息。
5. 安全性考虑
- 敏感信息保护：不要将敏感信息硬编码在源码中，应该使用环境变量或专门的安全管理工具。
- 最小权限原则：每个环境仅授予必要的权限，减少潜在攻击面。
- 加密传输：当从远程服务器获取配置时，确保使用HTTPS或其他安全协议。
6. 版本控制
将非敏感的配置文件纳入版本控制系统（如Git），但要小心处理敏感信息，不要将其提交到仓库中。可以利用.gitignore文件排除敏感配置。
实践示例
在一个Node.js项目中，你可能会看到这样的配置方式：
// config/default.json
{"port": 3000,"database": {"host": "localhost","user": "root","password": "password"}
}// config/production.json
{"port": process.env.PORT || 8080,"database": {"host": process.env.DB_HOST,"user": process.env.DB_USER,"password": process.env.DB_PASSWORD}
}
然后使用像dotenv这样的包来加载环境变量，或者采用更高级的配置管理库，如node-config。
总之，环境配置是一个复杂且重要的领域，合理的配置不仅能够提高开发效率，还能增强应用的安全性和稳定性。根据项目的具体情况选择适当的策略和技术栈来进行环境配置是非常必要的。
4.axios为何要做二次封装?
对`axios`进行二次封装的主要目的是为了提高代码的可维护性、复用性和灵活性，同时简化网络请求的处理流程。通过二次封装，可以将一些通用的逻辑（如设置默认配置、添加拦截器、错误处理等）抽象出来，从而使得业务代码更加简洁和专注于具体的功能实现。以下是几个关键原因：### 1. **统一配置管理**- **全局配置**：可以在一个地方集中定义所有请求的默认选项，比如基础URL、超时时间、HTTP头部信息等。
- **环境适应**：根据不同环境（开发、测试、生产）动态调整API的基础URL和其他配置项。```javascript
import axios from 'axios';const instance = axios.create({baseURL: process.env.NODE_ENV === 'production' ? 'https://prod-api.com' : 'http://localhost:3000',timeout: 5000,headers: { 'Content-Type': 'application/json' }
});export default instance;
```### 2. **增强错误处理**- **集中化错误处理**：为所有的请求提供一致的错误处理机制，包括重试策略、自定义错误消息或格式化响应错误。
- **日志记录**：在发生错误时自动记录详细的错误信息，方便调试和问题追踪。```javascript
instance.interceptors.response.use(response => response,error => {console.error('Request failed:', error);// 可以在这里添加更复杂的错误处理逻辑，例如根据状态码执行不同操作return Promise.reject(error);}
);
```### 3. **添加请求/响应拦截器**- **请求前处理**：在发送请求之前修改请求参数，比如添加认证令牌、加密数据等。
- **响应后处理**：对接收到的数据进行预处理，如解密、转换数据结构等。```javascript
instance.interceptors.request.use(config => {const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
});
```### 4. **简化API调用**- **方法包装**：创建简化的API调用方法，隐藏底层细节，使业务代码只需要关注实际的数据交互。
- **约定优于配置**：通过约定的方式减少不必要的配置工作，例如基于RESTful API设计的资源命名规则。```javascript
// 假设有一个获取用户信息的API
function getUser(userId) {return instance.get(`/users/${userId}`);
}// 使用时只需简单调用
getUser(1).then(response => console.log(response.data));
```### 5. **集成第三方库**- **身份验证**：如果项目使用了OAuth或其他形式的身份验证，可以通过封装来简化Token的管理和刷新过程。
- **缓存**：集成缓存机制，避免重复请求相同的资源，提升性能。### 6. **支持异步操作**- **并发请求**：当需要同时发起多个请求时，可以封装批量请求的方法。
- **取消请求**：允许业务逻辑中灵活地取消未完成的请求，防止资源浪费。### 7. **跨域资源共享(CORS)**- **代理配置**：对于涉及到跨域的问题，可以在封装层解决，例如通过配置代理服务器来绕过浏览器的安全限制。### 总结通过对`axios`进行二次封装，不仅可以优化网络请求的处理方式，还能显著改善项目的架构质量和开发体验。它使得开发者能够更加高效地编写清晰、简洁且易于维护的代码，同时也提高了系统的可靠性和安全性。根据具体的项目需求和技术栈，可以选择适合自己的封装策略。
5.除此外你所接触到的架构设计还有哪些?
在架构设计中，除了对`axios`进行二次封装以优化HTTP请求处理外，还有许多其他重要的概念和技术可以用来构建高效、可扩展且易于维护的系统。以下是几个关键领域和相应的实践：### 1. **分层架构（Layered Architecture）**- **表示层（Presentation Layer）**：负责用户界面和与用户的交互。
- **业务逻辑层（Business Logic Layer）**：实现业务规则和服务。
- **数据访问层（Data Access Layer）**：处理数据库或外部服务的数据存取。这种架构有助于分离关注点，并使得每个层次专注于特定的功能。### 2. **微服务架构（Microservices Architecture）**将应用程序拆分为一组小型、独立的服务，每个服务围绕着具体的业务能力构建，并且可以通过轻量级的机制进行通信。这提高了系统的模块化程度，便于团队并行开发、部署和扩展。### 3. **事件驱动架构（Event-Driven Architecture, EDA）**使用消息队列或事件流来协调不同组件之间的交互。EDA允许系统响应异步事件，从而增强了灵活性和解耦合度。### 4. **面向服务架构（Service-Oriented Architecture, SOA）**SOA是一种通过定义良好的接口和服务契约来组织和利用分布式计算资源的方法。它强调松散耦合的服务之间互操作性。### 5. **无服务器架构（Serverless Architecture）**在这种模式下，开发者不需要管理底层服务器硬件或操作系统。云提供商自动处理这些方面，让开发者可以专注于编写代码和业务逻辑。常见的形式包括函数即服务（FaaS）。### 6. **领域驱动设计（Domain-Driven Design, DDD）**DDD鼓励根据业务领域建模软件结构，确保技术解决方案紧密贴合业务需求。它引入了诸如限界上下文（Bounded Context）、聚合根（Aggregate Root）等概念，帮助更好地理解和组织复杂的业务逻辑。### 7. **六边形架构（Hexagonal Architecture）**也称为端口和适配器模式，旨在创建一个核心的应用程序逻辑，该逻辑不依赖于任何外部框架或库。所有的外部交互都通过端口完成，而适配器则负责将具体的技术细节映射到这些端口上。### 8. **CQRS (Command Query Responsibility Segregation)**CQRS 是一种将读操作和写操作分开处理的设计模式。它允许使用不同的模型来分别处理命令（更改状态的操作）和查询（只读取数据）。这可以提高性能和简化复杂系统的实现。### 9. **事件溯源（Event Sourcing）**在事件溯源中，状态的变化不是直接更新数据库记录，而是作为一系列事件被记录下来。当前状态可以通过重放所有过去的事件来重建。这种方法非常适合需要追踪历史变更的应用场景。### 10. **API网关模式（API Gateway Pattern）**API网关作为客户端和多个后端微服务之间的单一入口点。它可以提供路由、组合、协议转换等功能，同时也简化了客户端与后端服务之间的通信。### 11. **缓存策略**合理地使用缓存可以极大地提升应用性能。无论是前端还是后端都可以采用各种缓存机制，如内存缓存、分布式缓存等，来减少重复计算和数据库查询。### 12. **负载均衡与容错**为了保证高可用性和容错能力，通常会结合负载均衡器和冗余部署。此外，还可以采用熔断器模式（Circuit Breaker Pattern）等方法来应对故障情况下的快速恢复。### 13. **安全架构**确保应用的安全性是架构设计中的重要组成部分。这涉及到身份验证、授权、加密、输入验证等多个方面。安全措施应该贯穿整个系统的生命周期。### 14. **持续集成/持续部署（CI/CD）**自动化构建、测试和部署流程不仅加快了迭代速度，还减少了人为错误的可能性。CI/CD 工具链可以帮助团队更频繁地发布高质量的产品版本。以上只是架构设计领域的一部分内容。实际项目中，架构师可能会根据业务特点和技术要求选择合适的方法论和技术栈，并可能混合多种架构风格来满足特定的需求。随着技术的进步，新的架构模式和最佳实践也在不断涌现。
'第2章 前端架构设计/2-10.mp4'
'第2章 前端架构设计/2-11 【知识点梳理】本章重难点总结--环境配置&目录规范_慕课网.pdf'
'第2章 前端架构设计/2-12 【知识点梳理】本章重难点总结--路由封装_慕课网.pdf'
'第2章 前端架构设计/2-13.png'
'第2章 前端架构设计/2-2.mp4'
'第2章 前端架构设计/2-3.mp4'
'第2章 前端架构设计/2-4.mp4'
'第2章 前端架构设计/2-5.mp4'
'第2章 前端架构设计/2-6.mp4'
'第2章 前端架构设计/2-7.mp4'
'第2章 前端架构设计/2-8.mp4'
'第2章 前端架构设计/2-9.mp4'
'第3章 Koa架构设计/3-1 【资料梳理】Koa2项目初始化操作_慕课网.pdf'_
2021/6/10
3-1 【资料梳理】Koa2项目初始化操作_慕课网
https://coding.imooc.com/lesson/502.html#mid=43627
1/1
3-1 【资料梳理】Koa2项目初始化操作
【资料梳理】Koa2项目初始化操作
通常我们可以借助于脚手架，快速创建一个Koa2项目，当然也可以自己从头搭建；脚手架会帮我们提前搭好基本的架子
1.koa-generator快速生成koa****服务的脚手架工具
1.1 全局安装脚手架工具
1.2 进入到项目文件夹目录,执行生成命令
如果无法使用koa2命令，说明需要配置环境变量，window用户，需要找到koa-generator的安装目录，找到里面bin下面的koa2命令文件，
后配置到环境变量中。mac用户可直接创建软连接，指向到/usr/local/bin中，比如：ln -s /Users/Jack/.config/yarn/global/node_modules/ko
generator/bin/koa2 /usr/local/bin/koa2
1.3 安装依赖
1.4 启动服务
2. koa-generator创建的koa2****框架目录
cnpm install -g koa-generator
# or
yarn global add koa-generator
# koa2+项目名
koa2 manager-server
npm install
# or
cnpm install
# or
yarn
yarn start
# or
node .bin/www
#默认的访问地址localhost:3000/
|-- koa-server
|-- app.js #根入口
|-- package-lock.json
|-- package.json
#项目依赖包文件
|-- bin
| |-- www
#运行启动文件
|-- public #公共资源
| |-- images
| |-- javascripts
| |-- stylesheets
| |-- style.css
|-- routes
| |-- index.js #定义了localhost:3000/之下的路由
| |-- users.js #定义了localhost:3000/users/之下的路由
|-- views #视图Pug是一款HTML模板引擎，专门为 Node.js 平台开发
返回
章节
问答
课签
笔记
资料
我的慕课
Koa2项目初始化操作通常我们可以借助于脚手架，快速创建一个Koa2项目，当然也可以自己从头搭建；脚手架会帮我们提前搭好基本的架子1.koa-generator快速生成koa服务的脚手架工具1.1全局安装脚手架工具cnpm install –g koa-generator# oryarn global add koa-generatorshell1.2进入到项目文件夹目录，执行生成命令#koa2+项目名koa2 manager-server如果无法使用koa2命令，说明需要配置环境变量，window用户，需要找到koa-generator的安装目录，找到里面bin下面的koa2命令文件，然后配置到环境变量中。mac用户可直接创建软连接，指向到/usr/local/bin中, 比如： In-s/Users/Jack/.config/yarn/global/node_modules/koa-generator/bin/koa2/usr/local/bin/koa2
log4js
mongo
Mongo语法
SQL///Mongo
表（Table)///集合(collection)
行（Row)///文档（Document)
列（Col)////字段(Field)
主键(Primary Key)///对象ID(Objectld)Mongo语法
数据库操作
创建数据库use demo
查看数据库show dbs
删除数据库 db.dropDatabase()Mongo语法
文档操作
db.collection.insertOne()db.collection.insertMany()创建文档
查看文档db.collections.find(마)
db.collection. deleteOne()删除文档db.collection.deleteMany()
db.collection.update(],(1,false,trse)更新文档db.user.find({age:{$gte:35}})
接口文档设计开发流程需求开发测试上线回顾
接囗文档设计后端开发·理解需求·关键功能技术评审·设计表结构·设计接囗文档·接囗功能实现·接口联调、自测、提测
接囗文档文档形式：Swagger、YAPI、EasyMock、MarkDown地址前缀：http://localhost:3000/api
2021/6/10
3-7 【资料梳理】Windows下Mongo安装配置_慕课网
https://coding.imooc.com/lesson/502.html#mid=43628
1/1
3-7 【资料梳理】Windows下Mongo安装配置
【资料梳理】Windows下Mongo安装配置
一、下载Mongo数据库并安装
https://www.mongodb.com/try/download/community
根据自己电脑类型选择不同平台的软件安装包，window10用户可选择4.4.4进行下载，window7用户可选择4.2进行下载，因为4.4.4-signed
支持window7系统；
二、配置环境变量
\1. 鼠标右键对着桌面的 计算机 ，选择属性
\2. 在弹出的面板里面，选择 高级系统设置
\3. 弹出框里面选择高级选项，下面有环境变量的按钮
返回
章节
问答
课签
笔记
资料
我的慕课
2021/6/10 3-9 【资料梳理】数据库表结构_慕课网
https://coding.imooc.com/lesson/502.html#mid=43615 1/1
3-9 【资料梳理】数据库表结构
【资料梳理】数据库表结构
数据库表结构
用户集合：users
菜单集合：menus
部门集合：depts
角色集合：roles
自增集合：counters
{
"userId" : 1000001,//用户ID，自增长
"userName" : "admin",//用户名称
"userPwd" : "e10adc3949ba59abbe56e057f20f883e",//用户密码，md5加密
"userEmail" : "admin@imooc.com",//用户邮箱
"mobile":13788888888,//手机号
"sex":0,//性别 0:男 1：女
"deptId":[ObjectId("")],//部门
"job":"前端架构师",//岗位
"state" : 1,// 1: 在职 2: 离职 3: 试用期
"role": 0, // 用户角色 0：系统管理员 1： 普通用户
"roleList" : [ObjectId("")], //系统角色
"createTime" : ISODate("2021-01-17T13:32:06.381Z"),//创建时间
"lastLoginTime" : ISODate("2021-01-17T13:32:06.381Z"),//更新时间
}
{
"menuType":1,//菜单类型 1:菜单 2:按钮
"menuName":"系统管理",//菜单名称
"menuCode":"",//菜单标识符，只有按钮类型才有，用于确定按钮权限
"path":"/system",//菜单路由
"icon":"el-icon-setting",//菜单图标
"component":"",//组件地址
"parentId":[null],//父菜单ID
"createTime":ISODate("2021-01-17T13:32:06.381Z"),//创建时间
}
{
"parentId":[null],//父对象Id，一级部门默认为null
"deptName":"前端开发部",
"userId":1000001,//负责人，用户ID
"userName":"Jack",//部门负责人
"userEmail":"jack@163.com",//同上
"createTime":ISODate("2021-01-17T13:32:06.381Z"),//创建时间
"updateTime":ISODate("2021-01-17T13:32:06.381Z"),//更新时间
}
{
"roleName":"产品经理",//角色名称
"remark":"产品专用",//备注信息
"permissionList":{
"checkedKeys":[ObjectId("")],//选中的子菜单
"halfCheckedKeys":[ObjectId("")],//半选中的父菜单
},//权限列表
"createTime":"2020-11-20 19:29:42",//创建时间
}
返回
章节
问答
课签
笔记
资料
我的慕课
3、创建配置文件data:数据库目录log:日志目录conf:配置目录
'第3章 Koa架构设计/3-10.mp4'
'第3章 Koa架构设计/3-11 【资料梳理】接口文档---用户管理_慕课网.pdf'
'第3章 Koa架构设计/3-12 【资料梳理】接口文档---菜单管理_慕课网.pdf'
'第3章 Koa架构设计/3-13 【资料梳理】接口文档---部门管理_慕课网.pdf'
'第3章 Koa架构设计/3-14 【资料梳理】接口文档---角色管理_慕课网.pdf'
'第3章 Koa架构设计/3-15 【资料梳理】接口文档---审批管理_慕课网.pdf'
'第3章 Koa架构设计/3-16.mp4'
'第3章 Koa架构设计/3-17 【资料梳理】Mac下Mongo安装配置_慕课网.pdf'
'第3章 Koa架构设计/3-2.mp4'
'第3章 Koa架构设计/3-3.mp4'
'第3章 Koa架构设计/3-4.mp4'
'第3章 Koa架构设计/3-5.mp4'
'第3章 Koa架构设计/3-6.mp4'
'第3章 Koa架构设计/3-7 【资料梳理】Windows下Mongo安装配置_慕课网.pdf'
'第3章 Koa架构设计/3-8.mp4'
'第3章 Koa架构设计/3-9 【资料梳理】数据库表结构_慕课网.pdf'
'第4章 用户登录前后台实现/4-1.mp4'
动态路由
schema //modle
mongo'第4章 用户登录前后台实现/4-2.mp4'
'第4章 用户登录前后台实现/4-3.mp4'
'第5章 前台首页实现/5-1.mp4'
2021/6/10 5-8 【知识点梳理】本章重难点总结_慕课网
https://coding.imooc.com/lesson/502.html#mid=44065 1/1
5-8 【知识点梳理】本章重难点总结
【知识点梳理】本章重难点总结
1、组件地址必须带后缀.vue
2、vite可配置别名，解决./…/问题，类似于Vue里面的@
3、全局的mixin 样式问题，可以通过vite进行配置
下一节：JWT理论介绍(10:27)
下一节
// 正确
import('./../views/Welcome.vue')
// 错误
import('./../views/Welcome')
resolve: {
alias:{
'@': path.resolve( __dirname, './src' )
}
}
css: {
preprocessorOptions: {
scss: {
additionalData: `@import '@/assets/style/base.scss';`
}
}
}
返回
章节
问答
课签
笔记
资料
我的慕课
'第5章 前台首页实现/5-2.mp4'
'第5章 前台首页实现/5-3.mp4'
'第5章 前台首页实现/5-4.mp4'
'第5章 前台首页实现/5-5.mp4'
'第5章 前台首页实现/5-6.mp4'
'第5章 前台首页实现/5-7.mp4'
'第5章 前台首页实现/5-8 【知识点梳理】本章重难点总结.pdf'
'第6章 JWT方案讲解/6-1.mp4'
2021/6/10 6-4 【知识点梳理】本章重难点总结_慕课网
https://coding.imooc.com/lesson/502.html#mid=44268 1/1
6-4 【知识点梳理】本章重难点总结
是 种跨域认证解决方案
2、解决问题
数据传输简单、高效
会生成签名，保证传输安全
更具有时效性
更高效利用集群做好单点登录
3、原理
服务器认证后，生成一个JSON对象，后续通过json进行通信
4、数据结构
Header（头部）
Payload（负载）
Signature（签名）
Header结构
Payload结构
返回
章节
问答
课签
笔记
资料
我的慕课
JWT关键问题·什么是jwt?·jwt解决了什么问题?·jwt原理·jwt数据结构·jwt使用方式
JWTJSON Web Tokens
JWT什么是jwt?·JWT是一种跨域认证解决方案
JWT使用方式·/api?token=xxx·cookie写入token·storage写入token,请求头添加：Authorization:Bearer
jsonwebtoken
'第6章 JWT方案讲解/6-2.mp4'
'第6章 JWT方案讲解/6-3.mp4'
'第6章 JWT方案讲解/6-4 【知识点梳理】本章重难点总结.pdf'
'第7章 用户管理前后端实现/7-1.mp4'
2021/6/10 7-12 【知识点梳理】本章重难点总结_慕课网
https://coding.imooc.com/lesson/502.html#mid=44250 1/1
7-12 【知识点梳理】本章重难点总结
安全性
用户注册：密码基于md5摘要算法实现。也可基于其它算法（RSA或AES）再前端进行加密传输。
安全性保障措施：
1. 使用https协议，添加数字证书，确保信息安全
2. 使用加密算法，对重要信息进行加密处理。
对称加密：DES、AES、RC5、RC6
非对称加密：RSA、DSA
摘要算法：md5（简单密码容易暴力破解）
完善用户登录功能
1. 登录和注册功能，对于加密信息保持一致。
核心知识点
1. 交互风格统一（条件查询、列表数据、操作按钮、新增弹框、分页）
2. 开发流程清晰（静态布局、动态交互、数据Mock、接口联调、功能完善）
3. 日期格式化插件开发
Mongo语法
1. User.findOne() // 查询一条数据
2. User.find() // 查询所有符合条件的数据
3. User.find().skip().limit() // 专门用于数据分页
4. User.countDocuments({}) // 统计总数量
5. User.updateMany() // 更新用户信息
6. { userId: { $in: [100001,100002] } // 判断userId在[100001,100002]中间
7. { $or: [{ userName:‘jack’ }, { userEmail:‘jack@imooc.com’ }] } // 或 条件判断
8. { $inc: { sequence_value: 1 } // 更新值 +1
Mongo返回字段的四种方式
1. ‘userId userName userEmail state role deptId roleList’
2. { userId:1,_id:0 }
3. select(‘userId’)
4. select({ userId:1,_id:0 })
下一节：菜单列表实现(25:06)
下一节
User.findOne({ userName,userPwd }, 'userId userName userEmail state role deptId roleList')
// Or
User.findOne({ userName,userPwd }, { userId:1,_id:0 })
// Or
User.findOne({ userName,userPwd }).select('userId userName userEmail')
// Or
User.findOne({ userName,userPwd }).select({ userId:1,_id:0 })
返回
章节
问答
课签
笔记
资料
我的慕课
elementui-plus paramster validate
lavel update green froter
sql 设计 6大范式
sql 优化compose tooler scripter body
'第7章 用户管理前后端实现/7-10.mp4'
'第7章 用户管理前后端实现/7-11.mp4'
'第7章 用户管理前后端实现/7-12 【知识点梳理】本章重难点总结.pdf'
'第7章 用户管理前后端实现/7-2.mp4'
'第7章 用户管理前后端实现/7-3.mp4'
'第7章 用户管理前后端实现/7-4.mp4'
'第7章 用户管理前后端实现/7-5.mp4'
'第7章 用户管理前后端实现/7-6.mp4'
'第7章 用户管理前后端实现/7-7.mp4'
'第7章 用户管理前后端实现/7-8.mp4'
'第7章 用户管理前后端实现/7-9.mp4'
'第8章 菜单模块前后端实现/8-1.mp4'
2021/6/10 8-8 【知识点梳理】本章重难点总结_慕课网
https://coding.imooc.com/lesson/502.html#mid=44721 1/1
8-8 【知识点梳理】本章重难点总结
【知识点梳理】本章重难点总结
功能清单：
1. 菜单列表
2. 菜单创建
3. 菜单编辑
4. 菜单删除
5. 菜单名称递归展示
接口调用：
菜单列表： /menu/list
菜单创建/编辑/删除： /menu/operate
Mongo语法：
1. 根据ID查找并更新
2. 根据ID查找并删除
3. 查找表中parentId包含[id]的数据，并批量删除
注意KaTeX parse error: Expected 'EOF', got '和' at position 4: all̲in区别：
$all 指的是表中某一列包含[id]的数据，例如：parentId:[1,3,5] 包含 [3]
$in 指的是表中某一列在[id]这个数组中，例如：_id:3 在[1,3,5]中
下一节：角色列表实现(19:09)
下一节
Menu.findByIdAndUpdate(_id, params)
Menu.findByIdAndRemove(_id)
Menu.deleteMany({ parentId: { $all: [_id] } })
返回
章节
问答
课签
笔记
资料
我的慕课
'第8章 菜单模块前后端实现/8-2.mp4'
'第8章 菜单模块前后端实现/8-3.mp4'
'第8章 菜单模块前后端实现/8-4.mp4'
'第8章 菜单模块前后端实现/8-5.mp4'
'第8章 菜单模块前后端实现/8-6.mp4'
'第8章 菜单模块前后端实现/8-7.mp4'
'第8章 菜单模块前后端实现/8-8 【知识点梳理】本章重难点总结.pdf'
'第9章 ⻆色管理前后端实现/9-1.mp4'
2021/6/10 9-9 【知识点梳理】本章重难点总结_慕课网
https://coding.imooc.com/lesson/502.html#mid=44647 1/1
9-9 【知识点梳理】本章重难点总结
【知识点梳理】本章重难点总结
功能清单：
1. 角色列表
2. 角色创建
3. 角色编辑
4. 角色删除
5. 菜单权限设置
6. 角色权限列表递归展示
接口调用：
角色列表： /roles/list
菜单列表： /menu/list
角色操作： /roles/operate
权限设置： /roles/update/permission
所有角色列表： /roles/allList
注意事项：
1. 分页参数 { ...this.queryForm, ...this.pager, }
2. 角色列表展示菜单权限，递归调用actionMap
3. 角色编辑 nextTick
4. 理解权限设置中 checkedKeys 和 halfCheckedKeys
RBAC模型：
Role-Base-Access-Control
用户分配角色 -> 角色分配权限 -> 权限对应菜单、按钮
用户登录以后，根据对应角色，拉取用户的所有权限列表，对菜单、按钮进行动态渲染。
模块封装
加强自身对通用模块封装能力、提高开发效率，不断积累架构思维，提高自身核心竞争力。
下一节：部门列表实现(14:21)
下一节
返回
章节
问答
课签
笔记
资料
我的慕课
注意事项：1.分页参数{.….this.queryForm,….this.pager,}2.角色列表展示菜单权限，递归调用actionMap3.角色编辑 nextTick4.理解权限设置中checkedKeys和halfCheckedKeysRBAC模型：Role-Base-Access-Control用户分配角色 -→角色分配权限->权限对应菜单、按钮用户登录以后，根据对应角色，拉取用户的所有权限列表，对菜单、按钮进行动态渲染1模块封装加强自身对通用模块封装能力、提高开发效率，不断积累架构思维，提高自身核心竞争力。
'第9章 ⻆色管理前后端实现/9-2.mp4'
'第9章 ⻆色管理前后端实现/9-3.mp4'
'第9章 ⻆色管理前后端实现/9-4.mp4'
'第9章 ⻆色管理前后端实现/9-5.mp4'
'第9章 ⻆色管理前后端实现/9-6.mp4'
'第9章 ⻆色管理前后端实现/9-7.mp4'
'第9章 ⻆色管理前后端实现/9-8.mp4'
'第9章 ⻆色管理前后端实现/9-9 【知识点梳理】本章重难点总结.pdf'
'第10章 部门管理前后端实现/10-1.mp4'
2021/6/10 10-6 【知识点梳理】本章重难点总结_慕课网
https://coding.imooc.com/lesson/502.html#mid=44834 1/1
10-6 【知识点梳理】本章重难点总结
【知识点梳理】本章重难点总结
功能清单：
1. 部门列表
2. 部门创建
3. 角色编辑
4. 角色删除
5. 菜单权限设置
6. 角色权限列表递归展示
接口调用：
角色列表： /roles/list
菜单列表： /menu/list
角色操作： /roles/operate
权限设置： /roles/update/permission
所有角色列表： /roles/allList
注意事项：
1. 分页参数 { ...this.queryForm, ...this.pager, }
2. 角色列表展示菜单权限，递归调用actionMap
3. 角色编辑 nextTick
4. 理解权限设置中 checkedKeys 和 halfCheckedKeys
RBAC模型：
Role-Base-Access-Control
用户分配角色 -> 角色分配权限 -> 权限对应菜单、按钮
用户登录以后，根据对应角色，拉取用户的所有权限列表，对菜单、按钮进行动态渲染。
模块封装
加强自身对通用模块封装能力、提高开发效率，不断积累架构思维，提高自身核心竞争力。
下一节：权限&工作流介绍(12:06)
下一节
返回
章节
问答
课签
笔记
资料
我的慕课
帮同学来回答这个问题
重置功能失效了？？？
+30经验 +1积分 我来回答研发部门前端部门测试部门UED部门大数据部门市场部门运营部门运维部门人事部财务部'第10章 部门管理前后端实现/10-2.mp4'
'第10章 部门管理前后端实现/10-3.mp4'
'第10章 部门管理前后端实现/10-4.mp4'
'第10章 部门管理前后端实现/10-5.mp4'
'第10章 部门管理前后端实现/10-6 【知识点梳理】本章重难点总结_慕课网.pdf'
'第11章 动态路由、导航守卫、按钮权限&工作流介绍/11-1.mp4'
2021/6/10 11-9 【知识点梳理】本章重难点总结_慕课网
https://coding.imooc.com/lesson/502.html#mid=44885 1/1
11-9 【知识点梳理】本章重难点总结
【知识点梳理】本章重难点总结
内容介绍：
1. 权限&工作流知识介绍
2. 动态菜单渲染
3. 按钮权限控制
4. 导航守卫、权限拦截、动态路由
接口调用：
权限列表： /users/getPermissionList
重难点
用户菜单权限：
用户登录 -> 获取用户身份（管理员和普通用户） -> 调用 权限列表 接口 -> 递归生成菜单和按钮list -> 前端进行菜单渲染
动态指令： v-has
理解指令：
v-on:click = "handleUser"
click 对应binding.arg ，表示指令参数
handleUser 对应binding.value ，表示指令值
导航守卫
常用API：beforeEach()、afterEach()、getRoutes()、push()、back()、addRoute()
我们判断当前路由是否存在时，也可以使用hasRoute()
原代码： router.getRoutes().filter(route => route.path == path).length;
更改后代码： router.hasRoute(to.name)
app.directive('has', {
beforeMount: function (el, binding) {
// 获取按钮列表，注意按钮的key不可以重复，必须唯一
let actionList = storage.getItem('actionList');
// 获取质量的值
let value = binding.value;
// 判断值是否在按钮列表里面
let hasPermission = actionList.includes(value)
if (!hasPermission) {
// 隐藏按钮
el.style = 'display:none';
setTimeout(() => {
// 删除按钮
el.parentNode.removeChild(el);
}, 0)
}
}
})
返回
章节
问答
课签
笔记
资料
我的慕课
权限&工作流权限工作流
权限RBAC (Role-Based Access Control)imooc用户角色权限
权限菜单权限按钮权限数据权限
权限公司现状·一个系统一套权限·不同系统权限各不相同·很多系统前端是同一个团队，后端不同团队
权限大厂做法·统一各个系统权限·搭建权限中心、用户系统，实现单点登录，统一权限分配·业务团队只负责业务开发
工作流什么是工作流?部分或整体业务实现计算机环境下的自动化
工作流哪些场景或系统会使用工作流?OAHRERPCRM加班、报销、出差、采购、报价、培训、考核、付款
工作流工作流七要素角色场景节点环节必要信息通知操作工作流七要素角色：发起人、审批人
场景：请假、出差
节点：审批单节点、多节点
环节：审批单环节、多环节
必要信息：申请理由、申请时长
通知：申请人、审批人
操作：未审批、已驳回、已审批动态规划
参数/路由配置化
导航守卫 权限....
根据用户拥有的角色，获取权限列表现查找用户对应的角色有哪些第十一章总结内容介绍：1.权限&工作流知识介绍2.动态菜单渲染3.按钮权限控制4.导航守卫、权限拦截、动态路由工接口调用：权限列表：/users/getPermissionList重难点用户菜单权限：用户登录 ->获取用户身份（管理员和普通用户） ->调用权限列表接口 >递归生成菜单和按钮list ->前端进行菜单渲染has directive导航守卫常用API:beforeEach()、afterEach()、getRoutes()、push()、back()、addRoute()'第11章 动态路由、导航守卫、按钮权限&工作流介绍/11-2.mp4'
'第11章 动态路由、导航守卫、按钮权限&工作流介绍/11-3.mp4'
'第11章 动态路由、导航守卫、按钮权限&工作流介绍/11-4.mp4'
'第11章 动态路由、导航守卫、按钮权限&工作流介绍/11-5.mp4'
'第11章 动态路由、导航守卫、按钮权限&工作流介绍/11-6.mp4'
'第11章 动态路由、导航守卫、按钮权限&工作流介绍/11-7.mp4'
'第11章 动态路由、导航守卫、按钮权限&工作流介绍/11-8.mp4'
'第11章 动态路由、导航守卫、按钮权限&工作流介绍/11-9 【知识点梳理】本章重难点总结##_慕课网.pdf'
'第12章 休假申请前后端实现/12-1.mp4'
2021/6/10 12-10 【知识点梳理】本章重难点总结_慕课网
https://coding.imooc.com/lesson/502.html#mid=44941 1/1
12-10 【知识点梳理】本章重难点总结
【知识点梳理】本章重难点总结
内容介绍：
1. 休假申请列表
2. 创建申请单
3. 申请详情
4. 申请作废
接口调用：
申请列表： /leave/list
创建申请： /leave/operate
删除申请： /leave/operate
重难点
休假时长计算：
表单正则校验：
const handleDateChange = (key, val) => {
let { startTime, endTime } = leaveForm;
if (!startTime || !endTime) return;
if (startTime > endTime) {
ctx.$message.error("开始日期不能晚于结束日期");
leaveForm.leaveTime = "0天";
setTimeout(() => {
leaveForm[key] = "";
}, 0);
} else {
leaveForm.leaveTime =
(endTime - startTime) / (24 * 60 * 60 * 1000) + 1 + "天";
}
};
const rules = {
startTime: [
{
type: "date",
required: true,
message: "请输入开始日期",
trigger: "change",
},
],
endTime: [
{
type: "date",
required: true,
message: "请输入结束日期",
trigger: "change",
},
],
reasons: [
{
required: true,
"请输入休假原因"
返回
章节
问答
课签
笔记
资料
我的慕课
rrx hx mc sp工作流什么是工作流?部分或整体业务实现计算机环境下的自动化;
!!level
"全部"></e“待审批”“审批中“"审批拒绝"”审批通过“审批拒绝"news cat lion uni branch
基础 功能 模块 权限 系统 服务=>tree graphic34whelper 主攻 防守 奶妈 天道 cos4dwarm-deploypower share matchrrx m 1对多 多对多book front altergrudsource same layout ref 13x time orderNumfx'state type2021/6/18 13-6 【知识点梳理】本章重难点总结_慕课网
https://coding.imooc.com/lesson/502.html#mid=45119 1/1
13-6 【知识点梳理】本章重难点总结
通知接口： /leave/count
业务难点
审核人员 - 待审批列表：
审核人员 - 审批通过/审批拒绝/作废列表：
审核接口 - 拒绝/同意
技术难点
条件查询：
最后一节啦！
返回课程列表
// 1、我是第一审核人
params = { curAuditUserName : data.userName, applyState:1 }
// 我是第二或第三审核人
params = { curAuditUserName : data.userName, applyState:2 }
// 所以，完整的查询条件如下：
params = { curAuditUserName : data.userName, $or:[ {applyState:1}, {applyState:2} ] }
// 审批流里面需要包含我，注意这是一个子文档查询
params = { "auditFlows.userId" : data.userId }
// 1:待审批 2:审批中 3:审批拒绝 4:审批通过 5:作废
if (action == "refuse") {
params.applyState = 3;
}else {
// 审核通过,如果审批流中的人员数量和日志的数量相同，则说明流程已经走完。
if (doc.auditFlows.length == doc.auditLogs.length) {
ctx.body = util.success('当前申请单已处理，请勿重复提交')
return;
} else if (doc.auditFlows.length == doc.auditLogs.length + 1) {
// 判断是否为最后一级审批人员
params.applyState = 4;
} else if (doc.auditFlows.length > doc.auditLogs.length) {
// 判断是中间的处理人员，获取下一级审核人信息
params.applyState = 2;
params.curAuditUserName = doc.auditFlows[doc.auditLogs.length + 1].userName;
}
}
// 添加每一级审批日志
auditLogs.push({
userId: data.userId,
N d t N
// 审核状态是1或者审核状态是2
let params = { curAuditUserName : data.userName, $or:[ {applyState:1}, {applyState:2} ] }
Leave.find(params)
// 子文档列表中包含data.userId
let params = { "auditFlows.userId": data.userId }
Leave.find(params)
MP
开始一节任务练习
+15
返回
章节
问答
课签
笔记
资料
我的慕课
resafe
123456+
'第12章 休假申请前后端实现/12-10 【知识点梳理】本章重难点总结_慕课网.pdf'
'第12章 休假申请前后端实现/12-2.mp4'
'第12章 休假申请前后端实现/12-3.mp4'
'第12章 休假申请前后端实现/12-4.mp4'
'第12章 休假申请前后端实现/12-5.mp4'
'第12章 休假申请前后端实现/12-6.mp4'
'第12章 休假申请前后端实现/12-7.mp4'
'第12章 休假申请前后端实现/12-8.mp4'
'第12章 休假申请前后端实现/12-9.mp4'
'第13章 待我审批前后端实现/13-1.mp4'
'第13章 待我审批前后端实现/13-2.mp4'
'第13章 待我审批前后端实现/13-3.mp4'
'第13章 待我审批前后端实现/13-4.mp4'
'第13章 待我审批前后端实现/13-5.mp4'
'第13章 待我审批前后端实现/13-6 【知识点梳理】本章重难点总结_慕课网.pdf'
'第14章 造轮子/14-1.mp4'
2021/7/4 14-15 【知识点梳理】本章重难点总结_慕课网
https://coding.imooc.com/lesson/502.html#mid=45364 1/1
14-15 【知识点梳理】本章重难点总结
【知识点梳理】本章重难点总结
第十四章总结
目标
实现一个脚手架，通过命令可以自动创建项目。
插件介绍
commander
文档地址：https://www.npmjs.com/package/figlet
说明：命令行插件
使用方法：
figlet
文档地址：https://www.npmjs.com/package/figlet
说明：大型字符 - 终端打印大型文字
使用方法：
chalk
v create demo
let program = require("commander")
program.version("1.1.0")
program
.option('-n --name <type>', 'output name')
.command("create <app-name>")
.description("创建项目")
.action(name => {
// do something
console.log("输入命令后回车，会执行此处代码")
})
program.parse(process.argv);
var figlet = require('figlet');
figlet('Hello World!!', function(err, data) {
if (err) {
console.log('Something went wrong...');
console.dir(err);
return;
}
console.log(data)
});
// 打印结果
_ _ _ _ __ __ _ _ _ _
| | | | ___| | | ___ \ \ / /__ _ __| | __| | | |
| |_| |/ _ \ | |/ _ \ \ \ /\ / / _ \| '__| |/ _` | | |
| _ | __/ | | (_) | \ V V / (_) | | | | (_| |_|_|
|_| |_|\___|_|_|\___/ \_/\_/ \___/|_| |_|\__,_(_|_)
返回
章节
问答
课签
笔记
资料
我的慕课
造轮子如何判断一个人有能力?什么是造轮子?造轮子如何判断一个人有能力?什么是造轮子?造轮子如何判断一个人有能力?什么是造轮子?
造轮子如何判断一个人有能力?
Review Code-质量过硬·
工作汇报-业绩好
·解决问题-能力高·
技术话题深度沟通-潜力 什么是造轮子?·重新实现现有的功能，以达到更高的效率。 什么是造轮子?·重新实现现有的功能，以达到更高的效率。
封装 开闭原则 设计模式 代码整洁之道
方法论 性价比 progod造轮子究竟造的是什么?
·工具、框架、系统等提高效率的东西…·
Git、 Vue/React、 Koa、 AntD、 @vue/cli....平衡车 滑板 .....4k造轮子
前端未来
前端基础
框架应用
算法原理
工具
沟通
架构
解决问题
项目实战
服务器造轮子本周内容·v-cli：通过v-cli快速创建标准项目· query-form 低代码
前端行业高频词汇·
低代码·智能前端·工程化部署低代码行业划分·
Low Code
No Code·
Pro Code 低代码Low Codeform-generatorAMISESView
低代码No Code百度H5百度AMIS云凤蝶飞冰大屏可视化易搭微搭use dev plugins script module sys .....uni coutom extend many modle 开发Low Code· VForm· VTabledel power carefull
以下开发cli init----
yarn add figlet chalk inquirer shelljsI ora download-git-repo commander -Sloading效果
ora文档地址：https://www.npmjs.com/package/ora说明：loading效果 仓库下载
download-git-repo文档地址：https://www.npmjs.com/package/download-git-repo说明：仓库下载了
命令行参数输入交互
inquirer文档地址：https://www.npmjs.com/package/inquirer说明：命令行参数输入交互
彩色文字-美化终端字符显示
chalk文档地址：https://www.npmjs.com/package/chalk说明：彩色文字-美化终端字符显示大型字符-终端打印大型文字
figlet文档地址：https://www.npmjs.com/package/figletアよ说明：大型字符-终端打印大型文字
命令行插件
commander文档地址：https://www.npmjs.com/package/figlet说明：命令行插件积木...
Review Code-质量过硬· rc
工作汇报-业绩好 ppt
解决问题-能力高· deep
技术话题深度沟通-潜力 阔度
git.imooc.com/coding-502/manager-fe/src/2-7首页布局开发
gitee.com/jack-bean/rocket-cli
'第14章 造轮子/14-10.mp4'
'第14章 造轮子/14-11.mp4'
'第14章 造轮子/14-12.mp4'
'第14章 造轮子/14-13.mp4'
'第14章 造轮子/14-14.mp4'
'第14章 造轮子/14-15 【知识点梳理】本章重难点总结_慕课网.pdf'
'第14章 造轮子/14-2.mp4'
'第14章 造轮子/14-3.mp4'
'第14章 造轮子/14-4.mp4'
'第14章 造轮子/14-5.mp4'
'第14章 造轮子/14-6.mp4'
'第14章 造轮子/14-7.mp4'
'第14章 造轮子/14-8.mp4'
'第14章 造轮子/14-9.mp4'
'第15章 课程总结/15-1课程总结.mp4'
课程资料/manager-fe-master:
manager-fe/
课程资料/manager-server:
app.js config/ package.json routes/ views/
bin/ models/ public/ utils/ yarn.lock
系统模块用户登录系统首页用户管理菜单管理角色管理部门管理休假申请待我审批
核心技术架构设计Vue3全家桶Vite2.0Koa2log4js模块/组件化递归菜单Mong04.4axios封装JWT菜单权限审批流开发脚手架LowCode
用什么学什么，学会以后再扩展多看官方文档、多看开发社区深入理解问题本质自我驱动、多沟通、多历练
![题解：AT_abc373_g [ABC373G] No Cross Matching](https://cdn.luogu.com.cn/upload/image_hosting/kwkq2ojv.png)
