详解vue+webpack+express中间件接口使用


Posted in Javascript onJuly 17, 2018

环境:vue 2.9.3; webpack

目的:接口的调用

跨域方式:

1、express中间的使用

2、nginx代理

3、谷歌浏览器跨域设置

--------------------------------------------分割线---------------------------------------------

express中间件---不推荐

原理:本地代码请求->express中间件(处理,添加headers后转发)->服务器

express中间件 medical

详解vue+webpack+express中间件接口使用

本地代码文件目录 pacs

详解vue+webpack+express中间件接口使用

#########配置接口

在服务器中间件配置 medical/routes/home.js 没有需要新建home.js // 哪个文件使用就可以名字命名 这里就是home页面的接口

home.js

var express = require('express');
var router = express.Router();
var http = require("ykt-http-client");  // 中间件的客户端 参数存放在req.bdoy里面
/* GET users listing. */
var comm = require('../public/js/constant'); // 这里面是定义服务器的地址
var ip = comm.IP;
const IP = comm.IP;

router.get('/', function (req, res, next) {
 res.send('respond with a resource');
});
// 获取频道
router.post('/aa', function (req, res) {
 http.post(ip + 'aaaa', req.body).then((data) => {
 //console.log(JSON.stringify(data))
 res.send(data);
 })
});
// 主页  这就是要用到的接口
router.post('/main', function (req, res) {
 http.post(IP+'/xhhms/rest/interfacesLoginController/getMenu', req.body ,req.headers).then((data) => {
  console.log(IP+'/xhhms/rest/interfacesLoginController/getMenu');
  res.send(data);
 })
});

上面的需要定义constant.js的ip

详解vue+webpack+express中间件接口使用

类似这样定义即可。

#########服务器中间的app.js里面引用

添加var home = require('./routes/home');

然后使用 app.use('/home', home);

######这样就ok了,就可以调用这个接口了

createded() {
 this.getMune();
},
methods:{
 getMune () {
 var params=new Object();
 axios.post(this.ip + '/home/main', params, {
  headers: {
  'X-AUTH-TOKEN': this.token // 这里用到了登录用的token ,还需要在下面配置
  }
 }).then((res) => {
  var data = res.data;
  if (!!data) {
  console.log(data);
  localStorage.setItem('nume', JSON.stringify(data.data[0].children));
  } else {
  return false;
  }
 }, (err) => {
  console.log(err);
 })
 }
}

##### 因为上面用到了header里面的X-AUTH-TOKEN,需要修改中间件的配置文件,如果不用服务器中间件的调用的直接添加表头即可。

1、当前项目的传递方式

本地代码(pacs)----------->服务器中间件(web)------------>服务器

相当于多用了一层,中间层主要用来解决跨域等其他问题(却显得累赘)。

详解vue+webpack+express中间件接口使用

如上图,传递的参数存放在req.body里面,传递的header存放在req.headers里面,我们请求接口后就把req传递到

详解vue+webpack+express中间件接口使用

ykt-http-client里面,目录是在medical/node_modules/ykt-http-client/index.js里面
如果只是传递参数的话就没有问题,因为原来的脚本里面默认是吧req.body传递过去的,但是却没有req.headers保存的参数,所以需要修改下当前的index.js文件

详解vue+webpack+express中间件接口使用

详解vue+webpack+express中间件接口使用

这样的话,如果请求里面发现了headers参数就会传递到服务器里面,才能达到目的。

nginx代理---不推荐

原理和中间大同小异,也是通过转发的方式。

谷歌浏览器跨域---推荐

参考网址:https://3water.com/softjc/625598.html 进行跨域后

直接通过vue-resource进行请求即可。

首先安装vue-resource

cnpm install vue-resource --save

然后在src/main.js里面引入

import VueResource from 'vue-resource';
Vue.use(VueResource);
Vue.http.interceptors.push((request, next) => {
 request.headers.set('X-AUTH-TOKEN', localStorage.getItem("token"))
 // request.headers.set('Access-Control-Allow-Origin', '*');
 // request.headers.set('Access-Control-Allow-Headers', 'Content-Type');
 // request.headers.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
 request.headers.set('Content-Type', 'application/json')
 //console.log(request.headers)
 next(response => {
 // console.log(response)
 return response;
 })
})

###由于使用了浏览器跨域设置,这里面不需要设置什么。

###使用的话直接在各个位置使用即可

var params=new Object(); // 定义的参数
  params.id = '1; // 设置id=1
 this.$http.post(this.ip + '/xhhms/rest/interRemoteReportController/v1/getKnowledge', params, {
  headers: {
  'X-AUTH-TOKEN': this.token // 定义的表头 根据需要自行添加
  }
 }).then((res) => {
  var data = JSON.parse(res.data);
  if (!!data&&data.status=="1") {
  // $.fn.zTree.init($("#shuyuSelect"), this.shuyusetting, data.data);
  } else {
  return false;
  }
 }, (err) => {
  console.log(err);
 });

----由于刚刚接触vue,使用过程中也是绕了很多圈子,难受。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
iframe子父页面调用js函数示例
Nov 07 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
js强制把网址设为默认首页
Sep 29 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 #Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 #Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 #Javascript
微信小程序实现循环动画效果
Jul 16 #Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 #Javascript
Vue实现自定义下拉菜单功能
Jul 16 #Javascript
vue实现城市列表选择功能
Jul 16 #Javascript
You might like
php生成短域名函数
2015/03/23 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
JS前端加密算法示例
2016/12/22 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
详解python程序中的多任务
2020/09/16 Python
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
探矿工程师自荐信
2014/01/24 职场文书
双十佳事迹材料
2014/01/29 职场文书
入党申请自荐书范文
2014/02/11 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
团员个人年度总结
2015/02/26 职场文书
小孩不笨观后感
2015/06/03 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
Java完整实现记事本代码
2022/06/16 Java/Android