详解使用React全家桶搭建一个后台管理系统


Posted in Javascript onNovember 04, 2017

引子

学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果‘课后'适当地进行总结,必然更快地提升自己的水平。 由于公司采用的react+node的技术栈,于是就完成了一个reactSPA小项目,计划日后把平时工作中遇到的业务以及学习中遇到有趣的东西给抽象成demo展示出来。目前该项目只是把雏形搭好,效果如下。在此文的基础上,写了篇新文章使用React全家桶搭建一个后台管理系统,欢迎围观。(附注:因为项目不时更新,文章不一定会即时更新,所以以实际的项目为准)

详解使用React全家桶搭建一个后台管理系统

其实这套界面风格不仅仅可以作为后台管理系统界面,也可以修改成一个可以展示项目并且美观的博客。项目地址在这里(本地跑效果更佳),如果有好的意见欢迎提issue或pr。

目录结构

详解使用React全家桶搭建一个后台管理系统

项目的初始结构和构造原因已罗列如上,由于过些日子会引人ts,所以项目结构必然还会改动,但肯定基于这基本雏形扩展的。

下面对目录结构作以下说明

  1. 项目最初始是用create-react-app初始化的,create-react-app 是Facebook官方提供的react脚手架,也是业界最优秀的 React 应用开发工具之一;
  2. 中间件目录到时候可以引人日志中间件等;
  3. container和components存放的都是react组件,区别是:只要和主页样式有关的组件就放在container中,和功能有关的模块(比如我实现分装的表格组件、弹出输入框组件等)就应放到components中;
  4. 前端有些通用配置最好是存到全局(浏览器)中,这样调用起来就不用引用了,方便;
  5. ajax模块需要自己实现的原因是到时候要是自己需要有跨域cors之类的需求,需要自定义多种Ajax请求(用fetch的情况下,未来fetch会越来越强大)

技术栈相关

虽然用到的技术栈众多,但是自己也谈不上熟练运用,多半是边查API边用的,所以只罗列些自己用相关的技术栈解决的点;

webpack(2.6)

①按需加载:

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理),在config/webpack.config.dev.js 文件中作如下修改:

{
 test: /\.(js|jsx)$/,
 include: paths.appSrc,
 loader: 'babel',
 query: {
   plugins: [
    ['import', [{ libraryName: "antd", style: 'css' }]],
   ],
  cacheDirectory: true
 }
},

②引人less:

首先引人 less-loader 来加载 less 样式,同时修改 config/webpack.config.dev.js 文件

loaders: [
 {
  exclude: [
   /\.html$/,
   /\.(js|jsx)$/,
+   /\.less$/,
   /\.css$/,
   /\.json$/,
   /\.svg$/
  ],
  loader: 'url',
 },

...

 // Process JS with Babel.
 {
  test: /\.(js|jsx)$/,
  include: paths.appSrc,
  loader: 'babel',
  query: {
   plugins: [
-    ['import', [{ libraryName: "antd", style: 'css' }]],
+    ['import', [{ libraryName: "antd", style: true }]], // 加载 less 文件
   ],
  },

...

+ // 解析 less 文件,并加入变量覆盖配置
+ {
+  test: /\.less$/,
+  loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}'
+ },
]

这里利用了 less-loader 的 modifyVars 来进行主题配置, 变量和其他配置方式可以参考 配置主题 文档。

③一键发布到gh-pages:

用到了gh-pages,使用 npm run deploy 一键发布到自己的gh-pages上,姑且把gh-pages当成生产环境吧,所以在修改config/webpack.config.dev.js 文件的同时也要对config/webpack.config.prod.js作出一模一样的修改。

ps:尽管我是这样发布到gh-pages的,该项目的gh-pages展示地址为这里,在gh-pages上展示图明显比本地大了好些像素,如果有朋友知道是为什么,不吝赐教啊。

④引用路径的缩写:

resolve: {
  fallback: paths.nodePaths,
  alias: {
   'react-native': 'react-native-web',
   components: path.resolve(__dirname, '..') + '/src/common/components',
   container: path.resolve(__dirname, '..') + '/src/common/container',
   images: path.resolve(__dirname, '..') + '/src/common/images',
   pages: path.resolve(__dirname, '..') + '/src/common/pages',
   utils: path.resolve(__dirname, '..') + '/src/common/utils',
   data: path.resolve(__dirname, '..') + '/src/server/data',
  }
 },

