【前端基础学习】

前端基础学习

---

Mock模拟前端数据（vue） 前端基础学习一、axios简单介绍1.1 axios实现ajax请求1.2 实现例子 二、mock的简单介绍2.1 mock的作用2.2 mock的优点2.3 实现例子 三、实现的具体过程3.1安装vue脚手架3.2 项目运行3. 3 vue脚手架下的echarts图3.4 利用axios更改页面端口3.4.1 配置端口号3.4.2 安装axios库3.4.3 配置路径 3.5 利用mock进行模拟3.5.1 下载mock的库3.5.2 建立data_mock.js文件3.5.3 更改main.js文件3.5.4 更改Helloworld.vue 总结

---

一、axios简单介绍 1.1 axios实现ajax请求

axios时目前最流行的ajax封装库之一，用于很方便地实现ajax请求(实现页面和 web 服务器之间数据的异步传输)的发送。

从浏览器发出 XMLHttpRequests请求从 node.js 发出 http 请求支持 Promise API能拦截请求和响应能转换请求和响应数据取消请求实现JSON数据的自动转换 1.2 实现例子

二、mock的简单介绍 mock翻译成中文有模仿，模拟的意思，我们这里利用mock产生一些随机的数据，模仿我们后端产生的数据进行开发 2.1 mock的作用

开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据太长了，将数据写在 js 文件里，完成后挨个改 url。某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。

2.2 mock的优点 前后端分离：让前端工程师独立于后端进行开发。增加测试的真实性 ：通过随机数据，模拟各种场景。开发无侵入 ：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。用法简单 ：符合直觉的接口。数据类型丰富 ：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。方便扩展 ：支持支持扩展更多数据类型，支持自定义函数和正则。在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变 url 地址即可。不涉及跨域问题。 2.3 实现例子

举一个很简单的例子，下面是在echarts官网下载的图表的样例，里面是有这一周的每天的数据，具体的 *** 作过程在后面详细说明。

三、实现的具体过程 3.1安装vue脚手架

利用Vscode编辑工具，新建一个文件夹，利用终端在该文件夹中打开：

 #安装vue-cli
npm install -g @vue/cli
# 创建vue项目
vue create demo

创建好之后，可以看到文件夹中有这些目录

3.2 项目运行

终端进入到demo文件夹，运行服务：

#进入指定文件夹
cd demo
#运行服务
npm run serve

进入这个网页就可以看到自己的第一个vue脚手架的项目内容了

3. 3 vue脚手架下的echarts图

将文件夹中的HelloWorld.vue打开，将里面的内容换成下面的代码：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ msg2 }}</h1>
    <div class="echarts_class" ref="echart_div"></div>
  </div>
  
</template>

<script>
import * as echarts from"echarts"
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){//vue3
    return {
      msg2:'vue msg2'
    }
  },
  mounted(){
    
    // const myChart = echarts.init(div);
    const myChart =echarts.init(this.$refs.echart_div)
    const option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }
        ]
    };

    myChart.setOption(option);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.echarts_class{
  width: 600px;
  height: 400px;
}
</style>

这里面引用到了echarts,因此需要利用npm(在官网下载node.js就可以自带npm)下载echarts,在终端进入demo文件夹，输入：

npm install echarts

以后需要用到什么库，我们都可以利用npm install + 来进行下载，下载完成，我们可以在package.json中看到有echarts,如下图：

此时，终端进入demo文件夹，输入：

npm run serve

我们可以看到下面的图片，此时我们导入了echarts模块，画出了echarts的二维图表：

3.4 利用axios更改页面端口 3.4.1 配置端口号

打开demo文件夹下面的vue.config.js进行配置：

可以用下面的代码对vue.config.js中的内容进行替换：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    // 这里的5000为服务器的端口号
     port:5000
   }
})

3.4.2 安装axios库

终端进入demo文件夹，输入：

npm install axios

运行项目，结果端口号已经更改：

npm run serve

3.4.3 配置路径

如果在项目中需要配置路径，为了开发更简单，下面是一些例子：

configureWebpack:{
   resolve:{
     alias:{
       '@':path.resolve('./public'),
       '@@':path.resolve('./src'),
       '@COM':path.resolve('./src/x'),
       '@COM_':path.resolve('./src/x')
       //必须以@开始，后续遵循变量名定义
       
     }
   }
 }

在demo文件夹下的vue.config.js中，类似于端口号的增加方式，加入上面的代码，意义如下：

3.5 利用mock进行模拟 3.5.1 下载mock的库

终端进入demo文件夹，引入mockjs,输入：

npm install mockjs --save-dev

3.5.2 建立data_mock.js文件

在src文件夹中建立data_mock.js文件，作为mock引入数据的需要，文件内容如下：

import Mock from 'mockjs'
//为了模拟后端数据交互，拦截url 'api/echarts'
Mock.mock('/api/echarts','get',{value:[441,222,333,113,224,555,77]})

我认为这是拦截url=api/echarts,然后获取数据value数组的值

3.5.3 更改main.js文件

更改src目录下的main.js文件，增加红线画的一部分

将main.js文件内容替换为下面代码：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false


require('./data_mock')
import axios from 'axios'  //用来对axios做了拦截设置处理
//引入完成之后需要挂载到vue上
Vue.prototype.$http = axios  //将ajax请求封装到VUE，所有都能访问

// 配置请求超时时间
axios.defaults.timeout = 5000 // 单位是毫秒


new Vue({
  render: h => h(App),
}).$mount('#app')

其中，require(‘./data_mock’)为引入我们建立的data_mock中的数据；
import axios from 'axios’导入axios库；
Vue.prototype.$http = axios 将axios请求封装到Vue中

3.5.4 更改Helloworld.vue

将模拟的数据，在生命周期函数create()中获得模拟的数据，将数据传到option表格中的series中：


将HelloWorld.vue中的代码放入下面：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ msg2 }}</h1>
    <div class="echarts_class" ref="echart_div"></div>
  </div>
  
</template>

<script>
import * as echarts from"echarts"
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      msg2:'vue msg2',
 myChart: null,
      option: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: 'bar',
          },
        ],
      },

    }
  },
   created() {
    this.$http.get("/api/echarts").then((req) => {
      //打印请求mock的结果
      console.log("created request",req);
      if (this.myChart && this.option&&this.option.series[0].data) {//安全校验
        //将请求到的数据，附加到echarts图表的option上
        this.option.series[0].data = req.data.value;

        this.myChart.setOption(this.option);
      }
    })
    },
  mounted(){
    
  this.myChart = echarts.init(this.$refs.echart_div);
    this.myChart.setOption(this.option);
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.echarts_class{
  width: 600px;
  height: 400px;
}
</style>

---

总结

这是简单的利用vue脚手架进行模拟后端数据输入的过程，自己也是在不断的学习过程，希望对大家有所帮助。