路由配置与mongoose模型构建
路由配置与mongoose模型构建
文章目录
路由配置与mongoose模型构建一、项目路由配置1.1 路由测试1.2 用户页面创建1.3 GET路由配置1.4 POST路由配置
二、mongoose模型配置2.1 引入mongoose模块2.2 创建用户Schema2.3 创建用户模型并向外暴露2.4 查询数据表测试
三、项目代码
本文,我们以用户最简单的用户模块为例,介绍Express的路由,以及mongoose的模型配置知识。 一个简单的用户模块至少应包括:登录页、注册页、用户中心页(用户信息),三者之间的关系如下图所示:
一、项目路由配置
在Express框架下,创建路由非常的简单,我们只需要简单的使用express().METHOD语法就能快速的生成一个路由。
1.1 路由测试
我们可以在app.js文件中添加如下代码,测试路由配置方法。
app.get('/test', (req, res) => {
res.send('路由测试')
})
保存代码后,使用npm run serve启动服务器,然后访问链接localhost:3000/test,就会在浏览器中看到如下界面:
这样就代表我们在服务器中成功的添加了一个新的路由/test,测试完成后,就可以删除以上代码开始下面真正的路由配置了。
注意: 正常情况下,我们不会直接将路由挂接到Express实例(app)上,因为一个项目中会有大量路由需要配置,如果都挂接到app上无意会导致app.js文件非常臃肿,不利于项目的维护。 这也是router存在的意义,我们可以将路由以模块划分,每个模块都有一个router对象,我们把路由挂接到router上实现路由的分区管理。
1.2 用户页面创建
用户在访问服务器时,会通过路由获得对应的网页,在开始配置路由之前,我们先创建登录、注册、信息三个页面。 创建步骤如下:
在views文件夹下新建users文件夹(views/users)在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
然后是注册页(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
最后是信息页(info.pug),用于展示服务器传来的参数msg。
extends ../layout
block content
h1= title
p msg is #{msg}
a(href="http://localhost:3000/users/logout") logout
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' })
})
此时,如果我们重启服务器,访问以下链接:
http://localhost:3000/users/loginhttp://localhost:3000/users/registerhttp://localhost:3000/users/info
就可以分别得到不同的界面,如下图所示
在现实应用中,除了以上三个GET请求之外,我们还需要为用户模块设置一个退出登录的路由/logout,在route/users.js文件中,添加以下内容:
router.get('/logout', (req, res) => {
res.render('users/login', { title: 'login', msg: 'logout success' })
})
当用户点击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." })
})
此时,如果我们点击登录按钮,页面就会自动跳转到/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')
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
},
})
每个Schema就是对应数据表的属性说明,例如以上UserSchema就详细的说明了用户表中的属性,包括username、password、email、avatar、created,其中type说明了属性的类型,required说明了是否能为空,default为属性设置了初始值。
2.3 创建用户模型并向外暴露
根据用户Schema创建用户模型,mongoose.model()方法第一个参数是模型名称,第三个参数是对应的数据表名称。
tb_users集合是前文在测试权限验证时创建的,如果您的数据库中还不存在这个表,赶快创建一个吧!
UserModel = mongoose.model('UserModel', UserSchema, 'tb_users')
然后向模块外部暴露UserModel常量:
module.exports = UserModel
此时,在外部就可以通过引用获取UserModel,从而进行数据的查询。
2.4 查询数据表测试
当前,我们还没有学习如何从POST请求中获取表单内容,可以先在/users/login路由中测试数据查询功能。
在route/users.js文件中引入UserModel
const UserModel = require('../models/UserModel')
在/users/login路由中使用数据库查询功能
UserModel.findOne({ username: 'xiaoming' }) //查询username=xiaoming的数据
.then((user) => {
if (user) {
console.log(user)
} else {
console.log('null')
}
})
使用浏览器访问http://localhost:3000/users/login链接观察项目控制台输出
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
}
如果配置正确的话,就可以看到控制台输出username=xiaoming的数据了!
在执行查询之前,一定要保证数据库中存在username=xiaoming的数据,否则不可能查到数据的呦。
测试成功之后,记得删除测试代码(撤销步骤2.4中的所有操作),这些代码对项目是没有用处的。
三、项目代码
03-routes-model