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
总结
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。