(转载)axios+mockjs在vue中的使用

原文链接：

https://juejin.im/post/5b17ffcc51882513eb62e985

一.安装和使用mockjs

(参考教程https://blog.csdn.net/HZKang/article/details/78104739)注意这个教程的第四步的代码最后缺少一个结束的 } 号,而且安装他的第四步跑不起项目,我作了改写才行,我的代码是能运行起来的

1.npm安装mockjs

打开cmd进入项目下载mockjs至项目中：

npm intsall mockjs --save复制代码

2.在src目录下建立文件夹mock，mock文件夹下建立mock.js文件，js文件代码如下：

import Mock from 'mockjs';//es6语法引入mock模块

export default Mock.mock('http://test.cn', {//输出数据

  'name': '@name',//随机生成姓名

  'age|1-10': 10

  //还可以自定义其他数据
});复制代码

3.在vue组件中使用

比如在这样目录下：src/components/HelloWorld.vue

import data from '../mock/mock.js';复制代码

4.演示请求接口

比如我使用的是axios请求，(还没安装axios的要安装axios和配置相关,请往下看)则：

created() {
			this.$http.get('http://test.cn')
				.then(res => {
					console.log(res.data);
					this.msg = res.data.name;
					console.log(this.msg)
				})
		}复制代码

二.安装和使用axios 

(参考https://www.jianshu.com/p/5dd83b7d16a3) 

1.npm安装axios

 

 

 

 

 npm install --save axios 复制代码

 2.配置config/index.js:解决跨域问题

(这里我没用到跨域,我没有实际执行这步,最后我的代码是能跑起来的,然后我尝试了使用去跨豆瓣的,不成功,明天试试跨域django后台)

 

 

 

 

 dev: {  
        env: require('./dev.env'),  
        port: 8008,  
        autoOpenBrowser: false,  
        assetsSubDirectory: 'static',  
        assetsPublicPath: '/',  
        proxyTable: {
            '/api': {  
                target: 'http://api.douban.com',  
                changeOrigin: true,  
                pathRewrite: {  
                    '^/api': '/'  
                    //写'/api'就等于写'http://api.douban.com'
                    //到时候写"/abc/v2/movie/top250"就等于写"http://api.douban.com/v2/movie/top250"
                }  
           }  
    }
}
            复制代码

3.main.js：配置axios到原型链中

 注意标记的那两行

 

 

 

 

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios' //注意这行
Vue.prototype.$http = axios; //注意这行

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
复制代码

 4.在HelloWorld.vue组件中使用axios请求，get为例

 

 

 

 

<template>
	<div class="hello">
		<h2>我是helloWorld.vue开始</h2>
		<h1>{{ msg }}</h1>
		<h2>我是helloWorld.vue结束</h2>
	</div>
</template>

<script>
        import data from '../mock/mock.js';
	export default {
		name: 'HelloWorld',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		},
		created() {
                        //使用axios的get请求
			this.$http.get('http://test.cn')//注意这行
				.then(res => {
					console.log(res.data);
					this.msg = res.data.name;
					console.log(this.msg)
				})
		}
	}
</script>

<style scoped>
	.hello {
		margin: 10px;
		background: #ededed;
	}
	
	h1,
	h2 {
		font-weight: normal;
	}
	
	ul {
		list-style-type: none;
		padding: 0;
	}
	
	li {
		display: inline-block;
		margin: 0 10px;
	}
	
	a {
		color: #42b983;
	}
</style>

复制代码

 

我的项目文件结构图

 

作者：广顾dun
链接：https://juejin.im/post/5b17ffcc51882513eb62e985
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。