Express

是基于Node.js平台，快速、开放极简的web开发框架

初始化

1
npm init -y  //加-y时 会以默认参数创建package.json文件   若不加 可以自定义package.json参数信息

安装

1
npm install express -save

自动重启服务器工具

1
npm install nodemon  //若要使用该工具  在启动服务器时要使用nodemon命令 如 nodemon ./server.js

路径的匹配

1
2
3
4
5
6
//匹配student开头，而且后面跟了学号   http://localhost:8000/student/1234
app.get("/student/:id/:name",function(req,res){
    var id = req.params["id"];
    var name = req.params["name"];
    res.send(id+name);
});

中间件的另一种使用方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const express = require('express');
const app = express();

var f1 = (req,res,next)=>{
    console.log(1);
    next();
}
var f2 = (req,res,next)=>{
    console.log(2);
    next();
}
var f3 = (req,res,next)=>{
    console.log(3);
    res.send();
}
app.use('/user',[f1,f2,f3]);
app.listen(3000,()=>{
    console.log('running...');
})

next注意点

有如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const express = require('express');
const app = express();

//无门槛进入  只要是localhost:3000就会响应
app.use((req,res,next)=>{
    console.log('有用户进入...函数一');
    next(); //通关文牒
},(req,res,next)=>{  
   	console.log('有用户进入...函数二');
    next();
});
app.use('/user',(req,res,next)=>{
    console.log('访问结束');
    res.send('用户页面'+total);
});
app.listen(3000,()=>{
    console.log('running...');
})

next() 不加参数时会指向下一个执行函数，即函数一中的next()会指向函数二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const express = require('express');
const app = express();

//无门槛进入  只要是localhost:3000就会响应
app.use((req,res,next)=>{
    console.log('有用户进入...函数一');
    next('/user'); //通关文牒
},(req,res,next)=>{  
   	console.log('有用户进入...函数二');
    next();
});
app.use('/user',(req,res,next)=>{
    console.log('访问结束');
    res.send('用户页面'+total);
});
app.listen(3000,()=>{
    console.log('running...');
})

next(‘/user’) 加参数时，会跳转至下一个路径为/user的use函数，即跳过函数二直接来到下一个use函数

body-parser的使用

作用：可以获取post请求中信息

安装

1
npm install body-parser --save

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const express = require('express');
const app = express();
const bodyParser = require('body-parser');

//若要获取post中的参数 则必须以此挂载bodyparser中间件
app.use(bodyParser.urlencoded({extended: false}));

app.use(express.static('views'));

app.post('/login',(req,res)=>{
    res.send('name:'+req.body.username);
});
app.listen(3000,()=>{
    console.log('running...');
});

错误处理中间件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const express = require('express');
const app = express();

app.get('/index',(req,res,next)=>{
    try{
    	let a = null;
        console.log(a.toString()); //null不能调用toString()  此处故意制造错误
        next();
    }catch(e){
        next(e); //转至错误处理中间件
    }
});

//错误处理中间件（注意。错误处理中间件 要用use）
app.use((err,req,res,next)=>{
    // res.send(err); 无法打印
    res.send(err.toString());
});

app.listen(3000,()=>{
    console.log('running...');
});

指定静态资源

1
2
3
4
const express = require('express');
const app = express();

app.use(express.static('views'));//指定views文件夹为静态资源文件夹  若该文件夹中存在login.html 则可以通过http:localhost:3000/login.html来直接访问该页面

Router类的使用

1、先创建一个需要js文件，每一个js文件就是一个类

每一个js文件中的写法

1
2
3
4
5
6
7
8
9
10
11
12
const express = require('express');
const router = express.Router(); //创建router类


router.get('/c1',(req,res)=>{  //设置请求响应函数  /c1为访问路径
    res.send('/c1');
});
router.post('/c2',(req,res)=>{//设置请求响应函数
    res.send('/c2');
});

module.exports = router;  //将router暴露出去

2、当创建若干js文件（类）之后，用一个js文件进行汇总使用，相当于入口文件 此处创建server.js

写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const express = require('express');
const app = express();

const chang = require('./chang'); //引入自定义的类
//...

app.use('/chang',chang);  //访问方式 localhost:3000/chang/c1     //此处用use指定的/chang只是虚拟路径 并不存在真实的物理路径
//app.use(chang);   //访问方式 localhost:3000/c1 
//...
//app.use(.....)

