clllll  
Express学习

Express 学习

  • 安装 Express
npm install -g express-generator
  • 查看版本号
express --version
  • 创建项目
express hello
  • 安装依赖包
npm install
  • 启动应用
npm start
  1. bin: 服务器脚本默认目录
  2. bin/www.js: 服务器默认脚本，启动服务脚本
  3. node_modules: 依赖包安装目录
  4. public: 静态资源目录
  5. routes: 路由目录，存放路由文件
  6. routes/index.js 首页路由文件
  7. routes/users.js 用户路由文件
  8. views 页面目录
  9. views/error.jade 错误页面
  10. views/index.jade 首页
  11. views/layout.jade 页面共用布局
  12. app.js 应用主文件， 入口
  13. package.json 项目配置文件
  14. package-lock.json 锁定的项目配置文件
  • app.js
    引入模块，比如cookie 日志 ，然后创建express应用，设置express的一些配置，比如模板引擎，日志打印级别
    定义 index.js 和 users.js的路由
  • index.js
    引入 express, 路由对象
    设置get /对应的 js

res.render() 渲染页面，第一个参数是 页面的文件名， 第二个参数是传入到页面的对象。
index.jade

  • 自定义路由
    在index.js增加如下代码

    效果

  • 安装nodemon ,修改自动重启项目

npm install -g nodemon

修改 package.json 文件，改为nodemon运行

  • 其他方式请求
    router.post()
    router.put()
    router.delete()
  • 路由匹配规则
    模糊匹配 wes?t
    正则表达式
  • 中间件
    共同方法来拦截请求
    面向切面编程
    express就是一个路由和中间件合成的web框架
router.get('/middle', function(req, res, next){
  console.log(' 这是 添加 中间件'); // 增加日志
  next(); // 继续下一个中间件
}, function(req, res, next){
  console.log('fanhui');
  res.send('这是返回')
})

  • 更换模板引擎
    使用art-template
npm install -S art-template
npm install -S express-art-template

app.js修改如下

// app.set('view engine', 'jade'); // 定义页面模板引擎
app.engine('.html', require('express-art-template'))
app.set('view engine', 'html');

views目录下新建index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <body>
            <h1>这是Html文件 {{title}}</h1>
        </body>
    </head>
</html>


渲染，条件渲染，循环渲染
index.html

<!--基本条件渲染-->
            {{ if age>30 }}
            <p> 我今年{{age}}岁， 老了</p>
 
            <!--嵌套渲染-->
            {{if happy}}
            <span>very happy to see you </span>
            {{/if}}
 
            {{/if}}
 
            {{ if age<=30 }}
            <p> 我今年 还年轻{{age}}</p>
            {{/if}}
 
            <!--循环渲染-->
            {{each list as item}}
            <p>id:{{item.id}} , content: {{item.content}}</p>
            {{/each}}

index.js

router.get('/', function(req, res, next) {
  res.render('index', { 
    title: 'HelloCLf', 
    age: 31, 
    happy: true,
    list: [
      {
        id:1,
        content: '今天星期天'
      },
      {
        id: 2,
        content: '今天太阳真暖'
      }
    ]
  });
});
  • 请求对象 Request
  1. Request.url 请求地址的属性
  2. Request.query 获取get请求参数
  3. Request.body 获取post请求参数
  4. Request.params 获取url中自定义的参数 /:id
router.get('/book', function(req, res, next){
  console.log(req.url)
  console.log(req.query)
  res.render('test', {title:'book'})
})

router.post('/book/:id', function(req, res, next){
  console.log(req.url)
  console.log(req.query)
  console.log(req.params)
  console.log(req.headers)
  console.log(req.cookies)
  console.log(req.body)
  res.render('test', {title:'bookpost'})
})

  • 返回对象 Response
    Response.render() 渲染页面的方法
    参数1：view, string, 是， 页面文件， 用于渲染 的文件路径
    参数2：locals, Object 否， 属性定义页面的局部变量
    参数3：callback, Function,否，回调函数，自动调用next(err)

Response.send() 发送http响应
只接收一个参数

router.get('/resp', function(req, res, next){
  // res.send(new Buffer('hello'))
// res.send({name:'cls'})
// res.send('<p>html</p>')
// res.send([1,2,3])
res.send('some string')
})

Response.json(): 返回json格式的数据

router.get('/json', function(req, res, next){
  res.json({
    name: 'cls',
    age: '28',
    hobby: ['打羽毛球', '踢毽子', '吃']
  })
})


Response.status() 设定http状态码
Response.redirect() 跳转指定路由

posted on   llcl  阅读(41)  评论(0)  编辑  收藏  举报
相关博文：
·  许愿墙-项目01
·  Python-Django学习
·  Express 基本使用
·  运行在服务端的JavaScript——node.js（四）
·  Express入门
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
 
Copyright © 2025 llcl
Powered by .NET 9.0 on Kubernetes
博客园
点击右上角即可分享
微信分享提示
SQL AI 助手