day04-artTemplate&学生档案系统&router&serveStatic

最新推荐文章于 2022-02-28 14:49:32 发布
最新推荐文章于 2022-02-28 14:49:32 发布
阅读量186 收藏 2
点赞数
分类专栏： Nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45583708/article/details/101055483
版权

模板引擎

目标

  • 能够使用模板引擎渲染数据
  • 能够使用模板引擎进行原文输出
  • 能够使用循环输出数据
  • 能够知道如何引用子模板
  • 能够知道如何如何进行模板继承

基本概念（★★★）

模板引擎是第三方模块。
让开发者以更加友好的方式拼接字符串，使项目代码更加清晰更加易于维护

[外链图片转存失败(img-jRECFhTu-1568950815177)(images/artTemplate.png)]

art-template模板引擎

入门使用（★★★）

  • 利用npm命令下载 art-template 库 npm install art-template

  • 创建js文件，引入 art-template 库

    const trempalte = require('art-template');

  • 引入拼接的数据源

    //引入path库
const path = require('path');
//拼接路径，这里最好用绝对路径
const views = path.join(_dirName,'views','index.art');
//关联到 template里面
const html = template(views,{
    name: '德玛西亚'
});

  • 创建.art 渲染模板

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
    <!--标准语法-->
    <p>{{ name }}</p>
    <!--原生语法-->
    <p><%= age%></p>
</body>
</html>

输出语句

标准语法用 {{}}（★★★）

在大括号里面可以进行逻辑运算

<p>{{ 1 + 1 }}</p>
<p>{{ 1 + 1 == 2 ? '相等' : '不相等' }}</p>
<p>{{ content }}</p>

如果说需要解析html标签，需要在变量前面加 @ 符号

<p>{{@ content }}</p>
原生语法 <%= %>

可以进行逻辑运算

<p><%= 1 + 2%></p>
<p><%= 1 + 1 == 2 ? '相等' : '不相等' %></p>
<p><%= content%></p>

如果说需要解析html标签，需要在变量前面加 - 符号

<p><%- content%></p>

条件判断

标准语法 {{if 条件}} … {{/if}} （★★★）
{{if age > 18}}
	年龄大于18
{{else if age < 15 }}
	年龄小于15
{{else}}
	年龄不符合要求
{{/if}}
原生语法 <% if (value) { %> … <% } %>
<% if (age > 18) { %>
	年龄大于18
<% } else if (age < 15) { %>
	年龄小于15
<% } else { %>
	年龄不符合要求
<% } %>

循环

标准语法 {{each 数据}} {{/each}}（★★★）
<ul>
	{{each users}}
		<li>
			{{$value.name}}
			{{$value.age}}
			{{$value.sex}}
		</li>
	{{/each}}
</ul>
原生语法 <% for() { %> <% } %>
<ul>
	<% for (var i = 0; i < users.length; i++) { %>
		<li>
			<%=users[i].name %>
			<%=users[i].age %>
			<%=users[i].sex %>
		</li>
	<% } %>
</ul>

子模版

使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中

标准语法 {{include ‘模板’}}（★★★）
{{ include './common/header.art' }}
...
{{ include './common/footer.art' }}
原生语法 <%include(‘模板’) %>
<% include('./common/header.art') %>
...
<% include('./common/footer.art') %>

模板继承（★★★）

使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件

[外链图片转存失败(img-35F6ayji-1568950815179)(images/模板继承.png)]

但是在html骨架中，有一些内容是不一样的，例如引入的css不同，引入的js脚本不同，所以我们可以通过在骨架中先预留几个位置，让其它功能页面在继承的使用，引入相应自己的文件即可

[外链图片转存失败(img-WUoyfYGc-1568950815180)(images/骨架预留.png)]

