day06 - 图片上传 + 富文本 + ECharts数据可视化

min-height: 300px;

}

//给添加商品按钮添加间距

.btnAdd{

margin-top:15px;

}

C.添加商品

完成添加商品的操作

在添加商品之前，为了避免goods_cat数组转换字符串之后导致级联选择器报错

我们需要打开vue控制条，点击依赖，安装lodash，把addForm进行深拷贝

//打开Add.vue，导入lodash

D.推送代码

推送goods_list分支到码云

将代码添加到暂存区： git add .

将代码提交到本地仓库： git commit -m “完成商品功能开发”

将代码推送到码云： git push

切换到master主分支： git checkout master

将goods_list分支代码合并到master: git merge goods_list

将master推送到码云： git push

2.订单列表

A.创建分支

创建order子分支并推送到码云

创建order子分支: git checkout -b order

将order分支推送到码云： git push -u origin order

B.创建路由

创建订单列表路由组件并添加路由规则

//在components中新建order文件夹，新建Order.vue组件，组件中添加代码如下

订单列表

首页

订单管理

订单列表

//打开router.js导入Order.vue并添加规则

import Order from ‘./components/order/Order.vue’

path: ‘/home’, component: Home, redirect: ‘/welcome’, children: [

{ path: “/welcome”, component: Welcome },

{ path: “/users”, component: Users },

{ path: “/rights”, component: Rights },

{ path: “/roles”, component: Roles },

{ path: “/categories”, component: Cate },

{ path: “/params”, component: Params },

{ path: “/goods”, component: GoodList },

{ path: “/goods/add”, component: GoodAdd },

{ path: “/orders”, component: Order }

]

C.实现数据展示及分页

已付款

未付款

{{scope.row.create_time | dateFormat}}

<el-pagination @size-change=“handleSizeChange” @current-change=“handleCurrentChange” :current-page=“queryInfo.pagenum” :page-sizes=“[3, 5, 10, 15]” :page-size=“queryInfo.pagesize” layout=“total, sizes, prev, pager, next, jumper” :total=“total”>

D.制作省市区县联动

打开今天的资料，找到素材文件夹，复制citydata.js文件到components/order文件夹中

然后导入citydata.js文件

具体代码如下：

//给修改地址按钮添加点击事件

<el-button size=“mini” type=“primary” icon=“el-icon-edit” @click=“showEditAddress”>

//添加修改地址对话框,在卡片视图下方添加

<el-dialog title=“修改收货地址” :visible.sync=“addressVisible” width=“50%” @close=“addressDialogClosed”>

<el-button @click=“addressVisible = false”>取 消

<el-button type=“primary” @click=“addressVisible = false”>确 定

//js部分的代码

E.制作物流进度对话框

因为我们使用的是element-ui中提供的Timeline组件，所以需要导入并注册组件

打开element.js,编写代码会进行导入和注册

import {

Timeline,TimelineItem

} from ‘element-ui’

Vue.use(Timeline)

Vue.use(TimelineItem)

打开Order.vue文件，添加代码实现物流进度对话框

<el-timeline-item v-for=“(activity, index) in progressInfo”

:key=“index” :timestamp=“activity.time”>

{{activity.context}}

F.推送代码

将order分支代码推送至码云

将代码添加到暂存区： git add .

将代码提交到本地仓库： git commit -m “完成订单列表功能开发”

将代码推送到码云： git push

切换到master主分支： git checkout master

将goods_list分支代码合并到master: git merge order

将master推送到码云： git push

3.数据统计

A.创建子分支

创建report子分支并推送到码云

创建report子分支: git checkout -b report

将report分支推送到码云： git push -u origin report

B.创建路由

创建数据统计路由组件并添加路由规则

//在components中新建report文件夹，新建Report.vue组件，组件中添加代码如下

数据报表

首页

数据统计

数据报表

打开router.js，导入Report.vue并设置路由规则

import Report from ‘./components/report/Report.vue’

path: ‘/home’, component: Home, redirect: ‘/welcome’, children: [

{ path: “/welcome”, component: Welcome },

{ path: “/users”, component: Users },

{ path: “/rights”, component: Rights },

{ path: “/roles”, component: Roles },

{ path: “/categories”, component: Cate },

{ path: “/params”, component: Params },

{ path: “/goods”, component: GoodList },

{ path: “/goods/add”, component: GoodAdd },

{ path: “/orders”, component: Order },

{ path: “/reports”, component: Report }

]

C.导入ECharts并使用

数据报表

首页

数据统计

数据报表

D.推送代码

推送report分支到码云

将代码添加到暂存区： git add .

将代码提交到本地仓库： git commit -m “完成数据报表功能开发”
将代码推送到码云： git push
切换到master主分支： git checkout master

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

ss’,

label: {

backgroundColor: ‘#E9EEF3’

}

}

},

grid: {

left: ‘3%’,

right: ‘4%’,

bottom: ‘3%’,

containLabel: true

},

xAxis: [

{

boundaryGap: false

}

],

yAxis: [

{

type: ‘value’

}

]

}

}

},

created() {},

async mounted() {

//在页面dom元素加载完毕之后执行的钩子函数mounted

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById(‘main’))

//准备数据和配置项

//发送请求获取折线图数据

const { data: res } = await this.$http.get(‘reports/type/1’)

if (res.meta.status !== 200) {

return this.$message.error(‘获取折线图数据失败’)

}

//合并res.data和this.options

const result = _.merge(res.data,this.options)

// 使用获取的数据展示图表

myChart.setOption(result)

},

methods: {}

}

D.推送代码

推送report分支到码云

将代码添加到暂存区： git add .

将代码提交到本地仓库： git commit -m “完成数据报表功能开发”
将代码推送到码云： git push
切换到master主分支： git checkout master

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。