vue2+vueRouter2+webpack+jsonp（四）接通api，渲染列表

因为我们用的是jsonp，所以，此刻，你首先要做的就是安装jsonp，在终端执行

npm install jsonp --save

因为用到了axios，所以安装它

npm install axios --save

安装好了以后，需要做如下修改

• 在src/utils中新建jsonp.js,修改如下

import originJSONP from 'jsonp'

import axios from 'axios'

export function jsonp (url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  return new Promise((resolve, reject) => {
    originJSONP(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

function param (data) {
  let url = ''
  for (let k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += `&${k}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ''
}

export function get (url, data, option = null) {
  return new Promise((resolve, reject) => {
    axios.get(url + '?' + param(data)).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

export function post (url, data, option) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      data,
      method: 'POST',
      headers: {
        'Content-type': 'multipart/form-data'
      }
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

• 在build文件中新建devserver.js文件，复制如下代码

var express = require('express');
const path = require('path')
const bodyParser = require("body-parser")
var app = express();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

// 查看列表
app.get('/list', function (req, res) {
  res.json(list)
})
// 编辑新增
app.post('/save', function (req, res) {
  res.json(save)
})
var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Example app listening at http://%s:%s', host, port);
});

• src/api/index.js修改如下

export const url = 'http://192.168.10.121:7500'   // 配置API接口地址
export const ERR_OK = 0   
export const options = {
  param: 'callback'
}

• src/api中新建remote.js文件并像如下修改

import { url, options } from './index'
import {get, post} from '@/utils/jsonp'

// 获取列表信息
export function getList () {
  const _url = url + '/list'
  return get(_url, {}, options)
}
// 新增修改
export function Exit ({password, gender, phone, remark, id, email, username}) {
  const _url = url + '/save'
  return post(_url, {password, gender, phone, remark, id, email, username}, options)
}

• 粘贴“jsonp”: “node build/devserver.js”到 package.json中如下位置
  

• 另外打开一个终端窗口，执行

npm run jsonp

• 测试看看你接口是否能通，修改src/page/index.vue中的代码

<template>
  <div>
    index
  </div>
</template>
<script>
import {getList} from '@/api/remote'
export default {
  created () {
    this._getList()
  },
  methods: {
    _getList () {
      getList().then(res => {
        console.log(res.data)
      })
    }
  }
}
</script>

然后我们在控制台可以看到：

这就说明我们的接口通了

• 渲染列表
  src/page/index.vue代码如下

<template>
  <div>
    <table>
      <tr>
        <th width="10%">编号</th>
        <th width="15%">姓名</th>
        <th width="15%">性别</th>
        <th width="15%">电话</th>
        <th width="15%">邮箱</th>
        <th width="10%">角色</th>
      </tr>
      <tr v-for="items in list" :key="items.id">
        <td>{{items.id}}</td>
        <td>{{items.username}}</td>
        <td>{{items.gender}}</td>
        <td>{{items.phone}}</td>
        <td>{{items.email}}</td>
        <td>{{items.remark}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import {getList} from '@/api/remote'
export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this._getList()
  },
  methods: {
    _getList () {
      getList().then(res => {
        console.log(res.data)
        this.list = res.data
      })
    }
  }
}
</script>

这样，页面就渲染出一个列表了