利用express解决测试接口数据问题

本人也是菜鸟中的菜鸟,本文只是提供一种思路(可能是错误的,但目前看来可行)


依赖后端的数据进行测试是不行滴,前端的东西自己解决~~

首先了解下几个概念。

一.webpack-dev-server

webpack-dev-server为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。这个东西在我们的webpack-config.js中进行配置,


以上配置告知webpack-dev-server,在localhost:8080下建立服务,将dist目录下的文件,作为可访问文件。

当然还有更多配置选项,有兴趣自己去找相关资料吧。

二.express

其实我对他的了解也不深。反正它在我们项目中的角色是:配置Http请求。

下面是一些基础知识

注:本文目的是 本着够用能用原则仅让你理解express的用途用法,能看懂一些基本配置。

文章必有疏漏,详情请看express官网。



Express 是一个自身功能极简,完全是由路由和中间件构成一个的 web 开发框架:从本质上来说,一个 Express 应用就是在调用各种中间件

那么什么是中间件呢?

中间件(Middleware)是一个函数,它可以访问请求对象([request

object]( (`req`)), 响应对象([response object] (`res`)), 和 web

应用中处于请求-响应循环流程中的中间件,一般被命名为 `next` 的变量

所以任何函数都可以是中间件,或者说 中间件的功能是访问请求对象、相应对象...能提供这些功能的就符合中间件的概念。

那么具体的形式是怎么样的呢?

中间件绑定到 app 对象使用 `app.use()` 和 `app.METHOD()`, 其中, `METHOD` 是需要处理的 HTTP 请求的方法,例如 GET, PUT, POST 等等,全部小写。例如:

var app = express();

// 没有挂载路径的中间件,应用的每个请求都会执行该中间件

app.use(function (req, res, next) {

  console.log('Time:', Date.now());

  next();

});

// 挂载至 /user/:id 的中间件,任何指向 /user/:id 的请求都会执行它

app.use('/user/:id', function (req, res, next) {

  console.log('Request Type:', req.method);

  next();

});

// 路由和句柄函数(中间件系统),处理指向 /user/:id 的 GET 请求

app.get('/user/:id', function (req, res, next) {

  res.send('USER');

});

这个app对象,如果是express()的实例,那么这个挂载的中间件称为应用级中间件,如果是

var router=express.Router();

那么这个就称为路由级中间件了。

不过这几级,我查了一下,似乎除了路由级优先应用级执行,其他好像也没什么区别~

好了,基本概念先讲这么多。



具体在我们的vue项目中这样应用:

在web.pack.conf.js中,加入这段

var express = require('express');

var app = express();

var appData = require('./goods.json') /* 引入goods.json数据文件 */

var goods = appData.goods /* goods.json文件文件下的.goods数据赋值给变量goods */

var apiRoutes = express.Router() /* 定义express.Router() 对象 */

apiRoutes.get('/goods', function(req, res){ /* 定义接口并返回数据 */ res.json({ data: goods }) }) app.use('/api', apiRoutes) /* 定义接口在/api目录下,方便管理 */

然后继续配置我们的webpack.dev

devServer: {

before(app) {

   app.get('/api/goods', (req, res) => {

res.json({

code: 0,

data: goods })

}) }

}

利用定义好的路径(我们这里是localhost:8080/api/goods),就可以访问到我们的api了

开头就说了,这只是一种思路,也可以启动一个server来提供数据测试服务,不过这就涉及其他问题了。

这里我有点疑惑的是,为什么vue-cli运行起来的项目主页在localhost:8080/#/这里,为什么多个/#/我哪里配置错了吗?求解╮(╯_╰)╭

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,458评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,454评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,171评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,062评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,440评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,661评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,906评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,609评论 0 200
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,379评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,600评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,085评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,409评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,072评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,088评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,860评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,704评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,608评论 2 270

推荐阅读更多精彩内容