node.js学习笔记Day6：Express框架下 具有增删改查功能的学生管理系统（笔记部分）

7.Express下做一个增删改查项目

7.1 html页面：

7.1.1index.html页面

模板获取网站：https://v3.bootcss.com/getting-started/#template

1. 选取合适模板，复制源代码。保存在views/index.html

   选取的模板为：https://v3.bootcss.com/examples/dashboard/

2. 点击源代码中的链接：https://v3.bootcss.com/examples/dashboard/dashboard.css

   复制css源码，保存在 public/css/main.css

3. 安装bootstrap，以获取必要的css文件

4. 修改html代码

   1. 添加控件button <a class="btn btn-success" href="">添加学生</a>

   2. 修改路径。（第14，15行）

   3. body内填充文字，改为art-template填充语法

      <tbody>
          {{each students}}
          <tr>
              <td>{{$value.id}}</td>
              <td>{{$value.name}}</td>
              <td>{{$value.gender}}</td>
              <td>{{$value.age}}</td>
              <td>{{$value.hobbies}}</td>
          </tr>
          {{/each}}
      </tbody>
      

7.1.2new.html页面

https://v3.bootcss.com/css/#forms 找到表单，选取合适的

关键代码模板：（要根据需要进行修改）

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

7.1.3edit.html页面

与new页面基本相同，相应控件中添加内容,如姓名：value="{{student.name}}"

<div class="form-group">
  <label for="InputName">Name</label>
  <input type="text" class="form-control" name="name"  value="{{student.name}}">
</div>

7.2模块化设计

app.js入口模块

• 创建服务
• 做服务相关配置
  • 模板引擎
  • body-parser解析表单post请求体
  • 提供静态资源服务
• 挂载路由
• 启动端口监听服务

router.js路由模块

处理post和get路由请求。根据不同的请求方法和路径设计不同的处理函数

students.js文件操作模块

• 获取所有学生列表
• 添加保存学生
• 更新学生
• 删除学生

7.3路由设计

请求方法	请求路径	get/post参数	备注
get	/students		渲染首页
get	/students/new		渲染添加学生页面
post	/students/new	name,age,gender,hobbies	处理添加学生请求
get	/students/edit	id	渲染编辑页面
post	/students/edit	id,name,age,gender,hobbies	处理编辑请求
get	/students/delete	id	处理删除请求

7.3.1调用方式1：

app.js

var express = require ('express')
var router = require('./router')
var app = express()

//调用路由处理文件,app作为参数传入
router(app)

app.listen(3000,function(){
    console.log('running')
})

router.js

var fs = require('fs')
var express = require ('express')
module.exports = function (app){
    app.get('/',function(req,res){
        
    })
    app.get('/students',function(req,res){
    
    })
    
    app.get('/students/new',function(req,res){
        
    })
   
}

7.3.2调用方式2：（Express提供一种方式专门用于包装路由）

1. 创建一个路由容器。var router = express.Router()

2. 把路由都挂载到该容器（router）中

   router.get('/students/new',function(req,res){})

3. 把router导出module.exports = router

4. 把路由容器挂载到app服务中

使用该种方式编写，此处不再展示源码

7.4 文件操作api设计

//获取所有学生列表
exports.find = function(){}

//添加保存学生
exports.save = function(){}

//更新学生
exports.update = function(){}

//删除学生
exports. delete= function(){}

7.5异步操作：

异步操作：不会等操作结束，后面的代码先继续执行。

包括：

• 定时器
• 文件读取

function fn(){
    var data = 'default num'
    setTimeout(function() {
        data = 'hello'
    }, 1000)
    return data
}
console.log(fn())

运行结果：default num。因为不会等待计时器结束，以及执行return语句。

如果需要获得一个函数中异步操作的结果，必须通过回调函数来获取。

//相当于自己封装了一个callback回调函数
function fn(callback){
    setTimeout(function() {
        var data = 'hello'
        callback(data)
    }, 1000);
}
//通过回调函数来获取，正确
fn(function(data){
    console.log(data)
})