开发过程中，免不了需要前台与后台的交互，大部分的交互都是通过Ajax请求来完成，在服务端未完成开发时，前端需要有一个可以模拟Ajax请求的服务器。

在NodeJs环境下，通过配置express可访问的静态资源，实现模拟数据请求

由于对NodeJS还不是很熟悉，所以，文中可能有不少错误的地方，请谅解，欢迎批评和指正

服务开发运行环境文件配置

目录结构说明

整个vue.js项目的一般目录结构如下：

• build 编译打包和开发模式下运行的主要文件
• config 编译打包和开发模式下相关的配置文件
• node_modules 项目依赖的模块如：vue.js、vue-router、vuex、bootstrap等，可以在package.json中配置依赖的模块
• src 项目主要代码源文件放在
• static 静态资源文件
• cms 存放模拟Ajax请求所返回的json数据，cms为请求的项目名

修改配置文件

一般情况下，网站部署很多时候都会部署在某个项目下，例如，我们的系统为管理系统，则部署在 /cms中，本地访问后台相关的接口，基本都是以下访问127.0.0.1:8080/cms开头的路径

通过在NodeJs中，添加可访问的静态资源的文件夹 cms,存放相应请求接口返回json数据，模拟请求后台数据

修改build下的dev-server.js文件，添加以下代码：

//添加可访问的静态资源路径（./cms）

    app.use(staticPath, express.static('./cms'))

    /**

     * 拦截 带有.do后缀的请求，读取对应名称的.json文件，返回给前端

     * 例如：前端登录时，Ajax请求为 127.0.0.1:8080/cms/mgr/auth/mgrAdminLogin.do,

     * 则读取 cms/mgr/auth 目录下的mgrAdminLogin.json，并将数据返回给前端,mgrAdminLogin.json为前端希望得到的数据（具体格式与后台开发人员协商）

     */

app.post('*.do',dummyData );

function dummyData(paramRequest, paramResponse){

	var path = './' + paramRequest.url.slice(0, -2) + 'json';

	fs.readFile(

	    path,

	    function (err, contents) {

	        if (!err) {

	          contents = contents.toString('utf8');

	          paramResponse.writeHead(200, { "Content-Type": "application/json" });

	          paramResponse.end(contents);

	        } else {

	          paramResponse.writeHead(404, {"Content-Type": "text/plain"});

	          paramResponse.end("404 Not found");

	        }

	    }

	);

}

其中app.use(staticPath, express.static('./cms'))的./cms为请求的根目录，设置为与后台请求的路径一致，这样在正式发布时就不需要再改代码

在main.js中配置请求根目录

使用vue-resource进行Ajax数据请求，配置请求的根目录为cms

以登录为例，登录的请求代码如下：

this.$http.post('mgr/auth/mgrAdminLogin.do', params).then(response => {

	    this.tip = ''

	let result = response.data

	if (result.resultCode === '10000' || result.resultCode === 10000) {

    	let data = result.data || {}

    	let userInfo = {

        	account: data.account || '',

        	id: data.id || -1

      	}

      	this.$route.router.go({path: '/MainPanel'})

        } else {

          this.tip = result.resultMsg

        }

}, response => {

	    this.tip = '登录失败！错误码：' + response.status

})

模拟请求响应的json数据如下：