详解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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
javascript web对话框与弹出窗口
Feb 22 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
详解javascript new的运行机制
Jan 26 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
js 获取json数组里面数组的长度实例
Oct 31 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连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
js下弹出窗口的变通
2007/04/18 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
python多线程操作实例
2014/11/21 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
办公室文秘岗位职责
2013/11/15 职场文书
生物专业个人自荐信范文
2013/11/29 职场文书
关于打架的检讨书
2014/01/17 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
倡议书范文
2014/04/16 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
Python实现照片卡通化
2021/12/06 Python