从零开始：基于node.js web应用框架Express搭建后台（一）

一、安装node.js

nodeJS官网：https://nodejs.org/en/

二、安装Express框架

1、全局安装Express

npm install express -g

2、全局安装Express 脚手架工具

npm install express-generator -g

三、搭建项目

1、搭建demo项目

express express-demo

2、安装依赖，运行项目

npm install 

SET DEBUG=express-demo:* & npm start (或者npm run start，没测试)

3、浏览器打开3000端口，看到下面的界面，说明我们的express后台已经跑起来了

四、项目结构

把项目在VScode中打开，项目结构如下图所示：

    

1、bin文件夹

里面有www文件，是项目的启动脚本文件，监听端口在里面设置，一般不管这个文件。

2、node_modules文件夹

里面都是通过npm install安装的依赖。

3、public文件夹

静态资源文件夹，存放img、js、css这些。如果在里面写个index.html文件，我们访问3000端口的时候就会直接访问index.html的页面。

4、routes文件夹

路由文件夹，里面的文件用于生成路由实例，这个路由实例用来响应前端发过来的请求，按照现在前后端分离的思想，我们需要在里面写后台的那些接口。

//index.js
// 引入依赖
var express = require('express');
var router = express.Router();

// 处理前端请求
/* GET home page. */
/* 这边的 router.get 是接收前端的 get 请求
  第一个参数是路由地址，这边的 '/' 就指根路由，也就是http://localhost:3000 啦
  第二个参数是一个响应接口的回调函数，里面有三个参数，分别是 请求头request 响应体response，和一个next
*/

//系统默认给的，原理是根据模板生成了一个页面渲染回去
/* router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
}); */

//前后端分离模式下，需要通过后台写接口丢给前端
router.get('/', function(req, res, next) {
  // 处理好要返回给前端的数据
  let data = {
      name:'sam',
      sex:'male',
      age:20,
      University:'Stanford'
    }
  // 用 res.json 方法写接口
  res.json({
    code:0,
    msg:'ok',
    data:data
  })
});

// 导出路由模块
module.exports = router;

修改后文件后，在终端中运行npm start,浏览器打开后就可以看到输出的json数据。

npm run start

 

PS：Node自动重启工具 nodemon

在编写调试Node.js项目，修改代码后，需要频繁的手动close掉，然后再重新启动，非常繁琐。现在，我们可以使用nodemon这个工具，它的作用是监听代码文件的变动，当代码改变之后，自动重启。

1、全局安装

npm install nodemon -g

2、在package.json文件中配置如下：

 "scripts": {
    "start": "node ./bin/www",
    "debug": "nodemon --inspect ./bin/www"
  },

3、在vscode中添加lauch.json的配置：（点击菜单》运行》添加配置，自动生成lauch.json文件）

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Node: Nodemon",
            "processId": "${command:PickProcess}",
            "restart": true,
            "protocol": "inspector",
        },
    ]
}

4、在vscode的终端中正常运行npm run debug(自己在package.json里面配置的scripts脚本名称)

修改内容后保存就可实现实时更新了。

5、views文件夹

这个用于存放 jade 模板，可以作为页面的模板来使用，渲染一下报错页面和主页。

6、app.js文件

项目的入口文件。注意：

//引用路由文件（前后端分离时，存储后台接口的文件，允许自行添加）
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

//设置路由地址（前后端分离时，前端请求时调用的接口路径）
app.use('/', indexRouter);
app.use('/users', usersRouter);

7、package.json 文件

整个项目的配置文件。通过npm install会将文件里的配置都下载安装至node_modules中。