使用node做hero小项目（二）

三、完成index.html页面开发

3.1 完成getHeroes 接口

在app.js中

// =======================================================
// 接口
// 页面中引入db模块
const db = require('./db');
// 1. 获取所有的英雄
app.get('/getHeroes', (req, res) => {
  // 直接调用db函数，完成查询工作
  db('select * from heroes order by id desc', null, (err, result) => {
    if (err) throw err;
    // 把查询的结果响应给浏览器
    res.send(result); // send可以将js数组自动转成json格式，并做出响应
  });
});

使用浏览器或postman来测试是否能够接收到所有的英雄。

[外链图片转存失败(img-SyQvX8Af-1567857697489)(assets/1567818235874.png)]

执行git add app.js 和git commit -m '写了getHeroes接口，完成了对所有英雄的查询'

3.2 前端发送ajax请求，把响应的数据渲染到页面

在index.html中，编写代码，发送请求：

    $.get('/getHeroes', function (res) {
      // console.log(res);
      var str = template('muban', {
        arr: res
      });
      $('tbody').html(str);
    }, 'json')

模板代码

  <script id="muban" type="text/html">
    {{each arr}}
    <tr>
      <td><img src="{{$value.file}}" alt="" /></td>
      <td>{{$value.name}}</td>
      <td>{{$value.skill}}</td>
      <td>
        <button onclick="location.href='./edit.html'" class="btn btn-primary">编辑</button>
        <button onclick="alert('你真狠')" class="btn btn-danger">删除</button>
      </td>
    </tr>
    {{/each}}
  </script>

执行 git add manager/index.html 和 git commit -m '前端请求getHeroes接口，将数据渲染到页面'

四、 完成新增

4.1 处理表单

• 查看表单中有没有缺少的项
• 检查各项有没有name属性
• 看提交按钮是submit还是button，涉及要不要阻止默认行为

4.2 本地图片预览

    $('#heroIcon').change(function () {
      // 1. 找到文件对象
      // console.dir(this);
      var fileObj = this.files[0];
      // 2. 为文件对象生成一个临时的url
      var url = URL.createObjectURL(fileObj);
      // 3. 设置预览的图片的src为临时的url即可
      $('.preview').attr('src', url);
    })

4.3 前端发送请求，将数据提交给接口，完成添加

    $('.btn-success').click(function (e) {
      e.preventDefault();
      var formdata = new FormData($('form')[0]);
      $.ajax({
        type: 'POST',
        url: '/addHero',
        data: formdata,
        dataType: 'json',
        success: function (res) {
          alert(res.msg);
          if (res.code == 200) {
            location.href = 'index.html';
          }
        },
        contentType: false,
        processData: false
      });

    });

4.4 服务端完成添加接口

终端中安装multer模块npm i multer

app.js中完成添加英雄的接口

// 2. 完成添加英雄的接口
// 加载multer模块
const multer = require('multer');
// 配置multer
const upload = multer({dest: 'upload/'});

app.post('/addhero', upload.single('heroIcon'), (req, res) => {
  let sql = 'insert into heroes set ?';
  let values = {
    name: req.body.heroname,
    nickname: req.body.heroNickName,
    skill: req.body.skillName,
    file: req.file.filename
  };
  db(sql, values, (err, result) => {
    if (err) {
      res.send({code: 201, message: '添加失败'});

    } else {
      res.send({code: 200, message: '添加成功'});
    }
  })
})

应该使用body-parser 还是 multer ？

• 请求体的格式（请求头中的Content-Type）
  • application/x-www-form-urlencoded
    • 使用 serialize() 的时候，会是这种编码格式
    • 使用body-parser
  • multipart/form-data
    • 使用FormData的时候，会是这种编码格式
    • 使用multer

添加英雄的时候，因为有文件上传，所以必须得使用FormData。必须得使用multer。

更多multer了解 => express/multer