隔壁孩子10篇博客node入门而且写了一个前后端分离项目,你怎么还在睡觉!!!(四)

————————————————————————————————————————————————————————————
-----------------今日份复习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数据库操作
一个简单的新闻系统
——————————————————————————————————
————————————————
————————————————

发布了85 篇原创文章 · 获赞 16 · 访问量 6079

猜你喜欢

转载自blog.csdn.net/qq_43955202/article/details/105172562