app.listen(3000,()=>{
    console.log('running...');
});

这种使用方式相当于自定义了中间件后，再在server中使用。

art-template的使用

art-template在前台的使用

下载art-template-web

1、将art-template-web.js引入到页面

1
<script src="./template-web.js"></script>

2、在页面中定义一个模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</body>
//此script标签相当于一个容器
<script id="test" type="text/html"> //注意 此处一定要加上  type="text/html"
    {{each users}}
        <h1>{{$value.name}}</h1>
        <li>{{$value.age}}</li>
        <li>{{$value.gender}}</li>
        <li>{{$value.love}}</li>
    {{/each}}
</script>
<script>
    var data = {
        users:[{name: '张三', age: 12, gender: '女', love: '唱'},
               {name: '李四', age: 13, gender: '男', love: '跳'},
               {name: '王五', age: 14, gender: '女', love: 'rap'},
               {name: '蔡徐坤', age: 15, gender: '女', love: '篮球'}]
    }
    
    //如果数组中都是对象，且要访问对象内的值时要使用$value.xxx  value代表当前遍历到的数组元素
    var html = template('test',data);
    var box = document.getElementById('box');
    box.innerHTML = html;
</script>
</html>

另一种实现方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
    //当使用此法时 模板字符串拼接时  每一个标签要单独用 "" 括起来
    var artt = "{{each users}}"+
        "<h1>{{$value.name}}</h1>"+
        "<li>{{$value.age}}</li>"+
        "<li>{{$value.gender}}</li>"+
        "<li>{{$value.love}}</li>"+
    "{{/each}}";

    var render = template.compile(artt);
    var data = {
        users:[{name: '张三', age: 12, gender: '女', love: '唱'},
                {name: '李四', age: 13, gender: '男', love: '跳'},
                {name: '王五', age: 14, gender: '女', love: 'rap'},
                {name: '蔡徐坤', age: 15, gender: '女', love: '篮球'}]
    }
    
    //如果数组中都是对象，且要访问对象内的值时要使用$value.xxx  value代表当前遍历到的数组元素
    var html = render(data);
    var box = document.getElementById('box');
    box.innerHTML = html;
</script>

art-template在后台中的使用

初始化

1
npm init -y

安装

1
2
npm install art-template --save
npm install express-art-template --save

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const express = require('express');
const app = express();

//指定art-template渲染的文件后缀是html
app.engine('html',require('express-art-template'));
//指定静态资源目录
app.use(express.static('views'));


app.get('/node',(req,res)=>{
    //当调用render()函数时，它默认会在views中寻找node.html
    //当然也可以自定义指定render()寻找的目录
    //app.set('myviews',__dirname+'/myviews')
    //render是将内容渲染到node.html中
    res.render('node.html',{
        name:req.query.name,
        age:req.query.age
    });
}).listen(3000,()=>{
    console.log('running...');
});

模板继承

css.art

1
2
3
4
5
<style>
    body {
        background-color: pink;
    }
</style>

body.art

1
<h1>切歌</h1>

script.art

1
2
3
<script>
    alert('script模板被使用');
</script>

layout.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我是个被继承的html 我负责挖坑</title>
    {{include './css.art'}}

    
</head>
{{include './body.art'}}

    {{block 'body'}}

    {{/block}}

{{include './script.art'}}
</html>

index.html

1
2
3
4
5
{{extend '../layout.html'}}

{{block 'body'}}
    <div> 你来挖坑 我来填 </div>
{{/block}}

server.js

1
2
3
4
5
6
7
8
9
10
const express = require('express');
const app = express();

app.engine('html',require('express-art-template'));

app.get('/index',(req,res)=>{
    res.render('index.html');
}).listen(3000,()=>{
    console.log('running...');
});
1
2
3
4
5
1、{{include ' 文件名 ' }}  相当于将该文件的内容替换到该位置

2、{{block 'body'}}  {{/block}}  在被继承文件中 相当于占了个位置

3、{{extend ' 文件名 '}}    A文件继承该文件后，在A文件中的{{block 'body'}}  {{/block}}中加入内容相当于填坑

最后更新： 2019年09月02日 11:06

原始链接： https://HowlCN.github.io/2018/04/01/Express/

赏
× 请我吃糖~
打赏二维码