在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies

《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

时间: 2024-10-09 21:22:23

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

Vue Cli搭建域名服务器常见问题

Vue Cli搭建域名服务器常见问题 Vue Cli不使用反向代理配置域名 通过npm run serve命令执行Vue项目只能通过IP地址来访问,即使域名服务中设置DNS依然访问不到.有以下三种解决办法: 1.修改项目根目录下[email protected]\cli-service\lib\options.js文件 //第133行 devServer: { /* open: process.platform === 'darwin', host: '0.0.0.0',//改为域名 port:

vue cli 3 查看项目 vue.config.js 的默认配置信息

vue cli 3 查看项目 vue.config.js 的默认配置信息 运行命令,在终端输出: npx vue-cli-service inspect 运行命令,将输出导入到文件:vue.config.detail.js: npx vue-cli-service inspect >> vue.config.detail.js 在文件:vue.config.detail.js 开头,添加:module.exports =,然后格式化即可查看. 原文地址:https://www.cnblogs.

关于JAVA中的抽象类和接口中常量和变量定义的原因

转载自https://my.oschina.net/cdzsc/blog/86107 在抽象类中,可以包含一个或多个抽象方法:但在接口(interface)中,所有的方法必须都是抽象的,不能有方法体,它比抽象类更加"抽象". 1. 为什么接口中只能定义static final:     1.1 static(这时暂且认为是变量)解释:因为一个类可以实现多个接口,如果一个类同时实现了多个接口而每个接口中都定义了同一个变量的话就会产生在类中不知道是哪个接口中的变量了,所以必须定义成stat

vue cli搭建项目及文件引入

cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载东西有时会快一些 2.cnpm i -g vue-cli  //安装 vue-cli,i:install 安装,-g:全局,哪儿都可以使用. 3.vue init webpack-simple ProjectName //webpack-simple:使用webpack-simple模板,proje

Vue.js搭建官方项目的步骤

搭建官方项目模板步骤:  1.npm install  vue-cli (安装vue-cli )  有的时候有看到其它两种写法:  --save-dev 和 --save的写法.这两个有一定的区别,我们都知道package.json  中有一个 "dependencies" 和 "devDependencies" 的.dependencies 是用在开发完上线模式的,就是有些东西你上线以后还需要依赖的,比如juqery , 我们这里的vue 和 babel-runt

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

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

利用脚手架vue cli搭建vue项目

vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装node.js https://nodejs.org/en/download/ 安装好后,打开cmd面板,输入 node -v  (v即 version ,查看node版本) npm是随nodeJs一起安装.所以输入 npm -v 说明npm也已经好了. (安装nodejs后,里面的npm可能不是最新

vue cli搭建的vue项目 不小心开了eslint 一直报黄色的警告

报错必须处理,警告也忍不了,发现在bulid -webpack.base.config.js 里找到 const createLintingRule = () => ({ /*test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter

vue+webpack搭建基础项目(非vue-cli)

yarn add vue yarn add webpack yarn add webpack-cli yarn add html-webpack-plugin yarn add webpack-dev-server 创建build.src文件夹 创建index.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&