【Express】修改留言本
文章目录
- Express
- 1 Express简述：
- 1.1 需求：
- 1.2 快速上手:
- 1.3 express中使用模板引擎：
- 1.4 基本路由
- 1.5 静态服务：
- 1.6 用express框架完成[留言本](https://blog.csdn.net/Adollar/article/details/112056977)：
- 1.8 在express获取表单POST请求体数据：
- 1.9 在 Express 获取表单 GET 请求参数：
Express
1 Express简述：
官网：https://expressjs.com
1.1 需求：
原生的HTTP在某些方面表现不足以应对我们的开发需求，所以我们需要使用框架来加快我们的开发效率，让我们的代码更高度统一。
在Node中，有很多Web框架，
快速、开放、极小、换言之就是封装的HTTP
1.2 快速上手:
mkdir express-demo //创建目录
//转到新建的目录下执行命令
cnpm init -y //初始化package.json文件
cnpm i -S express
// 用express框架写程序服务器请求。
// 0. 安装
// 1. 引入第三方包
var express = require('express');
// 2. 创建服务器应用程序
// 也就是原来的http.createServer
var app = express();
app.get('/',function(req,res){res.send('hello express!')
});
app.get('/about',function(req,res){res.send('hello ex!')
});
app.listen(3000,function () {console.log('app is running at port 3000.');
})
1.3 express中使用模板引擎：
- 在Express中使用模板引擎有更好的方式：res.render('文件名,{模板对象})
- 可以尝试看官方文档art-template，如何让art-template 结合express来使用。
- 官网：https://aui.github.io/art-template/zh-cn/express/index.html
安装：
npm install --save art-template
npm install --save express-art-template
配置：
// 第一个参数表示，当渲染以 .html 结尾的文件的时候，使用art-template 模板引擎
app.engine('html', require('express-art-template'));
//第一个参数必须是'views'
// 如果想要修改默认的views(视图渲染)目录，可以
app.set('views',render函数的默认路径);
使用：
// res.render ('html模板名'，{模板数据})
// 第一个参数不能写路径，默认会去项目中的views目录查找该模板文件
// 换言之，express 有一个约定，开发人员把所有的视图文件都放到 views 目录中。
app.get('/',function(req,res) {//express 默认会去项目中的 views 目录找 index.htmlres.render('index.html',{title:'花朝'});
})
1.4 基本路由
路由器：实质上就是一种映射关系。
- 请求方法
- 请求路径
- 请求处理函数
get:
// 当你以 Get 方法请求 / 的时候，执行对应的处理函数
app.get('/',function (req,res) {res.send('hello world!');
});
post:
// 当你以 POST 方法请求 / 的时候，执行对应的处理函数
app.post('/',function (req,res) {res.send('Got a POST request');
});
1.5 静态服务：
静态服务设置后，服务器愿意向客户公开的资源，都可以通过服务器路径查找到。
// 当省略第一个参数的时候，则可以通过省略 /public 的方式来访问
app.use(express.static('./public/'));
// 给public一个别名'/static'
app.use('/static',express.static('public'));
// /public/xxx
app.use('/public',express.static('public'));
app.use('/static',express.static(path.join(__dirname,'public')));
1.6 用express框架完成留言本：
鉴于只修改了之前留言板的 post.html,此处只附上post.html
<html lang="en">
<head><meta charset="UTF-8"><title>Documenttitle><link rel="stylesheet" href="/public/lib/bootstrap/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>
// 服务器
const { static } = require('express');
var express = require('express');
var bodyParser = require('body-parser');var comments = [{name: '曹操',message: '今天运气尚好！',dateTime: '2020-12-10'},{name: '司马懿',message: '卧底日常！我尽力',dateTime: '2020-12-10'}, {name: '澜',message: '早知道会挂，应该早点游走的!',dateTime: '2020-12-10'},{name: '蔡文姬',message: '花盆没了！',dateTime: '2020-12-10'}
];var app = express();
// 配置使用body-parser
app.use(bodyParser.urlencoded({ extended: false}));
//parse application/json
app.use(bodyParser.json());// 配置使用 art-template 模板引擎
// 第一个参数表示，当渲染以 .html 结尾的文件的时候，使用art-template 模板引擎
// express-art-template 是专门用来在 Express 中把 art-template 整合到 Express 中的
// 虽然我们这里不需要加载 art-template 但是也必须安装
// 原因就在于 express-art-template依赖了 art-template
app.engine('html', require('express-art-template'));
// express 为 response 响应对象提供了一个方法：render
// render 方法默认是不可以使用的，但是如果配置了模板引擎就可以使用了// res.render ('html模板名'，{模板数据})
// 第一个参数不能写路径，默认会去项目中的views目录查找该模板文件
// 换言之，express 有一个约定，开发人员把所有的视图文件都放到 views 目录中。// 如果想要修改默认的views目录，则可以像如下
// app.set('views',render函数的默认路径);
app.get('/', function (req, res) {res.render('index.html', {comments: comments});// res.end();
});
app.get('/post', function (req, res) {// 渲染文件不一定要有模板数据，有就传没有就可以不传res.render('post.html');
});
app.post('/post', function (req, res) {console.log('收到表单 post 请求了');var comment = req.body;comment.dateTime = '2020-12-12';comments.unshift(comment);// 封装重定向console.log(req.body);res.redirect('/');
})
app.get('/pinglun', function (req, res) {var comment = req.query;comment.dateTime = '2020-12-12';comments.unshift(comment);// 封装重定向res.redirect('/');// 稍底层重定向// res.statusCode = 302;// res.setHeader('Location','/');});
app.use('/public/', express.static('./public/'));
app.listen(3000, () => {console.log('server is running');
});
res.send(),res.redirect()，res.render()：这几个方法会使得 express 自动结束响应。
1.8 在express获取表单POST请求体数据：
在express中没有内置获取表单POST请求体的API,这里我们需要使用一个第三方包：body-parser。(中间键)
post : 表单提交或者ajax请求。
安装:
npm install --save body-parser
配置：
var express = require('express');
// 1.引入
var bodyParser = require('body-parser');
var app = express();
// 2.配置 body-parser
//只要加入这个配置，则在req请求对象上就会多出来一个属性：body
//也就是说你可以直接通过 req.body 来获取表里 POST 请求体数据
//parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false}));
//parse application/json
app.use(bodyParser.json());
使用：
app.use(function (req,res) {res.setHeader('Content-Type','text/plain');res.write('you posted:\n');//可以通过req.body来获取表单POST请求体数据res.end(JSON.stringify(req.body,null,2));
})
未配置前使用 req.body 结果为 undefined，配置后可获得对象形式的 请求体
1.9 在 Express 获取表单 GET 请求参数：
express内置了一个api,可以直接通过req.query来获取。
req.query
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！