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开发环境搭建另见我的其他博客