1. 程式人生 > >自己模擬資料介面,vue中axios獲取資料

自己模擬資料介面,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)
				})