最近在学习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
使用方法:
- 引包:
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>