MongoDB+模板引擎 项目学习 ---学生档案管理

MongoDB+模板引擎 项目学习 —学生档案管理

1 案例介绍

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

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

​ 项目效果展示

2 制作流程

1. 建立项目文件夹并生成**项目描述文件**
2. 创建网站服务器实现客户端和服务器端通信
3. 连接数据库并根据需求设计学员信息表
4. 创建路由并实现页面模板呈现
5. 实现**静态资源**访问—图片等数据
6. 实现学生信息**添加功能**
7. 实现学生信息**展示功能**

3 详细步骤

1. 创建项目文件夹–> 生成 项目描述文件

   • npm init -y
   • [1.Node基础–六、package.json文件]
   • 

2. 创建网站服务器—> 实现客户端和服务器端通信

   • 导入http模块，创建网站服务器

   • 添加事件

   • 监听80端口

   • app.js–创建网站服务器

     // 引入http模块
     const http = require('http');
     // 创建网站服务器
     const app = http.createServer();
     // 客户端访问服务器端的时候
     app.on('request', (req, res) => {
            
         res.end('ok');
     });
     // 监听80端口
     app.listen(80);
     console.log('服务器启动成功');
     

   • 

3. 连接数据库 —> 设计学员信息表

   • 下载第三方 mongoose 模块npm install mongoose

   • 导入模块

   • 连接数据库

   • 数据库连接，写在新目录connect.js中

   • 再重新require 到 app.js中

     • connect.js 中并没有导出任何模块成员，所以不需要用变量来接收返回结果

   • students/model/connect.js

     // 引入mongoose 第三方模块
     const mongoose = require('mongoose');
     // 数据库连接
     mongoose
         .connect('mongodb://localhost/playground')
         .then(() => console.log('数据库连接成功'))
         .catch(() => {
            
             '数据库连接失败';
         });
     

   • 

   • model目录下创建文件 user.js

   • 设定集合规则

   • 创建学生信息集合

     • 返回值是一个构造函数，拿变量来接收构造函数

   • 当前模块需要在其他模块中进行导入，在导入时 希望可以获取 该集合的构造函数 所以最好将这个集合函数开放出去，用module.exports=Student进行开放

   • 引入到 app.js

   • 

   • students/model/user.js

     const mongoose = require('mongoose');
     // 创建学生集合规则
     const studentsSchema = new mongoose.Schema({
            
         name: {
            
             type: String,
             require: true,
             minlength: 2,
             maxlength: 10,
         },
         age: {
            
             type: Number,
             min: 10,
             max: 25,
         },
         sex: {
            
             type: String,
         },
         email: String,
         hobbies: [String],
         collage: String,
         enterDate: {
            
             type: Date,
             default: Date.now,
         },
     });
     // 使用集合规则，创建学生集合
     // *返回一个构造函数那变量来接受
     const Student = mongoose.model('Student', studentsSchema);
     // 将学生信息集合，进行导出，构造函数做开放处理
     module.exports = Student;
     

4. 创建路由并实现页面模板呈现

   • 创建路由第三方模块 router
     • 通过第三方模块router实现路由的创建
       1. 首先 获取路由对象
       2. 调用路由对象 提供的 方法 创建路由
       3. 启用路由，使路由生效
     • 下载第三方模块 npm install router
     • router 下面则有get方法和 post方法
       • 第一个参数，请求地址 判断请求路径要是符合要求就走这个路由进行处理
       • 第二个参数，处理请求的函数
     • 
   • 页面模板呈现–4.5、4.6、4.7
     • 利用到 模板引擎 下载模板引擎 npm install art-template
     • 在 students 目录下 建立一个 views 目录存放模板文件
     • 在students目录下 在建立一个 public 目录存放静态文件
     • 在app.js中 配置模板的根目录
       • 引入path模块
       • template.defaults.root=path.join(__dirname,'views')
       • template 返回值，实际上就是拼接好的字符串

5. 实现静态资源访问服务，第三方模块 serve-static

   1. 引入 serve-static模块 获取 创建静态资源服务功能的方法
      • npm install serve-static
      • require 导入 const serveStatic = require('serve-static');
   2. 调用方法创建静态资源服务并指定静态资源服务目录
      • 实现静态资源访问服务
      • const serve = serveStatic(path.join(__dirname, 'public'));
   3. 启用静态资源服务

   6. 实现学生信息添加功能
   步骤：

   1. 在模板的表单中指定请求地址与请求方式

      • 既然是 添加 信息 ，那么一定会 发送请求,所以要 获取请求地址
      • 由于是添加功能所以 请求方式 method 是POST
      • 

   2. 为每一个表单项添加name属性

      • 目的是和数据库字段保持一致，方便后台接收数据
        3. 添加实现学生信息功能路由----6.3
      1. data (事件传递触发) 和 end (事件传递结束触发)
      2. 请求时，触发data ，里面有一个 事件处理函数，客户端每次发过来的请求参数，post一次一次接收，所以要拼接—formData += param;

   3. 接收客户端传递过来的学生信息

      1. 请求结束触发，将参数做一个解析并返回
         • 先引入 const querystring = require('querystring');
         • 在