[Vue3：组件通信）子组件props接收和watch监听，emit发送父组件 (添加修改设置成绩，添加、删除选课记录）

文章目录

  • 一：系统功能：设置成绩（添加或修改）
    • 交互逻辑：涉及页面 Page02.vue，ModalEdit.vue
    • 主页面Page.vue注入子页面，使用子页面标签属性
    • 主页面对子页面做通信，子页面ModalEdit接收参数和监听时间涉及到组件props，watch
      • 子页面ModalEdit通过props属性接收控制属性
    • 子页面ModalEdit向父页面传递参数
  • 二：系统功能：添加选课
  • 三：系统功能：删除选课
  • 四：相关页面完整代码
    • Page02.vue
    • ModalEdit.vue
    • ModalCourseAdd.vue
  • 五：页面运效果

一：系统功能：设置成绩（添加或修改）

交互逻辑：涉及页面 Page02.vue，ModalEdit.vue

点击成绩修改按钮弹出 成绩修改页面，展示分数并可设置分数
点击提交发送请求/api/baseStudentCourse/updata
成功则返回上一页面进行刷新数据发送请求/api/baseStudentCourse/list

主页面Page.vue注入子页面，使用子页面标签属性

<el-table-column label="操作" width="380">
        <template #default="{ row, $index }">
          <el-button size="mini" type="warning" @click="editItem(row, $index)"  @updateData="handleData"  >成绩修改</el-button>
          <el-button size="mini" type="warning" @click="addItem(row, $index)"  @updateData="handleData"  >成绩添加</el-button>
          <el-button size="mini" type="danger" @click="handleDeleteCourse(row, $index)"  @updateData="handleData"  >删除选课</el-button>
        </template>
      </el-table-column>
    </el-table>
<ModalEdit v-model:visible="showModal" :edit-data="editData" :show-flag = "showFlag" @refreshData="refreshData" />
<ModalCourseAdd v-model:visible="showModalAddCourse" @refreshData="refreshData" />

<script setup>
import { useRouter } from 'vue-router';
import {onMounted, ref} from 'vue';
import axios from "axios";
import ModalEdit from "./ModalEdit.vue";
import ModalCourseAdd from "./ModalCourseAdd.vue";
const showModal = ref(false);
const showModalAddCourse = ref(false);
const editData = ref(null);
const showFlag = ref(String);

主页面对子页面做通信，子页面ModalEdit接收参数和监听时间涉及到组件props，watch

子页面ModalEdit通过props属性接收控制属性

在 Vue.js 中，props 用于接收来自父组件的数据。这里定义了三个属性（props）：visible、editData 和 showFlag。我将逐一分析这些属性

父页面Page当点击add或edit, 设置这个showModal.value属性为true（v-model:visible=“showModal”），这里showModal，并给editData赋值
在 Vue 3 中，v-model 可以绑定到组件的任意 prop 上，这里它绑定了 showModal 数据属性，这意味着 showModal 的值将与 ModalEdit 组件内部的 visible 状态保持同步。当 ModalEdit 组件的 visible 状态改变时，它会更新父组件的 showModal 数据属性，反之亦然。
:show-flag=“showFlag”: 类似地，这也是一个动态 prop 绑定，将父组件中的 showFlag 数据传递给 ModalEdit 组件。showFlag 可能用于控制模态框中某些元素的显示或隐藏。

const editItem = (item, index) => {
  editData.value = item;
  showModal.value = true; //  v-model:visible="showModal"
  showFlag.value = '成绩修改';
};
const addItem = (item, index) => {
  editData.value = item;
  showModal.value = true;
  showFlag.value = '成绩添加';
};

watch是vue组件的一个选项，这里是用来监视visible这个数据属性的变化；
父页面visible属性默认是false

<ModalEdit v-model:visible="showModal" :edit-data="editData" :show-flag = "showFlag" @refreshData="refreshData" />
const showModal = ref(false);

父页面点击操作visible设置true，子页面同时watch监听visible发生变化，editData展示和渲染默认成绩数据，visible 为true展示页面（默认隐藏）

watch: {
    visible() {
      this.formData.id = this.editData.id; // 初始化id字段
      this.formData.score = this.editData.score;
      // this.formData.score = this.editData.score;
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    editData: {
      type: Object,
      default: () => ({})
    },
    showFlag: {
      type: Object,
      default: () => ({})
    }
  },

子页面ModalEdit向父页面传递参数

这部分定义了该组件可能向父组件发出的三个自定义事件：
update:visible：通常用于更新一个名为 visible 的 prop 的值，这是 Vue 的 .sync 修饰符常用的模式。
submit：可能是当表单数据被提交时触发的事件。
refreshData：可能是当数据更新后，通知父组件刷新或重新获取数据的事件。

这里主要用了refreshData事件：当子页面更新成功后通知父组件事件函数(重新请求刷新数据)
ModalEdit
子页面：

this.$emit('refreshData', { // 假设服务器返回了更新后的数据，或者你可以传递更新后的id和score
            success: true,
            message: resp.data.message,
 });

父页面：

<template>
		<ModalEdit v-model:visible="showModal" :edit-data="editData" :show-flag = "showFlag" @refreshData="refreshData" />
</template>
<script setup>
// 成绩修改
const refreshData = () => {
  axios.post("/api/baseStudentCourse/list", {
    id: localStorage.getItem('id')}).then(resp => {
    if (resp.data.code === 200) {
      tableData.value = resp.data.data
    } else {
      alert(resp.data.message);
    }
  })
  showModal.value = false;
  showModalAddCourse.value = false;
} ;
</script>

  emits: ['update:visible', 'submit', 'refreshData'],
  methods: {
    handleSubmit() {
      // 确保发送完整对象，包含id字段
      this.$emit('submit', { ...this.formData });
    },
    closeModal() {
      this.$emit('update:visible', false);
    },
    // 成绩录入/修改
    submit () {
      debugger
      console.log(this.formData)
      // 编辑逻辑
      const response = axios.post("/api/baseStudentCourse/update", {
        id: this.formData.id,
        score: this.formData.score
      }).then(resp => {
        if (resp.data.code === 200) {
          alert(resp.data.message);
          // 发送一个事件给父组件，表示数据已更新
          this.$emit('refreshData', { // 假设服务器返回了更新后的数据，或者你可以传递更新后的id和score
            success: true,
            message: resp.data.message,
          });
        } else {
          alert(resp.data.message);
        }
      })
    }
  }

二：系统功能：添加选课

父组件与子组件交互和上述设置成绩交互逻辑一致，
主要是多了进入子页面展示下拉列表：v-for，

<form @submit.prevent="handleSubmit">
   <label>
     选择学生:
     <select v-model="formData.student">
       <option v-for="student in students" :key="student.id" :value="student.id">
         {{ student.name }}
       </option>
     </select>
   </label>
   <label>
     选择课程:
     <select v-model="formData.course">
       <option v-for="course in courses" :key="course.id" :value="course.id">
         {{ course.name }}
       </option>
     </select>
   </label>
   <!-- 其他需要编辑的字段也可以在这里添加 -->
   <button type="submit" @click="submit">提交</button>
   <button @click="closeModal">取消</button>
 </form>
<script>
import axios from "axios";

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    showFlag: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['update:visible', 'submit', 'refreshData'],
  data() {
    return {
      formData: {
        id: null, // 添加id字段
        score: null
      }
    };
  },
  created () {
    axios.post("/api/student/list", {}).then(res => {
      if (res.data.code === 200) {
        debugger
        this.students = res.data.data
      }
    })
    axios.post("/api/course/list", {}).then(resp => {
      if (resp.data.code === 200) {
        debugger
        this.courses = resp.data.data
      }
    })
    console.log("准备输出课程和学生信息")
    console.log(this.courses)
    console.log(this.students)
  },
  methods: {
    closeModal() {
      this.$emit('update:visible', false);
    },
    // 成绩录入/修改
    submit() {
      console.log(this.formData)
      // 编辑逻辑
      axios.post("/api/baseStudentCourse/save", {
        studentId: this.formData.student,
        courseId: this.formData.course,
        teacherId: localStorage.getItem('id')
      }).then(resp => {

三：系统功能：删除选课

直接删除当前行数据
// 删除选课

const handleDeleteCourse = (row, index) => {
  console.log(row)
  axios.post("/api/baseStudentCourse/delete", {
    id: row.id
  }).then(resp => {
    if (resp.data.code === 200) {
      alert(resp.data.message);
      axios.post("/api/baseStudentCourse/list", {
        id: localStorage.getItem('id')}).then(resp => {
        if (resp.data.code === 200) {
          tableData.value = resp.data.data
        } else {
          alert(resp.data.message);
        }
      })
    } else {
      alert(resp.data.message);
    }
  })
};

四：相关页面完整代码

Page02.vue

<template>
  <div class="container">
    <div class="title-container" style="margin-top: 20px;">
      <h3 class="title">学生管理平台</h3>
    </div>
    <div class="user-info">
      <div class="buttons">
        <el-button size="mini" class="user-button primary" @click="handleAddCourse()" :closeCourseModal = "closeModal">添加选课</el-button>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        <span><b>当前用户：</b></span>{{currentUser}}
        <el-button size="mini" class="user-button" @click="resetUser()">注销当前用户</el-button>
      </div>
<!--      <h5 class="user-name">当前登录用户：{{ localStorageValue }}</h5>-->
    </div>
    <el-table :data="tableData">
      <el-table-column prop="id" label="编码" width="100"></el-table-column>
      <el-table-column prop="studentId" label="学号" width="100"></el-table-column>
      <el-table-column prop="studentName" label="学生" width="100"></el-table-column>
      <el-table-column prop="courseName" label="课程" width="180"></el-table-column>
      <el-table-column prop="majorName" label="专业" width="100"></el-table-column>
      <el-table-column prop="score" label="分数" width="100"></el-table-column>
      <el-table-column prop="teacherName" label="教师" width="100"></el-table-column>
      <el-table-column label="操作" width="380">
        <template #default="{ row, $index }">
          <el-button size="mini" type="warning" @click="editItem(row, $index)"  @updateData="handleData"  >成绩修改</el-button>
          <el-button size="mini" type="warning" @click="addItem(row, $index)"  @updateData="handleData"  >成绩添加</el-button>
          <el-button size="mini" type="danger" @click="handleDeleteCourse(row, $index)"  @updateData="handleData"  >删除选课</el-button>
        </template>
      </el-table-column>
    </el-table>
    <ModalEdit v-model:visible="showModal" :edit-data="editData" :show-flag = "showFlag" @refreshData="refreshData" />
    <ModalCourseAdd v-model:visible="showModalAddCourse" @refreshData="refreshData" />
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import {onMounted, ref} from 'vue';
import axios from "axios";
import ModalEdit from "./ModalEdit.vue";
import ModalCourseAdd from "./ModalCourseAdd.vue";
const tableData = ref([]); // 使用ref来创建响应式数据
onMounted(async () => {
    const response = await axios.post("/api/baseStudentCourse/list", {
      id: localStorage.getItem('id')});
    tableData.value = response.data.data; // 将请求结果赋值给响应式数据
});
const currentUser = localStorage.getItem("username");
const showModal = ref(false);
const showModalAddCourse = ref(false);
const editData = ref(null);
const showFlag = ref(String);
const editItem = (item, index) => {
  editData.value = item;
  showModal.value = true;
  showFlag.value = '成绩修改';
};

const addItem = (item, index) => {
  editData.value = item;
  showModal.value = true;
  showFlag.value = '成绩添加';
};

const closeModal = () => {
  showModalAddCourse.value = false
};


const handleData = () => {
  console.log("Page02 handleData")
  const response = axios.post("/api/baseStudentCourse/list", {
    id: localStorage.getItem('id')});
  tableData.value = response.data.data; // 将请求结果赋值给响应式数据;
  console.log(response)
};

const router = useRouter();
const resetUser = () => {
  // 编辑逻辑
  const key = 'id'; // 替换为你需要获取的localStorage的key
  const value = localStorage.getItem(key);
  // 如果需要解析JSON，可以在这里进行解析
  try {
    axios.post("/api/base/reset", {
      id: localStorage.getItem('id')
    }).then(resp => {
      if (resp.data.code === 200) {
        alert(resp.data.message);
        localStorage.removeItem(localStorage.getItem('id'))
        router.push('/')
      } else {
        alert(resp.data.message);
      }
    })
  } catch (error) {
    console.error(error);
    // 处理错误
  }
};

// 添加选课
const handleAddCourse = () => {
  debugger
  // editData.value = item;
  showModalAddCourse.value = true;
};

// 删除选课
const handleDeleteCourse = (row, index) => {
  console.log(row)
  axios.post("/api/baseStudentCourse/delete", {
    id: row.id
  }).then(resp => {
    if (resp.data.code === 200) {
      alert(resp.data.message);
      axios.post("/api/baseStudentCourse/list", {
        id: localStorage.getItem('id')}).then(resp => {
        if (resp.data.code === 200) {
          tableData.value = resp.data.data
        } else {
          alert(resp.data.message);
        }
      })
    } else {
      alert(resp.data.message);
    }
  })
};

const updateList = (updatedItem) => {
  // 假设使用index来更新list，但这种方式不推荐，如果数据顺序改变会有问题
  const index = tableData.value.findIndex(item => item.id === updatedItem.id);
  tableData.value.splice(index, 1, updatedItem);
  showModal.value = false;
};

// 成绩修改
const refreshData = () => {
  axios.post("/api/baseStudentCourse/list", {
    id: localStorage.getItem('id')}).then(resp => {
    if (resp.data.code === 200) {
      tableData.value = resp.data.data
    } else {
      alert(resp.data.message);
    }
  })
  showModal.value = false;
  showModalAddCourse.value = false;
} ;
  // console.log(""")

</script>

ModalEdit.vue

<template>
  <div v-if="visible" class="modal">
    <div class="modal-content">
<!--      <h2>编辑数据</h2>-->
      <h2>{{ showFlag }}</h2>
      <form @submit.prevent="handleSubmit">
        <label>
          分数:
          <input type="text" v-model="formData.score" />
        </label>
        <!-- 其他需要编辑的字段也可以在这里添加 -->
        <button type="submit" @click="submit()">提交</button>
        <button @click="closeModal">取消</button>
      </form>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  watch: {
    visible() {
      this.formData.id = this.editData.id; // 初始化id字段
      this.formData.score = this.editData.score;
      // this.formData.score = this.editData.score;
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    editData: {
      type: Object,
      default: () => ({})
    },
    showFlag: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['update:visible', 'submit', 'refreshData'],
  data() {
    return {
      formData: {
        id: null, // 添加id字段
        score: null
      }
    };
  },

  methods: {
    handleSubmit() {
      // 确保发送完整对象，包含id字段
      this.$emit('submit', { ...this.formData });
    },
    closeModal() {
      this.$emit('update:visible', false);
    },
    // 成绩录入/修改
    submit () {
      debugger
      console.log(this.formData)
      // 编辑逻辑
      const response = axios.post("/api/baseStudentCourse/update", {
        id: this.formData.id,
        score: this.formData.score
      }).then(resp => {
        if (resp.data.code === 200) {
          alert(resp.data.message);
          // 发送一个事件给父组件，表示数据已更新
          this.$emit('refreshData', { // 假设服务器返回了更新后的数据，或者你可以传递更新后的id和score
            success: true,
            message: resp.data.message,
          });
        } else {
          alert(resp.data.message);
        }
      })
    }
  }
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}
</style>

ModalCourseAdd.vue

<template>
  <div v-if="visible" class="modal">
    <div class="modal-content">
      <h2>添加选课</h2>
      <form @submit.prevent="handleSubmit">
        <label>
          选择学生:
          <select v-model="formData.student">
            <option v-for="student in students" :key="student.id" :value="student.id">
              {{ student.name }}
            </option>
          </select>
        </label>
        <label>
          选择课程:
          <select v-model="formData.course">
            <option v-for="course in courses" :key="course.id" :value="course.id">
              {{ course.name }}
            </option>
          </select>
        </label>
        <!-- 其他需要编辑的字段也可以在这里添加 -->
        <button type="submit" @click="submit">提交</button>
        <button @click="closeModal">取消</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    showFlag: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['update:visible', 'submit', 'refreshData'],
  data() {
    return {
      formData: {
        id: null, // 添加id字段
        score: null
      }
    };
  },
  created () {
    axios.post("/api/student/list", {}).then(res => {
      if (res.data.code === 200) {
        debugger
        this.students = res.data.data
      }
    })
    axios.post("/api/course/list", {}).then(resp => {
      if (resp.data.code === 200) {
        debugger
        this.courses = resp.data.data
      }
    })
    console.log("准备输出课程和学生信息")
    console.log(this.courses)
    console.log(this.students)
  },
  methods: {
    closeModal() {
      this.$emit('update:visible', false);
    },
    // 成绩录入/修改
    submit() {
      console.log(this.formData)
      // 编辑逻辑
      axios.post("/api/baseStudentCourse/save", {
        studentId: this.formData.student,
        courseId: this.formData.course,
        teacherId: localStorage.getItem('id')
      }).then(resp => {
        if (resp.data.code === 200) {
          alert(resp.data.message);
          // 发送一个事件给父组件，表示数据已更新
          this.$emit('refreshData', { // 假设服务器返回了更新后的数据，或者你可以传递更新后的id和score
            success: true,
            message: resp.data.message,
          });
        } else {
          alert(resp.data.message);
        }
      })
    }
  }
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}
</style>

五：页面运效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/697633.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Nginx+Tomcat负载均衡，动静分离群集

Nginx+Tomcat负载均衡，动静分离群集

Nginx反向代理原理 Nginx 反向代理&#xff1a;将Nginx接收到的请求转发给其它应用服务器处理 Nginx 负载均衡&#xff1a;通过反向代理实现&#xff0c;还可以将nginx接收到的请求转发给多个后端应用服务器处理 Nginx 动静分离&#xff1a;静态页面请求&#xff0c;由nginx…
阅读更多...
将AIRNet集成到yolov8中，实现端到端训练与推理

将AIRNet集成到yolov8中，实现端到端训练与推理

AIRNet是一个图像修复网络，支持对图像进行去雾、去雨、去噪声的修复。其基于对比的退化编码器（CBDE），将各种退化类型统一到同一嵌入空间；然后，基于退化引导恢复网络（DGRN）将嵌入空间修复为目标图像。可以将AIRNet的输出与yolov8进行端到端集成，实现部署上的简化。 本博…
阅读更多...
vue3-使用富文本编辑器-wangEditor-文章发表1

vue3-使用富文本编辑器-wangEditor-文章发表1

最近在搞项目:我们组内几位成员正在搞一个网站搭建,以后更新会比较缓慢 引言:如果要网站要用的富文本编辑器的话,这边推荐用wangEditor 官网地址传送 : wangEditorhttps://www.wangeditor.com/ 我现在还在扩展我的写文章用的富文本编辑器 现在我将简单介绍一下其基本使用方…
阅读更多...
IP协议(二)

IP协议(二)

TOC 一: 网段划分 同一个局域网的主机,要按一定的规则分配IP地址 把一个IP地址分为两部分: 前半部分 ,网络号 >用来表示局域网后半部分,主机号 > 用来区分同一个局域网中的不同主机 同一个局域网内部&#xff0c;主机之间的IP &#xff0c; 网络号相同&#xff0c;主…
阅读更多...
对抗攻击论文阅读—AAAI2022—CMUA-Watermark

对抗攻击论文阅读—AAAI2022—CMUA-Watermark

文章目录 CMUA-Watermark: A Cross-Model Universal Adversarial Watermark for Combating Deepfakes背景1、什么是对抗攻击1.1 主动防御与被动防御 2、整体思路3、方法3.1 整体流程3.2 如何破坏单个面部修改模型 G G G论文中代码 3.3 对抗扰动融合3.4 基于TPE的自动步长调整 4…
阅读更多...
go语言后端开发学习(三)——基于validator包实现接口校验

go语言后端开发学习(三)——基于validator包实现接口校验

前言 在我们开发模块的时候,有一个问题是我们必须要去考虑的&#xff0c;它就是如何进行入参校验&#xff0c;在gin框架的博客中我就介绍过一些常见的参数校验&#xff0c;大家可以参考gin框架学习笔记(四) ——参数绑定与参数验证&#xff0c;而这个其实也不是能够完全应对我…
阅读更多...
智慧交通的神经中枢：利用ARMxy进行实时交通流数据采集

智慧交通的神经中枢：利用ARMxy进行实时交通流数据采集

气候变化和水资源日益紧张&#xff0c;精准农业成为了提高农业生产效率、节约资源的关键。在这一变革中&#xff0c;ARMxy工业计算机扮演了核心角色&#xff0c;特别是在智能灌溉系统的实施中。 背景介绍&#xff1a; 某大型农场面临着灌溉效率低、水资源浪费严重的问题。传统的…
阅读更多...
怎样快速获取Vmware VCP 证书，线上考试，voucher报名优惠

怎样快速获取Vmware VCP 证书，线上考试，voucher报名优惠

之前考一个VCP证书&#xff0c;要花大一万的费用&#xff0c;可贵了&#xff0c;考试费不贵&#xff0c;贵就贵在培训费&#xff0c;要拿到证书&#xff0c;必须交培训费&#xff0c;即使vmware你玩的很溜&#xff0c;不需要再培训了&#xff0c;但是一笔贵到肉疼的培训费你得拿…
阅读更多...
(BAT向）Java岗常问高频面试汇总：MyBatis 微服务 Spring 分布式 MySQL等(1)

(BAT向）Java岗常问高频面试汇总：MyBatis 微服务 Spring 分布式 MySQL等(1)

6.开启 Spring Boot 特性有哪几种方式&#xff1f; 7.Spring Boot 需要独立的容器运行吗&#xff1f; 8.运行 Spring Boot 有哪几种方式&#xff1f; 9.Spring Boot 自动配置原理是什么&#xff1f; 10.Spring Boot 2.X 有什么新特性&#xff1f;与 1.X 有什么区别&#xff1f;…
阅读更多...
LeetCode74.搜索二维矩阵

LeetCode74.搜索二维矩阵

各位客官们&#xff0c;大家好&#xff0c;今天我将给大家讲一个关于二维搜索矩阵的简单方法&#xff0c;大家如果觉得好的话不妨给个免费点赞吧^ _ ^. 题目要求&#xff0c;如图所示: 此题我用的是堆的形式直接把二维数组转为一级数组&#xff0c;然后再用二分查找的方式&am…
阅读更多...
牛客热题：不同的路径数目(一)

牛客热题：不同的路径数目(一)

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;力扣刷题日记 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 文章目录 牛客热题&#xff1a;不同的路径数目(一)题目链接方法…
阅读更多...
R语言统计分析——图形的简单示例

R语言统计分析——图形的简单示例

参考资料&#xff1a;R语言实战【第2版】 1、示例一 # 绑定数据框mtcars attach(mtcars)# 打开一个图形窗口并生成一个散点图plot(wt,mpg)# 添加一条最优拟合曲线abline(lm(mpg~wt))# 添加标题title("Regression of MPG on weight") # 解除数据框绑定 detach(mtcar…
阅读更多...
OpenAI 宕机事件：GPT 停摆的影响与应对

OpenAI 宕机事件：GPT 停摆的影响与应对

引言 2024年6月4日&#xff0c;OpenAI 的 GPT 模型发生了一次全球性的宕机&#xff0c;持续时间长达8小时。此次宕机不仅影响了OpenAI自家的服务&#xff0c;还导致大量用户涌向竞争对手平台&#xff0c;如Claude和Gemini&#xff0c;结果也导致这些平台出现故障。这次事件的广…
阅读更多...
VMware Workstation Pro的最新下载地址

VMware Workstation Pro的最新下载地址

前言 VMware被Broadcom收购后现在的下载方式也改变了&#xff0c;Workstation Pro 和 Fusion Pro 产品现在起将免费供个人用户使用下载方式 首先先把下载地址打开 https://support.broadcom.com/group/ecx/productdownloads?subfamilyVMwareWorkstationPro 打开链接&#xff…
阅读更多...
开源VisualFreebasic中文版,vb7 IDE,VB6升级64位跨平台开发安卓APP,Linux程序

开源VisualFreebasic中文版,vb7 IDE,VB6升级64位跨平台开发安卓APP,Linux程序

吴涛老矣&#xff0c;社区苦无64位易语言&#xff0c;用注入DLL增强菜单&#xff0c;做成VS一样的界面 终归是治标不治本&#xff0c;一来会报毒&#xff0c;二来闭源20年没更新了 开源的VB7&#xff0c;欢迎易语言的铁粉进群&#xff1a;1032313876 【Freebasic编程语言】编绎…
阅读更多...
cve_2017_12635-CouchDB垂直权限绕过

cve_2017_12635-CouchDB垂直权限绕过

1.采用参考 https://www.cnblogs.com/mlxwl/p/16577781.html vulfocus&#xff1a;Vulfocus 漏洞威胁分析平台 2.产生原因 在2017年11月15日&#xff0c;CVE-2017-12635和CVE-2017-12636披露&#xff0c;CVE-2017-12635是由于Erlang和JavaScript对JSON解析方式的不同&#…
阅读更多...
SOA的设计模式_3.微服务模式

SOA的设计模式_3.微服务模式

SOA的架构中&#xff0c;复杂的ESB企业服务总线依然处于非常重要的位置&#xff0c;整个系统的架构并没有实现完全的组件化以及面向服务&#xff0c;它的学习和使用门槛依然偏高。而微服务不再强调传统SOA架构里面比较重的ESB企业服务总线&#xff0c;同时SOA的思想进入到单个业…
阅读更多...
Docker | 入门：原理探究

Docker | 入门：原理探究

Docker | 入门&#xff1a;原理探究 Run 的运行流程 Docker 底层原理 Docker 是怎么工作的&#xff1f; Docker 是一个 Client-Server 结构的系统&#xff0c;Docker 的守护进程运行在主机上&#xff0c;通过 Socket 从客户端访问。DockerServer 接受到 Docker-Client 的指令…
阅读更多...
数据仓库技术及应用（Hive索引）

数据仓库技术及应用（Hive索引）

1.概述 将数据库表中的一列或者多列的值进行排序存储&#xff1b;用索引表记录字段的索引和偏移量&#xff0c;方便查询索引列时能快速定位到对应的行记录&#xff1b;索引类似于图书的目录&#xff0c;可以根据目录页码快速定位。 2.执行流程 &#xff08;1&#xff09;不使…
阅读更多...
数据挖掘丨轻松应用RapidMiner机器学习内置数据分析案例模板详解（上篇）

数据挖掘丨轻松应用RapidMiner机器学习内置数据分析案例模板详解（上篇）

RapidMiner 案例模板 RapidMiner 机器学习平台提供了一个可视化的操作界面&#xff0c;允许用户通过拖放的方式构建数据分析流程。 RapidMiner目前内置了 13 种案例模板&#xff0c;这些模板是预定义的数据分析流程&#xff0c;可以帮助用户快速启动和执行常见的数据分析任务。…
阅读更多...
最新文章

Copyright @ 2022~2023