- 博客(233)
- 收藏
- 关注
RSS订阅原创 React项目实战之租房app项目（十）个人中心模块&登录访问控制&项目打包部署上线
到此为止，我们的项目就已经全部开发完成了，由于篇幅有限，我们只展示了一部分的业务逻辑的编写，在真实的生产环境中，还要根据公司的需求去灵活运用这些知识。
2023-02-10 14:47:29
772
1
原创 React项目实战之租房app项目（九）登录模块基础布局和功能实现
1 、使用场景：表单处理，表单验证 2 、优势：轻松处理React中的复杂表单，包括：获取表单元素的值，表单验证和错误信息，处理表单提交，并且将这些内容放在一起统一处理，有利于代码阅读，重构，测试等 3 、使用方式： 1. 高阶组件（withFormik） 2. render - props（ < Formik render = {() => {} } / > ）
2023-02-03 14:06:55
1461
原创 React项目实战之租房app项目（八）列表找房模块之获取并渲染房源数据&吸顶功能&整体优化&遮罩层动画效果
默认：List组件只让组件自身出现滚动条，无法让整个页面滚动，也就无法实现标题吸顶功能解决方式：使用WindowScroller高阶组件，让List组件跟随页面滚动（为List组件提供状态，同时还需要设置List组件的autoHeight属性）注意：WindowScroller高阶组件只能提供height，无法提供width解决方式：在WindowScroller组件中使用AutoSizer高阶组件来为List组件提供width使用场景：展示筛选对话框的时候，实现动画效果，增强用户体验。
2023-01-28 10:56:03
829
原创 React项目实战之租房app项目（七）列表找房模块之条件筛选
1.1.2 实现步骤在Filter组件中需要完成的步骤：在FilterPicker组件中需要完成的步骤：1.1.3 代码示例在src/pages/HouseList/components/Filter/index.js中添加如下代码：首先，提供组件展示或隐藏的状态和筛选条件数据：然后，在render方法中判断openType的值为area/mode/price 时，就显示FilterPicker组件，以及遮罩层：然后，在标题点击事件中，修改状态openType为当前type，展示对话框：然后
2023-01-02 10:23:06
745
原创 React项目实战之租房app项目（六）渲染房源列表&axios优化&封装顶部搜索栏&列表找房模块之条件筛选
当每一次请求接口的时候，都需要写相同的baseUrl。例如：http://localhost:8080这样太繁琐，而且当我们的项目部署上线时，很难替换由于篇幅有限，条件筛选其他组件将留到下一篇笔记介绍。
2022-11-30 10:30:59
719
原创 React项目实战之租房app项目（五）顶部导航组件封装&CSS Modules解决样式覆盖&地图找房模块封装
实现步骤：代码示例：在src/components/NavHeader/index.js中添加如下代码：1.2 样式调整在src/components下的NavHeader文件夹中创建 index.scss 文件把之前城市列表写过的样式，复制到这个文件下注意：默认情况下，只有路由 Route 直接渲染的组件才能够获取到路由信息，如果需要在其他组件中获取到路由信息，可以通过 withRouter 高阶组件来获取实现步骤：代码示例：在src/components/NavHeader/index.j
2022-11-21 09:48:59
756
1
原创 浅谈网络损伤仪HoloWAN的使用场景
为了实时⾳视频产品在推出市场时拥有优质的⽤户体验，产品开发者必须在开发和测试时仿真各种可能存在的弱⽹环境，如2G、3G、4G、5G、Wi-Fi、ADSL、卫星⽹络等等各种⽹络可能存在的⽹络条件。千百年来在军事活动和事务中⽹络和信息的传递都起着⾄关重要的作⽤，随着现代通讯的兴起，信息传达到前线部队的⽅式变得越来越多样化，⽬前⼤部分的军事通信都依赖于⽆线电，⽤于信息交换和指挥的系统正在迅速发送变化，军事服务现在的⽬标是通过⽆线⽹络和卫星⽹络提供关键的IP⽹络服务。数据迁移带来好处的同时，也⾯临了⾮常多的挑战。
2022-11-16 11:27:38
1685
原创 网络损伤仪HoloWAN的使用背景
随着数据中心、虚拟化、云计算、远程办公快速发展以及人们对无线技术的越发依赖，通过广域网、ADSL、GPRS、3G/4G、5G、光纤、云服务、无线电、卫星网络等网络环境部署的应用的趋势越发明显。尽管如此，主流应用程序开发中仍然存在一个明显的问题，软件开发、软件性能测试仍经常只在测试实验室中的快速可靠的局域网（Lan）中进行。在完美的局域网条件下测试应用程序的性能，并不能保证应用在非局域网环境下性能可靠，LAN和WAN是差异巨大的网络，
2022-11-14 16:42:49
705
原创 React项目实战之租房app项目（四）长列表性能优化&城市选择模块渲染列表
在展示大型列表和表格数据的时候（城市列表、通讯录、微博等），会导致页面卡顿，滚动不流畅等性能问题这样就会导致移动设备耗电加快，影响移动设备的电池寿命产生性能问题的原因：大量DOM节点的重绘和重排懒渲染可视区域渲染react-virtualized是React组件，用来高效渲染大型列表和表格数据我们使用它来渲染城市列表数据到目前为止，我们完成了项目的4个部分的代码编写，分别是1、项目准备：部署本地接口，脚手架初始化项目，antd-mobile，路由等。
2022-11-03 08:00:36
503
原创 React项目实战之租房app项目（三）首页顶部导航&城市选择模块数据处理
在src/pages/index/index.js中添加如下代码：相关样式（index.scss）：1.3 百度地图API1.3.1 申请百度账号和秘钥1、注册百度账号，登录百度地图开放平台。2、点击创建应用。3、获取到密钥（ak）1、在项目入口文件index.js中引入百度地图 API 的JS文件，替换自己申请好的密钥2、在index.css 中设置全局样式：3、在src/pages目录下创建Map组件，配置路由，在Map组件中添加如下代码：1.4 获取顶部导航城市信息1、通过 IP
2022-10-25 08:48:43
907
1
原创 React项目实战之租房app项目（二）首页模块
修改首页路由的配置：这里需要添加 exact属性如果是默认路由需要跳转到 /home在src/App.js中添加如下代码：在src/pages/home/index.js中添加如下代码：二、轮播图2.1 轮播图效果图1、打开antd-mobile组件库的Carousel组件文档2、选择基本，点击 () 显示源码3、拷贝核心代码到Index的组件中4、分析并且调整代码，让其能够在项目中运行导入组件：状态：声明周期钩子函数，修改状态，设置数据：结构：2.4 轮播图代码重构先优化
2022-10-23 08:25:45
1842
原创 React项目实战之租房app项目（一）项目搭建&底部导航栏
项目简介：此次开发的项目是移动Web端的项目，核心业务是实现在线租房，功能类似链家，贝壳等APP主要模块：在线找房（地图、条件搜索）、用户登录、房源发布等效果展示：核心技术栈：1、React核心库：react、react-dom、react-router-dom2、脚手架：create-react-app3、数据请求：axios4、UI组件库：antd-mobile5、其他组件库：react-virtualized、formik+yup、react-spring等。
2022-10-20 09:39:29
2147
1
原创 Vue项目实战之人力资源平台系统（十四）项目打包部署上线
到此为止，我们已经成功地将项目部署上线，这个项目总体来说是非常复杂的，但是我们通过模块化开发，将其解耦成一个一个的小模块进行开发，最后再将其组合起来，这样就完成了一个完整的项目。
2022-10-14 10:36:46
812
原创 Vue项目实战之人力资源平台系统（十三）首页模块
在src/views/dashboard/index.vue中添加布局代码，由于首页内容大部分都是静态内容，所以在这不做代码演示在src/views/dashboard/index.vue中添加如下代码：四、工作日历组件封装在src/views/dashboard/components/work-calendar.vue中添加以下代码：工作日历可以基于Element组件el-calendar进行封装：实现工作日历逻辑：在src/views/dashboard/index.vue中应用该组件：五、
2022-10-12 10:38:02
921
原创 Vue项目实战之人力资源平台系统（十二）权限管理模块（下）
import {// 筛选权限路由 // 第二个参数为当前用户的所拥有的菜单权限 // menus: ["settings","permissions"] // asyncRoutes是所有的动态路由 // asyncRoutes [{path: 'setting',name: 'setting'},{}] filterRoutes(context , menus) {
2022-10-09 08:37:34
473
原创 Vue项目实战之人力资源平台系统（十一）权限管理模块（上）
我们项目使用的是RBAC的权限模型，RBAC(Role-Based Access control) ，也就是基于角色的权限分配解决方案，相对于传统方案，RBAC提供了中间层Role（角色），其权限模式如下：RBAC实现了用户和权限点的分离，想对某个用户设置权限，只需要对该用户设置相应的角色即可，而该角色就拥有了对应的权限，这样一来，权限的分配和设计就做到了极简，高效，当想对用户收回权限时，只需要收回角色即可用户和角色是1对多的关系，即一个用户可以拥有多个角色在src/views/employees/co
2022-09-30 10:56:53
1176
原创 Vue项目实战之人力资源平台系统（十）图片上传和打印员工信息
我们找一个可以免费上传图片的服务器，帮我们代管图片，我们在自己的数据库里只保存一个地址就行。这个服务器就是一个公共的文件服务器，在这里我们使用腾讯云来保存图片二、图片上传流程解析我们新建的图片上传组件需要满足以下几个需求：三、实现文件上传组件3.1 安装依赖3.2 上传图片组件的基本布局在src/components/ImageUpload/index.vue中添加如下代码：3.3 全局注册组件在src/components/index.vue中添加如下代码：3.4 点击图片进行预览
2022-09-27 13:01:35
695
原创 Vue项目实战之人力资源平台系统（九）员工详情页
在src/router/modules/employees.js中添加路由规则：三、员工详情页基本布局在src/views/employees/details.vue中建立基本布局：然后在src/views/employees/index.vue中绑定跳转：然后在src/api/employees.js中封装读取和保存用户信息的请求：四、实现用户名和密码的修改在src/views/employees/detail.vue中添加如下代码：五、将个人详情和岗位详情封装为组件5.1 个人详情和岗位
2022-09-25 07:52:01
750
原创 Vue项目实战之人力资源平台系统（八）员工信息的导入导出
首先需要注意的是，vue-element-admin已经提供了类似功能，我们在其基础上做二次开发即可excel导入功能需要使用xlsx，所以需要安装xlsx插件：$ npm i xlsx将vue-element-admin提供的导入功能新建一个组件，位置： src/components/UploadExcel/index.vue在src/components/index.vue中添加如下代码：1.4 员工信息导入组件的基本布局src/components/UploadExcel/index.vue添
2022-09-21 20:28:35
956
1
原创 Vue项目实战之人力资源平台系统（七）员工管理模块
在后续的业务开发中，经常会用到一个类似下图的工具栏：在src/components/PageTools目录下新建index.vue组件：1.3 全局注册组件首先在src/componets/目录下新建index.vue文件，该文件负责所有的公共的组件的全局注册：然后在项目入口文件src/main.js中进行注册：二、员工列表展示2.1 员工列表页面效果图在src/employees/index.vue中添加如下代码：2.3 获取员工列表数据并分页展示首先，在src/api/employee
2022-09-19 19:44:00
1586
1
原创 Vue项目实战之人力资源平台系统（六）角色管理模块
在src/views/setting/index.vue添加如下代码：三、获取角色信息首先，在src/api/setting.js中封装读取角色的信息的请求：然后，在src/views/setting/index.vue中调用接口获取数据，绑定表格数据：四、获取公司信息数据首先，在src/api/setting.js中封装读取公司信息的请求：然后在src/store/getters.js中快捷获取companyId：然后在src/views/setting/index.vue中绑定公司表单数据
2022-09-15 14:18:53
763
原创 Vue项目实战之人力资源平台系统（五）组织架构模块
今天主要实现了组织架构页面的相关业务逻辑，主要知识点包括树形结构的渲染，添加部门的规则校验，添加部门，删除部门，编辑部门的逻辑编写，总体来说难度不大， 但是代码量较多，需要耐心学习。
2022-09-13 16:40:47
1549
原创 Vue项目实战之人力资源平台系统（四）路由模块
今天的内容比较简单，主要是给整个项目配置路由模块，让其能够实现页面跳转和左侧菜单展示。然后今天是中秋节，在这里祝看到这篇文章的小伙伴们中秋节快乐！
2022-09-10 17:12:50
579
原创 Vue项目实战之人力资源平台系统（三）主页模块
今天主要实现了左侧和顶部导航栏模块和的布局，以及补全了登录认证流程，添加了退出登录功能，代码较多，请细细品味。
2022-09-08 16:18:32
846
原创 Vue项目实战之人力资源平台系统（一）框架介绍及项目环境搭建
vue - element - admin 是一个后台前端解决方案，它基于 vue 和 element - ui实现它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件它可以帮助我们快速搭建企业级中后台产品原型。
2022-09-05 14:46:26
1811
1
原创 Vue项目实战之电商后台管理系统(九) 项目优化部署上线
今天的内容主要是项目优化相关的知识，通过优化可以提高项目运行速度，减小项目体积，这在以后开发大型项目时非常有用，值得学习。
2022-09-03 20:50:20
926
原创 Vue项目实战之电商后台管理系统(七) 商品列表模块
今天完成了商品列表模块的编写，核心是图片上传及展示相关知识，以及商品列表数据的增删改查，逻辑性不强，代码量比较多，需要足够的耐心去实现。
2022-08-31 14:42:52
1367
原创 Vue项目实战之电商后台管理系统(六) 分类参数管理模块
今天的内容主要是分类参数的增删改查操作，要注意标签页和下拉菜单的使用方法。总体来说比较简单，易于掌握。
2022-08-29 15:21:35
316
原创 Vue项目实战之电商后台管理系统(四) 权限角色管理模块
今天完成了项目的权限管理页面和角色管理页面，其中涉及到了很多新的知识点，代码比较多，逻辑也比较复杂，需要仔细研读才能理解其中的逻辑。
2022-08-25 14:38:15
2101
原创 Vue项目实战之电商后台管理系统(五) 商品分类模块
今天主要完成了展示商品列表页面，添加商品两大页面的制作，代码较多，逻辑也比较复杂，值得细细品味。
2022-08-24 16:57:54
2397
原创 Vue项目实战之电商后台管理系统(三) 用户管理模块
今天完成了用户管理模块的内容，包括获取用户列表，搜索，添加及删除用户功能，核心是通过前后端的交互获取动态数据。
2022-08-23 15:52:35
2312
原创 Vue项目实战之电商后台管理系统(二) 主页模块
至此我们的主页的总体布局就完成了，下一步要开发右侧主体显示的其他页面组件，比如用户模块，商品模块等。
2022-08-22 15:19:59
2818
原创 Vue太难啦！从入门到放弃day07——Vue前端工程化之Webpack
webpack 是一个流行的前端项目构建工具（打包工具），可以解决当前 web 开发中所面临的困境。webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。目前绝大多数企业中的前端项目，都是基于 webpack 进行打包构建的。...
2022-08-11 15:53:16
304
原创 Vue太难啦！从入门到放弃day05——Vue前后端交互
Promise主要解决异步深层嵌套的问题Promise 提供了简洁的API，使得异步操作更加容易从语法上讲，Promise是一个对象，也是一个函数Fetch API是新的ajax解决方案，更好的封装了ajax代码使用fetch请求时，也要遵循HTTP协议，请求方式有POST，GET，DELETE，UPDATE，PATCH和PUT，默认的是 GET 请求使用fetch时需要在 options 对象中 指定对应的 method 请求方式不同的请求方式，参数传递的格式也不同。...
2022-08-09 15:08:21
969
2
原创 Vue太难啦！从入门到放弃day04——Vue组件
恰逢周末休息了两天，所以没有更新，各位莫怪，今天周一又开始努力学习Vue了！今天学的是Vue组件，干就完了，奥利给！！
2022-08-08 11:38:23
416
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人