路由配置与mongoose模型构建

本文，我们以用户最简单的用户模块为例，介绍Express的路由，以及mongoose的模型配置知识。
一个简单的用户模块至少应包括：登录页、注册页、用户中心页（用户信息），三者之间的关系如下图所示：

一、项目路由配置

在Express框架下，创建路由非常的简单，我们只需要简单的使用express().METHOD语法就能快速的生成一个路由。

1.1 路由测试

我们可以在app.js文件中添加如下代码，测试路由配置方法。

app.get('/test', (req, res) => {
  res.send('路由测试')
})
1
2
3

保存代码后，使用npm run serve启动服务器，然后访问链接localhost:3000/test，就会在浏览器中看到如下界面：

这样就代表我们在服务器中成功的添加了一个新的路由/test，测试完成后，就可以删除以上代码开始下面真正的路由配置了。

注意：
正常情况下，我们不会直接将路由挂接到Express实例（app）上，因为一个项目中会有大量路由需要配置，如果都挂接到app上无意会导致app.js文件非常臃肿，不利于项目的维护。
这也是router存在的意义，我们可以将路由以模块划分，每个模块都有一个router对象，我们把路由挂接到router上实现路由的分区管理。

1.2 用户页面创建

用户在访问服务器时，会通过路由获得对应的网页，在开始配置路由之前，我们先创建登录、注册、信息三个页面。
创建步骤如下：

1. 在views文件夹下新建users文件夹（views/users）
2. 在views/users文件夹下创建三个文件，分别为login.pug、register.pug、info.pug。

*.pug格式的文件是Express框架默认的模板引擎文件，它不仅高效而且非常简洁。
不过，pug模板引擎和大部分的引擎差距较大，如果难以接收，可以选择ejs、Mustache等引擎，不影响本教程的使用。

然后，我们需要为三个文件写入一些内容，为后继的学习做铺垫。
首先是登录页（login.pug），里面包括了一个简单的登录表单。

extends ../layout

block content 
    h1= title 
    p Welcome to #{title} page.
    form(action="doLogin" method="post") 
        label(for="username") username: 
        input#username(type="text" name="username") 
        br
        label(for="password") password: 
        input#password(type="password" name="password") 
        br
        input(type="submit" value="Login")
        br 
        a(href="http://localhost:3000/users/register") without account 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

然后是注册页（register.pug），内部是一个简单的注册表单。

extends ../layout

block content 
    h1= title 
    p Welcome to #{title} page.
    form(action="doRegister" method="post") 
        label(for="username") username: 
        input#username(type="text" name="username") 
        br
        label(for="password") password: 
        input#password(type="password" name="password") 
        br
        label(for="confirm") confirm: 
        input#confirm(type="password" name="confirm") 
        br 
        input(type="submit" value="register")
        br 
        a(href="http://localhost:3000/users/login") to login page  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

最后是信息页（info.pug），用于展示服务器传来的参数msg。

extends ../layout 

block content 
    h1= title 
    p msg is #{msg}
    a(href="http://localhost:3000/users/logout") logout 
1
2
3
4
5
6

1.3 GET路由配置

用户模块有三个页面，相应的至少需要三个GET路由用于获取对应的页面，在routes/users.js文件中添加如下代码：

router.get('/login', (req, res) => {
  res.render('users/login', { title: "login page", msg: 'please login' })
})

router.get('/register', (req, res) => {
  res.render('users/register', { title: "register", msg: 'please regist' })
})

router.get('/info', (req, res) => {
  res.render('users/info', { title: 'info', msg: 'user info' })
})
1
2
3
4
5
6
7
8
9
10
11

此时，如果我们重启服务器，访问以下链接：

• http://localhost:3000/users/login
• http://localhost:3000/users/register
• http://localhost:3000/users/info

就可以分别得到不同的界面，如下图所示

在现实应用中，除了以上三个GET请求之外，我们还需要为用户模块设置一个退出登录的路由/logout，在route/users.js文件中，添加以下内容：

router.get('/logout', (req, res) => {
  res.render('users/login', { title: 'login', msg: 'logout success' })
})
1
2
3

当用户点击http://localhost:3000/users/logout后，退出登录状态。

此时，我们仅仅配置好了路由，能够实现页面之间的正常跳转，但是，页面上的表单按钮是不起作用的，还需要我们为表单创建post路由，从而真正实现登录注册功能。

