时隔10天再一次写代码,忘了好多哈哈哈哈,总结部分代码全程手打
今天主要是回顾了一下mock.js的使用方法,自己设计了一组数据,遍历在界面中。
一、mock.js的使用
1.在src下新建文件夹mock,在mock文件夹中新建order.json,将数据放在里面,数据的格式要满足json格式,一定要注意,都带引号。这里的图片要放在public文件夹中,在打包的时候可以访问到。
[
{
"id" : "001",
"name":"apple",
"price":"10",
"imgUrl":"/images/fruit1.jpg"
},
{
"id" : "002",
"name":"banana",
"price":"20",
"imgUrl":"/images/fruit2.jpg"
},
]
2.在mock文件夹下新建mockServe,配置mock接口
import Mock from 'mock'
//引入order
import order from './order'
//配置mock接口,第一个为地址,第二个为数据
Mock.mock('/mock/order',{code:200,data:order})
3.在main.js中引入mockServe,
import from '@/mock/mockServe'
4.在api中封装mock:新建mockAjax.js,进行封装
//引入axios
import axios from 'axios'
//封装mock
const mockAjax = axios.create({
baseURL:'/mock',
timeout:5000, //大于5s就取消访问
})
export default mockAjax
5.在api中的index中使用mock发送请求。
import mockAjax from './mockAjax'
//对外暴露请求数据的函数
export const reqOderList = () => mockAjax({url:'/order'})
6.请求函数写完后利用vuex获取mock数据,在Main.vue中的mounted中发送dispatch。
mounted(){
this.$store.dispatch('getOderList')
}
7.在home.js中对actions等内容进行配置。
//引入reqOrderList
import {reqOrderList} from '@/api'
const actions = {
async getOrderList({commit}){
let result = await reqOrderList()
if(result.code == 200) {
commit('GETORDERLIST',result.data)
}
}
}
const mutations = {
GETORDERLIST(state,getOrderList){
state.getOrderList = getOrderList
}
}
const state = {
getOrderList:[]
}
export default {
actions,
mutations,
state,
}
8.在计算属性中使用...mapState,
computed:{
...mapState({
orderList:(state) => state.home.getOrderList
})
}
9.最后进行遍历就行了,遍历我比较熟就不写了。
二、最后看了一点echarts的使用方法
1.首先在template中要有一个带宽高的div,可以用id,也可以用ref
<div ref = "main" :style = "{width:'600px',height:'400px'}"></div>
2.在main.js中全局添加echarts,在Vue的原型上添加$echarts方法。
import * as echarts from 'echarts'
Vue.proptype.$echarts = echarts
3.在methods中写一个方法,这里用的是ref的写法,如果用id就是document.getElementById
echartsShow() {
let myChart = this.$echarts.init(this.$refs.myecharts);
myChart.setOption({
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
},
4.别忘了在mounted中调用这个方法。