详解使用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 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
JScript中的条件注释详解
Apr 24 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
python中的yield使用方法
2014/02/11 Python
python分割列表(list)的方法示例
2017/05/07 Python
django中模板的html自动转意方法
2018/05/27 Python
使用python爬取B站千万级数据
2018/06/08 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
大学生毕业自我评价范文分享
2013/11/07 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
奠基仪式主持词
2014/03/20 职场文书
七夕活动策划方案
2014/08/16 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
56句经典英文座右铭
2019/08/09 职场文书
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL