安装命令: NPM install vue-resource --save
安装完之后在根目录下的 package.JSON 检查一下插件的版本
在 rourer-index.JS 下引入文件
- import Resource from 'vue-resource'
- Vue.use(Resource)
引入 vue-resource 后, 可以基于全局的 Vue 对象使用 http, 也可以基于某个 Vue 实例使用 http
二, 安装 axios 插件
安装 axios 命令: NPM install --save axios
在后台服务文件 (server.JS) 中引入
var axios = require('axios')
新建一个公共 JS 文件, 用于存放 httpserver
在新建的公共 JS 文件中写入:
- import axios from 'axios'
- // 引入 axios 插件
- export function
- getHttp (url, callFun) {
- //get 请求方法
- axios.get(url).then(callFun)
- .catch(function(err){
- console.log(err)
- })
- }
三, proxy 代理
在 config-index.JS 文件下找到 proxyTable 设置代理
例如我的 vue 项目链接是 localhost:8080 后台数据地址是 localhost:8081/API/seller(端口不一样)
- proxyTable: {
- '/api': {
- target:
- 'http://localhost:8081'
- ,
- changeOrigin: true,
- pathRewrite: {
- '^/api': '/api'
- // pathRewrite 方法重写 url, 这样配置出来的 url 为 http://localhost:8081/API/seller
- // '^/api': '/' // pathRewrite 方法重写 url, 这样配置出来的 url 为 http://localhost:8081/seller
- }
- }
- }
四, 数据调用
在想调用数据的 vue 页面中写入如下代码
JS 部分
- <script>
- import {
- getHttp
- }
- from '../static/js/httpserver.js'export
- default {
- data() {
- return {
- seller:
- {}
- }
- },
- methods: {
- shangjia: function() {
- let url = '/api/seller'getHttp(url,
- function(res) {
- res = res.data console.log(res)
- })
- }
- }
- }
- </script>
html 部分
- <template>
- <div id="app">
- <div @click='shangjia()'>
- <router-link to='/seller'>
- 商家
- </router-link>
- </div>
- <router-view>
- </router-view>
- </div>
- </template>
来源: http://www.bubuko.com/infodetail-3355965.html