http://www.Sina.com/http://www.Sina.com /
实现功能:1.登录系统:调用登录界面保存token,成功后跳转到欢迎页面,提示成功,失败后提示错误,让用户再次登录。 2 .系统管理:又称管理员管理、权限管理。 可以添加管理员并更改管理员密码为了确保数据库备份、数据安全,本系统采用数据库备份功能,上传文件管理,管理您添加的产品是上传的照片和其他产品通过修改可以改变企业的各种信息和介绍。 4 )产品管理)查看产品类别新增修改管理、产品新增修改及产品审核5 )订单管理)订单详细信息及订单处理。 6 )会员管理)会员资料评审;7 )消息管理)信息反馈管理及广泛接收会员注册消息、会员反馈,更好改善项目性能8 )名誉管理)充分展示、添加、删除、修改公司各项荣誉申请管理10 )权限管理)向会员分配权限,通过搜索实现12 .中英文切换:实现中英文切换,方便会员使用13 .数据库连接:在线表格编辑、添加数据表、数据库编辑、使用数据库搜索14 .退出功能:清除本地存储的token,成功进入登录页面,提示退出成功的项目模块和项目分解:第一模块:登录1 .公司名称2 .密码提示输入错误3 .登录按钮,获取toktn值4 .单击清空输入框按钮,将表单内容清空数据
第二模块:首页1 .欢迎页面
第三模块:系统界面1 .系统管理(1)实现搜索框、搜索按钮、搜索功能
(2)增加用户按钮,增加管理员功能
)3)发送数据按钮,将页面数据上传到数据库,防止数据丢失
)4)实现批量编辑、批量删除,方便管理员管理数据
)5)表单呈现数据,实现数据可视化。 容易阅读
(6)实现表单数据的修改和删除
2 .修改企业管理(1)按钮,修改企业信息进行渲染
3 .产品管理(1)实现对搜索框、搜索按钮、产品的搜索功能
)2)增加产品按钮,实现增加产品的功能
(3)提交数据按钮,对修改后的数据重新上传到数据库(4)批量编辑功能,实现批量删除功能,方便管理员对数据的管理
(5)form表单渲数据,实现数据可视化,方便浏览
(6)实现表单数据的修改与删除
4.订单管理(1)搜索按钮,实现输入订单号对订单查询
(2)form表单进行数据渲染,点击可进入订单详情页查看订单内容
5.会员管理(1)搜索按钮,实现输入订单号对订单进行查询
(2)form表单进行数据渲染,点击可进入订单详情查看订单内容
6.留言管理(1)写入一个留言板,对留言数据就行存储
(2)提交按钮,提交留言
(3)可对以提交的留言就行修改与删除
7.荣誉管理(1)渲染荣誉的表单
(2)添加按钮,对员工获得的荣誉进行添加
(3)点击单个员工荣誉可进行编辑与删除
8.人才管理(1)对招聘信息进行渲染
(2)添加按钮,用于添加新的招聘信息
(3)可以对数据进行修改与删除
9.权限管理(1)表单渲染,渲染出公司的层级关系,方便管理
(2)可以对单个数据经行权限修改
10.商品管理(1)对全部商品进行渲染,充分利用懒加载,尽可能较少同一时间获取多个数据,造成页面卡顿
(2)搜索框,更快速的查找商品
(3)添加按钮,添加新的商品
(4)将修改或者添加的商品上传到数据库,并刷新页面
(5)删除,可对单个商品信息进行山删除
项目总结:1. 用到的组件:axios -------连接后台的数据
Element-ui -------连接网页中的element-ui
Moment -------连接数据把时间戳转换为具体时间
Echart -------连接大屏展示图,创造数据展示
2. 左侧侧面栏用到的组件
左侧侧边栏----get---menus获取内容渲染
只允许一个子组件下拉 属性 绑定 unique-opened 属性值为true,绑定属性为父级绑定
跳转路由需要在main.js期中配置二级路由,加一个children的对象,里面存放我们要跳转的二级路由
还需要注意的是,我们需要在我们显示内容的地方放一个<router-view>作为我们的一个挂载的地方
3.Users页面用到的组件传值的方式
登录---get---login---本地存储token值
退出------返回登录页面,删除本地存储的token值
Show----get---渲染页面----增删改查等每次使用每次调用
添加用户----post---users---show---展示页面
删除用户---delete---users.id---调用展示页面
修改反显用户---get---users.id----存入我们当前使用的id
确认修改用户信息---put---users.id--- 修改页面全部修改
4.roles页面用到的组件传值的方式
Show----get---渲染页面----增删改查等每次使用每次调用
添加用户名称----post----roles.---show---展示页面
删除用户---delete---roles.id---调用展示页面
修改反显用户---get---roles..id----存入我们当前使用的id
确认修改用户信息---put---roles.id--- 修改页面全部修改
分配权限方面我们使用首先有element里面的树形控件来存放我们的数据
通过get方式获取到后台的数据,通过id获取到后台的数据展示在模态框中
循坏的是在prop中的数据,通过三个循环来货渠道我们想要获取到的数据,三层,第一层在prop里面的children循环,名字为item,
第二层在item的children里面循环 名字为item1
第三层在item1的children里面循环 名字为item2
5.我们在进行数据视图的规划时,
数据报表和数据大图呈现时,我们只需呀在echarts把我们需要的类型找到然后复制进我们的代码块,修改我们想要修改的东西,然后在我们的代码里面安装好我们需要的echarts插件,最后就可以实现我们的数据大图呈现的效果了。
当我们进入到echarts的官网以后我们只需要点击选择我们相似的一个大图展现我们就可以把里面的逻辑业务选择复制过来就可以了。
import echarts from 'echarts'
6. 在订单管理,
我们首先需要获取数据,在我们进行一级二级的分类时,我们需要对照接口文档查看我们的不同的等级值所代表的数字,最后对数字进行判断哪个为一级二级三级,最后生成我们的标签,然后渲染到页面上。
7. 在商品管理的时候,
首先在商品列表要注意对细节的判断,比如, 动态参数,和静态属性的一个显示使用的相同的接口但进行判断的时候是不一样的,还有里面的内容的增删改,需要判断不同的值,来进行添加动态和静态的不同数据。
8. 在商品数据栏
中我们进行添加的时候都要注意的是我们的三级列表我们要添加到的内容,我们可以获取到三级 列表中每一级别的id然后得到id后进行添加添加到我们想要添加到的列表底下(通过id进行判断获取)(接口文档中内涵)
9.在进行添加的时候我们的富文本
是通过下载组件vue-quill-editor
当我们下载了这个组件以后我们将官网里面的内容复制过来,在data中进行一一赋值我们就可以在页面上进行呈现,我们得实现效果也能实现了
接口给的明了,我们需要花时间去对接口文档进行研究,在我们获取数据的时候一定要注意的是,我们引用数据进行传的值,我们在一个相同的接口通过不同的参数得到不同的数据,
比如同一个商品列表参数categories我们就可以通过id,name,还有我们的sel进行判断类型
还有我们要注意的是我们的获取时的接口,get,post,delete,都是不同的功能,我们进行传参也在不同的地方,这就是我们要注意的问题。