开发者社区> 廊桥梦醉> 正文

NodeJs本地搭建服务器,模拟接口请求,获取json数据

简介: 前言 不知道你在项目开发过程中有没有遇到以下场景: 一般是前端先制作静态页面,同时服务器端创建数据库,搭建服务器端框架,写接口;当接口写完之后,前端或者后端才能嵌套页面。
+关注继续查看

前言

不知道你在项目开发过程中有没有遇到以下场景:

一般是前端先制作静态页面,同时服务器端创建数据库,搭建服务器端框架,写接口;当接口写完之后,前端或者后端才能嵌套页面。但是如果前端页面制作好了,后端接口还没有写好呢?或者如何让前端、后端各自做各自的事情,互不影响?

能做到下面这样是不是很好呢?

在进行完需求分析和详细设计后,前端、后端一同商量、制作出一份接口文档(其中接口名、参数、返回值名称、返回值类型都定义好)

前端页面制作好之后,直接模拟出该接口的json文件,先去请求该文件,把页面绑定、业务逻辑都处理好,等前端都绑定好,同时后端接口写好后,我们只需要前端修改接口地址,其他不用做任何处理。这样是不是前端不用等后端接口全部写完才能开始剩下的工作。

1、express 创建一个简单的项目

安装node

新建一个文件,进入目录

安装espress

创建一个工程

安装Express框架:

本地模式:npm install express 

执行该命令后会在当前文件夹下生成一个node_modules目录

全局模式:npm install -g express

 执行该命令后会在C:\Users\Administrator\AppData\Roaming\npm下生成一个node_modules目录

网上推荐都是全局模式的

执行完以上的命令后,通过express --version查看版本号来检查是否安装成功(旧的版本是使用的express -v)

此时窗口打印了:'express' 不是内部或外部命令,也不是可运行的程序或批处理文件。

百度后发现,因express默认安装是最新的版本,已经是4.x.x的版本。而最新express4.0+版本中将命令工具分出来了,所以必须要安装express-generator,执行:npm install -g express-generator 全局模式(在C:\Users\Administrator\AppData\Roaming\npm下生成了express、express.cmd两个文件)

此时再次执行express --version

成功输出express框架当前安装的版本号,证明你一安装成功。

下面来建立第一个工程(express默认使用的是jade模板,对于初学者来说,ejs会更容易点):

首先进入到你当前准备创建工程的位置下,执行:express --view=ejs test_express(旧版本为:express -t ejs test_express)

--view=后面填的是当前框架使用的模板,test_express代表当前文件夹的名称

此时你会发现在当前的位置已经存在该文件夹了,下面我们来启动服务器(首先要进入到上面创建的文件夹下面,然后再执行以下的命令):

旧版本的命令为:node app.js(主要是因为就版本中的app.js是用来启动服务器的),而新版本的命令则为:npm start(或者是node bin\www)。

此时访问http://127.0.0.1:3000/

就会出现以下页面,证明服务器启动成功

安装依赖

备注:执行npm install命令会将package.json文件中 dependencies 依赖列表中,即可自动安装依赖列表中所列出的所有模块。

开启服务

img_bb8bcd3232d8ab69b50a5932c26f14b9.png

下面是浏览显示的内容

img_4035b90ef1818bcd34a7f1e8a81c46b9.png

为什么浏览器中出现的内容是这样的呢?

首先打开app.js,然后可以找到这句话

img_a6fd4bda3fd6238ba37a6759739f0db8.png

然后我们再看indexRouter是什么,就可以往上找,找到

img_772ebf1228c0381be3f5cadad7f2435f.png

顺着这个,我们打开routes/index文件,看看里面究竟写的什么

img_bd1e5e815ac3f4980a959f2f668be399.png

原来框架是找到了views文件夹下的index.ejs文件渲染到了前台

img_502681ad5b4ea9332a31c69287f59f94.png

试着修改修改index.js文件的内容,将title改为Hello world.

img_abd7471660fcd7fb21b795a520e7e0eb.png

在命令行中,按ctrl+c关闭服务,重新执行npm start ,看界面中的结果

img_9245516edf2ad5ade7f1eca9d3d2f215.png

看到这里可能有个疑问,我们怎么访问静态的html呢?

首先,我们看app.js中有没有这句话

img_9f2af6816097f36bd48b0b214ba3f8c2.png

有的话则直接看下一步,没有的话就在app.js中添加这句话,记得添加后重新启动服务器

接着,我们在项目的public文件夹下,新建一个html文件下(便于后期管理所有的静态页面),然后新建index.html,内容如下:

img_962d3e6d3bac2b79c724eeda7aae66d1.png

这样在浏览器中输入下面的地址就可访问了:http://localhost:3000/html/index.html

