一、后台管理的需求分析
项目描述:
项目作用:此项目做为一个前台后台分离的后台管理SPA,包括前端PC应用和后端应用
主要功能:商品管理、用户管理、权限管理、数据统计、语言等功能模块
前端技术选用:react、react-dom、react-router-dom、echarts-for-react(就是react全家桶)、redux、reducer、axios、antd
后端技术选用:node+express+mongodb (写api接口,数据存储)
开发模式:采用功能模块化、组件化、工程化的开发模式,项目简洁、美观、运行更流畅、使用简单、易于维护。。。
举个非常简单的例子:
登录、主界面
分类管理
商品管理:增删改查
用户管理:增删改查
权限管理:超级管理员和普通管理权限
数据统计:图表
设置:个人中心、信息、资料、账户安全、修改密码什么的
其他:语言设置,个人偏好设置
二、根据需求选择ui模版 ui后台管理常用的模版网站
EasyUI:官网:http://www.jeasyui.com/ 资源:http://www.jeasyui.net/
DWZ JUI:官网:http://jui.org/ 下载:https://github.com/dwzteam/
HUI:官网:http://www.h-ui.net/H-ui.admin.shtml 下载:https://github.com/jackying/
Ace Admin:官网:http://ace.jeka.by/ 下载:https://github.com/bopoda/ace
Metronic:官网:http://www.zi-han.net/theme/hplus/
BootStrap:官网:https://www.bootcss.com/
使用的比较的ui是:
1、使用HUI和bootstrap
2、使用EasyUI的框架,内容页使用HUI+BootStrap,iframe选项卡
3、从各个功能强大的页面中拿一些插件过来
三、技术选型
四、前端路由:分/login和/admin两块子路由全部放admin后面,这个主要是根据你们项目需求来分,非常简单就不多说了
五、API接口:API接口一般是后端给出,基本上不用我们前端来写,但是基本操作还是要懂,尤其是后端给过来的数据格式,数据处理,这些基本要会,也不多说了
六、我这边用的是github 所以也说下git常用的基本命令(我简书上有相关文章可以去翻翻)
$ git config --global user.name"username" /配置用户名
$ git config --global user.email"xx@gmail.com" /配置邮箱
$ git init /初始化一个本地仓库 .git
$ git add . /将文件添加到暂存区
$ git commit -m "提交日志" /提交到本地仓库
$ git remote add origin url /本地仓库关联到远程仓库
$ git clone url /克隆代码 拉取远程仓库项目
$ git push origin master /将本地分支项目推送到远程仓库分支master
$ git branch -a /查看本地分支和远程分支
$ git checkout -b 分支名 /切换并创建一个新的分支
$ git checkout 分支名 /切换到这个分支
$ git pull origin 分支名 /将本地仓库项目推送到远程仓库这个分支
七、使用 creact-react-app (项目名admin)搭建项目
标注:create-react-app 是 react 官方提供的用于搭建基于 react+webpack+es6 项目的脚手架
操作:
npm install -g crecte-react-app:全局下载脚手架工具
create-react-app admin(项目名) 创建模版项目
cd admin /找到项目路径下
npm run start/localhost:3000 /访问页面
八、创建构架目录
项目的基本构架到这基本是完结了,需要新增什么功能里面直接添加相关文件再写代码就可以。
从项目准备,到完全搭建好项目整个流程基本上都写到了,希望对大家有所帮助
————————————————————————————————————
一缕阳光,后期将不定时出针对前端项目疑点难点的博文,谢谢关注!!