【Node学习总结-04】

最新推荐文章于 2022-08-13 18:41:44 发布

Rita楠神

最新推荐文章于 2022-08-13 18:41:44 发布

阅读量240

点赞数

一、Express-Demo

1. 项目目录

2. app.js

// 0. 安装
// 1. 引包
var express = require('express')

// 2. 创建你服务器应用程序
//    也就是原来的 http.createServer
var app = express()

/* 在 Express 中开放资源就是一个 API 的事儿
 公开指定目录
 只要这样做了，你就可以直接通过 /public/xx 的方式访问 public 目录中的所有资源了
*/
app.use('/public/', express.static('./public/'))
app.use('/static/', express.static('./static/'))
app.use('/node_modules/', express.static('./node_modules/'))

app.get('/about', function (req, res) {
  // 在 Express 中可以直接 req.query 来获取查询字符串参数
  console.log(req.query)
  res.send('你好，我是 Express!')
})

// 相当于 server.listen
app.listen(3000, function () {
  console.log('app is running at port 3000.')
})

二、用Express修改之前的留言本案例

1.app.js

var express = require('express')
var bodyParser = require('body-parser')

var app = express()

app.use('/public/', express.static('./public/'))

/* 配置使用 art-template 模板引擎
 express-art-template 是专门用来在 Express 中把 art-template 整合到 Express 中

 第一个参数，表示，当渲染以 .html 结尾的文件的时候，使用 art-template 模板引擎
 虽然外面这里不需要记载 art-template 但是也必须安装
 原因就在于 express-art-template 依赖了 art-template
*/
app.engine('html', require('express-art-template'))

/* Express 为 Response 相应对象提供了一个方法：render
 render 方法默认是不可以使用，但是如果配置了模板引擎就可以使用了
 res.render('html模板名', {模板数据})
 第一个参数不能写路径，默认会去项目中的 views 目录查找该模板文件
 也就是说 Express 有一个约定：开发人员把所有的视图文件都放到 views 目录中
*/

// 配置 body-parser 中间件（插件，专门用来解析表单 POST 请求体）
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())

var comments = [{
    name: '张三',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三2',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三3',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  }
]

app.get('/', function (req, res) {
  res.render('index.html', {
    comments: comments
  })
})

app.get('/post', function (req, res) {
  res.render('post.html')
})

/* 当以 POST 请求 /post 的时候，执行指定的处理函数
 这样的话我们就可以利用不同的请求方法让一个请求路径使用多次
*/
app.post('/post', function (req, res) {

  /* 1. 获取表单 POST 请求体数据
     2. 处理
     3. 发送响应
  */

  var comment = req.body
  comment.dateTime = '2017-11-5 10:58:51'
  comments.unshift(comment)


  res.redirect('/')
  
})

app.listen(3000, function () {
  console.log('running...')
})

2. index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>留言本</title>
  <link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">
</head>

<body>
  <div class="header container">
    <div class="page-header">
      <h1>Example page header <small>Subtext for header</small></h1>
      <a class="btn btn-success" href="/post">发表留言</a>
    </div>
  </div>
  <div class="comments container">
    <ul class="list-group">
      {{each comments}}
      <li class="list-group-item">{{ $value.name }}说：{{ $value.message }} <span class="pull-right">{{ $value.dateTime }}</span></li>
      {{/each}}
    </ul>
  </div>
</body>

</html>

3. post.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">
</head>

<body>
  <div class="header container">
    <div class="page-header">
      <h1><a href="/">首页</a> <small>发表评论</small></h1>
    </div>
  </div>
  <div class="comments container">
   
    <form action="/post" method="post">
      <div class="form-group">
        <label for="input_name">你的大名</label>
        <input type="text" class="form-control" required minlength="2" maxlength="10" id="input_name" name="name" placeholder="请写入你的姓名">
      </div>
      <div class="form-group">
        <label for="textarea_message">留言内容</label>
        <textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10" required minlength="5" maxlength="20"></textarea>
      </div>
      <button type="submit" class="btn btn-default">发表</button>
    </form>
  </div>
</body>

</html>

三、异步编程

一般情况下，把函数作为参数的目的就是获取函数异步操作的结果

常见的异步操作

setTimeout
readFile
readdir
writeFile
ajax
这种情况必须通过：回调函数

四、Promise API

Promise的then方法的链式调用，解决异步嵌套(回调地狱)的问题！也就是解决异步先后顺序的问题。

Rita楠神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Node学习总结-04】

一、Express-Demo1. 项目目录2. app.js// 0. 安装// 1. 引包var express = require('express')// 2. 创建你服务器应用程序// 也就是原来的 http.createServervar app = express()/* 在 Express 中开放资源就是一个 API 的事儿公开指定目录 ...
复制链接

扫一扫