学生管理系统（增删改查功能实现） |
您所在的位置：网站首页 › 苹果手机其他系统数据怎么删除文件管理 › 学生管理系统（增删改查功能实现） |
学生管理系统（增删改查功能实现）
|
1.技术支持
前端: Vue.js(JavaScript) + ElementUI(html/css) + axios(ajax) 后端: Servlet(javaEE,javaSE) + JDBC + mysql 环境: jdk idea tomcat node.js 2..功能分析：学生管理：管理员登录后可以对学生信息进行维护（增删改查） 所以要明确学生信息有哪些？ 学生信息表 （id,学号，姓名，性别，生日，专业，电话，地址，操作人，操作时间） 专业信息表 （id,专业名称，操作人，操作时间） 3.数据库设计 -- 管理员表 CREATE TABLE admin( id INT PRIMARY KEY AUTO_INCREMENT, account VARCHAR(20), PASSWORD VARCHAR(20) ) -- 学生表 CREATE TABLE student( id INT PRIMARY KEY AUTO_INCREMENT, num INT UNIQUE, NAME VARCHAR(20), gender CHAR(2), birthday DATE, phone VARCHAR(20), address VARCHAR(20), majorid INT, adminid INT, oper_time DATETIME ) -- 专业表 CREATE TABLE major( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR(10) , adminid INT, oper_time DATETIME )1>管理员表
2>学生表
3>专业信息表
1>点击学生管理菜单 打开学生信息列表List.vue 创建学生列表的vue组件,注册列表组件,并在index.js中进行组件导入和路由嵌套配置 2>来到学生列表组件后,立即向后端发送一个http请求,去查询学生相关的数据 发送请求到后端(包含token),过滤器验证token mounted() { // 页面打开后向后端发送请求，获取数据 请求头发送token this.$http.get("back/student?mark=list").then((resp) => { if (resp.data.code == 200) { this.studentlist = resp.data.data; } }) }3>后端对查询学生列表的 这次请求进行处理 创建一个StudentServlet,在web.xml中配置servlet 创建一个Student对象类封装学生所有信息 创建学生StudentDao 定义一个查询所有的学生信息的方法,并将学生信息封装到一个List中返回 4>.使用ElementUI中Table 表格组件渲染呈现所查询到的所有学生信息 用ElementUI为表格添加新增,修改,删除按钮 接收的信息 注意日期的格式化,本次在后端进行处理 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8") private Date operTime;//操作时间 4.2删除功能1>点击删除按钮时,向后端发送请求 注意: 在前端有多个get发送请求时, 而后端只有一个doGet接收时。可以通过传参(mark)标记，在后端进行区别操作 //删除 deleteStudent(id) { //mark 标记 this.$confirm('您确定要删除吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$http.get("back/student?mark=delete&id=" + id).then((resp) => { if (resp.data.code == 200) { this.$router.go(); // 重载当前组件,刷新 } }) });2> 后端接收处理 在StudentServlet中接收mark==delete的删除请求，和该学生的学号，调用StudentDao的删除方法 在StudentDao中定义一个通过学号删除学生信息的方法 注意：删除时，注意弹框提示，先弹框，如果确定删除才会向后端发送请求，删除后更新列表 4.3新增功能
1>点击新增按钮，打开对话框 由于新增和修改的内容比较多，所以可以把新增界面抽取到一个独立的vue文件中，然后在List.vue中导入新增组件 2>把新增组件放入一个Dialog对话框中，弹出显示 3>结合ElementUI组件和登录组件来创建新增学生的表单 4>打开新增学生对话框时，与后端进行交互，动态查询专业信息 前端 发送获取专业信息请求 mounted() { // 页面打开后向后端发送请求，动态获取专业数据 请求头发送token this.$http.get("back/student?mark=major").then((resp) => { if (resp.data.code == 200) { this.majorList = resp.data.data; } }) }后端StudentServlet中接收mark=major请求，调用StudentDao中创建动态查询数据库中专业信息的方法，以List集合形式返回所有专业给前端 5>输入所要新增的学生信息，点击保存与后端交互 前端发送请求 methods:{ save(){ //post 不能在地址中标记传，所以标记mark在form中 this.$http.post("back/student",jsonToString(this.form)).then((resp)=>{ if(resp.data.code == 200){ //响应 保存成功 this.$message({message:resp.data.message,type:'success'}); this.dialogFormVisible=false; //关闭窗口 this.$router.go(); //更新当前列表 } }) } },后端StudentServlet接收mark==save的 post请求，调用在StudentDao创建新增保存学生信息到数据库的方法 4.4修改功能
1>拿到id 2>打开对话框 3>同时根据学生id查询此学生信息 4>在表单中显示学生信息 5>修改所要修改的信息 6>点击保存提交学生信息到后端 7>保存学生信息到数据库 5.总结5.1功能实现时,通过画图可以很好的理清楚思路 5.2在运行时如果出现错误,通过F12检查或者Debug调式,要尽快锁定错误所出现的位置,然后再去查找出错的地方 5.3为防止sql代码出错,可以现在MySQL中写好,在复制到Dao 中 5.4前端vue-cli项目搭建和后端web开发环境搭建另见我的其他博客 |
【本文地址】
今日新闻 |
推荐新闻 |