VUE中数据模拟和访问

最新推荐文章于 2022-11-19 12:55:29 发布

原创最新推荐文章于 2022-11-19 12:55:29 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了在Vue开发中如何进行数据模拟，通过在vue.config.js中配置before选项来创建模拟接口，并展示了如何使用axios调用这些接口。此外，还讲解了设置开发服务器代理以解决跨域问题的方法，通过在开发环境中配置代理选项，确保能够顺利访问接口数据。

数据模拟

使用开发服务器配置vue.config.js中的before选项，可以编写接口，提供模拟数据。

devServer:{
  before(app) {
    app.get('/api/shiwu', (req, res) => {
	    setTimeout(() = >{
	    	 res.json([{ name: '油条', price: 22}, { name: '玉米', price:33}])
	    },1000)
   })
 }
}

接口文件调用：
使用axios需要安装npm i axios -S
src/api/shiwu.js

import axios from 'axios'
export function getShiwu() {
	 return axios.get('/api/shiwu').then(res => res.data)
}

在vue中引入接口文件

import {getShiwu} from "@/api/shiwu.js"
export default {
	data(){
		return{
			shiwu:""
		}
	}
	async created(){
		const shiwu = await getShiwu()
		this.shiwu = shiwu
	}
}

代理

设置开发服务器代理选项可以有效避免调用接口时出现的跨域问题。

//vue.config.js配置
//如果在本地8080找不到资源，就去3000端口找
devServer: {
	proxy: 'http://localhost:3000'
}

用node启动一个3000端口的数据接口

//server/api.js
// 需要安装express：npm i express

const express = require('express')
const app = express()

app.get('/api/courses', (req, res) => {
	 res.json([{ name: '油条', price: 9 }, { name: '玉米', price: 8 }])
})
app.listen(3000)

运行:node ./server/api.js