1.4 POST路由配置

GET请求常常用于向服务器索取数据，例如页面数据、用户资料等。对于向服务器提交数据的路由，我们需要使用POST请求，例如登录表单提交，注册表单提交等。
在用户模块中，我们需要在服务器端提供两个POST路由，/doLogin和doReigster，分别用于处理登录请求和注册请求。
向route/users.js添加如下代码：

router.post('/doLogin', (req, res) => {
  //dologin
  res.render('users/info', { title: 'info', msg: 'Login success, jump to info page' })
})

router.post('/doRegister', (req, res) => {
  res.render('users/login', { title: 'login', msg: "Registe success, please login." })
})
1
2
3
4
5
6
7
8

此时，如果我们点击登录按钮，页面就会自动跳转到/users/info.pug界面，代表登录成功。

注意观察上图中的网页链接和网页中的内容，虽然网页地址并非/users/info但是同样显示了users/info.pug页面。

二、mongoose模型配置

在操作关系型数据库（类似MySQL、SQL Server）时，我们通常不直接使用数据库查询语句进行操作，而是使用ORM (Object Relational Mapping)框架，以对象的方式访问数据库。
虽然mongodb并非传统的关系型数据库，但是mongoose仍然可以使用类似于ORM的形式访问数据库。我们需要对mongodb数据库中的每个集合（表）创建一个对应的模型（Model），并使用实例化的模型访问集合中的数据。
mongoose模型属于项目中重要的一个组成部分，为了管理方便，我们需要在项目根目录下创建一个models文件夹，并在其中放置模型文件，这里我们先创建一个名为UserModel.js的文件，用于访问用户表（tb_users）数据。

2.1 引入mongoose模块

在models/UserModel.js文件中引入mongoose模块：

const mongoose = require('mongoose')
1

2.2 创建用户Schema

在models/UserModel.js文件中追加以下内容，创建一个用户Schema。

const Schema = mongoose.Schema;

// Create Schema 
const UserSchema = new Schema({
    username: {
        type: String,
        required: true
    },
    password: {
        type: String,
        required: true
    },
    email: {
        type: String,
        required: true
    },
    avatar: {
        type: String,
    },
    created: {
        type: Date,
        default: Date.now
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

每个Schema就是对应数据表的属性说明，例如以上UserSchema就详细的说明了用户表中的属性，包括username、password、email、avatar、created，其中type说明了属性的类型，required说明了是否能为空，default为属性设置了初始值。

2.3 创建用户模型并向外暴露

根据用户Schema创建用户模型，mongoose.model()方法第一个参数是模型名称，第三个参数是对应的数据表名称。

tb_users集合是前文在测试权限验证时创建的，如果您的数据库中还不存在这个表，赶快创建一个吧！

UserModel = mongoose.model('UserModel', UserSchema, 'tb_users')
1

然后向模块外部暴露UserModel常量：

module.exports = UserModel
1

此时，在外部就可以通过引用获取UserModel，从而进行数据的查询。

2.4 查询数据表测试

当前，我们还没有学习如何从POST请求中获取表单内容，可以先在/users/login路由中测试数据查询功能。

1. 在route/users.js文件中引入UserModel

const UserModel = require('../models/UserModel')
1

2. 在/users/login路由中使用数据库查询功能

 UserModel.findOne({ username: 'xiaoming' }) //查询username=xiaoming的数据
    .then((user) => {
      if (user) {
        console.log(user)
      } else {
        console.log('null')
      }
    })
1
2
3
4
5
6
7
8

3. 使用浏览器访问http://localhost:3000/users/login链接
4. 观察项目控制台输出

PS E:\Code\Express\express-server> npm start serve

> express-server@0.0.0 start
> node ./bin/www "serve"

MongoDB connected!
GET /users/login 304 249.480 ms - -
{
  _id: new ObjectId("62dc1a568bff520e259dbb17"),
  username: 'xiaoming',
  created: 2022-07-27T15:05:13.985Z
}
1
2
3
4
5
6
7
8
9
10
11
12

如果配置正确的话，就可以看到控制台输出username=xiaoming的数据了！

在执行查询之前，一定要保证数据库中存在username=xiaoming的数据，否则不可能查到数据的呦。

5. 测试成功之后，记得删除测试代码（撤销步骤2.4中的所有操作），这些代码对项目是没有用处的。

三、项目代码

03-routes-model