4.班级管理

4.1JavaBean:Classes

package com.czxy.ssm.domain;
import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;
@Table(name = "tb_class")
public class Classes {
    /*
    CREATE TABLE tb_class(
      `c_id` VARCHAR(32) PRIMARY KEY COMMENT '班级ID',
      `c_name` VARCHAR(50) COMMENT '班级名称',
      `desc` VARCHAR(200) COMMENT '班级描述'
    );
     */
    @Id
    @Column(name = "c_id")
    private String cid;
    @Column(name = "c_name")
    private String cname;
    @Column(name = "`desc`")
    private String desc;
    public String getCid() {
        return cid;
    }
    public void setCid(String cid) {
        this.cid = cid;
    }
    public String getCname() {
        return cname;
    }
    public void setCname(String cname) {
        this.cname = cname;
    }
    public String getDesc() {
        return desc;
    }
    public void setDesc(String desc) {
        this.desc = desc;
    }
    public Classes() {
    }
    public Classes(String cid, String cname, String desc) {
        this.cid = cid;
        this.cname = cname;
        this.desc = desc;
    }
    @Override
    public String toString() {
        return "Classes{" +
                "cid='" + cid + '\'' +
                ", cname='" + cname + '\'' +
                ", desc='" + desc + '\'' +
                '}';
    }
}

4.2查询所有

4.2.1后端

编写Mapper

 package com.czxy.ssm.mapper;
import com.czxy.ssm.domain.Classes;
import tk.mybatis.mapper.common.Mapper;
@org.apache.ibatis.annotations.Mapper
public interface ClassesMapper extends Mapper<Classes> {
}

编写service
接口

 package com.czxy.ssm.service;
import com.czxy.ssm.domain.Classes;
import java.util.List;
public interface ClassesService {
    /**
     * 查询所有
     * @return
     */
    public List<Classes> selectAll() ;
}

-实现类

 package com.czxy.ssm.service.impl;
import com.czxy.ssm.domain.Classes;
import com.czxy.ssm.mapper.ClassesMapper;
import com.czxy.ssm.service.ClassesService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import javax.annotation.Resource;
import java.util.List;
@Service
@Transactional
public class ClassesServiceImpl implements ClassesService {
    @Resource
    private ClassesMapper classesMapper;
    @Override
    public List<Classes> selectAll() {
        List<Classes> list = classesMapper.selectAll();
        return list;
    }
}

编写Controller

 package com.czxy.ssm.controller;
import com.czxy.ssm.domain.Classes;
import com.czxy.ssm.service.ClassesService;
import com.czxy.ssm.vo.BaseResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
@RestController
@RequestMapping("/classes")
public class ClassesController {
    @Resource
    private ClassesService classesService;
    @GetMapping
    public BaseResult<List<Classes>> list() {
        // 查询所有
        List<Classes> list = classesService.selectAll();
        // 返回
        /*
        BaseResult baseResult = new BaseResult();
        baseResult.setCode(1);  // 0 错误， 20000 成功
        baseResult.setMessage("提示信息");
        baseResult.setData(list);
        return baseResult;
        */
        return BaseResult.ok("查询成功", list);
    }
}

查询结果

微信图片_20220523161504.png

4.2.2前端：axios+then

编写页面、发送ajax、显示数据

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
    <div id="app">
        <table border="1">
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>描述</td>
            </tr>
            <tr v-for="(classes,index) in classesList">
                <td>{{classes.cid}}</td>
                <td>{{classes.cname}} </td>
                <td>{{classes.desc}}</td>
            </tr>
        </table>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            classesList: []
        },
        methods: {
            selectAllClasses() {
                // ajax 查询
                var url = 'http://localhost:8080/classes'
                axios.get(url)
                .then(res => {
                    // 获得查询结果 BaseResult
                    var baseResult = res.data
                    // 判断
                    if(baseResult.code == 1) {
                        // 成功 -- 将结果存放到数据区域
                        this.classesList = baseResult.data
                    } else {
                        // 失败
                        alert(baseResult.message)
                    }
                })
                .catch(err => {
                    console.error(err); 
                })
            }
        },
        created() {   //mounted()
            // 查询所有
            this.selectAllClasses()
        },
    })
</script>

4.2.3前端：async+await

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表</title>
    <script src="../js/axios.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1">
            <tr>
                <td>编号</td>
                <td>班级名称</td>
                <td>描述</td>
                <td>操作</td>
            </tr>
            <tr v-for="(classes,index) in classesList">
                <td>{{classes.cid}}</td>
                <td>{{classes.cname}}</td>
                <td>{{classes.desc}}</td>
                <td>
                    修改
                    删除
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            classesList: [],            //所有班级
        },
        methods: {
            async findAllClasses() {
                // response.data
                let { data: baseResult } = await axios.get(`http://localhost:8080/classes`)
                // 判断
                if(baseResult.code == 20000) {
                    this.classesList = baseResult.data
                }
            }
        },
        mounted() {
            // 查询所有班级
            this.findAllClasses()
        }
    })
</script>

4.3添加班级

