自己模拟数据接口,vue中axios获取数据

我先说我的操作步骤:(前提是要有node.js没有的npm吧)

第一步:新建一个文件夹,命名随便;然后在文件里打开命令行输入以下命令

npm init -y

npm i express

文件夹就会多一个node_moudules文件和两个json文件

 

接下来在自己的编辑器上新建一个app.js文件,内容如下

const express = require('express')
const bodyParser = require('body-parser')///npm i body-parser自己去下载,用于post请求的
const app = express()
app.use(bodyParser.urlencoded({
	extended: false
}))
//parse application/json
app.use(bodyParser.json())
const broadcast = [{
		carouselImg: '../../assets/images/carousel1.jpg'
	},
	{
		carouselImg: '../../assets/images/carousel2.jpg'
	},
	{
		carouselImg: '../../assets/images/carousel3.jpg'
	},
	{
		carouselImg: '../../assets/images/carousel4.jpg'
	}
]

const todos = [{
		code: 0,

		id: 1,
		name: '小敏',
		years: '22',
		img: "../../../static/images/a1.png"

	},
	{
		code: 0,

		id: 2,
		name: '小张',
		years: '22',
		img: "../../../static/images/a2.png"

	},
	{
		code: 0,

		id: 3,
		name: 'like',
		years: '22',
		img: "../../../static/images/a3.png"

	},
	{
		code: 0,

		id: 4,
		name: 'like',
		years: '22',
		img: "../../../static/images/a4.png"

	},
	{
		code: 0,

		id: 5,
		name: 'like',
		years: '22',
		img: "../../../static/images/a5.png"

	},
	{
		code: 0,

		id: 6,
		name: 'like',
		years: '22',
		img: "../../../static/images/a5.png"

	},
	{
		code: 0,

		id: 7,
		name: 'like',
		years: '22',
		img: "../../../static/images/a2.png"

	},
	{
		code: 0,

		id: 8,
		name: 'like',
		years: '22',
		img: "../../../static/images/a3.png"

	},
	{
		code: 0,

		id: 9,
		name: 'like',
		years: '22',
		img: "../../../static/images/a4.png"

	},
	{
		code: 0,

		id: 10,
		name: 'like',
		years: '22',
		img: "../../../static/images/a5.png"

	},
	{
		code: 0,

		id: 11,
		name: 'like',
		years: '22',
		img: "../../../static/images/a5.png"

	},
	{
		code: 0,

		id: 12,
		name: 'like',
		years: '22',
		img: "../../../static/images/a5.png"

	},
	{
		code: 0,

		id: 13,
		name: 'like',
		years: '22',
		img: "../../../static/images/a5.png"

	},
	{
		code: 0,

		id: 14,
		name: 'like',
		years: '22',
		img: "../../../static/images/a5.png"

	}
]

const longitude = [

	{
		code: 0,
		latitude: '39.91667', //纬度
		longitude: '116.41667', //经度
		address: {
			geohash: '39.91667,116.41667',
			city: '北京市',
			latitude: '39.91667', //纬度
			longitude: '116.41667' //经度
		}
	},
	{
		code: 0,
		latitude: '34.50000',
		longitude: '121.43333',
		address: {
			geohash: '34.50000,121.43333',
			city: '上海市',
			latitude: '34.50000',
			longitude: '121.43333'
		}
	},
	{
		code: 0,
		latitude: '30.66667',
		longitude: '104.06667',
		address: {
			geohash: '30.66667,104.06667',
			city: '成都市武侯区天府大道中段500号',
			latitude: '30.66667',
			longitude: '104.06667'

		}
	}

]

app
	.get('/broadcast', (req, res) => {
		res.json(broadcast)
	})
	.get('/todos', (req, res) => {
		res.json(todos)
	})
	.get('/longitude', (req, res) => {
		//console.log(req)
		let id = req.query.id
		for(let i = 0; i < longitude.length; i++) {
			if(longitude[i].address.geohash == id) {
				res.json({
					address: longitude[i]
				})
				return
			}
		}

	})
	.post('/todos', (req, res) => {
		console.log(req.body)
		const todo = {
			name: req.body.name,
			years: req.body.years,
			id: todos[todos.length - 1].id + 1
		}
		todos.push(todo)
		res.json(todo)
	})
app.listen(3000, () => console.log('api server running 3000.'))

然后呢再在这个根文件里输入 nodemon app.js

这样自己模拟的服务器接口数据就跑起了。

举例请求一个get数据todos

			axios.get('http://192.168.0.121:3000/todos').then(res => {
					console.log(res)
					this.lists = res.data
					console.log(this.lists)
					//this.lists = JSON.parse(localStorage.getItem('zhi')) || this.lists;
					let get=JSON.parse(localStorage.getItem("zhi"));
					console.log(get)
					if(get!=null){
						this.lists=get
					}else{
						this.lists= this.lists
					}
					localStorage.setItem('zhi', JSON.stringify(this.lists));
					console.log(this.lists)
				}, err => {
					console.log(err)
				})

猜你喜欢

转载自blog.csdn.net/qcg14774125/article/details/82461833