自己模擬資料介面,vue中axios獲取資料
阿新 • • 發佈:2019-02-18
我先說我的操作步驟:(前提是要有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) })