使用

  • 现在骨架标签中设定预留位置

     <!doctype html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>HTML骨架模板</title>
         <!-- 预留位置，打上标记为 head-->
         {{block 'head'}}{{/block}}
     </head>
     <body>
         <!-- 预留位置，打上标记为 content-->
         {{block 'content'}}{{/block}}
     </body>
 </html>

  • 在另外的 模板文件中利用 extends 来进行引入

    <!--index.art 首页模板-->
<!--extend 进行继承， 后面跟需要继承的文件路径-->
 {{extend './layout.art'}}
 {{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}}
 {{block 'content'}} <p>{{name}}</p> {{/block}}

  • 在js文件里面输入内容，利用art-templare 进行模板渲染

    //引入 template 库
const template = require('art-template');
//引入 path 库，用来处理路径
const path = require('path');
//生成路径
const views = path.join(_dirName,'views','index.art');
//利用template 进行渲染
const html = template(views,{
     name: '德玛西亚'
});

模板配置（★★★）

在模板引擎中，如果想使用第三方模块的一些方法，默认我们是不能直接使用的，必须要通过template模块给我们提供的方法，把第三方模块的对象当作变量传递进入

语法：
template.defaults.imports.自定义变量名 = 第三方模板对象;
示例代码
//1. 需要先 下载第三方模块  npm install dateformat
//2. 模板引擎第三方库
const template = require('art-template');
//3. 处理路径的第三方模块
const path = require('path');
const views = path.join(__dirname, 'views', 'index.art');
//4. 格式化日期的第三方模块
const dateFormart = require('dateformat');

//5. 不能直接使用，需要通过 template进行模板配置
template.defaults.imports.dateFormart = dateFormart;

const html = template(views, {
    time: new Date(),
})
console.log(html);

//渲染模板
{{extend './common/layout.art'}}
{{block 'css'}}
<link href='style.css' />
{{/block}}

{{block 'content'}}
<p>{{ dateFormart(time,'yyyy-MM-dd hh:mm:ss') }}</p>
{{/block}}
输出结果
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>

		<link href='style.css' />

</head>
<body>
		<p>2019-22-16 01:04:17</p>
</body>
</html>

设置模板根目录（★★★）

有的时候我们引入模板会比较多，如果一个一个去进行引入比较麻烦，所以我们可以通过引入模板根目录的形式去进入，这样当我们引入模板文件的时候，它会根据我们传递的名字自动匹配

语法：
template.defaults.root = path.join(__dirname, 模板文件夹名称);

设置模板默认后缀（★★）

可以去设置默认的后缀名，这样我们引入文件省略后缀名

语法：
template.defaults.extname = '.html';

案例介绍 – 学生档案管理（★★）

目标

  • 熟悉模板引擎的应用场景
  • 能够理解其思路
  • 能够创建web服务器
  • 能够链接数据库
  • 能够创建学生集合规则
  • 参照案例能够写出学生档案管理

**知识点：**http请求响应、数据库、模板引擎、静态资源访问

[外链图片转存失败(img-5b1VhwFW-1568950815181)(images/学生档案管理.png)]

制作流程

  • 建立项目文件夹并生成项目描述文件
  • 创建网站服务器实现客户端和服务器端通信
  • 连接数据库并根据需求设计学员信息表
  • 创建路由并实现页面模板呈递
  • 实现静态资源访问
  • 实现学生信息添加功能
  • 实现学生信息展示功能

实现思路

引入 http 模块，创建web服务

//引入http模块，用来创建服务器
const http = require('http');
//开启服务
const server = http.createServer();
//监听请求
server.on('request', (req, res) => {
    res.end('<h1>ok</h1>');
})
//监听端口号
server.listen(8080);
console.log('启动服务器成功');

需要使用到服务器，下载 mongoose 第三方库

//1. npm install mongoose  下载mongodb第三方库
//2. 引入数据库模块
const mongoose = require('mongoose');
//3. 链接数据库
mongoose.connect('mongodb://localhost/students', { useNewUrlParser: true })
    .then(success => console.log('链接成功'))
    .catch(error => console.log(error));

