初识Express之express基本操作

最近在学习express，真的是发现到了他的强大之处，这篇博客介绍了express的基本操作，也会做一个简单的留言本demo，嘻嘻~

一、express 的介绍和安装

1. 为什么要使用express？

首先express是一个node框架。其次，原生的http在某些方面的表现不足以应对开发需求，则使用框架，一是提高效率，二是让代码高度统一。
express官网：http://expressjs.com/

2. express 的安装

npm install express --save

3. express基本感知

首先先创建一个文件夹，配置package.json文件：

npm init -y

下载node_modules：

npm install

下载express

npm install express --save

(如果还存在对这些命令有疑惑的地方，请翻看上一篇博客npm的使用)

---

在这里我的目标文件叫做 app.js

var express = require('express')  //引包
app.get('/',function(req, res){    
	res.send('hello my is express!')
})
app.listen(3000, function(){    
	console.log('app is running at port 3000...')
})

然后在终端里输入 node app.js之后，在浏览器打开127.0.0.1:3000，则会看到以下页面：

4. 利用express打开页面

我的文件结构如下图所示，与app.js同级的目录下有一个views文件下的index.html文件，内容如下：

需要引入fs：

var express = require('express')
var fs = require('fs')
var app = express()
p.get('/', function(req, res){
    fs.readFile('.iews/index.html', function(err, data){
        if(err){
            return res.end('404 not found')
        }else{
            res.end(data)
        }
    })

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

打开浏览器端口号就可以看到输出的页面了~

二、 Exprerss基本操作

1. send

res.send(“hello”)

其实原来在node里使用的end()，write()都可以在express中使用，但是express有一个更好用的函数send()，使用之后就可以不用end()来结束了，可以自动节结束响应。

2. Express中的static-sever静态资源服务

基本路由有两种形式：get 和 post
使用一个基本路由需要做三件事：
-1. 请求方法
-2. 请求路径
-3. 请求处理函数
例如：在public下有一个index.html文件，需要访问这个文件可以使用以下三种方式：

app.use(’/public/’, express.static(’./public/’))
//127.0.0.1:3000/public/index.html

必须是 /a/puiblic目录中的资源具体路径

app.use(’/a/’, express.static(’./public/’))
//127.0.0.1:3000/a/index.html

省略 /public 的方式来访问

app.use(express.static(’./public/’))
//127.0.0.1:3000/index.html

通常第一种方法容易辨识，推荐使用第一种方法。

3.使用nodemon 工具自动重启服务

nodemon： 一个第三方命令行工具，用来解决频繁修改代码重启服务器问题
是一个基于node.js开发的命令行工具
下载：

npm install --global nodemon

使用：

nodemon app.js

将原来的node换成nodemon就可以了，用来监视文件变化

4. 在Express中配置使用art-template模板引擎

a. 安装

npm install --save art-template
npm install --save express-art-template

b. 使用

app.engine(‘html’, require(‘express-art-template’))

参一表示：当渲染以 .art 结尾的文件的时候，使用 art-template 模板引擎

---

解释为什么express使用模板引擎时还要装art-template

express-art-template 是专门用来在 Express 中把 art-template 整合到 Express 中，虽然外面这里不需要记载 art-template 但是也必须安装，原因就在于 express-art-template 依赖了 art-template

5. 在Express中渲染模板引擎

Express 为 Response 相应对象提供了一个方法：render
render 方法默认是不可以使用，但是如果配置了模板引擎就可以使用了
使用方法：

res.render(‘html模板名’, {模板数据})

第一个参数不能写路径，默认会去项目中的 views 目录查找该模板文件，也就是说 Express 有一个约定：开发人员把所有的视图文件都放到 views 目录中

如果想要修改默认的 views 目录，则可以：

app.set(‘views’, render函数的默认路径)

6. 在Express中配置解析表单Post请求体数据

当以 POST 请求 /post 的时候，执行指定的处理函数

app.post(’/post’)

参一是方法，参二是路径标识

作用是：
这样的话我们就可以利用不同的请求方法让一个请求路径使用多次

---

在get请求里，有一个req.query，但是这个只能拿get请求参数
在post请求里，没有内置获取表单post请求的API，则可以使用body-parser

使用方法：

1. 引包：

var bodyParser = require(‘body-parser’)

2.配置body-parser

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

只要加入了这个配置，则在req的请求对象上会多出来一个属性：body
可以直接通过req.body来获取表单post请求数据。

留言本实例

1.配置文件和下载node-modules

npm init -y
npm install --save express
npm install --save art-template
npm install --save express-art-template

2. 编写入口文件

1. 文件结构

这是我的一个文件结构

4. 配置要使用的包

在public目录的lib下放入要使用的bootstrap文件，按照

href="/public/lib/bootstrap/dist/css/bootstrap.css"

3. 编写入口文件

var express = require('express')
var bodyParser = require('body-parser')
var app = express()
app.use('/public/', express.static('./public/'))
app.engine('html', require('express-art-template'))

// 配置 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'
  },
  {
    name: '张三4',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三5',
    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')
})/*
app.get('/pinglun', function(req, res){
    var comment = req.query
    comment.dateTime = '2018-10-14 11:01:22'
    comments.unshift(comment)
    res.redirect('/')//返回首页
})*/
app.post('/post', function(req, res){
    var comment = req.body
    comment.dateTime = '2018-10-14 11:01:22'
    comments.unshift(comment)
    res.redirect('/')//返回首页
})
app.listen(3000, function(req, res){
    console.log('running...')
})

4.编写页面

a. index页面

<!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>

b. post页面

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="/publicb/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">发表<tton>
    </form>
  </div>
</body>

</html>

c. 404 页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>抱歉!  您访问的页面失联啦...</h1>
</body>
</html>