详解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全局函数使用简单说明
Mar 11 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
vue实现购物车列表
Jun 30 Javascript
JS数组的常用方法整理
Mar 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
关于JavaScript的一些看法
2009/05/27 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
python新手经常遇到的17个错误分析
2014/07/30 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
华为C++笔试题
2014/08/05 面试题
三八红旗手先进事迹材料
2014/05/13 职场文书
批评与自我批评总结
2014/10/17 职场文书
滴水洞导游词
2015/02/10 职场文书