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

2024-07-28 17:13:36

环境：vue 2.9.3; webpack

目的：接口的调用

跨域方式：

1、express中间的使用

2、nginx代理

3、谷歌浏览器跨域设置

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

express中间件---不推荐

原理：本地代码请求->express中间件（处理，添加headers后转发）->服务器

express中间件 medical

本地代码文件目录 pacs

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

在服务器中间件配置 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

类似这样定义即可。

#########服务器中间的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)------------>服务器

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

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

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

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

nginx代理---不推荐

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

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

参考网址：https://www.jb51.net/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，使用过程中也是绕了很多圈子，难受。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

karma+webpack搭建vue单元测试环境的方法示例

最近做了一次关于vue组件自动化测试的分享,现在将vue组件单元测试环境搭建过程整理一下.这次搭建的测试环境和开发环境隔离,所以理论上适用所有使用vue的开发环境. 准备这篇文章的重点在于搭建测试环境,所以我随便写了个webpack的vue开发环境. 代码地址:https://github.com/MarxJiao/vue-karma-test 目录结构如下目录结构 app.vue和child.vue代码 app.vue child.vue 运行效果如下: 运行效果测试环境搭建注意:这里
vue项目webpack中Npm传递参数配置不同域名接口

项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx ,根据传递参数xxx来判定不同的环境,给出不同的域名配置. 1.项目中/config/dev.env.js修改: 新增:HOST: '"dev"' 'use strict' const me
详解基于Vue cli生成的Vue项目的webpack4升级

前面的话本文将详细介绍从webpack3到webpack4的升级过程概述相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单在未来,CSS.HTMl和文件都会成为原生模块 [0配置] webpack4 设置了默认值,以便无配置启动项目 entry 默认值是 ./src/ output.path 默认值是 ./dist mode 默认值是 production [模块类型] web
vue和webpack安装命令详解

一.安装vue相关命令 1.安装vue cnpm install vue 2.安装vue-cli cnpm install -g vue-cli 3.查看vue安装版本 vue -V 二.安装webpack 1.安装webpack cnpm install -g webpack 2.安装webpack-dev-server cnpm install -g webpack-dev-server 3.查看webpack版本 webpack -v 总结以上所述是小编给大家介绍的vue和w
vue和webpack项目构建过程常用的npm命令详解

vue //最新稳定版 cnpm install vue //全局安装 vue-cli cnpm install --global vue-cli //创建一个基于 webpack 模板的新项目 vue init webpack my-project //进入项目目录,运行 cd my-project cnpm install cnpm run dev webpack //全局安装webpack cnpm install -g webpack //安装到你的项目目录 cnpm install
Vue中使用webpack别名的方法实例详解

在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么
vue和webpack打包项目相对路径修改的方法

一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: assetsPublicPath: './' 2.解决css里面的路径问题,打开utils.js 添加红色框参数即可: publicPath: '../../' 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.
vue + webpack如何绕过QQ音乐接口对host的验证详解

前言最近在使用vue2.5+webpack3.6撸一个移动端音乐项目, 获取全部歌单json数据时遇到了接口对host和referer的限制 ,故不能直接在前端使用jsonp对接口数据的读取. 一. 先实现使用jsonp读取的方式安装jsonp模块并, 封装请求方法 1. $ npm install -S jsonp 2. 封装import originJSONP from 'jsonp' function jsonp(url, data, options) { // 如果存在?则直接加par
如何用webpack4带你实现一个vue的打包的项目

一个用webpack4打包的vue 的项目,参照vue-cli的webpack配置, 一步一步带你实现一个vue的打包的项目,每一个commit对应一个步骤. github 地址 clone project git clone git@github.com:naihe138/nvue.git install npm install or yarn 一.初始化项目初始化项目,用vue-loader来打包.vue文件,html-webpack-plugin插件来导出html文件. 第一步我们很简单
详解vue+webpack+express中间件接口使用

环境:vue 2.9.3; webpack 目的:接口的调用跨域方式: 1.express中间的使用 2.nginx代理 3.谷歌浏览器跨域设置 --------------------------------------------分割线--------------------------------------------- express中间件---不推荐原理:本地代码请求->express中间件(处理,添加headers后转发)->服务器 express中间件 medical 本地
详解vue 配合vue-resource调用接口获取数据

1.先用node+express+mysql简单配置一下后台 const express = require('express'); const mysql = require('mysql'); const static = require('express-static'); const db = mysql.createPool({ host: 'localhost', user: 'nodejs', password: 'nodejs', database:'resume', port:
详解Vue.js 响应接口

Vue 可以添加数据动态响应接口. 例如以下实例,我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应. 实例中通过点击按钮计数器会加 1.setTimeout 设置 10 秒后计算器的值加上 20 . <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click
详解Vue中Axios封装API接口的思路及方法

一.axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个
详解vue组件基础

什么是组件组件(Component)是对数据和方法的简单封装.web中的组件其实可以看成是页面的一个组成部分,它是一个具有独立的逻辑和功能的界面,同时又能根据规定的接口规则进行相互融和,最终成为一个完整的应用,页面就是由一个个类似这样的组成部分组成的,比如导航.列表.弹窗.下拉菜单等.页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行..前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的
详解vue项目打包后通过百度的BAE发布到网上的流程

经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己
详解vue或uni-app的跨域问题解决方案

常见解决方案有两种服务器端解决方案服务器告诉浏览器:你允许我跨域具体如何告诉浏览器,请看: // 告诉浏览器,只允许 http://bb.aaa.com:9000 这个源请求服务器 $response->header('Access-Control-Allow-Origin', 'http://bb.aaa.com:9000'); // 告诉浏览器,请求头里只允许有这些内容 $response->header('Access-Control-Allow-Headers', 'Author
实例详解vue中的代理proxy

目录问题复习一下跨域的解决方案原理场景扩展几个常用的devServer配置扩展几个vue/cli3的配置问题我们本地调试一般都是 npm run serve,然后打开本机ip:8080(localhost:8080)对吧,这时候我们要调接口调试,后端的接口的地址可能在测试环境,也可能是自己电脑的 ip,总之不是你的 lcoalhost:8080,那么你调接口就会产生跨域,那么怎么办呢?就需要proxy出场了复习一下跨域的解决方案 jsonp cors Node中间件代理(两次
详解vue的数据binding绑定原理

自从angular火了以后,各种mvc框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点-性能低下了.有时候改了一个地方,脏循环要循环多次来保证数据是不是真的变了和是否停止变化了.这样性能就很低了.于是人们开始钻研新的双向数据binding的方法.尤大的vue binding就是本人蛮喜欢的一种实现方式,本文跟随尤大的一个例子来详解vue的数据binding的原理. 数据binding,一般
详解Vue Cli浏览器兼容性实践

浏览器市场占有率在处理浏览器兼容性问题之前,我们先来看一下现在的浏览器市场份额是怎样的,

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

相关推荐

随机推荐