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

最新推荐文章于 2022-11-05 20:27:52 发布

chnyi6_ya

最新推荐文章于 2022-11-05 20:27:52 发布

阅读量384

点赞数

分类专栏： art-template 文章标签：服务器前端 javascript

本文链接：https://blog.csdn.net/weixin_47505105/article/details/123168246

版权

art-template 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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

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

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

在这里插入图片描述

2. 制作流程

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

3. 具体实现（部分代码）

第一步

npm init -y

第二步实现（只取部分）：

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

在这里插入图片描述

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

第三步

在这里插入图片描述

第四步

关于创建路由：

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

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

第三方模块 router

使用步骤：

获取路由对象
调用路由对象提供的方法创建路由
启用路由，使路由生效

在这里插入图片描述

ps： router（）第三个参数是必填的，上面图中未显示

在这里插入图片描述

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

第五步

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

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

npm i art-template

关于文件放置的位置：

在这里插入图片描述

img也是静态资源

第三方模块 serve-static

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

步骤：

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

在这里插入图片描述

ps： serve（）方法的第三个参数也是必须填的，上图没写出来。

具体实现如下：

在这里插入图片描述

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

步骤分析：

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

第三方模块 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'

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