随笔分类 - react
摘要：其他章节请看： react 高效高质量搭建后台系统 系列 尾篇 本篇主要介绍表单查询、表单验证、通知（WebSocket）、自动构建。最后附上 myspug 项目源码。 项目最终效果： 表单查询 需求：给角色管理页面增加表格查询功能，通过输入角色名称，点击查询，从后端检索出相应的数据。 效果如下：
阅读全文
摘要：其他章节请看： react 高效高质量搭建后台系统 系列 权限 本系列已近尾声，权限是后台系统必不可少的一部分，本篇首先分析spug项目中权限的实现，最后在将权限加入到我们的项目中来。 spug 中权限的分析 权限示例 比如我要将应用发布模块的查看权限分给某用户（例如 pjl），可以这样操作： 在角
阅读全文
摘要：其他章节请看： react 高效高质量搭建后台系统 系列 表格 有一种页面在后台系统中比较常见：页面分上下两部分，上部分是 input、select、时间等查询项，下部分是查询项对应的表格数据。包含增删改查，例如点击新建进行新增操作。就像这样： 本篇将对 ant 的表格进行封装。效果如下： spug
阅读全文
摘要：其他章节请看： react 高效高质量搭建后台系统 系列 系统布局 前面我们用脚手架搭建了项目，并实现了登录模块，登录模块所依赖的请求数据和antd（ui框架和样式）也已完成。 本篇将完成系统布局。比如导航区、头部区域、主体区域、页脚。 最终效果如下： spug 中系统布局的分析 spug 登录成功
阅读全文
摘要：其他章节请看： react 高效高质量搭建后台系统 系列 登录 本篇将完成登录模块。效果和 spug 相同： 需求如下： 登录页的绘制 支持普通登录和LDAP登录 登录成功后跳转到主页，没有登录的情况下访问系统会重定向到登录页，登录成功后再次回到之前的页面。系统会话过期后，请求会重定向到登录页。 T
阅读全文
摘要：其他章节请看： react 高效高质量搭建后台系统 系列 antd 后续要做登录模块（主页），不仅要解决请求数据的问题，还需要完成 antd 配置以及样式的准备。 antd 多种主题风格 详情请看 这里 spug 没有提供多种主题风格。 笔者还是决定稍作研究，万一公司需要呢。 步骤如下： 安装 le
阅读全文
摘要：其他章节请看： react 高效高质量搭建后台系统 系列 请求数据 后续要做登录模块（主页），需要先和后端约定JSON数据格式，将 axios 进行封装，实现本地的数据模拟 mockjs。 Tip：spug 中后端返回 json 通常有 data 和 error两个 key。就像这样：{data:
阅读全文
摘要：react 高效高质量搭建后台系统 前言 目标：用 react 高效高质量搭建后台系统 如何实现：搞定一个优秀的、通用的、有一定复杂度的react的后台系统。类似项目就可以依葫芦画瓢快速展开。 spug 能否当此重任？可以。首先它是一个优秀的开源 react 项目，此刻（20221215） Star
阅读全文
摘要：其他章节请看： react 高效高质量搭建后台系统 系列 脚手架搭建 本篇主要创建新项目 myspug，以及准备好环境（例如：安装 spug 中用到的包、本地开发和部署、自定义配置 react-app-rewired、代理 http-proxy-middleware、babel），为后续搭建真正的框
阅读全文
摘要：其他章节请看： react实战 系列 Redux 关于状态管理，在 Vue 中我们已经使用过 Vuex，在 spug 项目中我们使用了 mobx，接下来我们学习 Redux。 本篇以较为易懂的方式讲解mvc、flux、redux和react-redux的关系、redux 的工作流以及react-re
阅读全文
摘要：其他章节请看： react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用，受控组件和非受控是指什么？ React 中的路由原理是什么，如何更好的理解 React 应用的路由？ 请看下文： 简单的表单 你有见过在生成环境中没有涉及任何表单的应用吗？大多 web 应用都会
阅读全文
摘要：其他章节请看： react实战 系列 数据流和生命周期 如何处理 React 中的数据，组件之间如何通信，数据在 React 中如何流动？ 常用的 React 生命周期方法以及开源项目 spug 中使用了哪些生命周期方法？ 数据和数据流 虽然也有很多静态网站，但人们使用的大多数网站都充满了随时间变化
阅读全文
摘要：其他章节请看： react实战 系列 react 的第一个组件 写了 react 有一个半月，现在又有半个月没写了，感觉对其仍旧比较陌生。 本文分两部分，首先聊一下 react 的相关概念，然后不使用任何语法糖（包括 jsx）或可能隐藏底层技术的便利措施来构建 React 组件。 Tip：从一项新技
阅读全文
摘要：其他章节请看： react实战 系列 My Dashboard 上一篇我们在 spug 项目中模仿”任务计划“模块实现一个类似的一级导航页面（”My任务计划“），本篇，我们将模仿“Dashboard”来实现一个仪表盘“My Dashboard”。 主要涉及 antd 的 Grid、Card、Desc
阅读全文
摘要：其他章节请看： react实战 系列 起步 本篇我们首先引入 mockjs ，然后进入 spug 系统，接着模仿”任务计划“模块实现一个类似的一级导航页面（”My任务计划“），最后玩一下 Facebook 的 docusaurus，将 spug 官网文档在本地跑起来。 Tip：环境准备请看 上文 m
阅读全文
摘要：react实战 系列（未完结，持续更新中...） 前言 学习 react 的方法，比较常规的是跟着官方文档边看边做，可是 react 的官网教程有点难（至少比 vue 的难），亦或买几本讲基础的或实战类型的 react 的书，可是 react 是一个生态圈，比如要学 react、es6、webpac
阅读全文
摘要：其他章节请看： 七天接手react项目 系列 尾篇 前面我们依次学习了 react 基础知识、react 脚手架创建项目、react 路由，已经花费了不少时间，但距离接手 spug_web 项目还有一些困难。 package.json 作为项目的核心，从中我们能大概知晓此项目到底用了哪些技术，所以笔
阅读全文
摘要：其他章节请看： 七天接手react项目 系列 react 路由 本篇首先讲解路由原理，接着以一个基础路由示例为起点讲述路由最基础的知识，然后讲解嵌套路由、路由传参，最后讲解路由组件和一般组件的区别，以及编程式导航。 Tip：我们要接手的 react 项目是：spug_web。 什么是路由 路由就是根
阅读全文
摘要：其他章节请看： 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识，而真实项目通常是基于脚手架进行开发。 本篇首先通过 react 脚手架创建项目，分析其目录结构，接着编写第一个组件、解决样式覆盖，最后配置代理 proxy 以及
阅读全文
摘要：七天接手react项目 背景 假如七天后必须接手一个 react 项目（spug - 一个开源运维平台），而笔者只会 vue，之前没有接触过 react，此刻能做的就是立刻展开一个“7天 react 扫盲活动”。 react 活动扫盲方针 以读懂 spug 项目为目标 无需对每个知识点深究 功能优先
阅读全文
浙公网安备 33010602011771号