Vue与React基础开发知识点总结,如组件编写方法、权限校验方式、监听变量改变等,极其适用于后端工程师。文章结尾有极度提高开发效率的彩蛋(二次封装基于antd的前端初始化模板)
Vue与React基础开发知识点总结,如组件编写方法、权限校验方式、监听变量改变等,极其适用于后端工程师。文章结尾有极度提高开发效率的彩蛋(二次封装基于antd的前端初始化模板)
YxinMiracle[TOC]
Vue相关内容总结
1.Element Ui Plus - 基于Vue3的前端主键
2.AcroDesign - 有Vue和React版本,字节研发
最佳实践
Vue相关开发语法
组件的编写
场景:有一个Markdown编辑器在项目中需要使用到,没有必要在每个页面都使用相同的代码,可以把这个Markdown编辑器抽离出来作为单独的组件。
前提:我们称调用这个组件的界面为父页面,这个Markdown组件为子页面。
需要考虑到的问题:父页面出于业务的需要,我们是需要实时的获取子页面Markdown组件用户所编写的内容去做对应的逻辑处理。
这里所使用到的MarkDown编辑器为BtyeMD - 一款字节出品的MarkDown编辑器。但是需要结合heightlight.js。
对于子组件来说:
1 | <template> |
这里我们需要考虑到三个问题来提高组件的通用性:
- 这个组件所展示的内容,是需要父组件传递过来的,也就是
value
- 这个组件的模式,比如说:
可编辑
、只可观看
这样的模式,也是需要父组件进行传递过来的,也就是上面代码中的mode
。 - 最重要的一点,我们如何获取到用户输入到的内容,这个组件提供了一个
@change
属性来监听用户所输入到的内容,这个属性是一个函数,所以我们需要父组件传递过来一个函数,我们再通过子组件传递回去,也就是上诉代码中的mode
。
知道了需求过后,我们需要编写属于这个组件的属性:
1 | /** |
并且,需要给这些类型进行初始化,方式父组件没有传递导致错误:
1 | import { defineProps, withDefaults } from "vue"; |
定义好这些内容之后,可以让父组件进行调用相关的内容,
1 | <MdEditor |
这里我们看见并没有传递mode
属性,原因是子组件默认了model
为split
,所以我们可以选择不传递这个属性值。
在这个场景中,我们在form表达中使用了这个主键,这个form表单的属性包括:
1 | const form = ref<QuestionAddRequest>({ |
onAnswerChange
函数为实时改变form中的answer值:
1 | const onAnswerChange = (v: string) => { |
那么通过这样的方式我们就完成了一个Vue组件的编写。
权限校验
在前端开发中除了页面的编写还有如何使用用户的状态,这里的状态分为登录
和权限
在vue中我使用Vuex来保存用户的状态
1 | export default { |
那么,在用户登录的时候就可以调用Vuex来存储对应的用户变量:
1 | // 处理登录请求 |
那么,我们可以在main.ts
中来引入自定义编写的权限校验文件,在路由中,我们可以定义每个页面可以允许哪些权限的人进行访问,路由的代码定义如下,我们在meta属性中行定义了一个access属性,我们后续会使用这个属性来进行权限的控制。
1 | // 定义路由信息 |
首先我们可以在我们的项目的src
目录下创建一个access
文件夹,我们创建三个文件
第一个文件accessEnum.ts
,用来定义系统中存在哪些权限的用户,以本系统举例:
1 | const ACCESS_ENUM = { |
第二个文件checkAccess.ts
,定义了这个用户是否符合权限
1 | import ACCESS_ENUM from "@/access/accessEnum"; |
第三个文件index.ts
,定义了校验逻辑,当路由需要开始进行转变的时候:
1 | import router from "@/router"; |
上述的代码可以直接进行复制,只需要loginUser中所定义的属性需要和我的相同,也就是userRole
上诉代码编写完之后,直接在main.ts
中引入相关代码即可
1 | import "@/access"; |
监听页面中的某个变量是否有改变
使用watch
函数来进行监听,他所监听的变量是props.language
,只要这个变量变了,他就会执行下面的操作。
1 | watch( |
监听好几个变量是否有改变所做的操作
只要loadData
函数中所设计到的其中一个变量改变了,就会执行这个操作
1 | watchEffect(() => { |
需要Dom元素加载完后才执行的逻辑
在前端开发中经常见道需要某个dom元素加载完之后才可以执行某些逻辑的情况,在这里我们可以利用onMounted
的钩子函数。
1 | import { defineProps, onMounted, ref, toRaw, watch, withDefaults } from "vue"; |
然后我们假设我们需要等下面这个div加载之后才执行之后的逻辑:
1 | <template> |
我们使用ref获取这个div的实例化对象
1 | const codeEditorRef = ref(); |
然后再使用onMounted
,进行监听
1 | onMounted(() => { |
React相关内容总结
- ProComponents - ProCompnents GitHub
- AntDesign - AntDesign组件文档
最佳实践
- AntDesignPro-Preview-Vue - AntDesignPro-Vue3+Ts版本Preview
- AntDesignPro-Preview-React - AntDesignPro-React版本Preview
React相关开发语法
定义页面变量
比如说我们页面需要有三个变量basicInfo
、modelConfig
、fileConfig
这种,在vue3中我们会使用ref
语法,但是在react中不一样,会使用下面这种方式:
1 | const [basicInfo, setBasicInfo] = useState<API.GeneratorEditRequest>(); |
其中setxxxx
为为某个变量赋值,比如下面这种方式:
1 | onFinish={async (values) => { |
定义组件
在react中定义组件也是十分重要的,这非常有利于简化代码的复杂程度。
比如以下这个界面:
我们要将表格中最右边修改
和创建
按钮改为弹出框,并且作为组件的形式,减少主页面的代码复杂程度。比如创建
,我们在新建文件,
然后在主页面中进行引入,这里定义了几个值,首先是createModalVisible
,来控制这个弹出框是否可见,columns
表单字段信息,onSubmit
执行结束之后我们需要做什么事情,onCancel
需要之后需要做什么事情:
1 | <CreateModal |
然后我们在CreateModel.tsx
页面中定义对应的属性
1 | interface Props { |
定义好了之后,我们需要在主函数中对他进行使用
1 | const { visible, columns, onSubmit, onCancel } = props; |
整体效果:
1 | /** |
监听变量是否有改变所做的操作
1 | useEffect(() => { |
检查id
是否存在:效果函数开始时检查id
是否存在(即id
不是null
、undefined
或任何假值)。如果id
不存在,函数直接返回并不执行loadData()
。这可以防止在没有有效id
时进行不必要的数据加载。
条件执行loadData()
:只有当id
存在时,才调用loadData()
。这通常用于根据id
从服务器加载或请求数据。
依赖于id
的执行:通过将id
包含在依赖数组中,你告诉React,只有当id
的值改变时才需要重新执行useEffect
中的函数。这意味着:
- 如果
id
在重新渲染间保持不变,useEffect
不会再次执行。 - 如果
id
改变,无论是从undefined
变为具体值,还是从一个具体值变为另一个具体值,useEffect
都会执行。
至此,作为后端工程师来说,上面的内容应该足够开发大部分系统了。
由于喜欢React的代码风格,我编写了一套基于antd pro框架的一套模板,[yxinmiralce-antd-frontend-init] - 在Github上初步发布,里面包含了基础的CURD,OpenAPI相关配置,少些各种造轮子的代码。
如果有兴趣使用可以往下接着看,下面是我这个模板的ReadMe
<img height="160" src="https://pec-1300659502.cos.ap-guangzhou.myqcloud.com/logo.svg" />
<h1>YxinMiracle前端模板</h1>
<h3>一个属于后端工程师的前端极简模板。</h3>
基于 React + Ant Design 的项目初始模板,整合了常用框架和主流业务的示例代码。
[!IMPORTANT]
作者:YxinMIiracle 仅分享于 GitHub 本项目基于AntDesignPro-Preview-React进行二次开发,无任何商业用途!!
[TOC]
✈ 版本要求 & 特性
[!NOTE]
最好严格根据版本要求进行使用
- node >= 16
- npm >= 7.20.6
📦 安装教程
- 将代码拉取到本地
1 | git clone https://github.com/YxinMiracle/yxinmiralce-antd-frontend-init.git |
- 安装相关依赖
1 | npm install |
- 运行
1 | npm run start:dev |
🛰 相关特性
1. 权限控制
通过config/routes.ts
路由中access的属性,来判断该试图是否可被这个用户所访问
1 | export default [ |
2. 权限赋予
在项目中src/access.ts
的文件中,设置页面力度的权限设置
1 | export default function access(initialState: { currentUser?: API.LoginUserVO } | undefined) { |
全局初始化对象initialState
中的currentUser
会在登录中所赋予,在注销中被消除,登录赋予逻辑在src/pages/User/Login/index.tsx
中所赋予
1 | const handleSubmit = async (values: API.UserLoginRequest) => { |
在src/compoents/RightContent/AvatarDropdown.tsx
的登出逻辑被消除
1 | flushSync(() => { |
3. OpenAPI配置
在config/config.ts
中的OpenAPI配置更改自己的接口文档配置
1 | openAPI: [ |
4. 动态主题变化
官方Preview项目中并直接编写相关功能,作者根据Preview项目中的SettingDrawer
逻辑进行二次开发
在src/compoents/RightContent/AvatarDropdown.tsx
中编写主题变化逻辑
构建开关
1 | const switchTag = ( |
设定开关逻辑
1 | const switchDarkMode = async (checked: boolean) => { |
效果:
5. 全局配置悬浮
在文件app.tsx
中开启,可动态调整页面布局
1 | childrenRender: (children) => { |
🚄 更改项目名字
作为喜欢从零到一的专业开发者,项目名字绝对是要自己起的,但是怎么去改呢?
git下来项目之后,先不打开项目,根据下面步骤执行
- 第一步:先把
yxinmiralce-antd-frontend-init
替换成自己的项目名字。 - 第二步:打开项目全局搜索
shift
+f6
把yxinmiralce-antd-frontend-init
全部替换成项目名字。 - 第三步:把文件夹下的.idea文件删除,重新打开ide即可获得自己的全新项目。
🛣️ 相关文档
ProComponents - ProCompnents GitHub
- AntDesignPro-Preview-Vue - AntDesignPro-Vue3+Ts版本Preview
- AntDesignPro-Preview-React - AntDesignPro-React版本Preview
AntDesign - AntDesign组件文档