最近在学习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.querycomment.dateTime = '2018-10-14 11:01:22'comments.unshift(comment)res.redirect('/')//返回首页
})*/
app.post('/post', function(req, res){var comment = req.bodycomment.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>

初识Express之express基本操作相关推荐

Node 学习 | Day03 express （初识Express、Express 路由、Express 中间件、使用 Express 写接口）
Express 初识Express 1.1 Express 简介 1.1.1 什么是 express 1.1.2 进一步理解 Express 1.1.3 Express可以做什么 1.2 Expres ...
Node.js—Express、Express 路由、Express 中间件、使用 Express 写接口
目标: 能够使用 express.static() 快速托管静态资源能够使用 express 路由精简项目结构能够使用常见的 express 中间件能够使用 express 创建API接口能够 ...
Node.js Express 框架 Express
Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...
【Express】—Express路由请求
[Express]-Express路由请求
express 文件服务器,Express搭建一个简单后台服务器
Express框架 Web 应用程序 Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能. API 使用您所选择的各种 ...
IISExpress.无法启动IIS Express Web 服务器.Starting IIS Express... IIS Express is running
x 提示: 无法启动IIS Express Web 服务器. 来自IIS Express的输出: Starting IIS Express... IIS Express is running 总结: ...
【Express】Express入门使用
express 一.简介官网:http://expressjs.com/ Express 是一个快速,简单,极简的 Node.js web 应用开发框架.通过它,可以轻松的构建各种 web 应用,通 ...
import express from 'express'; ^^^^^^^ SyntaxError: Unexpected identifier at Module._com
安装express时遇到这个问题,原因是express不支持ES6语法,需要安装babel 命令 npm install --save-dev babel-cli babel-preset-env 安 ...
mysql和python先学哪个_Python数据库操作初识mysql和mysql基本操作#学习猿地
# 3.认识和操作一下mysql的基本命令 #### 登录mysql,在终端输入以下命令,进行登录 `mysql -u root -p` ```sql MacBook-Pro:~ yc$ mysql ...

初识Express之express基本操作