Vue电商后台管理项目总结

1,958 阅读1分钟

一、阶段总结

本次做的项目属于前端项目,直接调用接口,在开发过程中使用 Vue cil4 脚手架进行开发,使用码云作为 Git 管理仓库,登录用户名为:admin,密码为:123456。

二、项目技术栈

2.1 前端

前端采用 vue cli4 脚手架搭建框架,大体使用 elementUI 美化项目结构,所以需要安装 elementUI 插件
npm add element-ui
其次是环境依赖 (有开发依赖,有运行依赖)
1、axios
npm install axios -d
2、vue-router
npm install vue-router -d
3、echarts
npm install echarts -s
4、wangeditor
npm install wangeditor -s
5、moment
npm install moment -s
6、vue-table-with-tree-grid
npm install vue-table-with-tree-grid -s

2.2 后端

后端是已经写好的接口,查看接口文档直接调用

2.3 数据库

使用mysql导入sql文件

三、项目中难点总结

1、时间转换问题 安装moment,采用filter,代码如下:

image.png js模块 image.png 2、上传图片存储问题,本项目需求sessionStorage存储,代码如下:

image.png 3、组件之间传参
父组件向子组件传值
1)父组件嵌套的子组件中,使用v-bind:msg=‘xxxx’进行对象的绑定,子组件中通过定义props接收对应的msg对象。

2)使用$children获取子组件和父组件对象

3)使用$ref获取指定的子组件

子组件向父组件传值
1)使用$emit传递事件给父组件,父组件监听该事件

2)使用$parent.获取父组件对象,然后再获取数据对象

非父子组件间传值
1)事件总线,原理上就是建⽴立⼀一个公共的bus.js⽂文件,专⻔用来传递消息

2)多级组件间传值的问题,$attr 将⽗父组件中不不包含props的属性传⼊入⼦子组件,通常配合 interitAttrs 选项