使用node.js搭建简单服务器接收请求返回数据,在本地实现模拟后端数据接口。

引言:

  不知道你在项目开发过程中,有没有遇到过有过以下场景: 一般是前端先制作静态页面,同时服务器端创建数据库,搭服务器端架构,写接口; 当接口写完之后,前端或者后端才能嵌套页面。 但是,如果前端页面制作好了,后端接口还没有写好呢?或者如何让前端、后端各自做各自的事情,互相不影响? 能做到下面这样是不是很好呢? ——在进行完需求分析和详细设计后,前端、后端一同商量、制作出一份接口文档 (其中接口名、参数、返回值名称、返回值类型都定义好) 前端页面制作好之后,直接模拟出该接口的json文件,先去请求该文件,把页面绑定、业务逻辑都处理好。 等前端全部绑定好,同时后端接口写好后,我们只需要前端修改接口地址,其他不用做任何修改。 这样,是不是前端不用等后端接口全部写完才能开始剩下的工作呢?

1、起手式,不用说肯定是安装node

  • 没有什么难度,去官网下载,简单粗暴一直下一步,完成安装。可以参考下菜鸟教程中关于node.js安装配置;
  • 安装node 会自动安装npm包管理工具;
  • 检查是否有安装node和 npm包管理工具,打开cmd命令行工具,输入node -v 和npm -v,会输出对应的版本号,如下图所示:
    查看
  • 全局安装 npm ,最好同时安装cnpm 淘宝npm镜像,如果npm 安装依赖包的时候报错,有时候是网络不好,可以使用淘宝镜像cnpm来安装;
    1
    2
    npm install -g npm
    npm install -g cnpm

2、安装express应用程序生成器

官网

  • 全局安装express-generator;

    1
    npm install -g express-generator
  • 有安装Git Bash Here等第三方命令行工具,我们打开文件管理,进入到想要生成项目的位置后,右键打开Git Bash Here 就可以在当前位置启动命令行工具了;

  • 如果没有安装git等第三方cmd命令行工具,我们打开文件管理,进入到想要生成项目的位置后,直接在地址栏输入cmd,会在当前目录打开cdm命令行工具;
  • 在我们想要的位置打开命令行工具之后,就可以开始以下步骤:
  • 创建一个名为myapp的express应用程序
    1
    express --view=pug myapp

成功后会自动在目标位置创建一个名为myapp的项目并生成很多文件,命令行显示效果如下图:
查看结构
在命令行最下面有提示,install dependencies: cd myapp && npm install 然后 run the app: npm start,我们按照提示来;

  • 进入myapp项目;

    1
    cd myapp
  • 安装package.json文件中的依赖;

    1
    npm install
  • 网络不好可以用cnpm

    1
    cnpm install
  • 运行项目

    1
    npm start

运行结果
在浏览器输入localhost:3000,会打开一个页面显示Welcome to Express,说明已经成功启动服务了。

3、相关配置

  • 打开myapp项目,可以看到目录下面的结构是这样的;

结构

  • 这个时候,浏览器打开localhost:3000/users,可以看到页面显示respond with a resource

  • 打开routes 文件夹下的users看到以下代码:

users

  • 可以看到页面显示的内容就是users.js文件中返回的内容,我们定义自己想要返回的内容。

users.js数据内容

  • 改了之后再请求没有改变,查看命令行信息,304发现我们的请求给我们缓存了;

缓存信息

  • 我们重新启动一下试试,刷新页面返回:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"code": "000",
"message": "message消息",
"lists": [
{
"naem": "小明",
"age": "12",
"sex": "男"
},
{
"naem": "小红",
"age": "12",
"sex": "女"
}
]
}
  • 这样虽然可以请求,但是有缓存问题,而且接口多的话每次都得配置一个路径,太复杂,所以要封装一下,重复使用,每次请求重新请求不加载缓存。

在项目下新建一个config文件夹并新建一个api.js,配置一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
// config/api.js

var fs = require('fs');

