- 项目来源于慕课，包括用户端和后台管理系统，前者可了解电商网站从设计到上线整个流程；后者采用React16 + React-Router4结合yarn、webpack、ES6和Sass、Bootstrap等技术，体验前开发端新技术。
- 对于前端新人，从前到后撸一把还是很有必要的，此项目旨在交流学习，后续会整理项目中笔记及相关知识放在博客上，欢迎交流学习~
- 前台项目 >>
git@gitee.com:happymmallmac/admin-fe.git
- 安装nodejs环境,使用v6.12.3
- 安装包管理工具yarn@1.6.0
- 在项目根目录执行yarn初始化
yarn / yarn install - 启动项目
- 开发模式 :
yarn run dev /yarn run dev_win生产模式 :yarn run dist /yarn run dist_win - 开发模式下预览项目 接口文档 >>
- 解锁React框架企业级开发方式，项目部署上线
- 深入掌握各种技术原理，知其然也知其所以然
- 与用户端项目一样采用了前后端完全分离的分层模块化架构
- ES6模块化 React组件
| 项目 | 用户端 | 后台 |
|---|---|---|
| 特点 | 要求稳定 用户类型多样 兼容性好 有SEO要求 多页应用 | 开发快 企业内部使用 不要求兼容性和SEO 单页应用 |
| 选型 | javascript + jquery + commonjs + hogan | React-Router4 + html5 + css3 + sass + Bootstrap + React16 + ES6 |
| 工具 | 构建工具 | 依赖环境 | 包管理 | 自动化发布脚本 | 代码编写 | 代码调试 | ES6转换工具 | 版本控制 | 域名配置 |
|---|---|---|---|---|---|---|---|---|---|
| 名称 | webpack | NodeJS | Yarn | Shell | sublime | chrome | Babel | git | Nginx |
注：更新webpack@4.2.0后webpack-dev-server新增了devServer的配置，用自带的代理就可以访问接口
- 通用模块 : 通用组织结构、通用菜单、通用导航
- 用户模块 : 登录、退出、用户列表
- 分页工具组件RcPagination
- table-list组件开发
- 商品模块 : 带筛选的商品列表，商品详情，添加/修改商品
- 品类选择器二级联动组件
- 文件上传React-fileupload插件，进行React版本兼容处理,封装组件
- 富文本编辑器Simditor JQuery插件 ，封装成React组件
- 表单回填
- 品类模块 : 品类列表，添加品类，修改品类名称
- 订单模块: 带筛选的订单列表，订单详情
- 利用webpack添加favicon
- 线上域名分离，HTML路径简化
| 文件 | html | js + css | image |
|---|---|---|---|
| 位置 | www/admin. + 根域名 | s. + 根域名 | img. + 根域名 |
- 对线上打包结果进行回归测试，防止压缩后显示不一致
- 购买服务器和域名
- 阿里云服务器注册免费体验 >>
- 获取实例公网IP 登录密码 >> ，本次项目使用CentOS7
-
使用git bash远程连接服务器
-
安装git,可使用yum安装 ：
yum install git -
建立developer product 文件夹，拉取代码至developer
-
安装nginx ：
yum install nginx
-
编写发布脚本前先手动执行一次，确保脚本准确
-
编写自动发布脚本 ####nginx和域名配置（这次没有进行域名分离）
-
新建vhost/*.conf并将其引入nginx.conf主文件
-
nginx配置域名
- 如果对您有帮助，您可以点 "Star" 支持一下 十分感谢!
