前言
不知道你在项目开发过程中有没有遇到以下场景：
一般是前端先制作静态页面，同时服务器端创建数据库，搭建服务器端框架，写接口；当接口写完之后，前端或者后端才能嵌套页面。但是如果前端页面制作好了，后端接口还没有写好呢？或者如何让前端、后端各自做各自的事情，互不影响？
能做到下面这样是不是很好呢？
在进行完需求分析和详细设计后，前端、后端一同商量、制作出一份接口文档（其中接口名、参数、返回值名称、返回值类型都定义好）
前端页面制作好之后，直接模拟出该接口的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 依赖列表中,即可自动安装依赖列表中所列出的所有模块。
开启服务
下面是浏览显示的内容
为什么浏览器中出现的内容是这样的呢？
首先打开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中引入对应的文件
最后再打开访问http://localhost:3000/html/index.html
打开控制台，我们可以看到打印出了我们想要的内容
最后附上项目结构
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文件
在 build 文件下的 webpack.dev.conf.js 文件中的 devServer 中加入
如下图：
三、使用 axios 请求数据
在组件中直接请求数据就好了
网友评论