配置了引用路径的缩写后,就可以在任意地方如这样引用,比如

详解使用React全家桶搭建一个后台管理系统

antd(2.10)

antd是(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出的一个中台设计语言 Ant Design,使用者包括蚂蚁金服、阿里巴巴、口碑、美团、滴滴等一系列知名公司,而且我从他们的设计理念也学到了很多关于UI、UX的知识。

该项目采用的是antd最新的版本2.10.0,由于2.x的版本和1.x的版本还是相差蛮大的,之前参考的项目(基于1.x)改起来太费劲,所以在组件那块就干脆自己重新封装了一遍。这部分知识点我建议还是看文档,文档解决不了扒扒源码。

react-router(4.x)

react-router 4.x和2.x的差异又是特别的大,召唤文档,网上基本上都还是2.x的教程,看过文档之后,反正简而言之其就是要让使用者更容易上手。印象最深的是以前嵌套路由写法在4.x中写到同层了。如下示例他们的效果是相同的。

2.x:

<Route path="/" component={App}>
  <Route path="/aaaa" component={AAAA} />
  <Route path="/bbbb" component={BBBB} />
</Route>

4.x:

<Route path="/" component={App} />
<Route path="/aaaa" component={AAAA} />
<Route path="/bbbb" component={BBBB} />

还有更多的特性和API的出现,期待有更好的分析文章的出现,有机会我也会来总结下react-router(4.x)和(2.x)的差异。

fetch

先推荐这篇文章《传统Ajax已死,Fetch永生》,再推荐API;

fetch是个好东西,好在简单,除了promise最基本的用法,还能这样写

fetch(url).then(response => response.json())
 .then(data => console.log(data))
 .catch(e => console.log("Oops, error", e))

try {
 let response = await fetch(url);
 let data = await response.json();
 console.log(data);
} catch(e) {
 console.log("Oops, error", e);
}

但是其简洁的特点是为了让我们可以自定义其扩展,还是其本身就还不完善呢?我在调用JSONP的请求时,发现用fetch掉不同,后来在文档上才发现其不支持JSONP的调用,所幸社区还是很给力的找到了fetch-jsonp这个模块,实现了对百度音乐接口的JSONP调用。fetch-jsonp使用也和fetch类似,代码如下

fetchJsonp(url,{method: 'GET'})
.then((res) =>res.json())

.then((data) => {})

redux

使用了redux也已经有段时日了,我对redux的定义就是更好的管理组件的状态,没有redux的时候就像现在这个应用一样,逻辑少状态变化也还不太复杂,但是一旦逻辑复杂起来,各种组件状态、界面耦合起来,就容易出岔子,那redux就是为了解决这个而生的,让我们可以更多地关注UI层,而降低对状态的关注。之前也写了些redux的文章,纸上得来终觉浅,绝知此事要躬行。

--------------------------更新---------------------------

已经在项目中加入了redux技术栈。

项目的一些待扩展计划

封装组件

不管组件封装得好不好,个人感觉其是提高水平很高效的方法,多练,继续封装出各式各样的功能组件。

typescript

公司大概会在6月份开始,新的项目就要采用ts开发了,所以我也到时会在该项目中引人ts的语法,我现在的感觉是使用ts后,前后端对接会更加轻松,不会有一些类型不匹配的低级错误,而且antd貌似和ts也能兼容得蛮好。

测试框架

这部分其实我还是没什么经验的,先写上吧,有机会会拿这个项目开刀,并写心得。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
正则表达式语法
Oct 09 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
canvas多重阴影发光效果实现
Apr 20 Javascript
JavaScript中立即执行函数实例详解
Nov 04 #Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 #Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 #Javascript
简述Angular 5 快速入门
Nov 04 #Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 #Javascript
vue中使用localstorage来存储页面信息
Nov 04 #Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 #jQuery
You might like
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
php事件驱动化设计详解
2016/11/10 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
JavaScript函数详解
2015/02/27 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Python中print函数简单使用总结
2019/08/05 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Python itertools.product方法代码实例
2020/03/27 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
授权委托书
2014/07/31 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android