模板引擎art-template应用 案例 ---- 学生档案管理

1. 案例介绍 - 学生档案管理

目标:模板引擎应用,强化node.js 项目制作流程

涉及知识点: http请求响应,数据库,模板引擎,静态资源访问

在这里插入图片描述

2. 制作流程

  1. 建立项目文件夹并声称项目描述文件(package.json文件)
  2. 创建网站服务器实现客户端和服务器端的通信
  3. 链接数据库并根据需求设计学员信息表:根据页面上要展示的信息来设计学员信息表中的子段
  4. 创建路由并实现页面模板呈递:当客户端发出请求的时候,服务器端要看一下客户端的请求路径,并且根据请求路径去实现相应的功能以及模板的呈递
  5. 实现静态资源访问:在模板中外链了一些css文件,这些css文件也是要向服务器端发送请求的,css文件,js文件,图片文件都属于静态资源,当客户端访问这些静态资源的时候,我们要对客户端做出一个响应,所以要实现静态资源访问
  6. 实现学生信息的添加功能
  7. 实现学生信息的展示功能

3. 具体实现(部分代码)

第一步
npm init -y

第二步实现(只取部分):

在这里插入图片描述
connect.js:

在这里插入图片描述

注意:和数据库有关的代码要从app.js中分离出去,是不能把所有代码都写在同一个文件当中的

第三步

在这里插入图片描述

第四步
  • 关于创建路由:

我们需要先获取到请求方式以及请求地址,然后再对请求方式和请求地址进行判断,就能实现路由。

为了使代码简洁好维护,需要使用第三方模块router

第三方模块 router

使用步骤:

  1. 获取路由对象
  2. 调用路由对象提供的方法创建路由
  3. 启用路由,使路由生效

在这里插入图片描述

ps: router()第三个参数是必填的,上面图中未显示

在这里插入图片描述

  • 把第一个路由的/test 改成 /add,表示呈递学生信息页面
  • 第二个改成/list ,表示呈递学生信息列表页面
  • 到此为止,这个案例的路由已经创建好了
第五步

接下来要实现页面模板呈递,也就是说,当客户端访问路由的时候,我们要把页面呈递给客户。

所以,在这里我们要用到模板引擎

npm i art-template

关于文件放置的位置:

在这里插入图片描述

img也是静态资源

第三方模块 serve-static

功能: 实现静态资源访问服务

步骤:

  1. 引入serve-static 模块获取创建静态资源服务功能的方法
  2. 调用方法创建静态资源服务并指定静态资源服务目录
  3. 启用静态资源服务功能

在这里插入图片描述

ps: serve()方法的第三个参数也是必须填的,上图没写出来。

具体实现如下:

在这里插入图片描述
在这里插入图片描述

第六步:实现学生信息添加功能

步骤分析:

  1. 在模板的表单中指定请求地址(action属性)与请求方式(method属性)
  2. (将用户在表单中填写的信息作为请求参数发送给服务器端,) 所以每一个表单项必须要有name属性(,否则服务器端是无法接收到请求参数的)
  3. (既然客户端要向服务器端发送请求,服务器端就需要有对应的路由处理这个请求,所以要)添加实现学生信息功能路由
  4. 当服务器端接收到这个请求以后,要立马接收客户端传来的请求参数,也就是学生信息
  5. 将学生信息添加到数据库中
  6. 将页面重定向到学生信息列表页面
第三方模块 query-string

用来把对象转成查询字符串或者把查询字符串转成对象用的,有 parse 和 stringify 方法。

query-string 适合URL查询参数处理。

关于parse 和 stringify 方法:

const queryString = require('query-string');

console.log(location.search);//=> '?foo=bar'

const parsed = queryString.parse(location.search);
console.log(parsed);//=> {foo: 'bar'}

const stringified = queryString.stringify(parsed);//=> 'foo=unicorn&ilike=pizza'

具体代码如下:
在这里插入图片描述

第七步:学生信息列表页面分析
  1. (当用户访问学生信息列表页面的时候,我们需要)从数据库中将所有的学生信息查询出来
  2. 通过模板引擎将学生信息和HTML 模板进行拼接
  3. 将拼接好的结果响应给客户端

app.js 部分代码:

在这里插入图片描述

list.art 部分代码:

在这里插入图片描述

4. 代码优化

现在功能已经全部实现了,回过头看app.js 文件,这个文件中的代码量还是比较大的。

我们要看一下在这个文件中有没有相对独立功能的代码,如果有,就可以把它挪到单独的模块中

实际上,在当前的文件当中 路由 就是一个相对独立的功能,现在我们要把路由挪到一个单独的文件当中去。

在这里插入图片描述
在这里插入图片描述

最后,来看优化后的目录结构:

在这里插入图片描述
下面附上这个案例的代码:

百度网盘

链接:https://pan.baidu.com/s/1H_qCVgwDItptMJ29O9IEGg
提取码:0000

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Art-template是一款高性能、轻量级的模板引擎,适用于Node.js和浏览器环境。它以简洁明了的语法,支持模板继承、条件判断、循环遍历等常见功能,同时还提供了强大的过滤器和自定义标签功能。 Art-template的使用逻辑如下: 1. 安装Art-template 可以通过npm安装Art-template,命令如下: ```npm install art-template --save``` 2. 引入Art-template 在Node.js中,可以使用require语句引入Art-template: ```const template = require('art-template');``` 在浏览器中,可以使用script标签引入Art-template: ```<script src="path/to/art-template.js"></script>``` 3. 编写模板 Art-template使用{{}}包裹变量、表达式或语句。例如,以下是一个简单的模板: ``` <!DOCTYPE html> <html> <head> <title>{{title}}</title> </head> <body> <h1>{{title}}</h1> <p>{{content}}</p> </body> </html> ``` 4. 渲染模板 使用template方法可以将模板渲染成字符串。例如: ``` const template = require('art-template'); const data = { title: 'Art-template', content: 'A lightweight and powerful template engine' }; const html = template('path/to/template', data); console.log(html); ``` 在上面的例子中,我们将data对象传递给了模板,使用{{}}包裹的变量会被替换成data对象中的对应值,最终输出渲染后的HTML字符串。 5. 高级用法 除了基本的变量替换,Art-template还支持模板继承、条件判断、循环遍历等高级用法。例如,以下是一个使用if语句和each语句的模板: ``` {{if isAdmin}} <p>Welcome, admin</p> {{else}} <p>Welcome, user</p> {{/if}} <ul> {{each list}} <li>{{$index}}. {{$value}}</li> {{/each}} </ul> ``` 以上就是Art-template的使用逻辑,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值