4.3.1需求：

完成班级的添加
后端
获得提交的班级数据（json数据）
保存班级数据（controller-service）
根据操作结果提示：成功true-->添加成功，失败false-->添加失败
前端
绘制表单，数据绑定
点击添加，发送ajax完成添加
成功，跳转到列表页面。失败，给出提示

4.3.2后端

步骤1：编写service，完成添加
接口

 /**
     * 添加班级
     * @param classes
     * @return
     */
    public boolean add(Classes classes);

实现类

    @Override
    public boolean add(Classes classes) {
        int result = classesMapper.insert(classes);
        return result == 1;
    }

步骤2：编写controller，处理结果BaseResult

 /**
     * 添加班级
     * @param classes
     * @return
     */
    @PostMapping
    public BaseResult add(@RequestBody Classes classes) {
        // 添加
        boolean result =classesService.add(classes);
        // 提示
        if(result) {
            // 成功
            return BaseResult.ok("添加成功");
        }
        // 失败
        return BaseResult.error("添加失败");
    }

4.3.3前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表</title>
    <script src="../js/axios.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <td>编号</td>
                <td>
                    <input type="text" v-model="classes.cid" />
                </td>
            </tr>
            <tr>
                <td>班级名称</td>
                <td>
                    <input type="text" v-model="classes.cname" />
                </td>
            </tr>
            <tr>
                <td>班级描述</td>
                <td>
                    <textarea cols="30" rows="10" v-model="classes.desc"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="添加" @click="addClasses" />
                </td>
                <td></td>
            </tr>
        </table>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            classes: {
            }
        },
        methods: {
            async addClasses() {
                let { data: baseResult } = await axios.post(`http://localhost:8080/classes`, this.classes)
                // 提示
                if(baseResult.code == 20000) {
                    //成功
                    location.href = '/classes/list.html'
                } else {
                    //失败
                    alert(baseResult.message)
                }
            }
        },
        mounted() {
        }
    })
</script>

4.4修改班级

4.4.1需求：

完成班级的修改

表单的回显：通过id查询详情

修改功能：通过id更新

4.4.2后端

步骤
编写service：selectById、update
接口
实现类
编写controller：selectById、update
编写service：selectById、update
接口

 /**
     * 通过id查询详情
     * @param cid
     * @return
     */
    public Classes selectById(String cid);
    /**
     * 更新班级
     * @param classes
     * @return
     */
    public boolean update(Classes classes);

实现类

 @Override
    public Classes selectById(String cid) {
        return classesMapper.selectByPrimaryKey(cid);
    }
    @Override
    public boolean update(Classes classes) {
        int result = classesMapper.updateByPrimaryKeySelective(classes);
        return result == 1;
    }

编写controller：selectById、update

 /**
     * 查询详情
     * @param cid
     * @return
     */
    @GetMapping("/{cid}")
    public BaseResult<Classes> selectById(@PathVariable("cid") String cid) {
        //查询
        Classes classes = classesService.selectById(cid);
        //返回
        return BaseResult.ok("查询详情成功", classes);
    }
    /**
     * 更新
     * @param classes
     * @return
     */
    @PutMapping
    public BaseResult update(@RequestBody Classes classes) {
        try {
            // 更新
            boolean result = classesService.update(classes);
            // 提示
            if(result) {
                return BaseResult.ok("更新成功");
            }
            return BaseResult.error("更新失败");
        } catch (Exception e) {
            e.printStackTrace();
            return BaseResult.error(e.getMessage());
        }
    }

4.4.3前端

步骤：
列表页面点击“修改”，添加到修改页面 edit.html?cid=c001
页面加载成功时，通过id查询详情
回显：将查询结果绑定表单（添加已经完成，采用复制）
点击确定进行更新
修改list.html页面

  <a :href="'/cls/edit.html?cid=' + classes.cid">修改</a>

编写edit.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表</title>
    <script src="../js/axios.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--3 表单回显 -->
        <table>
            <tr>
                <td>编号</td>
                <td>
                    {{classes.cid}}
                </td>
            </tr>
            <tr>
                <td>班级名称</td>
                <td>
                    <input type="text" v-model="classes.cname" />
                </td>
            </tr>
            <tr>
                <td>班级描述</td>
                <td>
                    <textarea cols="30" rows="10" v-model="classes.desc"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <!--4 更新 -->
                    <input type="button" value="修改" @click="updateClasses" />
                </td>
                <td></td>
            </tr>
        </table>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            classes: {
            },
            classesId: ''
        },
        methods: {
            async selectClassesById() {  //2 查询详情
                let { data: baseResult } = await axios.get(`http://localhost:8080/classes/${this.classesId}`)
                // 将查询结果存放classes对象，将自动回显
                if( baseResult.code == 20000) {
                    this.classes = baseResult.data
                }
            },
            async updateClasses() {   // 4 更新函数
                let { data: baseResult } = await axios.put(`http://localhost:8080/classes`, this.classes)
                // 提示
                if(baseResult.code == 20000) {
                    //成功
                    location.href = '/cls/list.html'
                } else {
                    //失败
                    alert(baseResult.message)
                }
            }
        },
        mounted() {
            // 2.1 获得id
            let arr = location.href.split("?cid=")
            this.classesId = arr[1]
            // 2.2 查询详情
            this.selectClassesById()
        }
    })
