前后端分离实践（三）—— 使用Express+Nodejs搭建前端服务层

前后端分离实践系列文章总目录

目录

一、搭建Nodejs开发环境

1、什么是npm？

2、下载安装npm

3、查看node和npm版本号

4、什么是cnpm？

5、安装淘宝的cnpm

6、添加cnpm的环境变量

二、搭建Express开发环境

1、什么是Express？

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

3、创建一个名为fbsep-node的express应用

4、进入到fbsep-node目录安装依赖

5、启动应用

6、浏览器访问3000端口号

三、添加Api路由模拟返回接口数据

1、在routes目录下添加一个api.js内容如下

2、在app.js文件中添加api的路由

3、重启应用访问

 四、源码地址

---

一、搭建Nodejs开发环境

如果本机已经有nodejs环境的可以直接跳过看第二部分内容

1、什么是npm？

    即Node Package Manager（节点包管理器），节点包的提供者，如jQuery、Vue使用npm publish将节点包提交到远程代码仓库，当有人要使用代码仓库中的节点时，就使用npm install将该节点的节点包下载到本地，下载的代码会出现在node_modules目录中。

2、下载安装npm

下载地址：https://nodejs.org/en/download/

如下图所示，选择对应的操作系统安装包

打开安装包全部选择next即可，将nodejs安装到相应的工作目录中

3、查看node和npm版本号

在cmd命令窗口下输入以下命令查看对应版本号

4、什么是cnpm？

    因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以cnpm是一个完整npmjs.org 镜像。

5、安装淘宝的cnpm

在cmd命令窗口下执行命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
​

6、添加cnpm的环境变量

首先通过npm config get prefix 命令查看你的全局下载目录（使用npm config set prefix “xxx” 命令即可自定义全局下载目录）

然后将此目录添加到你的Path环境变量中

然后再重新打开cmd命令窗口，输入cnpm –v即可查看到cnpm版本号

后面在使用时，我们可以将所有的npm命令替换成cnpm

二、搭建Express开发环境

1、什么是Express？

Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架（集成web服务器 + mvc），它帮助你创建各种 Web 应用(相当于原生js与jQuery的关系)，其实不用框架，使用node自己弄一个web服务器和mvc框架也可以，但是有优秀的express，封装了很多常用功能，推荐使用。

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

任意目录下使用命令全局安装：cnpm install express-generator –g

3、创建一个名为fbsep-node的express应用

工作目录下使用命令：express fbsep-node --view=pug

--view=pug ：是指express应用的视图引擎使用pug

4、进入到fbsep-node目录安装依赖

应用根目录下使用命令：cnpm install

5、启动应用

应用根目录下使用命令：set DEBUG=fbsep-node:* & cnpm start

set DEBUG：是指启用debug模块来启动fbsep-node应用，如果不想启用debug模块请使用cnpm run start 命令启动应用

6、浏览器访问3000端口号

访问地址：http://localhost:3000/

看到如下内容代表fbsep-node应用启动成功！

更多关于Express的内容可以参考官网：http://www.expressjs.com.cn/

三、添加Api路由模拟返回接口数据

1、在routes目录下添加一个api.js内容如下

var express = require('express');
var router = express.Router();

router.get("/", function(req, res, next) {
    var data={
        code:9999,
        msg:"OK",
        data:"Hello Node Server"
    };
    res.json(data);
});

module.exports = router;

2、在app.js文件中添加api的路由

首先，在var usersRouter = require('./routes/users');下面添加一行内容：var apiRouter = require('./routes/api'); 它的意思是引用api.js

然后，在app.use('/users', usersRouter);下面添加一行内容：app.use('/api', apiRouter); 它的意思是使用/api作为根路径

3、重启应用访问

访问地址为：http://localhost:3000/api
看到如下所示内容代表访问成功：

 四、源码地址

https://github.com/Alexshi5/demo-fbsep/tree/master/fbsep-node

 

参考链接：

1、搭建一个VUE+Express前后端分离的开发环境

2、express搭建