课前准备

①初始化项目: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 碰磕我的博客');//乱码
    res.send('hello csdn碰磕我的博客');

})

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

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

这样服务器就搭建好了~

静态资源处理

创建一个public文件夹并且在里边进行创建多个文件

style.css

body{
    background-color: yellowgreen;
}

index.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中
拿到数据语法{{变量名}}

普通传参

    
    
    
    


    
首页
    
得到的数据姓名:{{stname}}年龄:{{age}}

这样就拿到了

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

    
    
    
    


    
首页
    
得到的数据姓名:{{stname}}年龄:{{age}}
    {{each orders as t index}}
        
{{index}}--{{t.title}}--{{t.price}}
    {{/each}}

index为下标索引

if判断

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

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

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

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

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

模糊匹配

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

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

示例

html

    
    
    
    


    
登录
    

        Name:
        
        Password:
        
        登录
    

js

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);
})

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