Express

Express：NodeJS最有名的框架（老牌）

Koa/Koa2：更简洁（新秀）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nVqkMrLm-1632793446546)(C:\Users\lenovo\Desktop\Express脚手架.png)]

set DEBUG=express:* & npm start

post：req.body.XXX

get：req.query.XXX

页面刷新：location.reload();

注：回退操作页面刷新不起作用

ajax请求不能用来链接

文件提交

// js部分
router.post('/user/add', function (req, res, next) {
  req.files.forEach(f => {
    let max = 9999;
    let min = 1000;
    // 拼接一个新的文件名：毫秒数+随机数+后缀名
    let t = Date.now();
    let n = parseInt(Math.random() * (max - min) + min);
    let z = path.extname(f.originalname);// 获取文件的后缀名
    let name = '' + t + n + z;
    // 2.读取原始文件
    let data = fs.readFileSync(f.path)
    // 3.将文件写入指定的文件夹
    fs.writeFile(path.resolve(__dirname, '../public/images', name), data, function (err) {
      if (err) {
        console.log('错误：' + err);
      }
      // 将用户输入的数据引入数组
      start.unshift({
        userName: req.body.username,
        photo: name,
      });
      console.log(start);
    })
  })
  res.send('success')
})

    <!-- 方式一 -->    
<form action="/users/user/add" method="POST" enctype="multipart/form-data">
      <input
        type="text"
        placeholder="请输入添加学员的姓名"
        id="username"
        name="username"
      />
      <br />
      <input type="file" id="userFile" name="userFile" multiple /> <br />
      <button id="btn">提交</button>
    </form>

    <!-- 方式二：使用Ajax异步请求实现文件上传 -->
    <input
      type="text"
      placeholder="请输入添加学员的姓名"
      id="username"
      name="username"
    />
    <br />
    <input type="file" id="userFile" name="userFile" multiple /> <br />

    <!-- 进度条 -->
    <div class="progress">
      <div
        class="progress-bar"
        role="progressbar"
        aria-valuenow="60"
        aria-valuemin="0"
        aria-valuemax="100"
        style="width: 0%"
      >
        <span class="sr-only">0%</span>
      </div>
    </div>
    <br />
    <button id="btn">提交</button>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script>
    $("#btn").click(function () {
      let username = $("#username").val();
      let userFile = document.getElementById("userFile");
      var formData = new FormData();
      formData.append("username", username);
      formData.append("userFile", userFile.files[0]);
      $.ajax({
        url: "/users/user/add",
        method: "POST",
        data: formData,
        processData: false, // 不要去处理文件数据内容
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头内容
        success: function (res) {
          console.log(res);
          location.href = "/users";
        },
        xhr: function () {
          let xhr = $.ajaxSettings.xhr();
          if (xhr.upload) {
            // 上传进度查看
            xhr.upload.addEventListener("progress", function (e) {
              var percent = parseInt((e.loaded / e.total) * 100);
              $(".progress-bar").css("width", `${percent}%`);
              $(".sr-only").html(`${percent}%`);
            });
          }
          return xhr;
        },
      });
    });
  </script>

删除

// 方式一    
$("table").on("click", "button", function () {
      var id = $(this).parent().prev().find("img").attr("src");
      $.post("/users/user/del", { id }, function (tar) {
        location.reload();
        $("table").empty();
        lalal();
      });
      // console.log(id);
    });


// js中
// 删除操作
router.post('/user/del', function (req, res, next) {

  let del = path.basename(req.body.id);
  start.forEach((item, index) => {
    if (item.photo == del) {
      fs.unlinkSync(path.resolve('public/images', del))
      start.splice(index, 1)
    }
  })
  res.send(start)
  console.log(start);
})

// 方式二
    $("table").on("click", "button", function () {
      // 取出要删除的对象的图片地址
      var id = $(this).parent().prev().find("img").attr("src");
      let a = id.split("/")[2];
      console.log(a);
      // RestFul风格：语义化、参数拼接到URL中，斜杠隔开
      $.ajax({
        url: "/users/del/"+a,
        method: "DELETE",
        success: function (res) {
          // console.log(res);
          if (res == 'success') {
            location.reload();
            $("table").empty();
            lalal();
          }
        },
      });
    });


// 删除操作，方法二
// :photo作为一个变量它对应的就是前端传递的图片名称
router.delete('/del/:photo', function (req, res, next) {
  // 通过req.params.photo取到图片的路径
  console.log(req.params.photo);
  let del = req.params.photo;  // 获得带后缀的图片名
  console.log(del);
  start.forEach((item, index) => {
    if (item.photo == del) {
      start.splice(index, 1)
      fs.unlinkSync(path.resolve('public/images', del))
    }
  })
  res.send('success')
})