vue+webpack+express中间件接口使用
环境: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.cnblogs.com/laden666666/p/5544572.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,使用过程中也是绕了很多圈子,难受。
vue+webpack+express中间件接口使用的更多相关文章
- vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)
1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...
- vue+nodejs+express+mysql 建立一个在线网盘程序
vue+nodejs+express+mysql 建立一个在线网盘程序 目录 vue+nodejs+express+mysql 建立一个在线网盘程序 第一章 开发环境准备 1.1 开发所用工具简介 1 ...
- webpack+express实现“热更新”和“热加载”(webpack3.6以前的做法)
“热更新”:对应的是 'webpack-dev-middleware' 中间件 “热加载”:对应的是 'webpack-hot-middleware' 中间件 为了使用这两个中间件,必须修改“webp ...
- vue+websocket+express+mongodb实战项目(实时聊天)
继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...
- Vue + webpack 项目实践
Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...
- nodejs, vue, webpack 项目实践
vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...
- 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室
一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...
- 一字一句的搞懂vue-cli之vue webpack template配置
webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...
- vue + webpack + gulp 简单环境 搭建
一.物料准备 废话不多说,直接上 package.json { "name": "vwp", "version": "1.0.0& ...
随机推荐
- 谈谈在 .Net 平台上的 软件生态 和 软件生产力
我们可以先看看这篇文章 : <看 StackOverflow 如何用 25 台服务器撑起 5.6 亿的月 PV> http://www.nowamagic.net/librarys/ ...
- spring+mybaits xml配置解析----转
一.项目中spring+mybaits xml配置解析 一般我们会在datasource.xml中进行如下配置,但是其中每个配置项原理和用途是什么,并不是那么清楚,如果不清楚的话,在使用时候就很有可能 ...
- VS未能正确加载包
这个方法同样适用于多个版本的VS 首先关闭VS进这里:C:\Users\用户名\AppData\Roaming\Microsoft\VisualStudio\11.0(2012是11.0,根据你的VS ...
- 大数据时代——为什么用HADOOP?
转载自:http://www.daniubiji.cn/archives/538 什么叫大数据 “大”,说的并不仅是数据的“多”!不能用数据到了多少TB ,多少PB 来说. 对于大数据,可以用四个词来 ...
- Sql语句的优化摘要
1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉 ...
- jQuery模态框实现 后台添加删除修改Ip端口
主要用到,$('#i1').each(),标签里绑定函数可传参数this <!DOCTYPE html> <html lang="en"> <head ...
- 根据时间段获取时间段内所有时间点(js)
Date.prototype.format=function (){var s='';s+=this.getFullYear()+'-';// 获取年份.s+=(this.getMonth()+1)+ ...
- HelloStruts
Hello Struts 建立项目 打开myeclipse 新建项目 选择myeclipse-java enterprise projects-web project 项目名称:hellostruts ...
- Mysql 复制工作原理
数据库配置的时候,一定要开启二进制日志,如果开始没开启后来再想开启的话,必须重启. 基于日志点的复制 备份数据库工具 ----------------------------------------- ...
- NET Core Kestrel部署HTTPS
NET Core Kestrel部署HTTPS ASP.NET Core配置 Kestrel部署HTTPS.现在大部分网站已经部署HTTPS,大家对于安全越来越重视. 今天简单介绍一下ASP.NET ...