Express 框架

yaobinggt
465 阅读4分钟

1、什么是Express框架

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

2、如何安装Express框架

npm install --save express

3、Express框架能做什么？

1、已经封装好了服务器

2、已经封装好了路由

3、已经封装好了中间件

4、已经封装好了网络请求

4、Express框架怎么用？

NPM安装express框架 --> 引入express模块 --> 实例化express对象 --> 通过对象调用各种方法

4.1小demo

//引入框架
var express = require('express');

//实例化express对象
var app=express();

//通过对象调用方法-------------------
//根据用户请求的地址返回对应的数据
app.get('/',(req,res)=>{
    console.log(req.url);
    res.send('Welcome Yaobinggt Home');
});

app.get('/about',(req,res)=>{
    console.log(req.url);
    res.send('This is about us');
});

//路由参数
app.get('/profile/:id',(req,res)=>{
    
    res.send('您所访问的路由参数为：' + req.params.id);
});

//监听服务器端口号
app.listen(3333);

5、EJS模版引擎

5.1、什么是EJS模版引擎

EJS是一套简单的模版语言，帮你利用普通的JavaScript代码生成HTML页面。

其他的模版引擎

1、jade
2、handlebars
3、hogan

5.2、EJS模版引擎的特点

特点：高效的嵌入式JavaScrip模版引擎

1、快速编译和渲染

2、简单的模版标签

3、支持浏览器端和服务器端

4、支持express视图系统

EJS示例代码

//index.js 入口文件
<ul>
<% for(var i=0;i<supplies.length;i++){%>
    <li><%= supplies[i] %></li>
<% } %>
</ul>

EJS使用小示例

//引入框架
var express = require('express');

//实例化express对象
var app=express();

//设置视图系统
app.set('view engine','ejs');


//通过对象调用方法-------------------
//根据用户请求的地址返回对应的数据
app.get('/',(req,res)=>{
    //console.log(req.url);
    res.sendFile(__dirname + '/public/index.html');//send只能单纯的发送纯文本信息 而 sendFile可以传输我们的文件
});

app.get('/about',(req,res)=>{
    //console.log(req.url);
    res.sendFile(__dirname + '/public/about.html');
});

//路由参数
app.get('/profile/:id',(req,res)=>{
     //res.sendFile(__dirname + '/views/profile.ejs'); 配置视图系统后访问还是下载文件
     res.render('profile',{name:'yaobinggt'})
});

//监听服务器端口号
app.listen(3333);
//

//EJS文件：views/profile.ejs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <style>
        body{background-color: skyblue;color:#fff ;}
        h1{text-align: center;}
    </style>
</head>
<body>
    <h1>欢迎来到万能胶囊公司<%= name %> 的EJS页面！</h1>
</body>
</html>

复杂的参数传递示例

//复杂的参数传递
app.get('/profile/:id',(req,res)=>{
     //res.sendFile(__dirname + '/views/profile.ejs'); 配置视图系统后访问还是下载文件\
     var data=[
        {name:[{name:'yaobinggt'},{name:'yaohengzhi'},{name:'yaohengbing'}],age:28},
        {name:[{name:'UUM'},{name:'jiangyanmei'},{name:'aixinxin'}],age:29},
        {name:[{name:'IUU'},{name:'yaoxiran'},{name:'yaouu'}],age:2}
     ];
     res.render('profile',{websiteName:req.params.id,datas:data});
});

=>>>>

<ul>
    <!-- <% for(var i=0;i<datas.length;i++) {%> 
    <li><p><%= datas[i].name %> <span><%= datas[i].age %></span></p></li>
    <% } %>  -->
    <% datas.forEach((item)=>{ %>
        <li>
            <p<span><%= item.age %></span></p>
            <% item.name.forEach((n)=>{ %>
                <span><%=n.name %> </span>
            <% }) %> 
        </li>
    <% }) %> 
</ul>

6、公共模板

6.1、使用EJS代替HTML

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="../assets/style.css">
</head>
<body>
    <!-- 引入公共模版 -->
    <%- include('../public/nav.ejs')  %> 
    <h1>欢迎来到万能胶囊公司主页</h1>
</body>
</html>

about.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于</title>
    <link rel="stylesheet" href="../assets/style.css">
</head>
<body>
    <!-- 引入公共模版 -->
    <%- include('../public/nav.ejs')  %> 
    <h1>欢迎来到关于我们页面</h1>
</body>
</html>

6.2、创建导航（公共模版）

公共导航

<!-- 公共文件只能有一个根标签 -->
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
    </ul>
</nav>

6.3、解决外部样式不可使用问题

公共样式

body{background-color: skyblue;color:#fff ;}
h1{text-align: center;}

index.js

//引入框架
var express = require('express');

//实例化express对象
var app=express();

//设置视图系统
app.set('view engine','ejs');

//让服务器能够识别外部样式表
app.use('/assets',express.static('assets'));

//通过对象调用方法-------------------
//根据用户请求的地址返回对应的数据
app.get('/',(req,res)=>{
    //console.log(req.url);
    res.render('index');
});

app.get('/about',(req,res)=>{
    //console.log(req.url);
    res.render('about');
});

//路由参数
app.get('/profile/:id',(req,res)=>{
     //res.sendFile(__dirname + '/views/profile.ejs'); 配置视图系统后访问还是下载文件\
     var data=[
        {name:[{name:'yaobinggt'},{name:'yaohengzhi'},{name:'yaohengbing'}],age:28},
        {name:[{name:'UUM'},{name:'jiangyanmei'},{name:'aixinxin'}],age:29},
        {name:[{name:'IUU'},{name:'yaoxiran'},{name:'yaouu'}],age:2}
     ];
     res.render('profile',{websiteName:req.params.id,datas:data});
});

//监听服务器端口号
app.listen(3333);
avatar
文章
阅读
粉丝