有没有教做网站实例视频,新能源电动汽车哪个牌子的质量好,重庆seo推广,黄页88网官网电话文章目录 一#xff1a;系统功能#xff1a;设置成绩#xff08;添加或修改#xff09;交互逻辑#xff1a;涉及页面 Page02.vue#xff0c;ModalEdit.vue主页面Page.vue注入子页面#xff0c;使用子页面标签属性主页面对子页面做通信#xff0c;子页面ModalEdit接收参… 文章目录 一系统功能设置成绩添加或修改交互逻辑涉及页面 Page02.vueModalEdit.vue主页面Page.vue注入子页面使用子页面标签属性主页面对子页面做通信子页面ModalEdit接收参数和监听时间涉及到组件propswatch子页面ModalEdit通过props属性接收控制属性 子页面ModalEdit向父页面传递参数 二系统功能添加选课三系统功能删除选课四相关页面完整代码Page02.vueModalEdit.vueModalCourseAdd.vue 五页面运效果 一系统功能设置成绩添加或修改
交互逻辑涉及页面 Page02.vueModalEdit.vue
点击成绩修改按钮弹出 成绩修改页面展示分数并可设置分数 点击提交发送请求/api/baseStudentCourse/updata 成功则返回上一页面进行刷新数据发送请求/api/baseStudentCourse/list
主页面Page.vue注入子页面使用子页面标签属性
el-table-column label操作 width380template #default{ row, $index }el-button sizemini typewarning clickeditItem(row, $index) updateDatahandleData 成绩修改/el-buttonel-button sizemini typewarning clickaddItem(row, $index) updateDatahandleData 成绩添加/el-buttonel-button sizemini typedanger clickhandleDeleteCourse(row, $index) updateDatahandleData 删除选课/el-button/template/el-table-column/el-table
ModalEdit v-model:visibleshowModal :edit-dataeditData :show-flag showFlag refreshDatarefreshData /
ModalCourseAdd v-model:visibleshowModalAddCourse refreshDatarefreshData /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接收参数和监听时间涉及到组件propswatch
子页面ModalEdit通过props属性接收控制属性
在 Vue.js 中props 用于接收来自父组件的数据。这里定义了三个属性propsvisible、editData 和 showFlag。我将逐一分析这些属性
父页面Page当点击add或edit, 设置这个showModal.value属性为truev-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:visibleshowModalshowFlag.value 成绩修改;
};
const addItem (item, index) {editData.value item;showModal.value true;showFlag.value 成绩添加;
};watch是vue组件的一个选项这里是用来监视visible这个数据属性的变化 父页面visible属性默认是false
ModalEdit v-model:visibleshowModal :edit-dataeditData :show-flag showFlag refreshDatarefreshData /
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和scoresuccess: true,message: resp.data.message,});父页面
templateModalEdit v-model:visibleshowModal :edit-dataeditData :show-flag showFlag refreshDatarefreshData /
/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;
} ;
/scriptemits: [update:visible, submit, refreshData],methods: {handleSubmit() {// 确保发送完整对象包含id字段this.$emit(submit, { ...this.formData });},closeModal() {this.$emit(update:visible, false);},// 成绩录入/修改submit () {debuggerconsole.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和scoresuccess: true,message: resp.data.message,});} else {alert(resp.data.message);}})}}二系统功能添加选课
父组件与子组件交互和上述设置成绩交互逻辑一致 主要是多了进入子页面展示下拉列表v-for
form submit.preventhandleSubmitlabel选择学生:select v-modelformData.studentoption v-forstudent in students :keystudent.id :valuestudent.id{{ student.name }}/option/select/labellabel选择课程:select v-modelformData.courseoption v-forcourse in courses :keycourse.id :valuecourse.id{{ course.name }}/option/select/label!-- 其他需要编辑的字段也可以在这里添加 --button typesubmit clicksubmit提交/buttonbutton clickcloseModal取消/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) {debuggerthis.students res.data.data}})axios.post(/api/course/list, {}).then(resp {if (resp.data.code 200) {debuggerthis.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
templatediv classcontainerdiv classtitle-container stylemargin-top: 20px;h3 classtitle学生管理平台/h3/divdiv classuser-infodiv classbuttonsel-button sizemini classuser-button primary clickhandleAddCourse() :closeCourseModal closeModal添加选课/el-buttonemsp;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;spanb当前用户/b/span{{currentUser}}el-button sizemini classuser-button clickresetUser()注销当前用户/el-button/div
!-- h5 classuser-name当前登录用户{{ localStorageValue }}/h5--/divel-table :datatableDatael-table-column propid label编码 width100/el-table-columnel-table-column propstudentId label学号 width100/el-table-columnel-table-column propstudentName label学生 width100/el-table-columnel-table-column propcourseName label课程 width180/el-table-columnel-table-column propmajorName label专业 width100/el-table-columnel-table-column propscore label分数 width100/el-table-columnel-table-column propteacherName label教师 width100/el-table-columnel-table-column label操作 width380template #default{ row, $index }el-button sizemini typewarning clickeditItem(row, $index) updateDatahandleData 成绩修改/el-buttonel-button sizemini typewarning clickaddItem(row, $index) updateDatahandleData 成绩添加/el-buttonel-button sizemini typedanger clickhandleDeleteCourse(row, $index) updateDatahandleData 删除选课/el-button/template/el-table-column/el-tableModalEdit v-model:visibleshowModal :edit-dataeditData :show-flag showFlag refreshDatarefreshData /ModalCourseAdd v-model:visibleshowModalAddCourse refreshDatarefreshData //div
/templatescript 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的keyconst 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()/scriptModalEdit.vue
templatediv v-ifvisible classmodaldiv classmodal-content
!-- h2编辑数据/h2--h2{{ showFlag }}/h2form submit.preventhandleSubmitlabel分数:input typetext v-modelformData.score //label!-- 其他需要编辑的字段也可以在这里添加 --button typesubmit clicksubmit()提交/buttonbutton clickcloseModal取消/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 () {debuggerconsole.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和scoresuccess: true,message: resp.data.message,});} else {alert(resp.data.message);}})}}
};
/scriptstyle 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;
}
/styleModalCourseAdd.vue
templatediv v-ifvisible classmodaldiv classmodal-contenth2添加选课/h2form submit.preventhandleSubmitlabel选择学生:select v-modelformData.studentoption v-forstudent in students :keystudent.id :valuestudent.id{{ student.name }}/option/select/labellabel选择课程:select v-modelformData.courseoption v-forcourse in courses :keycourse.id :valuecourse.id{{ course.name }}/option/select/label!-- 其他需要编辑的字段也可以在这里添加 --button typesubmit clicksubmit提交/buttonbutton clickcloseModal取消/button/form/div/div
/templatescript
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) {debuggerthis.students res.data.data}})axios.post(/api/course/list, {}).then(resp {if (resp.data.code 200) {debuggerthis.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和scoresuccess: true,message: resp.data.message,});} else {alert(resp.data.message);}})}}
};
/scriptstyle 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五页面运效果
