12abc/pages/class_manage/class_manage.js

// pages/classManagement/classManagement.js
Page({
  data: {
    index: -1,  //创建索引，知道此时选中哪个班级
    showModal1: false, // 控制弹窗显示
    showModal2: false,
    showElement: false,
    className: "", // 绑定输入框的值
     classList: [  
      { name: '班级1' ,id:1},  
      { name: '班级2' ,id:2},  
      { name: '班级3' ,id:3}
    ] 
  },

  onLoad: function(options) {  
    // 发起网络请求以获取classList数据  
    wx.request({  
      url: 'http://192.168.152.1:8090/clazz/list', // 请替换为你的实际后端接口地址  
      method: 'GET', // 根据你的后端接口要求选择请求方法  
      success: (res) => {  
        // 请求成功的回调函数  
        if (res.statusCode === 200) {  
          try {  
            // 后端返回的数据格式{ "data": [{ "name": "" }, ...] }  
            // 小程序 SDK 会自动解析 JSON 字符串为对象，所以这里直接使用 res.data 
            const responseData = {
              data:res.data
            } 
            if (Array.isArray(responseData.data)) {  
              // 如果返回的数据中包含data数组，则将其赋值给classList  
              this.setData({  
                classList: responseData.data  
              });  
            } else {  
              // 如果返回的数据格式不正确，则输出错误信息  
              console.error('返回的数据格式不正确，期望包含data数组', responseData);  
            }  
          } catch (error) {  
            // 如果解析JSON时出错，则输出错误信息  
            console.error('解析JSON数据时出错', error);  
          }  
        } else {  
          // 如果请求失败（状态码不是200），则输出错误信息  
          console.error('请求失败，状态码：', res.statusCode);  
        }  
      },  
      fail: (err) => {  
        // 请求失败的回调函数  
        console.error('请求出错', err);  
      }  
    });  
  },

  showElement: function() {  
    this.setData({  
      showElement: !this.data.showElement // 切换showElement的值  
    });  
  },

  // 显示弹窗
  showModal1: function() {
    this.setData({
      showModal1: true
    });
  },

  // 隐藏弹窗
  hideModal1: function() {
    this.setData({
      showModal1: false
    });
  },

  // 输入班级名称
  inputChange: function(e) {
    this.setData({
      className: e.detail.value
    });
  },

  // 添加班级
  addClass: function() {
    if (this.data.className.trim() === "") {
      wx.showToast({
        title: '班级名称不能为空',
        icon: 'none'
      });
      return;
    }
    //将班级名称加入后端
    wx.request({
      url: 'http://192.168.152.1:8090/clazz/save',
      method: 'POST',
      data:{
        name: this.data.className
      },
      success: function(res) {  
        // 处理后端返回的响应  
        console.log('添加成功', res.data);  
        // 根据需要更新小程序页面的数据或执行其他操作  
      },  
      fail: function(err) {  
        // 处理请求失败的情况  
        console.error('添加失败', err);  
        // 可以向用户显示错误信息或执行其他错误处理操作  
      }  
    })
    // 将班级名称添加到页面的列表中
    const newClassList = this.data.classList.concat({ name: this.data.className });
    this.setData({
      classList: newClassList, // 更新班级列表
      className: "", // 清空输入框
      showModal1: false // 隐藏弹窗
    });
    wx.showToast({
      title: '班级添加成功',
      icon: 'success'
    });
  },

  goToadd_stu:function(){
    const Name = this.data.classList[this.data.index].name
    const queryString = `className=${Name}`;
    wx.navigateTo({
      url: `/pages/add_stu/add_stu?${queryString}`,//构造包含数据的url
      success: function(res) {  
        // 跳转成功的回调  
      },  
      fail: function(err) {  
        // 跳转失败的回调  
        console.error('跳转失败', err); 
      }  
    });
  },

  goToclass_message:function(){
    const Name = this.data.classList[this.data.index].name
    const queryString = `className=${Name}`;
    wx.navigateTo({
      url: `/pages/class_message/class_message?${queryString}`,//构造包含数据的url
      success: function(res) {  
        // 跳转成功的回调  
      },  
      fail: function(err) {  
        // 跳转失败的回调  
        console.error('跳转失败', err); 
      }
    })
  },

  showAndGet: function(event) {  
    //显示元素
    this.showElement();
    // 从事件对象中获取data-index属性的值  
    const index = event.currentTarget.dataset.index;  
    // 成功获取console.log(index);
    this.setData({
      index: index
    });
  },
  
  delete_class: function(){
    //将删除班级传入后端
    //取得要删除的班级名字
    const className = this.data.classList[this.data.index];
    const nameUsingDot = `${className.name}`;
    console.log(nameUsingDot);
    // const url = `https://your-backend-server.com/api/classes/className=${className}`;
    wx.request({
      url: `http://192.168.152.1:8090/clazz/${nameUsingDot}`,  
      method: 'DELETE', // 使用DELETE方法请求删除资源  
      header: {  
        'Content-Type': 'application/json', // 根据后端要求设置请求头  
        // 如果后端需要身份验证，您可能还需要在这里添加Authorization头  
      },  
      success: function(res) {  
        // 处理后端返回的响应  
        if (res.statusCode === 200 || res.statusCode === 204) { // 200表示成功，204表示成功且无内容返回  
          console.log('班级删除成功');  
          // 根据需要执行后续操作，如更新页面上的班级列表等  
        } else {  
          console.error('班级删除失败，状态码：', res.statusCode);  
          // 可以向用户显示错误信息或执行其他错误处理操作  
        }  
      },  
      fail: function(err) {  
        // 处理请求失败的情况  
        console.error('请求失败', err);  
        // 可以向用户显示错误信息或执行其他错误处理操作  
      }  
    });

    //删除自己页面内的数据
    // const newClassList =  this.data.classList.splice(this.data.index, 1);
    this.data.classList.splice(this.data.index, 1);
    this.setData({
      classList: this.data.classList, // 更新班级列表
      className: "", // 清空输入框
      showModal1: false, // 隐藏弹窗
      showElement: false,
      index: -1
    });
    console.log(this.data.classList);
  },



  change_name:function(){
    if (this.data.className.trim() === "") {
      wx.showToast({
        title: '班级名称不能为空',
        icon: 'none'
      });
      return;
    }
    //记录原名字
    const id = this.data.classList[this.data.index].id
    //记录要修改名字*
    const name = this.data.className;
    console.log(id);
    console.log(name);
    wx.request({
      url: `http://192.168.152.1:8090/clazz/update`,
      method: 'PUT',
      data: {
        id: id,
        name: name
      },
      
      success(res) {  
        // 处理后端返回的成功响应  
        console.log('班级名字更新成功', res.data);  
      },  
      fail(err) {  
        // 处理请求失败的情况  
        console.error('更新班级名字失败', err);  
      }
    })

    // 班级名称修改页面的列表中
    this.data.classList[this.data.index].name = this.data.className;
    this.setData({
      classList: this.data.classList, // 更新班级列表
      className: "", // 清空输入框
      showModal2: false // 隐藏弹窗
    });
    wx.showToast({
      title: '班级修改成功',
      icon: 'success'
    });
  },

  showModal2: function() {
    this.setData({
      showModal2: true
    });
  },

  // 隐藏弹窗
  hideModal2: function() {
    this.setData({
      showModal2: false
    });
  },
});