我们现在做到了访问一个html文件,那我们如何模拟ajax请求,读取json文件中的内容,提前绑定页面呢?(不依赖后端接口写好)

为了方便项目管理,我们新建几个文件夹和对应的文件

json文件夹及其对应的index.json文件在jjs文件夹下新建index.js

img_1fd5c079bdcc5e0df809e967fd9d292d.png
img_ecb0df76353f18abff7e4e827467083f.png

在index.html中引入对应的文件

img_47cb4ed37a1f77fe2c142523d3274b06.png

最后再打开访问http://localhost:3000/html/index.html

打开控制台,我们可以看到打印出了我们想要的内容

img_b89a285a2d38957ab5ba196edc077f3d.png

最后附上项目结构

img_6c3993c7620d98a4f457a3195ea6b84b.png

2.vue脚手架中的应用

初始化并创建一个项目

vue init webpack-simple node-demo

cd node-demo

npm i

cnpm i vuex axios

接下来写接口

在 build 文件下的 webpack.dev.conf.js 文件中加入

express基于node.js后端框架,负责路由,业务逻辑,数据库操作,页面和数据响应。

即架构中的业务层,对前端的请求进行响应,需要数据库的拉取数据库内容,需要判断处理的返回处理结果,请求页面文件的返回html文件

img_438b52093c9b61b612840f4c02d0e2ad.png

在 build 文件下的 webpack.dev.conf.js 文件中的 devServer 中加入

img_ac3d26bb02db59aae76de7159075fcc3.png

如下图:

img_7830329c6df5558d09a9eac75333c665.jpe
img_7d51a8c7e430c9611a79a109e150daa4.jpe

三、使用 axios 请求数据

在组件中直接请求数据就好了

img_5322eed0b731f012808e821b44dd605a.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
json传参到java接口部分参数接收不到
json传参到java接口部分参数接收不到
40 0
python接口自动化(十九)--Json 数据处理---实战(详解)
上一篇说了关于json数据处理,是为了断言方便,这篇就带各位小伙伴实战一下。首先捋一下思路,然后根据思路一步一步的去实现和实战,不要一开始就盲目的动手和无头苍蝇一样到处乱撞,撞得头破血流后而放弃了。不仅什么没学习 到,自己的自信心都受到打击了,自己都怀疑自己。其实你是最棒的,天生我材必有用,好了废话不说,进入实战——以查看快递物流接口为例。
62 0
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
有些 post 的请求参数是 json 格式的,这个前面发送post 请求里面提到过,需要导入 json模块处理。现在企业公司一般常见的接口因为json数据容易处理,所以绝大多数返回数据也是 json 格式的,我们在做判断时候,往往只需要提取其中 几个关键的参数就行,这时候我们就需要 json 来解析返回的数据了。首先来说一下笔者为何要单独写这么一篇,原因是:python 里面 bool 值是 True 和 False,json 里面 bool 值是 true和 false,并且区分大小写,这就尴尬了,明明都是 bool 值。
70 0
python接口自动化(九)--python中字典和json的区别(详解)
这篇文章的由来是由于上一篇发送post请求的接口时候,参数传字典(dict)和json的缘故,因为python中,json和dict非常类似,都是key-value的形式,为啥还要这么传参,在群里问了一些人,也说不出个所以然了,还是自己动手丰衣足食,所以才有这篇和编辑分类格格不入的文章。来先看一下它们各自的定义。
83 0
JSON序列化接口,JsonSerializable
php还提供了一个自定义类序列化的接口,JsonSerializable 实现 JsonSerializable 的类可以 在 json_encode() 时定制他们的 JSON 表示法。
29 0
技术分享 | 接口自动化测试之JSON Schema模式该如何使用?
JSON Schema 模式是一个词汇表,可用于注释和验证 JSON 文档。在实际工作中,对接口返回值进行断言校验,除了常用字段的断言检测以外
131 0
技术分享 | 接口自动化测试如何搞定 json 响应断言?
在之前的的章节已经简单介绍了如何断言接口的响应值,在实际工作过程中,json 的响应内容往往十分复杂,面对复杂的 json 响应体,主要通过 JSONPath 解决。JSONPath 提供了强大的 JSON 解析功能,使用它自带的类似 XPath 的语法,可以更便捷灵活的用来获取对应的 JSON 内容。
138 0
vue实现多接口轮询,并把json打包成json文件且压缩为zip包|8月更文挑战
vue实现多接口轮询,并把json打包成json文件且压缩为zip包|8月更文挑战
298 0
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)
393 0
+关注
廊桥梦醉
对我来说,博客首先是一种知识管理工具,其次才是传播工具。我的技术文章,主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写。炫耀从来不是我的动机,好奇才是。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载