案例:图书管理页的增删改查,form-serialize插件的下载和引入,boostrape模态框的使用

原创

已于 2025-07-27 20:00:20 修改 · 62 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #boostrape #axios #表单

于 2022-11-23 22:49:23 首次发布

文章目录

一.前置准备

1.效果预览

在这里插入图片描述

2.功能要求

使用HTML+CSS完成页面布局
使用axios调用api接口获取书籍列表,动态渲染到页面
使用Bootstrap模态框,并点击"添加"或"编辑"控制模态框的显隐
使用form-serialize插件获取当前表单数据
实现书籍列表的添加,删除和编辑功能

3.接口文档

https://apifox.cn/apidoc/docs-site/1937884/

4.下载和引入form-serialize插件

该插件的作用是获取当前表单的数据,省略自己获取的过程
下载或直接粘贴form-serialize.js

//form-serialize.js

  var k_r_submitter = /^(?:submit|button|image|reset|file)$/i;
  var k_r_success_contrls = /^(?:input|select|textarea|keygen)/i;
  var brackets = /(\[[^\[\]]*\])/g;
  function serialize(form, options) {
   
   
    if (typeof options != 'object') {
   
   
      options = {
   
    hash: !!options };
    }
    else if (options.hash === undefined) {
   
   
      options.hash = true;
    }
    var result = (options.hash) ? {
   
   } : '';
    var serializer = options.serializer || ((options.hash) ? hash_serializer : str_serialize);
    var elements = form && form.elements ? form.elements : [];
    var radio_store = Object.create(null);
    for (var i = 0; i < elements.length; ++i) {
   
   
      var element = elements[i];
      if ((!options.disabled && element.disabled) || !element.name) {
   
   
        continue;
      }
      if (!k_r_success_contrls.test(element.nodeName) ||
        k_r_submitter.test(element.type)) {
   
   
        continue;
      }
      var key = element.name;
      var val = element.value;
      if ((element.type === 'checkbox' || element.type === 'radio') && !element.checked) {
   
   
        val = undefined;
      }
      if (options.empty) {
   
   
        if (element.type === 'checkbox' && !element.checked) {
   
   
          val = '';
        }
        if (element.type === 'radio') {
   
   
          if (!radio_store[element.name] && !element.checked) {
   
   
            radio_store[element.name] = false;
          }
          else if (element.checked) {
   
   
            radio_store[element.name] = true;
          }
        }
        if (!val && element.type == 'radio') {
   
   
          continue;
        }
      }
      else {
   
   
        if (!val) {
   
   
          continue;
        }
      }
      if (element.type === 'select-multiple') {
   
   
        val = [];
        var selectOptions = element.options;
        var isSelectedOptions = false;
        for (var j = 0; j < selectOptions.length; ++j) {
   
   
          var option = selectOptions[j];
          var allowedEmpty = options.empty && !option.value;
          var hasValue = (option.value || allowedEmpty);
          if (option.selected && hasValue) {
   
   
            isSelectedOptions = true;
            if (options.hash && key.slice(key.length - 2) !== '[]') {
   
   
              result = serializer(result, key + '[]', option.value);
            }
            else {
   
   
              result = serializer(result, key, option.value);
            }
          }
        }
        if (!isSelectedOptions && options.empty) {
   
   
          result = serializer(result, key, '');
        }
        continue;
      }
      result = serializer(result, key, val);
    }
    if (options.empty) {
   
   
      for (var key in radio_store) {
   
   
        if (!radio_store[key]) {
   
   
          result = serializer(result, key, '');
        }
      }
    }
    return result;
  }
  function parse_keys(string) {
   
   
    var keys = [];
    var prefix