定义用户规则，创建用户集合（定义用户表结构）

const mongoose = require('mongoose');
const student = mongoose.Schema({
    name: {
        //类型
        type: String,
        //是否是必须要填写
        require: true,
        //最小长度
        minlength: 2,
        //最大长度
        maxlength: 20
    },
    age: {
        type: Number,
        min: 10,
        max: 25
    },
    email: String,
    //爱好，数组形式
    hobbies: [String],
    collage: String,
    date: {
        type: Date,
        //默认时间是当前时间
        default: Date.now()
    }
});
//给数据库定义表结构
const studentEntity = mongoose.model('student', student);
//进行模块对象导出
module.exports = studentEntity;

创建路由 router

根据路由功能来进行请求路径的分发，我们如果去进行路由的编写比较的繁琐，这里利用到一个第三方的库，来帮我们做路由的分发 router

  • 1.下载对应的第三方模块 npm install router

  • 2.通过 require来进行模块的引入

    const getRouter = require('router');

  • 3.通过 getRouter() 方法获取路由对象

    const router = getRouter();

  • 4.在我们监听的请求函数里面开启路由功能

    server.on('request', (req, res) => {
    //第三个参数必须要带上
    router(req,res,()=>{
        //这个函数是我们路由分发完毕后，再会调用此函数
    });
});

  • 5.进行代码编写，第三方库里面帮我们定义好了 get方式请求的处理和post方式请求的处理

    router.get('/index', (req, res) => {
    console.log('index 请求成功');
    res.end('index 请求成功');

})
router.get('/list', (req, res) => {
    console.log('list 请求成功');
    res.end('list 请求成功');
})

当用户属于 xxx/add 的时候，让给用户显示用户添加的页面，我们需要把模板页面copy到我们的工程目录下，注意：html页面放在views目录下，css要放在 public的css目录下，然后在路由中，用模板引擎 template 来进行渲染

//1.引入 router 模块
const getRouter = require('router');
//2.获取路由对象
const router = getRouter();
//5.引入 art-template模块
const template = require('art-template');
//6.引入 path
const path = require('path');
//设置根路径
template.defaults.root = path.join(__dirname, 'views');
//4.当用户输入了add路径，我们让用户看到添加用户的界面
router.get('/add', (req, res) => {
    let html = template('index.html', {});
    res.end(html);
});
router.get('/list', (req, res) => {
    let html = template('list.html', {});
    res.end(html);
});
server.on('request', (req, res) => {
    //3.开启路由
    router(req, res, () => {
        console.log('请求过来了');
    });
});

使用静态资源第三方库 serve-static

此时还没有完成，因为在html里面进行了css的引入，这里我们需要需要把一些静态资源引入进来，我们可以通过第三方模块来实现 serve-static

  • 1.下载第三方模块 npm install serve-static
  • 2.引入serve-static模块获取创建静态资源服务功能的方法
  • 3.调用方法创建静态资源服务并指定静态资源服务目录
  • 4.启用静态资源服务功能
//1.引入静态资源加载的模块 
const serveStatic = require('serve-static');
//2.得到静态资源加载对象 传递静态资源的路径，方便后续使用
const static = serveStatic(path.join(__dirname, 'public'));

server.on('request', (req, res) => {
    ...
    //3.开启静态资源
    static(req, res, () => {});
});

编写用户添加的接口

修改add.html(add.art) 文件里面 form表单的请求路径跟请求方法（路径：/add，请求方法：post）

//引入 querystring模块，进行数据的解析
const querystring = require('querystring');
//用户提交数据的处理
router.post('/add', (req, res) => {
    let data = '';
    //正在接收数据
    req.on('data', params => {
            data += params;
        })
        //当数据接收完毕
    req.on('end', () => {
        let studentParams = querystring.parse(data);
        student.create(studentParams);
    });
    //插入成功后进行重定向
    res.writeHead(301, {
            'Location': '/list'
        })
        //响应请求
    res.end();
});

