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

前言html

不知道你在项目开发过程当中有没有遇到如下场景：前端

通常是前端先制做静态页面，同时服务器端建立数据库，搭建服务器端框架，写接口；当接口写完以后，前端或者后端才能嵌套页面。可是若是前端页面制做好了，后端接口尚未写好呢？或者如何让前端、后端各自作各自的事情，互不影响？vue

能作到下面这样是否是很好呢？node

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

前端页面制做好以后，直接模拟出该接口的json文件，先去请求该文件，把页面绑定、业务逻辑都处理好，等前端都绑定好，同时后端接口写好后，咱们只须要前端修改接口地址，其余不用作任何处理。这样是否是前端不用等后端接口所有写完才能开始剩下的工做。ios

一、express 建立一个简单的项目web

安装nodeajax

新建一个文件，进入目录vuex

安装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 依赖列表中,便可自动安装依赖列表中所列出的全部模块。

开启服务

下面是浏览显示的内容

为何浏览器中出现的内容是这样的呢？

首先打开app.js，而后能够找到这句话

而后咱们再看indexRouter是什么，就能够往上找，找到

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

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

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

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

看到这里可能有个疑问，咱们怎么访问静态的html呢？

首先，咱们看app.js中有没有这句话

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

接着，咱们在项目的public文件夹下，新建一个html文件下(便于后期管理全部的静态页面)，而后新建index.html，内容以下：

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

咱们如今作到了访问一个html文件，那咱们如何模拟ajax请求，读取json文件中的内容，提早绑定页面呢？(不依赖后端接口写好)

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

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

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

打开控制台，咱们能够看到打印出了咱们想要的内容

最后附上项目结构

2.vue脚手架中的应用

初始化并建立一个项目

vue init webpack-simple node-demo

cd node-demo

npm i

cnpm i vuex axios

接下来写接口

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

node.js后端框架，负责路由，业务逻辑，数据库操做，页面和数据响应。

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

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

以下图：

3、使用 axios 请求数据

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