Vue案例—学生管理系统—html版(下篇)(二)

简介: Vue案例—学生管理系统—html版(下篇)

5.1.3 注 :本次学生管理的添加和修改 功能通过共用一个页面 来完成

——具体涉及代码部分

—— StudentService接口

//添加或修改
2. boolean saveOrupdate(Student student);

—— StudentServiceImpl实现类

//添加或修改
    @Override
    public boolean saveOrupdate(Student student) {
        Student stu = studentMapper.selectByPrimaryKey(student.getSid());
        int result = -1 ;
        if (stu == null){
            //添加
            result = studentMapper.insert(student);
        }else {
            //修改
            result = studentMapper.updateByPrimaryKey(student);
        }
        return result==1;
    }

—— StudentController

@PostMapping("/saveOrupdate")
    public BaseResult addOrupdate(@RequestBody Student student) {
        try {
            boolean f = studentService.saveOrupdate(student);
            if (f){
                return BaseResult.ok("编辑成功!");
            }else {
                return BaseResult.ok("编辑失败!");
            }
        } catch (Exception e) {
            e.printStackTrace();
            return BaseResult.error(e.getMessage());
        }
    }

—— SaveOrUpdate.html 前端页面

2112381f5c5746348513aa4a74524103.png

5c94ee866493497ca441531abfab42e4.png

自此学生管理,条件分页查询,增删改查完结

相关文章
|
21天前
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具,掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令,可以打造出更加出色的前端应用。
10 2
|
23天前
|
存储 缓存 JavaScript
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
44 2
|
30天前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
13 1
|
30天前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
80 0
|
2月前
|
JavaScript 前端开发 API
Vue2与Vue3插槽使用的区别及案例
Vue 3在插槽功能上的改进,体现了其对开发体验的持续优化。通过简化API、加强动态特性和提升性能,Vue 3使得插槽的使用更加灵活和高效。这些改进不仅有助于减轻开发者的负担,还为组件之间的高级交互和内容复用打开了新的可能性。随着Vue生态系统的不断成熟,我们有理由相信,Vue将继续为前端开发提供强大且易用的工具。
62 3
|
2月前
|
JavaScript
vue 计算属性,实现复选框的全选和反选 【小案例】
本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
vue 计算属性,实现复选框的全选和反选 【小案例】
|
2月前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
92 0
react字符串转为dom标签,类似于Vue中的v-html
|
1月前
|
JavaScript
【有手就行系列】Vue快速入门案例
【有手就行系列】Vue快速入门案例
23 0
|
3月前
|
资源调度 JavaScript 应用服务中间件
HTML、WebStrom和Vue使用
HTML、WebStrom和Vue使用
25 3
|
3月前
|
JavaScript 前端开发
基于Vue实现具有固定表头、合并单元格的Html表格
本文介绍了如何在Vue框架中创建一个具有固定表头和合并单元格功能的HTML表格,通过CSS的`position: sticky`属性实现表头固定,并通过设置`rowspan`和`colspan`属性来实现单元格合并。
70 0
基于Vue实现具有固定表头、合并单元格的Html表格

热门文章

最新文章