</script>

4.5删除班级

4.5.1分析

需求：通过id删除班级
思路：
确定访问路径：delete /classes/c001
点击发送ajax进行删除（成功：刷新页面；失败：提示）
编写controller获得id
编写service通过id删除

4.5.2后端

步骤：

编写controller获得id
编写service通过id删除

编写controller获得id

     @DeleteMapping("/{classesId}")
    public BaseResult delete(@PathVariable("classesId") String classesId) {
        // 删除
        boolean result = classesService.deleteById(classesId);
        // 处理
        // 提示
        if(result) {
            return BaseResult.ok("删除成功");
        }
        return BaseResult.error("删除失败");
    }

编写service通过id删除

接口

  /**
     * 通过id删除
     * @param classesId
     * @return
     */
    boolean deleteById(String classesId);
–实现类
     @Override
    public boolean deleteById(String classesId) {
        int result = classesMapper.deleteByPrimaryKey(classesId);
        return result == 1 ;
    }

4.5.3前端

需求：点击发送删除ajax

<a href="" @click.prevent="deleteClasses(classes.cid)">删除</a>
            async deleteClasses( cid ) {
                // 询问
                if(!confirm("您确定要删除么？")) {
                    return
                }
                let { data: baseResult } = await axios.delete(`http://localhost:8080/classes/${cid}`)
                if(baseResult.code == 20000) {
                    // 成功
                    this.findAllClasses()
                } else {
                    // 失败
                    alert(baseResult.message)
                }
            }

4.5.4完善后端：级联删除

级联删除：删除班级前，先删除所关联的学生。
需求：完善班级删除的service，先删除指定班级的所有学生。
步骤：
编写JavaBen：Student
编写Mapper：StudentMapper
修改班级的service
编写JavaBen：Student

 package com.czxy.student.domain;
import lombok.Data;
import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;
import java.util.Date;
@Table(name = "tb_student")
@Data
public class Student {
    @Id
    @Column(name = "s_id")
    private String sid;
    private String sname;
    private Integer age;
    private Date birthday;
    @Column(name = "c_id")
    private String cid;
}
/*
Create Table
CREATE TABLE `tb_student` (
  `s_id` varchar(32) NOT NULL COMMENT '学生ID',
  `sname` varchar(50) DEFAULT NULL COMMENT '姓名',
  `age` int(11) DEFAULT NULL COMMENT '年龄',
  `birthday` datetime DEFAULT NULL COMMENT '生日',
  `gender` char(1) DEFAULT NULL COMMENT '性别',
  `c_id` varchar(32) DEFAULT NULL,
  PRIMARY KEY (`s_id`),
  KEY `c_id` (`c_id`),
  CONSTRAINT `tb_student_ibfk_1` FOREIGN KEY (`c_id`) REFERENCES `tb_class` (`c_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8
 */

编写Mapper：StudentMapper

 package com.czxy.student.mapper;
import com.czxy.student.domain.Student;
import tk.mybatis.mapper.common.Mapper;
@org.apache.ibatis.annotations.Mapper
public interface StudentMapper extends Mapper<Student> {
}
•修改班级的service
  @Resource
    private StudentMapper studentMapper;    
  @Override
    public boolean deleteById(String classesId) {
        // 先删除班级中的学生
        Example example = new Example(Student.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("cid", classesId);
        studentMapper.deleteByExample(example);
        // 删除班级
        int result = classesMapper.deleteByPrimaryKey(classesId);
        return result == 1 ;
    }

Vue入门项目：学生管理系统之班级管理【含源码】(二）

4.班级管理

4.1JavaBean:Classes

4.2查询所有

4.2.1后端

4.2.2前端：axios+then

4.2.3前端：async+await

4.3添加班级

4.3.1需求：

4.3.2后端

4.3.3前端

4.4修改班级

4.4.1需求：

4.4.2后端

4.4.3前端

4.5删除班级

4.5.1分析

4.5.2后端

4.5.3前端

4.5.4完善后端：级联删除

5.后期更新学生管理系统之学生管理

热门文章

最新文章

相关课程

相关电子书

相关实验场景

Vue入门项目：学生管理系统之班级管理 【含源码】(二）

4.班级管理

4.1JavaBean:Classes

4.2查询所有

4.2.1后端

4.2.2前端：axios+then

4.2.3前端：async+await

4.3添加班级

4.3.1需求：

4.3.2后端

4.3.3前端

4.4修改班级

4.4.1需求：

4.4.2后端

4.4.3前端

4.5删除班级

4.5.1分析

4.5.2后端

4.5.3前端

4.5.4完善后端：级联删除

5.后期更新学生管理系统之学生管理

热门文章

最新文章

相关课程

相关电子书

相关实验场景

Vue入门项目：学生管理系统之班级管理【含源码】(二）