保姆级Node后端服务+MongoDB数据库+vue前端+Linux部署 -- Node后端服务本系列演示环境，请提前准

本系列准备环境请查看juejin.cn/post/712315…

后端node服务使用成熟的express框架搭建。

开始操作

准备文件目录如下

frontAndBack
├── backEnd

新建空目录frontAndBack及其子目录backEnd，使用vscode打开frontAndBack目录，进入backEnd，使用express生成ejs模板（默认为jade模板，我们使用ejs模板，对前端阅读更友好）,并安装依赖。

cd ./backEnd
express --ejs
pnpm i

此时在backEnd目录内容为

├── app.js
├── bin
│   └── www
├── node_modules（省略）
├── package.json
├── pnpm-lock.yaml
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.ejs
    └── index.ejs

运行查看效果

npm run start

确保3000端口没有被占用，打开http://localhost:3000/ 则会看到下图效果。

此时，最简单的服务搭建好了。

文件说明

package.json - 项目说明文件，读项目的入口，关注"scripts"字段

"scripts": {
  "start": "node ./bin/www"
}

当我们执行npm run start时，start会匹配scripts中的字段，对应的命令则为node ./bin/www。通过npm run start实际上就执行了node ./bin/www命令。我们在命令行中使用"Ctrl + C"关闭应用后，再输入node ./bin/www重启，打开http://localhost:3000/ 发现效果相同。

app.js - 通过引用express，创建一个http服务。并能够匹配两个路径'/', '/users'。上图http://localhost:3000/ 匹配到路径'/'，则显示其对应的路由文件内容，在app.js中路径为routes/index.js。此时地址改为http://localhost:3000/users 则会显示routes/users.js内容

var express = require('express');
// 定义路径
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();
// 匹配路径
app.use('/', indexRouter);
app.use('/users', usersRouter);

bin/www - 通过http服务加载app.js其中的内容，主要是下面几句话。

// 引用app.js内容
var app = require('../app');
// 默认使用3000端口
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
// 创建httpserver
var server = http.createServer(app);
// server服务监听上方设置的3000端口
server.listen(port);

node_modules - 对应package.json中的dependencies，存放开发依赖包

pnpm-lock.yaml - pnpm安装版本记录文件

public - 静态资源文件，目前只有stylesheets/style.css。body中添加`color: red;`之后重启项目后打开http://localhost:3000/ 会看到文字变红。

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  color: red;
}

routes/ - 含有两个路径对应的内容，通过`express.Router()`，匹配到'/'路径会通过`res.render`返回页面的title，以及默认的index模板内容(对应views/index.ejs)。匹配到'/users'则通过`res.send`返回页面内容。

// index.js
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
// users.js
router.get('/', function (req, res, next) {
  res.send('respond with a resource');
});

views/ - 含有两个页面内容，index.ejs通过`<%= title %>`接口一个变量，根据传入的值动态显示，上面我们通过`res.render('index', { title: 'Express' });`指定模板为`index`，变量`title`的值为`Express`。我们可以测试使用error.ejs模板，改写routes/index.js中的`res.render('index', { title: 'Express' });`为

  res.render('error', {
    message: 'wrong',
    error: {
      status: '500',
      stack: 'frontAndBack',
    },
  });

重启则会看到

Done!

保姆级Node后端服务+MongoDB数据库+vue前端+Linux部署 -- Node后端服务