编写用户列表的接口

在 list.html(list.art)模板中，编写输出语句，利用标准语法就好

{{each students}}
			<tr>
				<th>{{$value.name}}</th>
				<th>{{$value.age}}</th>
				<th>{{$value.sex == '0' ? '男' : '女'}}</th>
				<th>{{$value.email}}</th>
				<th>
					{{each $value.hobbies}}
						<span>{{$value}}</span>
					{{/each}}
				</th>
				<th>{{$value.collage}}</th>
				<th>{{dateFormat($value.date, 'yyyy-mm-dd')}}</th>
			</tr>
{{/each}}

在list的路由分发的函数里面，进行查询所有学生信息，然后通过模板引擎进行渲染

//引入 时间格式化 模板引擎
const dateFormat = requre('dateformat');
//给模板引擎配置其他模块
template.defaults.imports.dateFormat = dateFormat;
//这里我利用的是 异步的 async 跟 await 来实现，也可以通过 Promise的.then().catch() 来实现
router.get('/list', async(req, res) => {
    //查询数据库里面所有学生信息
    let students = await student.find();
    let html = template('list.html', { students: students });
    res.end(html);
});
碼德浮樂
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Nodejs第4天案例-学生档案管理.zip
07-18
Nodejs第4天案例-学生档案管理.zip
HCIP-Routing_&_Switching_V2.5_培训教材.rar
11-23
2. **HCIP-Routing & Switching V2.5提升企业级网络性能教材IERS.pdf**：IERS（Intermediate Enterprise Router and Switching）可能指的是中级企业路由器和交换机管理。这份教材可能关注如何优化网络性能，包括流量...
artTemplate&学生档案系统&router&serveStatic
码化疼
09-14 316
模板引擎 目标 能够使用模板引擎渲染数据 能够使用模板引擎进行原文输出 能够使用循环输出数据 能够知道如何引用子模板 能够知道如何如何进行模板继承 基本概念（★★★） 模板引擎是第三方模块。 让开发者以更加友好的方式拼接字符串，使项目代码更加清晰更加易于维护 [外链图片转存失败(img-shFXWFwQ-1568462765880)(images/artTemplate.png)] art-t...
模板引擎art-template应用 案例 ---- 学生档案管理
weixin_47505105的博客
02-28 387
小案例 ---- 学生档案管理。涉及知识点： http请求响应，数据库，模板引擎，静态资源访问
art-template 模板继承和子模板
weixin_43916694的博客
07-24 509
安装： npm install --save art-template // 在浏览器中下载时不需要安装 npm install --save express-art-template 配置： // 第一个参数用来配置视图的后缀名，这里是 art ，则存储在 views 目录中的模板文件必须是 xxx.art // app.engine('art', require('express-art-template')) // 这里把 art 改为 html app.engine('html', requir
artTemplate模板继承和子模板
chen__cheng的博客
03-21 596
子模板 语法： {{ include './header.html' }};// 其中'./header.html'是相对于当前文件位置的文件 应用： # layout.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ inclu..
frontend-music:React＆React-Router＆Redux
05-16
音乐盒页面 框架：1.React 2.React-Router 3.Redux 上线时间：即将上线后端：NodeJS Express（自行开发） 范例图片 指数 专辑列表页面 歌曲列表页面 会员列表页面
vue-admin-template：vue后台管理系统，router，permission集成
03-03
vue-admin-template English | 具有Element UI，axios，iconfont，权限控制和lint的最小vue管理员模板 现场演示： : 当前版本是在vue-cli上构建的v4.0+ 。 如果要使用旧版本，可以将分支切换到 ，它不依赖于vue-...
Webex-Cisco R&S products overview
06-30
4. **NX-OS操作系统**：这是用于思科 Nexus 系列数据中心交换机的操作系统，支持虚拟化、自动化和应用感知网络功能，以满足现代数据中心的需求。 **Webex集成** 思科的Webex产品与R&S产品线紧密集成，提供了一站式...
uri-template-router:将 URI 与 URI 模板集合中的模板匹配
08-04
var r = new Router ; r . addTemplate ( 'http://example.com/' , { } , 'index' ) ; r . addTemplate ( 'http://example.com/q{n}.html' , { } , 'page_html' ) ; r . addTemplate ( '...
art-template 模版配置
weixin_42448623的博客
08-03 313
文章目录向模版导入变量设置模版根目录设置模版默认后缀 文档 向模版导入变量 template.defaults.imports.变量名 = 变量值 可用于时间格式转换 let template = require('art-template'); let dateFormat = require('dateformat'); template.defaults.imports.dateFormat = dateFormat template(view,{time:new Date()}) // 模版
KOA学习（07）：art-template模板语法
LAZYPET BLOG
05-17 256
1.语法 art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。 标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。 2.输出 标准语法 {{value}} {{data.key}} {{data['key']}} {{a ? b : c}} {{a || b}} {{a + b}} 原始语法 <%= value %> <%= data.key %&gt
前端面试总结（vue篇）
热门推荐
weixin_43734732的博客
07-21 2万+
vue的优点 1、vue是个轻量级的框架，是一个构建数据的视图集合，大小只有几十Kb 2、vue是组件化开发，适合多人开发 3、vue中的双向数据绑定更方便操作表单数据 4、因为vue是MVVM的框架，视图，数据，结构分离使数据的更改更为简单 5、vuex可以管理所有组件用到的数据，不需要借助之前props在组件间传值 6、官方文档通俗易懂，易于理解和学习； vue父子组件之间传递数据 1、父组件向子组件传递数据 通过props，例子如下 <template> <div> .
JAVA中XML读写
08-29 1955
XML作为全球通用的结构化语言，越来越受人们青睐，各种开发平台（比如Microsoft Studio系列、Oracle系列、InpriseBorland系列等）也都把支持XML开发作为宣传口号之一。由于笔者所从事的电子政务开发较早的引入了XML,所以尝到了许多甜头，在许多项目中利用XML数据交换信息，省去了许多麻烦事，不用制定繁锁的数据格式，利用XML数据易于表达，也利于一线开发者跟踪调试。笔者先
art-template 模板引擎使用总结
weixin_34209406的博客
01-01 535
2019独角兽企业重金招聘Python工程师标准>>> ...
art-template模板引擎和其它第三方模块搭配使用
weixin_44202037的博客
09-11 815
art-template模板引擎案例介绍 – 学生档案管理 案例介绍 – 学生档案管理
模板引擎简介和art-template模板引擎基本使用
kiku
02-01 1610
一、模板引擎概念 模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。 模板引擎不属于特定技术领域，它是跨领域跨平台的概念。在Asp下有模板引擎，在PHP下也有模板引擎，在C#下也有，甚至JavaScript、WinForm开发都会用到模板引擎技术。 二、模板引擎原理 模板引擎的实现...
JavaScript
qq_45676798的博客
04-26 406
1.什么是JavaScript JavaScript CSS预处理器有SASS基于Ruby,LESS基于NodeJS,可以搜LESS官方文档 UI框架：Ant-Design,有组件源码,ElementUI,Bootstrap,AmazeUI JavaScript 构建工具：Babel,WebPack 1.1概述 javascript是一门脚本语言 ECMASpcript它可以理解为是JavaScript的一个标准。 2.快速入门 2.1引入JavaScript <!-- 在script内写js代
HCIE-R&S深度解析：STP, RSTP, MSTP与VLAN详解
此外，还特别提到了MSTP与VRRP（Virtual Router Redundancy Protocol，虚拟路由冗余协议）的组合配置，展示了如何实现高可用性和负载均衡的复杂网络架构。 这份HCIE-R&S复习资料全面深入地讲解了二层网络技术，对于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值