其他章节请看: react 高效高质量搭建后台系统 系列 脚手架搭建 本篇主要创建新项目 myspug,以及准备好环境(例如:安装 spug 中用到的包.本地开发和部署.自定义配置 react-app-rewired.代理 http-proxy-middleware.babel),为后续搭建真正的框架打好基石. 注:许多细节前面我们已经研究过,这部分就不在冗余介绍,请看相关链接. 创建新项目 详情请看 这里 Create React App 是一个用于学习 React 的舒适环境,也是用 Rea…

其他章节请看: react 高效高质量搭建后台系统 系列 请求数据 后续要做登录模块(主页),需要先和后端约定JSON数据格式,将 axios 进行封装,实现本地的数据模拟 mockjs. Tip:spug 中后端返回 json 通常有 data 和 error两个 key.就像这样:{data: [,-], error: ""} axios spug 中的 axios spug 中对 axios 的封装主要在 http.js 文件中.核心是请求拦截器和返回拦截器.源码如下: // s…

其他章节请看: react 高效高质量搭建后台系统 系列 antd 后续要做登录模块(主页),不仅要解决请求数据的问题,还需要完成 antd 配置以及样式的准备. antd 多种主题风格 详情请看 这里 spug 没有提供多种主题风格. 笔者还是决定稍作研究,万一公司需要呢. 步骤如下: 安装 less less-loader.前文已经安装 修改 config-overrides.js // config-overrides.js -const { override, fixBabelImpor…

其他章节请看: react 高效高质量搭建后台系统 系列 登录 本篇将完成登录模块.效果和 spug 相同: 需求如下: 登录页的绘制 支持普通登录和LDAP登录 登录成功后跳转到主页,没有登录的情况下访问系统会重定向到登录页,登录成功后再次回到之前的页面.系统会话过期后,请求会重定向到登录页. Tip:退出登录在进入系统后进行,暂不不管. 路由和登录 登录页是进入系统的门户,登录页绘制逻辑比较简单(单个模块的开发比较简单). 首先要解决:根据 url 不同,进入登录页还是系统主页.这里需要使用…

其他章节请看: react 高效高质量搭建后台系统 系列 系统布局 前面我们用脚手架搭建了项目,并实现了登录模块,登录模块所依赖的请求数据和antd(ui框架和样式)也已完成. 本篇将完成系统布局.比如导航区.头部区域.主体区域.页脚. 最终效果如下: spug 中系统布局的分析 spug 登录成功后进入系统,页面分为三大块:左侧导航.头部和主体区域.如下图所示: Tip:spug 将版权部分也放在主体区域内. 切换左侧导航,主体内容会跟着变化,头部区域不变.例如从工作台切换到 Dashboar…

其他章节请看: react 高效高质量搭建后台系统 系列 表格 有一种页面在后台系统中比较常见:页面分上下两部分,上部分是 input.select.时间等查询项,下部分是查询项对应的表格数据.包含增删改查,例如点击新建进行新增操作.就像这样: 本篇将对 ant 的表格进行封装.效果如下: spug 中 Table 封装的分析 入口 我们选择比较简单的模块(角色管理)进行分析. 进入角色管理模块入口,发现表格区封装到模块当前目录的 Table.js 中: // spug\src\pages\sy…

其他章节请看: react 高效高质量搭建后台系统 系列 权限 本系列已近尾声,权限是后台系统必不可少的一部分,本篇首先分析spug项目中权限的实现,最后在将权限加入到我们的项目中来. spug 中权限的分析 权限示例 比如我要将应用发布模块的查看权限分给某用户(例如 pjl),可以这样操作: 在角色管理中新建一角色(例如 demo),然后给该角色配置权限: 新建用户(pjl)并赋予其 demo 权限 pjl 登录后就只能看到自己有权限的页面和操作: 入口 上述示例中,以 pjl 登录成功后返回…

其他章节请看: react 高效高质量搭建后台系统 系列 尾篇 本篇主要介绍表单查询.表单验证.通知(WebSocket).自动构建.最后附上 myspug 项目源码. 项目最终效果: 表单查询 需求:给角色管理页面增加表格查询功能,通过输入角色名称,点击查询,从后端检索出相应的数据. 效果如下: spug 中的实现 [spug][spug] 中的这类查询都是在前端过滤出相应的数据(没有查询按钮),因为 spug 中大多数的 table 都是一次性将数据从后端拿回来. spug 中角色管理搜索相…

首先按照vue.js官网的指令安装: 1.本地安装好node.js 2.根据官方命令行工具 详情 这样一个官方的脚手架工具就已经搭建好了:但是有一点需要注意的是由于现在按照官方的搭建方法是搭建vue2.0如果我们是新手想先搭建1.0的该如何呢.很简单:vue init webpack#1.0 my-project 就好了 开始搭建我们需要的东西了: 在package.json中我们可以看到 我们的 dependencies下面有一个vue1.0.28的版本信息:这里面集成的是vue的信息:我们可…

下载安装XAMPP软件,运行Apache和MySQL 查看项目文件放在哪个位置可以正常运行 然后访问localhost即可 下载weiphp官网的weiapp(专为微信小程序开发使用)放在htdocs目录下 安装完weiphp之后,访问: http://localhost/weiphp/index.php?s=/admin 进入后台管理系统…