/**
* 检查请求的路径是否存在
* @param apiName 请求路径
* @param method 请求方式
* @param params 请求参数
* @param res 返回请求
*/
function getDataFromPath (apiName,method,params,res){
if(apiName){
fs.access(
// 提取请求路径中的js文件
apiName.substring(1)+'.js',
// 回调函数,检查请求的路径是否有效失败返回一个错误参数
function(err){
if(!err){
// 每次请求都清除模块缓存重新请求
delete require.cache[require.resolve('..'+apiName)];
try{
addApiResult(res,require('..'+apiName).getData(method,params));
}catch(e){
console.error(e.stack);
res.status(500).send(apiName+' has an error,please check the code.');
}
}else{
addApiResult(res);
}
}
);
}else{
addApiResult(res);
}
};
/**
* 响应头
* @param res
*/
function addApiHead(res){
res.setHeader('Content-Type', 'application/json;charset=utf-8');
// 跨域
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
// 控制http缓存
res.header("Cache-Control", "no-cache, no-store, must-revalidate");
res.header("Pragma", "no-cache");
res.header("Expires", 0);
}

/**
* 返回参数,如无返回参数返回404
* @param res
* @param result
*/
function addApiResult(res,result){
if(result){
res.send(result);
}else{
res.status(404).send();
}
}

/*请求方式*/
// get
exports.get = function(req, res){
addApiHead(res);
getDataFromPath(req.path,'GET',req.query,res);
};

// post
exports.post = function(req, res){
addApiHead(res);
getDataFromPath(req.path,'POST',req.body,res);
};

  • 打开根目录下app.js,在上面引入刚刚新建的文件api.js;
1
2
//引入API
var api = require('./config/api');
  • 替换请求配置
1
2
3
4
5
6
/*配置请求*/
app.get('/', function(req, res){
res.send('hello world');
});
app.get('/api/*', api.get);
app.post('/api/*', api.post);
  • app.js最终代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var app = express();
/*引入api*/
var api = require('./config/api');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//配置请求
app.get('/', function(req, res){
res.send('hello world');
});
app.get('/api/*', api.get);
app.post('/api/*', api.post);
app.options('/api/*', function(req, res, next){
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
res.sendStatus(200);/*让options请求快速返回*/
});

module.exports = app;
  • 根目录新建api文件夹,新建demo.js;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// api/demo.js

var dataDemo={
'code':'000',
'message':'message消息',
'lists':[
{
'naem':'小明',
'age': '12',
'sex':'男'
},{
'naem':'小红',
'age': '12',
'sex':'女'
}
]
}
exports.getData = function(method,data){
var backData={
"code":'000',
"msg":"",
"data":dataDemo
}
if(method=='DELETE'){
backData={
"code":'999',
"msg":"不支持DELETE方法"
}
}
return JSON.stringify(backData);
}kData);
}
  • 重新运行npm start,浏览器打开localhost:3000,此时应该显示的是hello world;

  • 打开localhost:3000/api/demo,页面显示

页面显示
以上都成功了,那就说明配置成功了,复制demo.js文件命名为demo2.js,改动一下数据,浏览器访问localhost:3000/api/demo2应该也是可以的;

4、使用

假如线上接口是 https://xiaomujin.club/mydata/index/data/list,我们在api文件夹按照路径新建文件夹和文件即可:

1
2
3
4
5
6

├── api
│ └── mydata
│ └── index
│ └── data
│ └── list.js

开发的时候指向本地服务器器接口,联调测试上线的时候只需要把指向本地服务器地址替换成线上地址一下就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript">
$(function () {
// var baseUrl = 'https://xiaomujin.club'; //线上地址
var baseUrl = 'http://localhost:3000/api'; //本地服务器地址
$.ajax({
url: baseUrl+'/mydata/index/data/list',
contentType: 'application/json',
type: 'POST',
timeout: 5000,
dataType:'JSON',
data: JSON.stringify({schoolId: 123}),
success: function (res) {
if(res.code == '000'){
console.log(res);
$('body').html(JSON.stringify(res));
}else{
alert(res.message);
}
},
Error: function (xhr, type, errorThrown) {
console.log(JSON.stringify(xhr));
console.log(type);
console.log(errorThrown);
}
});
})
</script>

-------------本文结束感谢您的阅读-------------
木槿前端不求人,有空就来坐坐。
0%