1.网址
后台完整功能浏览网址:http://adminv2.happymmall.com/
借口查询地址:https://gitee.com/imooccode/happymmallwiki/wikis/Home
2.功能模块
用户模块:登陆 退出 用户列表
商品模块:商品列表 商品详情 添加和修改商品
品类模块:品类列表 添加品类 修改品类
订单模块:订单列表 订单详情 发货
3.开发环境的准备
3.1 git安装项目并创建一个项目
(1) 生成ssh密钥:
这个密钥用来链接远程仓库和你的电脑,如果你换了电脑就需要重新生成ssh然后添加到远程仓库,然后才能拉取和推送代码
ssh-genkey -t rsa -C "[email protected]"
(2) git需要到官网安装,安装后配置.gitconfig
[user]
name=Rosen
[email protected]
[alias]
co=checkout
ci=commit
st=status
pl=pull
ps=push
dt=difftool
ca=commit -am
b=branch
然后每次修改后
git st
git add .
git ca "备注信息"
git push
(3) 配置.gitignore 文件
node_modules
*.log
dist
.DS_Store(Mac系统上的)
3.2 安装node和yarn
node需要在官网安装,yarn通过npm安装
3.3 配置webpack
- 安装webpack
yarn add webpack @3.10.0 --dev
- 配置html
yarn add [email protected] --dev
- 配置ES6
yarn add [email protected] [email protected] [email protected] --dev
- 配置react
yarn add [email protected] --dev
- 配置样式
yarn add [email protected] [email protected] --dev
- 单独打包css:
yarn add extract-text-webpack-plugin --dev
- 配置sass
yarn add [email protected] node-sass --dev
- 图片:
yarn add [email protected] [email protected] --dev
- 字体:
yarn add font-awesome
- 提取公共模块(分目录打包): webpack自带模块
webpack.optimize.CommonsChunkPlugin
- web服务:
yarn add [email protected] --dev
- 脚本命令配置:在package.json里面配置
yarn run dev/dist
"scripts": {
"dev": "node_modules/.bin/webpack-dev-server",
"dist": "node_modules/.bin/webpack"
},
3.4 代码提交过程
(1) 从master切换到开发分支admin-v2
(2) git merge origin master 拉取远程仓库最新代码
(3) git st 查看状态
(4) git add . 添加所有的修改
(5) git ca "备注"
(6) git ps 推送到远程仓库
(7) git pull 提交pull request请求管理员审核,通过后合并到master主分支
4. 通用部分的开发
- 准备一个bootstrap的后台皮肤文件insight
- 划分需要的功能模块,也就是侧边栏
首页
商品
--商品管理
--商品列表
--商品详情
--添加/编辑
--品类管理
--品类列表
--添加/修改品类
订单
--订单管理
--订单列表
--订单详情
--发货
用户
--用户管理
--用户列表
--登陆和推出
- 修改皮肤文件: 顶部导航,侧边导航,公共的布局页面,皮肤bug修改,退出按钮,小屏幕适配,标题公共组件