jquery控件开发教程 jquery开发项目

转载

数据科学家 2023-08-15 14:20:53

文章标签 jquery控件开发教程 jquery 模态框数据封装 文章分类 jQuery 前端开发

项目介绍

该项目是校园资讯管理系统，前后端分离，本文只针对前端进行阐述，前端使用swagger接口与后端交互数据即可，主要实现的功能无非是对数据的增删改查。

配置环境

部署数据库
连接服务器
上传jar包到服务器上
查看swagger接口文档

搭建项目框架

项目框架比较繁琐，尚不说明，重点讨论子页面怎么写

封装js文件

本项目中我们自己写了两个js文件

http.js
这一文件主要是对ajax进行了封装，封装成get方法，postForm还有postJSON方法，在我们需要与后台交互数据时，调用对应的方法即可，就不用了每次都写ajax了。例如：

let myAjax = {
  get(url, params) {
    return new Promise((resovle, reject) => {
      $.ajax({
        url: baseURL + url,
        method: 'get',
        data: qs.stringify(params),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf8',
          'Authorization': sessionStorage.getItem('token')
        },
        success(res) {
          resovle(res)
        },
        error(err) {
          reject(err);
        }
      })
    });
  },
 }

api.js
这一文件是将swagger上的接口路径进行封装，提前写好就不用了每一次都去swagger文档中复制接口路径了，例如：

let api = {
    CATEGORY_FINDALL: '/category/findAll',
    CATEGORY_SAVEORUPDATE: '/category/saveOrUpdate',
    CATEGORY_DELETEBYID: '/category/deleteById',
    CATEGORY_BATCHDELETE: '/category/batchDelete',
    BASEUSER_PAGEQUERY: '/baseUser/pageQuery'
};

写子页面（重点）

思路

把页面基本元素布置好---->(查)将信息显示到页面上---->(删)删除信息---->(改)(增)添加和修改信息【共用一个模态框】

过程

html+css

这一部分没什么好说的，内容和样式按需求来设计

数据模型

// 数据模型
  var categoryDataModel = {
    // 所有类别数据
    categoryData: [],
    // 当前修改的对象
    currentCategory: {},
    // 模态框的标题
    dialogTitle: '新增分类信息',
  };

我们把接收到的数据存放到我们写好的数据模型中，在下方调用的时候，方便编写代码，能让思路清晰一点

categoryData存放后台发过来的所有数据，主要是用在findAll()方法中
currentCategory存放的是当前要修改的对象
dialogTitle 这一个存放的是模态框的标题，这里的内容放到模态框中进行阐述

封装模态框

// 封装 处理模态框的标题，追加option，设置表单控件内容，显示模态框
  function changeDialogTitle() {
    $('.dialog-title').text(categoryDataModel.dialogTitle);
    $('[name=parentId]').empty();
    $('[name=parentId]').append($(` <option value="">请选择</option>`)); //开单引号
    // 过滤一级栏目作为父栏目
    let result = categoryDataModel.categoryData.filter(item => !item.parentId);
    result.forEach(item => {
      $('[name=parentId]').append($(`<option value="${item.id}">${item.name}</option>`));
    });
    $('[name=name]').val(categoryDataModel.currentCategory.name);
    $('[name=parentId]').val(categoryDataModel.currentCategory.parentId);
    $('[name=no]').val(categoryDataModel.currentCategory.no);
    $('[name=description]').val(categoryDataModel.currentCategory.description);
    // 显示模态框
    $('.dialog').fadeIn();
  }

模态框是一个挺重要的一个部分，它涉及到了添加和修改这两个功能，当然我们可以让新增有新增的模态框，修改有修改的模态框，但这样代码量特别多，为了减少代码量，提高复用性，我们可以封装一个新增和修改都可以使用的模态框。新增模态框和修改模态框的区别在于模态框的标题不同，input中显示的内容不同，还有提交给后台数据的不同，我们来一一谈论一下

一、标题不同，让用户区分所使用的模态框是哪一种功能的，如果后台修改接口和新增接口是分开的，那么我们就可以用if语句判断模态框标题是新增还是修改，以此调用不同的接口实现不同的功能

二、后台提交的数据不同，如果新增和修改的功能是同一个接口，那我们要判断模态框提交的数据中是否有id值，有就更改该id的数据，没有就是新增一条数据。在这里，我们使用到了数据模型当中的currentCategory来存对象值，点击新增时我们会清空currentCategory，传数据时id为空，后台判断为新增；点击修改时，将改对象值赋给currentCategory，带有id值，传给后台后判断为修改。以此来实现新增和修改两个不同的功能

三、input中的内容不同，如上一条所说，在点击新增时清空input，即currentCategory中的数据，在点击修改时，将改对象值显示在input当中，并把值赋给currentCategory。

写一个FindAll()方法【查，刷新页面】
findAll()其实是调用查询接口让后台把所有数据传上来，但为了方面我们在增删改后刷新页面,显示新的数据，我们把清除数据（防止数据累加）还有显示数据写到一个方法中，那他实现的功能就是获取页面初始信息还有刷新页面，在增删改中调用findAll()方法即可。

// 获取全部类别信息
  findAll();

  function findAll() {
    myAjax.get(api.CATEGORY_FINDALL, null).then((res) => {
      // console.log(res);
      // 清空节点
      $('.categoryManage tbody').empty();
      // 将数据设置到数据模型中
      categoryDataModel.categoryData = res.data;
      let arr = res.data || [];
      if (arr.length > 0) {
        arr.forEach((item, index) => {
          $('.categoryManage tbody').append($(`
        <tr>
          <td>${index + 1}</td>
          <td>${item.name}</td>
          <td>${item.no}</td>
          <td>${item.parentId || '--'}</td>
          <td>${item.description || '--'}</td>
          <td>
            <i data-item='${JSON.stringify(item)}' class="fa fa-edit" title="编辑"></i>
            <i data-id="${item.id}" class="fa fa-trash-o" title="删除"></i>
          </td>
        </tr>
        `));
        })
      }
    })
  }