回顾node（2）

最新推荐文章于 2024-04-18 23:55:52 发布

写bug的小气球

最新推荐文章于 2024-04-18 23:55:52 发布

阅读量103

点赞数

分类专栏： node 文章标签： nodejs

本文链接：https://blog.csdn.net/weixin_46013619/article/details/105195510

版权

node 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

req.query只能拿get请求

在express获取表单post请求体数据

使用中间件，因为没有api可以用。
1.安装 npm i --save body-parser
2.引包
3.配置
4.req.body就能取到
在这里插入图片描述
记一下

  app.get('/students', function (req, res) {
    // readFile 的第二个参数是可选的，传入 utf8 就是告诉它把读取到的文件直接按照 utf8 编码转成我们能认识的字符
    // 除了这样来转换之外，也可以通过 data.toString() 的方式
    fs.readFile('./db.json', 'utf8', function (err, data) {
      if (err) {
        return res.status(500).send('Server error.')
      }

      // 从文件中读取到的数据一定是字符串
      // 所以这里一定要手动转成对象
      var students = JSON.parse(data).students

      res.render('index.html', {
        fruits: [
          '苹果',
          '香蕉',
          '橘子'
        ],
        students: students
      })
    })
  })

Ok，到这里就比较有趣了，我们模块化一些文件，这样看起来舒服点，不然写在一个文件太多了，这里因为fs.readFile是一个异步操作，会导致代码不同步执行，所以接下来，我们通过传递回调函数的方式，来解决这个问题，这里的student文件是不处理任何业务逻辑，他只是一个你自己配置方法，这一块基础比较扎实，不难，模拟一下增加记录，然后提交表单，在初始界面增加数据。
主界面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div><a href="/student/new">添加学生</a></div>
  <div>
    {{each students}}
    <tr>
      <td>{{ $value.id }}</td>
      <td>{{ $value.name }}</td>
      <td>{{ $value.gender }}</td>
      <td>{{ $value.age }}</td>
      <td>{{ $value.hobbies }}</td>
    </tr>
    <br/>
    {{/each}}
  </div>
</body>
</html>

表单界面，注意这里的action啊，表单提交地址，这里自己，然后下面我们重定向了下哦。

<form action="/student/new" method="post">
          <div class="form-group">
            <label for="">姓名</label>
            <input type="text" class="form-control" id="" name="name" required minlength="2" maxlength="10">
          </div>
          <div class="form-group">
            <label for="">性别</label>
            <div>
              <label class="radio-inline">
                <input type="radio" name="gender" id="" value="0" checked> 男
              </label>
              <label class="radio-inline">
                <input type="radio" name="gender" id="" value="1"> 女
              </label>
            </div>
          </div>
          <div class="form-group">
            <label for="">年龄</label>
            <input class="form-control" type="number" id="" name="age" required min="1" max="150">
          </div>
          <div class="form-group">
            <label for="">爱好</label>
            <input class="form-control" type="text" id="" name="hobbies">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>

服务器app.js
这里有很多的配置项，在之前写的内容里有，忘了，记得翻翻

var express = require('express')
var router = require('./router')
var bodyParser = require('body-parser')
//1.创建app
var app = express()
//post配置
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
//使用模板引擎
app.engine('html',  require('express-art-template'))
app.use(router)
app.listen(3000, function(){
    console.log('express app is running......')
})

db.json 这里就模拟一些数据，后面会自己添加的，这里是写入文件的形式，没用数据库，数据库后面再搞

{
    "students":[
        {"id":4,"name":"张三三","gender":"0","age":"22","hobbies":"吃饭、睡觉、打豆豆"},
        {"id":4,"name":"张三三","gender":"0","age":"22","hobbies":"吃饭、睡觉、打豆豆"},
        {"id":4,"name":"张三三","gender":"0","age":"22","hobbies":"吃饭、睡觉、打豆豆"},
        {"id":4,"name":"张三三","gender":"0","age":"22","hobbies":"吃饭、睡觉、打豆豆"},
        {"id":4,"name":"张三三","gender":"0","age":"22","hobbies":"吃饭、睡觉、打豆豆"},
        {"id":4,"name":"张三三","gender":"0","age":"22","hobbies":"吃饭、睡觉、打豆豆"},
        {"name":"aa","gender":"0","age":"3","hobbies":"aaaa","id":5}
    ]
}

router 这里和下面就是传的是一个回调函数，还挺有意思的，要记住只有这种方法才能解决异步，其实就是当读了，我通过函数传参的方式，给你数据。

/**
 * router.js 路由模块
 * 职责：
 *   处理路由
 *   根据不同的请求方法+请求路径设置具体的请求处理函数
 * 模块职责要单一，不要乱写
 * 我们划分模块的目的就是为了增强项目代码的可维护性
 * 提升开发效率
 */

var fs = require('fs')
var Student = require('./student')

// Express 提供了一种更好的方式
// 专门用来包装路由的
var express = require('express')

// 1. 创建一个路由容器
var router = express.Router()
router.get('/student', function(req, res){
    Student.find(function(err, students){
        if(err){
            return res.status(500).send('Server error.')
        }
        res.render('index.html', {
            students
        })
    })
})
router.get('/student/new', function(req, res){
    res.render('new.html')
})
router.post('/student/new', function(req, res){
    Student.save(req.body, function(err, data){
        if(err){
            return res.status(500).send('Server error.')
        }
        res.redirect('/student')
    })
    
})
module.exports = router

student

/**
 * student.js
 * 数据操作文件模块
 * 职责：操作文件中的数据，只处理数据，不关心业务
 *
 * 这里才是我们学习 Node 的精华部分：奥义之所在
 * 封装异步 API
 */

var fs = require('fs')

var dbPath = './db.json'

/**
 * 获取学生列表
 * @param  {Function} callback 回调函数
 */
exports.find = function (callback) {
  fs.readFile(dbPath, 'utf8', function (err, data) {
    if (err) {
      return callback(err)
    }
    callback(null, JSON.parse(data).students)
  })
}

/**
 * 根据 id 获取学生信息对象
 * @param  {Number}   id       学生 id
 * @param  {Function} callback 回调函数
 */
exports.save = function(student, callback){
    fs.readFile(dbPath, 'utf8', function(err, data){
        if(err){
            return callback(err)
        }
        var students = JSON.parse(data).students
        student.id = students[students.length - 1].id + 1
        students.push(student)
        var fileData = JSON.stringify({
            students: students
          })
        fs.writeFile(dbPath, fileData, function (err) {
        if (err) {
            // 错误就是把错误对象传递给它
            return callback(err)
        }
        // 成功就没错，所以错误对象是 null
        callback(null)
        })
    })
}