————————————————————————————————————————————————————————————
-----------------今日份复习nodejs----------------------------
------ 1.express介绍
------ 2.express安装
------ 3.express路由
------ 4.express响应对象
------ 5.express请求对象
————————————————————————————————————————————————————————————
1.express介绍
1.1 什么是express?
expess是一个基于node.js的极简,灵活的web开发框架。可以实现非常强大的web服务器功能。
1.2express的特点
- 可以设置中间件显影或者过滤http请求
- 可以使用路由实现动态网页,相应不同的http请求
- 内置支持ejs模板(默认是jade模板)实现模板渲染生成html
1.3 express-generator 生成器
express-generator是express官方团队为开发者准备的一个快速生成工具,可以非常快速的生成一个基本的express开发项目。
2.express的相关介绍
2.1express的安装和使用
- 安装express-generator生成器
- 创建项目 express -e 生成项目名称
- 安装依赖 cnpm install
- 开启项目 node app npm start
- 测试项目
依次输入:
cnpm install express-generator -g
express -e <myproject>
cnpm install
node app
结果:
这就表示express安装成功了。
2.2express的目录结构
(1)目录
- bin 可执行文件目录
- node_modules 依赖包的目录
- public 静态文件根目录
+ 所有的静态文件都放在这个目录下(html,css,,js,图片,文字,视频等) - routers 路由模块目录,动态文件的目录
+ 有限找静态文件,如果没有静态文件就找动态路由,没有动态路由就404 - views 目录 视图目录 用于存放所有的ejs模板
(2)文件 - app.js 项目的主文件,对整个项目的所有资源进行统筹的安排。
- package.json 项目描述文件,声明项目的名称,依赖,作用等。
(3)详解app.js文件
1.引入express依赖
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
2.引入自定义模块
var indexRouter = require('./routes/index'); 引入处理根目录请求的路由
var usersRouter = require('./routes/users'); 引入处理users目录请求的路由
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views')); //设置模板的默认目录
app.set('view engine', 'ejs'); //设置模板引擎为ejs模板
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
设置静态文件的目录
app.use(express.static(path.join(__dirname, 'public')));
//使用路由
app.use('/', indexRouter); 分配根目录下的请求给index做处理
app.use('/users', usersRouter); 分配users目录下的请求给users模块去处理
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
app.listen(1000,() => {
console.log("服务器已运行...")
})
module.exports = app;
3.路由模块
3.1什么是路由?
路由是指接收用户请求,处理用户数据,返回结果给用户的一套程序。可以理解为:动态网页的程序。
3.2express的路由?
express对象自带有一个Router类,可以实例化出路由对象,可以再该对象上挂载非常多的路由节点。
3.3index.js详细解析
1.引入express
var express = require('express');
var router = express.Router();
/* GET home page. */
2.挂载路由对象
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
// 添加一个news路由
router.get('/news',(req, res) => {
res.send("我是一个news路由");
})
3.暴露路由对象
module.exports = router;
这时候访问 localhost:1000/news
就会有news路由对应的页面
3.4路由的写法 (演示添加一个news模块)
挂载路由线路的写法
router.请求方式('请求地址',(req, res) => {
res.send('发送数据')
})
3.5.创建一个独立的路由模块(about.js)
- 第一步
在router文件夹下下新建一个about.js - 第二步
a.引入express模块
b.实例化路由对象
c.编写路由线路挂载到路由对象上
d.暴露路由对象
//1.引入express模块
const express = require('express');
//2.c利用Router类创建一个路由实例
const router = express.Router();
//3.编写线路 about.html 用于展示所有相关内容
router.get('/list.html',(req, res) => {
res.send("<p>关于我们</p></br><p>相关电话</p></br>相关邮箱")
res.end();
})
module.exports = router;
- 第三步
将编写好的路由模块挂载到主模块,由主模块分配对应的请求到该模块去处理路由。
在入口文件app.js中挂载路由
//挂载路由模块
var aboutRouter = require('./routes/about');
//使用路由模块
app.use('/about',aboutRouter);
3.6 路由分类
- 大路由(总路由)
app.js 负责接收所有请求,对请求进行分配 - 小鹿由 (分路由)
/routers 下面的所有路由模块,只负责处理自己管理的目录下的请求
4.express响应对象
4.1什么是响应对象?
响应对象是指服务器向客户端响应数据的对象,包含了所有要响应的内容。
4.1响应对象的send方法
- send(data)可以返回任意类型的数据给客户端
//发送json
router.get('/list.html',(req, res) => {
var data = [
{name:'康家豪',age:18}
]
res.send(data)
res.end();
})
//发送字符串
router.get('/vip.html',(req, res) => {
res.send("<p>张三</p></br><p>20岁</p></br>陕西宝鸡")
res.end();
})
注意:如果res.send(number),会被认为是状态吗,就会报错。
res.send()只能出现一次,重复无效会报错。
- 返回状态码 + 数据链式调用
res.status(200).send('<p>发送数据成功</p>')
4.1响应对象的json方法
- res.json(data) 返回json数据,自动设置了json响应头
- 代码演示
router.get('/list.html',(req, res) => {
var data = [
{name:'康家豪',age:18}
]
res.json(data)
res.end();
})
res.send() 和 res.json()区别 res.json()自动设置了json格式的响应头
4.2响应对象的render方法
- res.render() 视图模板
- 代码演示
res.render('模板名称',{数据})
//读取模板文件,拼接数据,自动将结果发送到服务器
- 一个ejs模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户列表</title>
</head>
<body>
<ul>
<%for(var i in users){%>
<li>姓名:<%=users[i].name%>,年龄<%=users[i].age%></li>
<%}%>
</ul>
</body>
</html>
- res.render()渲染
router.get('/student.html',(req, res) => {
const data = [
{name:'康家豪',age:18},
{name:'德玛西亚',age:9},
{name:'潮汐海灵袁华',age:20},
]
res.render('list.ejs',{users:data})
})
- 结果
4.3响应对象的其他方法
- res.download() 下载
- res.redirect(‘路径’) 重定向 实现服务器端跳转
- res.cookie() 实现用户登录
- res.set() 设置响应头 处理跨域等
5.获取响应对象的值
5.1 请求对象req
什么是请求对象?
服务端向客户端发送数据的对象,包含请求头和请求主体。
5.2 获取GET方式的传值
- 语法:
语法: req.query.参数名
- 举个例子:
router.get('/vip.html',(req, res) => {
var id = req.query.id;
res.send(`获取到的id是:${id}`)
})
- 结果
5.3 获取POST方式的传值
- 语法:
req.body.参数名
- 代码演示
写一个html页面发送参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登陆页面</title>
</head>
<body>
<div style="text-align: center; ">
<form action="./about/login.html" method="post">
<p>username:<input type="text" name="username"></p>
<p>password:<input type="password" name="pwd"></p>
<p><input type="submit"></p>
</form>
</div>
</body>
</html>
写login.html路由接收参数
//编写login.html 接收post传的值获取数据
router.post('/login.html',(req, res) => {
var username = req.body.username;
var pwd = req.body.pwd;
res.send(`用户名:${username} , 密码:${pwd}`)
})
- 结果
————————————————————————————————————
写在后面
隔壁孩子10篇博客node入门而且写了一个前后端分离项目,你怎么还在睡觉!!!(五)
Mongodb数据可以介绍
Mongodb数据库操作
一个简单的新闻系统
——————————————————————————————————
————————————————
————————————————