| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> 第七天(学员管理-查询、修改、增加、删除) -> 正文阅读 |
|
[JavaScript知识库]第七天(学员管理-查询、修改、增加、删除) |
13.3.2 ?授课教师的选择 (1)将 teacher\index.vue 导入 student\index.vue 作为子组件使用 (2)使用 dialog 对话框组件,包裹 Teacher 组件 (3)在 student\index.vue 组件的 data 选项中定义 dialogTeacherVisible 控制对话框 (4)修改 授课教师 输入框 readonly 只读框 @click.native 点击事件。 (5)教师页面在弹出时候很多是我们不需要的, 进行优化, 父组件向子组件传递数据:通过 props 声明接收 向教师 Teacher 子组件传入一个参数 isDialog , 如果是弹出窗口, 则弹出页面隐藏一些功能. 在 student\index.vue 上的 <teacher> 组件标签上绑定属性 :isDialog="true" 在 teacher\index.vue 中通过 props 选项 声明接收 isDialog 搜索只要 教师姓名 ;列表只要 序号、工号,教师姓名、手机号; 分页只要 向前、向后和页码 采用 v-if=“!isDialog” 来隐藏 搜索隐藏: 列表隐藏: 分页修改: (6)当点击列表中某一行教师,即选中;选中的那个教师数据传回到父组件 学员管理 中 。 在 teacher\index.vue 组件的 el-table 表格组件上配置 highlight-current-row 属性可实现单选; 通过 current-change 事件管理选中时触发的事件函数 clickCurrentChange,并传入 currentRow , oldCurrentRow 参数 注意: 是 clickCurrentChange 函数, 不能取 handleCurrentChange 函数名,因为在分页查询有定义这个函 数名 (7)在 teacher\index.vue 组件定义 clickCurrentChange 函数,向父组件传递点击数据。 子组件向父组件传递数据:通过 $emit 触发事件的方式 (8)在父组件 student\index.vue 的组件元素 teacher上绑定自定义事件 option-teacher (9)在父组件 student\index.vue 中添加 option-teacherr 事件触发的函数 optionTeacher 进行回显数据 13.3.3? 重置功能 在 条件查询区域添加 一个 重置 按钮, 直接在上面调用重置方法, 注意 'searchForm' 如果条件输入框有时输入不了内容, 和授课教师无法重置, 在 search 对象中明确属性名 如果还不行, 检查下在 el-form-item 标签属性 prop 上, 有没指定指定了字段名, 重置才会生效 14? 学员管理-新增 14.1? 需求分析 (1)点击 新增 按钮后,对话框形式弹出新增窗口 (2)输入学员信息后,点击 确定 提交表单数据 14.2? 新增窗口实现 (1)在 src\views\student\index.vue 中分页区域的下方,新增对话框形式表单数据模板 (2)data 选项中声明变量属性: pojo 提交表单对象 dialogFormVisible 当它为 true 弹出,false 不弹。 rules : 定义校验规则 (3)在 methods 中添加 addData() 函数,提交表单数据用的 (4)在 template 中的查询按钮旁边添加一个 新增 按钮,用于打开新增会员对话框 (5)在 methods 中添加 handleAdd() 函数, 打开新增对话框 关闭窗口后,再次打开窗口,会发现表单里依然有数据,应当清除数据。 (6)测试发现,点击选择教师,数据没有回显,实际上是回显到搜索框(search)了, 解决:定义一个中间变量 isEdit: false, 打开时赋值 true, 然后在回显处,判断回显 search还是 pojo 修改编辑窗口的教师名称输入框绑定一个处理函数 editOptionSupplier data 中声明一个 isEdit: false , 在 methods 中定义函数 editOptionSupplier , 修改 optionTeacher 函数作判断赋值。 14.3? 表单数据提交 14.3.1? nodejs添加新增学员接口 14.3.2? Api调用接口 (1)src\api\student.js 导出的默认对象中,添加调用新增接口的方法 (2)在 src\views\student\index.vue 中的 addData 方法中提交数据,代码如下: 15? 学员管理-修改 15.1? 需求分析 当点击 编辑 按钮后,弹出编辑商品窗口,并查询出信息渲染。修改后点击确定提交修改数据。 15.2? nodejs添加接口 15.2.2? 提交修改数据接口 15.3? Api调用接口 (1)src\api\student.js 导出的默认对象中,添加ID查询方法 getById 和 更新方法 update (2)在 src\views\student\index.vue 中的 handleEdit 方法做如下修改: (3)修改对话框中的确认按钮点击事件, pojo.id === undefined 值为true是新增,有id说明是更新。 (4)提交更新数据 16? 学员管理-删除 16.1? 需求分析 当点击删除按钮后, 弹出提示框,点击确定后,执行删除并刷新列表数据 16.2? EasyMock添加模拟接口 16.3? Api调用接口 (1)src\api\student.js 导出的默认对象中,添加 deleteById 方法 (2)在 src\views\student\index.vue 中的 handleDele 方法做如下修改: ?心得:已经可以很熟练的掌握增删改查四种操作、与教师管理系统基本相符,只是学生管理系统有选择教师的操作,所以比较复杂一点,今日体会是要注意前后台数据的统一性,切勿混淆教师与学员之间重合的要素,在进行父子组件之间的连接时,应注意分清哪部分写在父组件中,哪部分写在子组件中,在不报错但是也不实现应有的功能时,可以看看后台,利用控制台输出来判断数据是否传送到前台。 |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年4日历 | -2025/4/20 23:36:41- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |