详解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 相关文章推荐
javascript根据像素点取位置示例
Jan 27 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 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的PDO错误与错误处理
2019/01/27 PHP
xtree.js 代码
2007/03/13 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
毕业生自荐信格式
2014/03/07 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
给校长的建议书300字
2014/05/16 职场文书
国际贸易求职信
2014/07/05 职场文书
装修施工安全责任书
2014/07/24 职场文书
研究生个人学年总结
2015/02/14 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL