zxy的前端日志

# express学习(一) express介绍

# 基础介绍

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站。

Express 框架核心特性：

  • 可以设置中间件来响应 HTTP 请求。

  • 定义了路由表用于执行不同的 HTTP 请求动作。

  • 可以通过向模板传递参数来动态渲染 HTML 页面。

全局安装supervisor实现动态更新服务端

npm install supervisor -g
1

用supervisor启动服务

supervisor app.js
1

小实例hello world

var express = require('express');
var app = express();

app.get('/hello', function(req, res) {
    res.send('hello world');
})

var server = app.listen(8081, function() {
    console.log('接口已启动');
})
1
2
3
4
5
6
7
8
9
10

运行

$ node app.js 
接口已启动
1
2

浏览器访问localhost:8081/hello 在这里插入图片描述

# 请求和响应

Express 应用使用回调函数的参数： request 和 response 对象来处理请求和响应的数据。

# request 请求

使用req.query取参数

var express = require('express');
var app = express();

app.get('/hello', function(req, res) {
	//req.query拿到的是请求传的参数
    res.send('hello ' + req.query.username);
})

var server = app.listen(8081, function() {
    console.log('接口已启动');
})
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

使用req.params取参数

var express = require('express');
var app = express();

//用:定义要取的参数，然后使用params取
app.get('/hello/:id', function(req, res) {
    res.send('hello ' + req.params.id);
})
var server = app.listen(8081, function() {
    console.log('接口已启动');
})
1
2
3
4
5
6
7
8
9
10

在这里插入图片描述

request常用属性

  • req.app：当callback为外部文件时，用req.app访问express的实例
  • req.baseUrl：获取路由当前安装的URL路径
  • req.body / req.cookies：获得「请求主体」/ Cookies
  • req.fresh / req.stale：判断请求是否还「新鲜」
  • req.hostname / req.ip：获取主机名和IP地址
  • req.originalUrl：获取原始请求URL
  • req.params：获取路由的parameters
  • req.path：获取请求路径
  • req.protocol：获取协议类型
  • req.query：获取URL的查询参数串
  • req.route：获取当前匹配的路由
  • req.subdomains：获取子域名
  • req.accepts()：检查可接受的请求的文档类型
  • req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages：返回指定字符集的第一个可接受字符编码
  • req.get()：获取指定的HTTP请求头
  • req.is()：判断请求头Content-Type的MIME类型

# response 响应

response常用属性

  • res.app：同req.app一样
  • res.append()：追加指定HTTP头
  • res.set()在res.append()后将重置之前设置的头
  • res.cookie(name，value [，option])：设置Cookie
  • opition: domain / expires / httpOnly / maxAge / path / secure / signed
  • res.clearCookie()：清除Cookie
  • res.download()：传送指定路径的文件
  • res.get()：返回指定的HTTP头
  • res.json()：传送JSON响应
  • res.jsonp()：传送JSONP响应
  • res.location()：只设置响应的Location HTTP头，不设置状态码或者close response
  • res.redirect()：设置响应的Location HTTP头，并且设置状态码302
  • res.render(view,[locals],callback)：渲染一个view，同时向callback传递渲染后的字符串，如果在渲染过程中有错误发生next(err)将会被自动调用。callback将会被传入一个可能发生的错误以及渲染后的页面，这样就不会自动输出了。
  • res.send()：传送HTTP响应
  • res.sendFile(path [，options] [，fn])：传送指定路径的文件 -会自动根据文件extension设定Content-Type
  • res.set()：设置HTTP头，传入object可以一次设置多个头
  • res.status()：设置HTTP状态码
  • res.type()：设置Content-Type的MIME类型

# 路由

在HTTP请求中，我们可以通过路由提取出请求的URL以及GET/POST参数。

var express = require('express');
var app = express();
 
//  主页输出 "Hello World"
app.get('/', function (req, res) {
   console.log("主页 GET 请求");
   res.send('Hello GET');
})
 
 
//  POST 请求
app.post('/', function (req, res) {
   console.log("主页 POST 请求");
   res.send('Hello POST');
})
 
//  /del_user 页面响应
app.get('/del_user', function (req, res) {
   console.log("/del_user 响应 DELETE 请求");
   res.send('删除页面');
})
 
//  /list_user 页面 GET 请求
app.get('/list_user', function (req, res) {
   console.log("/list_user GET 请求");
   res.send('用户列表页面');
})
 
// 对页面 abcd, abxcd, ab123cd, 等响应 GET 请求
app.get('/ab*cd', function(req, res) {   
   console.log("/ab*cd GET 请求");
   res.send('正则匹配');
})
 
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
 
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 静态文件

创建public文件夹，里面存放静态资源 其中scripts放js stylesheets放css 然后在views下面存放html 在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="stylesheets/index.css">
    <title>Document</title>
</head>
<body>
    hello node
    <script src="scripts/index.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

将css和js引入

app.js

var express = require('express');
var app = express();
app.use(express.static('public'));

app.get('/index', function(req, res) {
    res.sendFile(__dirname + '/views/' + 'index.html')
})

var server = app.listen(8081, function() {
    console.log('接口已启动');
})
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

css和js的路径分别是:

js： scripts/index.js 在这里插入图片描述 css: stylesheets/index.css 在这里插入图片描述 public/被自动省略

# 小demo

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="stylesheets/index.css">
    <title>Document</title>
</head>
<body>
    <form action="/index" method="POST">
        <input type="text" name="data">
        <input type="submit" value="提交">
    </form>
    <script src="scripts/index.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

app.js

var express = require('express');
//用来解析post请求
var bodyParser = require('body-parser');
var app = express();

// 创建 application/x-www-form-urlencoded 编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.use(express.static('public'));

app.get('/index', function(req, res) {
    res.sendFile(__dirname + '/views/' + 'index.html')
})

app.post('/index', urlencodedParser, function(req, res) {
//将传过来的参数直接作为参数跳转到百度查询
    res.redirect('https://www.baidu.com/s?wd='+ req.body.data +'&rsv_spt=1&rsv_iqid=0xb273ab95004937d7&issp=1&f=3&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=02003390_9_hao_pg&rsv_enter=0&oq=%25E5%258C%2597%25E4%25BA%25AC%25E7%25A4%25BE%25E4%25BF%259D&rsv_t=b0a23BZi5R4a196iVhRDcoPdoQwK0srHKa%2Fp%2F2UxSszO7Xsb%2FZmZZ2MmqjxQ5e0tHBRahIJMGaw&rsv_pq=d3679839000049a2&inputT=595&rsv_sug3=403&rsv_sug1=238&rsv_sug7=100&prefixsug=s&rsp=0&rsv_sug4=1367');
})

var server = app.listen(8081, function() {
    console.log('接口已启动');
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
更新时间: 11/8/2019, 4:51:43 PM

← express学习(二) 中间件 →