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>专业信息表
4.学生信息增删改查功能实现
4.1查询功能
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开发环境搭建另见我的其他博客