发表于： 2021-08-21 20:49:09
0 2206
今天完成的事情：
学习了半个月的 vue，用vue 做微官网后台数据管理项目也做了， 今天呢做了做总结。
vue相对angular 要简单些，也可能是我angular 的学习对框架有一定的认知，学起来没有当初学angular 时候那么难受和费时，
项目初始化步骤：
- 安装Vue脚手架；
- 通过Vue脚手架创建项目
- 配置Vue路由
- 配置Element-UI 组件库
- 配置 axios 库；
- 初始化 git 远程仓库
- 将本地项目托管到 GitHub 或码云 中；
在配置过 axios 后，直接在项目 main.js 文件。也就是项目的根JS组件
配置请求根路径
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'https://lianghj.top:8888/api/private/v1/'
在组件中的请求数据过程，点击事件 mounted 获取数据 ， 这里用到了异步，和 data 属性将获取到的数据赋值给了 res
async mounted() {
const { data: res } = await this.$http.get('reports/type/1')
if (res.meta.status !== 200) {
return this.$message.error('获取折线图数据失败！') // 这里用到了一个写好的警告弹窗的方法
}
},
// 配置请求到数据，转换为可视化时间显示
Vue.filter('dateFormat', function (originVal) {
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDate() + '').padStart(2, '0')
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
获取到的数据在经过渲染时加上之前写好的方法，将获取到数据转化为时间显示
<el-table-column label="下单时间" width="170px">
<template slot-scope="scope">{{scope.row.create_time | dateFormat}}</template>
</el-table-column>
明天计划的事情：巩固JS知识，巩固 angular 框架知识。准备做复盘项目
返回列表
评论