• express高效入门教程(3)


    3.路由

    路由到底是什么呢?不管官方定义到底是什么,咱通俗的说就是根据不同的url,执行不同的代码,类似于编程语言中的分支结构

    3.1.express规划路由

    稍微复杂点的应用,通常都是分模块进行的,例如:

    我们从中挑选几个模块进行路由规划,在我们的后台模块里面,可以实现用户的管理,课程的管理,友情链接管理等,我们的访问地址可能是这样的

    // 1.用户管理
    // 用户列表
    http://localhost:8090/admin/user/list
    // 添加用户
    http://localhost:8090/admin/user/add
    // 删除用户
    http://localhost:8090/admin/user/delete
    // 编辑用户
    http://localhost:8090/admin/user/edit
    
    // 2.课程管理
    // 课程列表
    http://localhost:8090/admin/course/list
    // 添加用户
    http://localhost:8090/admin/course/add
    // 删除用户
    http://localhost:8090/admin/course/delete
    // 编辑用户
    http://localhost:8090/admin/course/edit
    
    ...
    

    在没有拆分路由的情况下,我们需要在app.js里面写这些代码

    /**
     * 用户管理模块
     */
    app.get('/admin/user/list', function (req, res) {
      res.send('用户列表')
    })
    app.get('/admin/user/add', function (req, res) {
      res.send('添加用户')
    })
    app.get('/admin/user/delete', function (req, res) {
      res.send('删除用户')
    })
    app.get('/admin/user/edit', function (req, res) {
      res.send('更新用户')
    })
    
    /**
     * 课程模块
     */
    app.get('/admin/course/list', function (req, res) {
      res.send('课程列表')
    })
    app.get('/admin/course/add', function (req, res) {
      res.send('添加课程')
    })
    app.get('/admin/course/delete', function (req, res) {
      res.send('删除课程')
    })
    app.get('/admin/course/edit', function (req, res) {
      res.send('更新课程')
    })
    

    当上面的代码都写到app.js中,代码会显得非常臃肿,最佳的实践是把这些模块拆分出去,express中提供了拆分的方法

    第一步,我们在项目根目录下面,新建一个router目录,在这个目录下面按模块名字分别创建user.js和course.js

    第二步,在user.js文件中,创建router,并导出

    var express = require('express')
    var router = express.Router()
    
    // ...  中间写对应的路由方法
    
    module.exports = router
    

    第三步,把对应的路由方法添加到user.js中

    var express = require('express')
    var router = express.Router()
    
    router.get('/admin/user/list', function (req, res) {
      res.send('用户列表')
    })
    router.get('/admin/user/add', function (req, res) {
      res.send('添加用户')
    })
    router.get('/admin/user/delete', function (req, res) {
      res.send('删除用户')
    })
    router.get('/admin/user/edit', function (req, res) {
      res.send('更新用户')
    })
    
    module.exports = router
    

    经过前面步骤,我们完成了user模块路由拆分

    接下来,我们可以按照这种方式,把course模块拆分出来

    // course.js文件代码
    
    var express = require('express')
    var router = express.Router()
    
    router.get('/admin/course/list', function (req, res) {
      res.send('课程列表')
    })
    router.get('/admin/course/add', function (req, res) {
      res.send('添加课程')
    })
    router.get('/admin/course/delete', function (req, res) {
      res.send('删除课程')
    })
    router.get('/admin/course/edit', function (req, res) {
      res.send('更新课程')
    })
    
    module.exports = router
    

    当我们各个路由模块都拆分完成后,如何使用这些模块呢?

    在app.js中,我们需要引入创建好的路由模块

    var userRouter = require('./router/user')
    var courseRouter = require('./router/course')
    

    接下来,挂载到express上

    app.use('/', userRouter)
    app.use('/', courseRouter)
    

    经过以上步骤,我们已经把路由模块完全拆分出去了

    3.2.对路由模块进行多级拆分

    前面我们已经把模块划分出来了,我们在写路由方法的时候是这样的:

    router.get('/admin/user/list', function (req, res) {
      res.send('用户列表')
    })
    

    从代码中我们可以看成,写路径的时候会写一长串,/admin/user/list,这样写比较麻烦,同时,我们更希望大模块直接有更好的划分,例如,我们的系统总体上划分为前台模块和后台模块,那我们的router目录组织结构应该是这样的:

    admin文件夹下面放的都是关于后台路由的模块,home目录下面放的都是前台路由的模块,这个时候,我们需要对路由做进一步拆分,以拆分admin为例:

    第一步:在admin/index.js下面 引入其他admin下面的模块,把其他admin下面的模块都挂在index.js这个模块上然后导出

    var express = require('express')
    var router = express.Router()
    var course = require('./course')
    var user = require('./user')
    
    // 挂载user模块
    router.use('/', user)
    // 挂载course模块
    router.use('/', course)
    
    module.exports = router
    

    第二步:在app.js中引入admin模块

    var adminRouter = require('./router/admin/index')
    

    第三步:把adminRouter挂到app对象上

    app.use('/admin', adminRouter)
    

    第四步:需要注意,user.js模块中的请求路径需要改变,例如:原来的"/admin/user/list"这种写法,需要改成这种"/user/list"

    最终的路由分级如下图

    3.3.动态路由

    动态路由就是路由是动态不固定的,例如:

    http;//localhost:8090/user/1
    http;//localhost:8090/user/2
    http;//localhost:8090/user/3
    

    上面的几个url中,都是去访问某个user,前面部分(http;//localhost:8090/user)是相同的,不同的就是后面的部分

    在后台我们怎么去监听这种形式的url呢?我们可以弄一个变量来匹配这些不同的部分,例如:

    app.get('/user/:id', function (req, res) {
      console.log(req.params)
    })
    

    这其中的id就存储了url中变化的部分

    /user/1   id: 1
    /user/2   id: 2
    /user/3   id: 3
    

    可以通过req.params.id打印出每次请求的动态部分(动态参数)

    螺钉课堂视频课程地址:http://edu.nodeing.com

  • 相关阅读:
    居中
    <script type="text/javascript"></script>
    移动端获取全文高度
    video
    transition animation
    移动端隐藏overflow:auto滚轮
    Vue将组件data内的数据重置
    文字刚刚刚刚刚好的居中
    小程序总结(不断更新)
    vue组件之间的传值
  • 原文地址:https://www.cnblogs.com/dadifeihong/p/12047859.html
Copyright © 2020-2023  润新知