模板引擎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
    评论
要使用 Node.js 和数据库来渲染 art-template 模板,可以按照以下步骤操作: 1. 安装 Node.js 和相应的数据库驱动程序,比如 MySQL、MongoDB 或 PostgreSQL。 2. 在 Node.js 项目中安装 art-template 和数据库驱动程序的 Node.js 模块,可以使用 npm 命令安装,如下所示: ``` npm install art-template mysql --save ``` 3. 创建数据库连接,使用 Node.js 的数据库驱动程序连接数据库,如下所示: ```javascript const mysql = require('mysql'); const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'password', database: 'my_database' }); connection.connect(); ``` 4. 查询数据库,获取数据并将其传递给 art-template 进行渲染,如下所示: ```javascript const template = require('art-template'); connection.query('SELECT * FROM my_table', function (error, results, fields) { if (error) throw error; const html = template(__dirname + '/views/my_template.art', { data: results }); console.log(html); }); ``` 在此示例中,我们使用 `connection.query()` 方法查询数据库并获取结果。然后,我们将结果传递给 art-template 的 `template()` 方法进行渲染,同时也将模板文件的路径作为第一个参数传递给 `template()` 方法。 在渲染时,我们可以在模板中使用 `data` 变量来访问查询结果中的数据。 5. 关闭数据库连接,如下所示: ```javascript connection.end(); ``` 在 Node.js 中,数据库连接是异步的,因此在完成所有数据库操作后,应该关闭连接,以避免内存泄漏和其他问题。 这样就可以在 Node.js 中使用 art-template 和数据库渲染模板了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值