《vue-cli搭建的项目中增加后台mock接口》中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据。

req.on('data', function(chunk){
//接收字节数据
}); req.end('data', function(){
//转换||处理
}); req.error('error', function(e){
//处理错误
});

如果前端需要使用cookie,后端要读取,那么在后台mock的接口中还要获取req的headers,并从中取得cookie字符串,自己还要分割处理等等。

当然这样是可以的,但是比较麻烦,从接收数据到转换都要自己做。

vue-cli搭建的项目是用express作为node.js的web框架,它支持丰富的中间件。

对应上述问题,有body-parser和cookie-parser中间件可以方便地将post的body中的数据和cookie自动提取成req.body和req.cookies对象供人使用,非常方便。

安装中间件

npm install body-parser --save-dev

npm install cookie-parser --save-dev

引入中间件

在build/dev-server.js文件中的头部require区域末尾增加中间件require。

  var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');

然后再紧接着var app = express()之后添加中间件调用。

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

bodyParser的两行调用方式就是分别针对content-type是‘application/json’和'application/x-www-form-urlencoded'两种设置。

添加完成后就可以方便使用了。

End

在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies的更多相关文章

  1. 在vue-cli搭建的项目中增加后台mock接口

    用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现 ...

  2. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  3. VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。

    场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...

  4. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  5. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

  6. 快速搞定用Vue+Webpack搭建前端项目(学习好久了,该写点东西了......)

    现在开始安装环境 一.安装node.js 首先要安装node.js,去nodejs官网下载即可,地址:http://nodejs.cn/中文网. 安装完成后,打开终端(windows键+R)搜索cmd ...

  7. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  8. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  9. Vue环境搭建和项目创建

    目录 vue项目 环境搭建 项目创建 vue项目 环境搭建 node node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城 ...

随机推荐

  1. \u Unicode和汉字转化

    介绍 \uxxxx这种格式是Unicode写法,表示一个字符,其中xxxx表示一个16进制数字,范围所0-65535. Unicode十六进制数只能包含数字0-9.大写字母A-F或者小写字母A-F.需 ...

  2. ios中布局(推荐一)

    - (void)viewDidLoad { [super viewDidLoad]; NSArray *data=@[@"标题一",@"标题二",@" ...

  3. Scribes:小型文本编辑器,支持远程编辑

    Scribes是一款简洁的文本编辑器.现在给大家介绍下.     功能列表,  Python插件扩展  支持远程编辑(如ftp, sftp, ssh, samba, webdav, webdavs)  ...

  4. 使用Java调用JS

    import junit.framework.TestCase; import javax.script.ScriptEngine; import javax.script.ScriptEngineM ...

  5. sklearn模型保存

    使用sklearn训练完模型之后,只有将模型持久化到硬盘上,才能方便下次直接使用. 第一种方式:使用pickle >>> from sklearn import svm >&g ...

  6. 树莓派进阶之路 (010) - 树莓派raspi-config配置(转)

    经过前面两步我们的树莓派已经正常的工作起来了,但是在真正用它开发之前还需要进行一些列的配置以及软件的安装,这样开发起来才会得心应手,下面我们介绍一下常用的软件和服务 1.配置选项: 树莓派第一次使用的 ...

  7. ubuntu(14.04) 下配置重写

    1.开启rewrite模块,使用命令:a2enmod  rewrite 2.在apache2.conf,配置你网站的目录(是目录而定)

  8. mybatis自定义插件动态修改sql语句

    step1:定义Interceptor实现org.apache.ibatis.plugin.Interceptor import org.apache.commons.logging.Log; imp ...

  9. golang学习 ---并发获取多个URL

    package main import ( "fmt" "io" "io/ioutil" "net/http" &quo ...

  10. 【转】Tesla Model X的车门设计问题

    Tesla Model X的车门设计问题 Tesla即将推出的SUV(Model X),不但继承了以上提到的Model S的各种问题(触摸屏,门把,……),而且还制造了新的问题.Model X具有一个 ...