2022.1.14学习总结

时隔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中调用这个方法。