React商场项目开发

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

  1. 安装webpack yarn add webpack @3.10.0 --dev
  2. 配置html yarn add [email protected] --dev
  3. 配置ES6 yarn add [email protected] [email protected] [email protected] --dev
  4. 配置react yarn add [email protected] --dev
  5. 配置样式 yarn add [email protected] [email protected] --dev
  6. 单独打包css: yarn add extract-text-webpack-plugin --dev
  7. 配置sass yarn add [email protected] node-sass --dev
  8. 图片:yarn add [email protected] [email protected] --dev
  9. 字体:yarn add font-awesome
  10. 提取公共模块(分目录打包): webpack自带模块 webpack.optimize.CommonsChunkPlugin
  11. web服务:yarn add [email protected] --dev
  12. 脚本命令配置:在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. 通用部分的开发

  1. 准备一个bootstrap的后台皮肤文件insight
  2. 划分需要的功能模块,也就是侧边栏
首页

商品
--商品管理
	--商品列表
	--商品详情
	--添加/编辑
--品类管理
	--品类列表
	--添加/修改品类

订单
--订单管理
	--订单列表
	--订单详情
	--发货

用户
--用户管理
	--用户列表
	--登陆和推出
  1. 修改皮肤文件: 顶部导航,侧边导航,公共的布局页面,皮肤bug修改,退出按钮,小屏幕适配,标题公共组件
发布了32 篇原创文章 · 获赞 0 · 访问量 988

猜你喜欢

转载自blog.csdn.net/weixin_42588966/article/details/104788827
今日推荐