NodeJs(05)——express框架的使用

碰磕

已于 2022-02-18 09:12:58 修改

阅读量720

点赞数 2

分类专栏： JS # node.js 文章标签：前端服务器 javascript

于 2022-02-17 10:24:31 首次发布

本文链接：https://blog.csdn.net/m_xiaozhilei/article/details/122976670

版权

JS 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

node.js

21 篇文章 0 订阅

订阅专栏

课前准备

①初始化项目:npm init -y
②下载express:npm install express
③下载模板引擎:npm install art-template
④npm install express-art-template

搭建服务器

创建项目入口文件:app.js
①引入模块var express=require('express');
②创建web服务器var app=express();
③路由 get(“路径”,回调函数) (类似java中的控制器)

响应的三种方式

end() 响应字符串(乱码)
send() 响应字符串(自动识别)
render() 响应字符串(自动识别,只能打开指定字符串并响应:须与模板引擎配合)

请求的方式有多种例如:post、get、delete、…

此处发送get请求

app.get("/",(req,res)=>{
    //end() 响应字符串(乱码)
    //send() 响应字符串(自动识别)
    //render()  响应字符串(自动识别,只能打开指定字符串并响应:须与模板引擎配合)
    // res.end('hello 碰磕<a href="https://blog.csdn.net/m_xiaozhilei/article/details/122959169">我的博客</a>');//乱码
    res.send('hello csdn碰磕<a href="https://blog.csdn.net/m_xiaozhilei/article/details/122959169">我的博客</a>');

})

④启动服务listen(端口号,回调函数)

app.listen(9090,()=>{
    console.log('服务器开启 http://127.0.0.1:9090');
})

这样服务器就搭建好了~

静态资源处理

创建一个public文件夹并且在里边进行创建多个文件
在这里插入图片描述
style.css

body{
    background-color: yellowgreen;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="/public/css/style.css">
</head>
<body>
    <h1>静态资源的首页~</h1>
</body>
</html>

关键词express.static('文件名')

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

最终就能访问到了
在这里插入图片描述

与模板引擎配合网页交互

语法

加在创建服务器下边即可

//使用模板引擎
app.engine('html',require('express-art-template'));

render(网页,{})

写在路由get里边

	res.render('index.html',{
        stname:"碰磕",
        age:17
   });

nodeman的使用

由于每次手动启动麻烦所以加一个nodemon,前面的文章已经加了个全局nodemon可以直接用
前提:需要在当前文件夹下

nodeman app.js

此处我用nodeman发生一个问题

使用nodemon无法重启服务，只有restarting due to changes...

在这里插入图片描述

解决方案

将nodemon改为supervisor
安装

>npm install -g supervisor

使用

supervisor app.js

示例

由于数据自动会找到views文件夹,所以需要创个views文件夹
再创建
页面index.html在views中
拿到数据语法{{变量名}}

普通传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>首页</h1>
    <h2>得到的数据姓名:{{stname}}年龄:{{age}}</h2>
</body>
</html>

在这里插入图片描述
这样就拿到了

each遍历对象

再试着传递对象,并且在页面中使用each遍历
js中

	res.render('index.html',{
        stname:"碰磕",
        age:17,
        orders:[
            {id:1,title:"标题1",price:9.9},
            {id:2,title:"标题2",price:9.2},
            {id:3,title:"标题3",price:1.2},
        ]
    });

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>首页</h1>
    <h2>得到的数据姓名:{{stname}}年龄:{{age}}</h2>
    {{each orders as t index}}
        <p>{{index}}--{{t.title}}--{{t.price}}</p>
    {{/each}}
</body>
</html>

index为下标索引
在这里插入图片描述

if判断

由于前边传了age=17;直接判断即可

{{if age>=18}}
        <u>成年了</u>
    {{else}}
        <u>未成年</u>
{{/if}}

在这里插入图片描述

express框架的使用就完结,各位可跟着练习了解express框架且熟练🤭

多个路由和多个请求的处理

从控制器到网页再从网页发送到控制器中(多个路由.请求)

模糊匹配

use模糊匹配
用处:为了使用restful传参,导致精确匹配不到路径,所以采用模糊匹配

restful的介绍在我以前的文章已经介绍了https://blog.csdn.net/m_xiaozhilei/article/details/121068110

示例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
</head>
<body>
    <h1>登录</h1>
    <form action="/dologin/pengke/666" method="post">
        <label>Name:</label>
        <label><input type="text"/>
        <label>Password:</label>
        <input type="password" />
        <button type="submit">登录</button>
    </form>
</body>
</html>

app.get("/",(req,res)=>{
    res.render('login.html');
})
//模糊
 app.use("/dologin",(req,res)=>{
     res.send("正在登录中...模糊匹配")
 })

取路径上的参数

语法:/路径/:参数名/:参数名
获取参数:req.params

示例

html与上方一样.

//取路径上的参数
app.post('/dologin/:name/:pwd',(req,res)=>{
    console.log(req.params);
    res.send("用户名:"+req.params.name+"密码:"+req.params.pwd);
})

在这里插入图片描述

取get传来的参数

与路径上的参数方法可以是一样,
此处再写另一种方案

关键语句req.query.参数名 参数名要与name一致

//取get传来的参数
app.get('/dologin',(req,res)=>{
    // res.send("正在登陆...get");
    console.log(req.query.uname+req.query.upwd);
    res.send("用户名:"+req.query.uname+"密码:"+req.query.upwd);
})

取post传来的参数

相对来说要更麻烦些
需引入body-parser模板

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

语法:req.body.参数名参数名要与name一致

//取post传来的参数
app.post('/dologin',urlencodedParser,(req,res)=>{
    // res.send("正在登陆...post");
    // console.log(req.params);
    console.log(req.body);
    res.send("用户名:"+req.body.uname+"密码:"+req.body.upwd);
})

传参等各种应用都练习介绍完成~🤭🤭

碰磕

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
NodeJs(05)——express框架的使用

课前准备①初始化项目:npm init -y②下载express:npm install express③下载模板引擎:npm install art-template④npm install express-art-template搭建服务器创建项目入口文件:app.js①引入模块var express=require('express');②创建web服务器var app=express();③路由 get(“路径”,回调函数) (类似java中的控制器)响应的三种方式end(
复制链接

扫一扫