用Ajax,json,MYSQL,前端后端语言创建一个学生管理系统吧~~

用Ajax,json,MYSQL,前端后端语言创建一个学生管理系统吧~~,第1张

像是许久未发文了,竟惊喜于百忙之中得以抽身。如不嫌弃,让心静上一静,听我叙上一叙这次的实践成果吧。                           

设计难题及解决方案(当然了,这是我的思考过程,并不是最佳) 如何分配好前端四个功能模块布置

我用的是HTML框架思想解决的。众所周知多个框架虽然可以集中在同一个页面上,但它们都是相互独立的个体,每一个框架相当于一个页面,即对应于一份HTML代码。所以其中的src属性是必须要设置的,它的属性值是一份HTML代码的绝对地址或者是相对地址。frameset取代body并对页面进行框架分割或者iframe在body中占用一个地方形成一个框架。所以利用框架的思想我就能在一个浏览器上显示多个页面,就不需要用页面切换来实现功能模块切换了。

既然是数据管理系统的一种,那么前后端如何交互这些结构复杂的数据呢

可以使用json作为数据的交换格式。json起源于JavaScript,是对象与数组的另外一种表现形式。而由json语法构造出来的对象和数组大抵都是由key-value键值对组成的。如在json中,对象的写法为{key1:value1,key2:value2……},仔细一看这种结构,是不是发现和Java里面的Map集合封装数据的结构是一样的。再看看json里面数组的语法为[e1,e2……],是不是发现和Java里面的List集合封装数据的结构是一样的。既然如此,我们来看看这种json数组 [{key1:value1,key2:value2……},{key1:value3,key2:value4……}……],数组的元素是json对象,那这是不是又对应着Java里的List集合里封装的是Map集合对象呢?说到这,我们体会到了这种潜在的联系,那如何利用它呢?Java里面提供了json的对应支持包——commons-beanutils-1.7.0.jar,commons-collections-3.1.jar,commons-lang-2.5(1).jar,commons-logging.jar,ezmorph-1.0.3.jar,json-lib-2.1-jdk15.jar。有了这些包,前后端就可以利用json进行数据交换了。例如在后端我先建立一个List集合,并封装数据进去,然后利用JSONArray类的fromObject(List a)方法将该List集合转换成json字符串,并发送给前端。前端收后,用JavaScript 的JSON.parse()对接收数据进行反序列化,最终得到可以利用的json数组。

后端发送json

String classname=request.getParameter("classname");
ArrayList> Buffer=manager.getBuffer(classname);
//manager.getBuffer(classname)这是我自己定义的一个类和方法,目的是获取一个
//ArrayList集合,泛型约束为HashMap
if(Buffer.size()==0)
{HashMap element=new HashMap<>();
 element.put("id","无该班级编号");
 element.put("classname", "无该班级信息");
 element.put("classinfo", "无该班级描述");
 Buffer.add(element);}
 JSONArray jsonarray=JSONArray.fromObject(Buffer);//将List集合转化成json数组字符串形式
 response.setContentType("text/html;charset=UTF-8");
 response.getWriter().println(jsonarray);//发送[{key1:value1,key2:value2……},{key1:value3,key2:value4……}……]形式的json字符串
前端处理json
var classequery = document.getElementById("classequery");
			while(classequery.rows.length>0){
				classequery.deleteRow(classequery.rows.length-1);
			}
            var txt=JSON.parse(XMLHttpReq.responseText);//得到
//[{key1:value1,key2:value2……},{key1:value3,key2:value4……}……]格式的json数组
            for(var i=0 , len = txt.length ;i< len ; i++){
            	var tr = classequery.insertRow(i);
            	var cell0 = tr.insertCell(0);            	
            	cell0.innerHTML = txt[i].id;
            	var cell1 = tr.insertCell(1);
            	cell1.innerHTML = txt[i].classname;
            	var cell2 = tr.insertCell(2);
            	cell2.innerHTML = txt[i].classinfo;
            }
假设txt=[{key1:value1,key2:value2……},{key1:value3,key2:value4……}……]   则txt[0].key1为value1 ,txt[1].key2为value4 前端涉及到更为复杂的数据展现结构,需要匹配到更为繁琐的JavaScript动态 *** 作节点

<1>表格结构—table :由行和列交错组成,从而形成一个个单元格。可以设置子节点thead,表示表头,设置子节点tbody,表示表主体。在JavaScript动态 *** 作节点中,table对应于两个数组,数组rows[i]表示第i行,cells[j]表示第几列,通过组合使用rows[i].cells[j]就可以引用到对应几行几列的单元格了,进而获取单元格里的数据。

var id=document.getElementById("studentequery").rows[0].cells[0].innerHTML;
//其中studentequery为table子节点tbody的id名。通过这条语句,就把tbody中第一行与
//第一列交叉的那个单元格里的数值赋给了id。注意:下标是从0开始的,即下标0代表第一行

那么如何创建单元格呢?先用insertRow(i)在i行创建一个行,然后再用insertCell(j)依次给该行创建单元格。

var classequery = document.getElementById("studentequery");//获取tbody节点的对象
			while(classequery.rows.length>0){//rows代表tbody里的行
				classequery.deleteRow(classequery.rows.length-1);//删去行-deleteRow(第几行)
			}
            var txt=JSON.parse(XMLHttpReq.responseText);
            for(var i=0 , len = txt.length ;i< len ; i++){
            	var tr = classequery.insertRow(i);//创建一个行对象
            	var cell0 = tr.insertCell(0);//用行对象进而创建一个单元对象            	
            	cell0.innerHTML = txt[i].id;           	
            	var cell1 = tr.insertCell(1);
            	cell1.innerHTML = txt[i].studentname;            	
            	var cell2 = tr.insertCell(2); 
            	cell2.innerHTML = txt[i].studentindex;            	
            	var cell3 = tr.insertCell(3);            	
            	cell3.innerHTML = txt[i].studentsex;            	
            	var cell4 = tr.insertCell(4);
            	cell4.innerHTML = txt[i].department;
              	var cell5 = tr.insertCell(5);
            	cell5.innerHTML = txt[i].studentclass;            	
            	var cell6 = tr.insertCell(6);            	
            	cell6.innerHTML = txt[i].location;            	
            }            	          

<2>下拉框—select:select的子节点是option,可直接用document.createElement("option")创建

var studentclass = document.getElementById("studentclass");//studentclass为select的id名
			var options=JSON.parse(XMLHttpReq.responseText);
			for(var i=0;i
				opt.innerHTML = options[i];//得到
				studentclass.appendChild(opt);

引用select子节点option的值

var studentclass1 = document.getElementById("studentclass");
	var sid=studentclass1.selectedIndex;//selectedIndex属性为下拉框被选中的选项索引
	var studentclass=studentclass1[sid].innerText;//获取被选中选项的值

<3>单选框-radio:

性别:   男
   女

利用checked属性获取radio被选中的值

var radio = document.getElementsByName("studentsex");//通过节点name属性获取对象
//所有的radio的name属性值都相同,所以这里获得了一个元素为radio对象的数组
	for (i=0; i
JDBC中需要用到的SQL语句也会更丰富
select * from messageLibrary where username=? order by id DESC limit 1;//按照字段id
降序排列(即从大到小排列),然后用limit限定查询出的记录数,后面的数字即为输出的记录数。命令的
总体功能就是:查询出最后一条记录.其中主键id必须是int类型,且要用 auto-increment修饰(自动加一)
update class set classname=?,classinfo=? where id=?;//set后面写入需
要修改的字段以及对应的修改值。where后面的条件不能使用需要进行修改的字段
insert into class (classname,classinfo) values(?,?);
//第一个括号指定需要插值的字段,第二个括号为插入的值,class
表中有一个主键id(int),因为用了auto-increment修饰,不给它插
值时,它会自动加一

总结一下过程中我遇到的一些细节问题 在Java中,每一个{}对应一个作用域,在大括号镶嵌结构中,在位于最里面的{}里定义的变量作用域最小,并列的{}里的变量作用域互不干扰。Ajax中用send发送数据时,注意不要多打空格符。不然你的键名可能会改变,因为粗心,在键名后面多打了一个空格符

登录效果&&主页切换效果

功能展示效果

servlet代码

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import net.sf.json.JSONArray;
@WebServlet("/Controller")
public class Controller extends HttpServlet {
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Controller() {
        super();}
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("UTF-8");
		String task=request.getParameter("task");
		if(task.equals("1"))//添加班级信息响应
		{String classname=request.getParameter("classname");
		String classinfo=request.getParameter("classinfo");						
		response.setContentType("text/html;charset=UTF-8");
		if(!classname.equals("") && !classinfo.equals(""))			
		{manager.addclass(classname, classinfo);
		response.getWriter().println("😊添加成功😊");}
		else {response.getWriter().println("😒输入不能为空哦😊");}
}
		if(task.equals("2")) {//查询班级信息响应
			String classname=request.getParameter("classname");
			ArrayList> Buffer=manager.getBuffer(classname);
			if(Buffer.size()==0)
			{HashMap element=new HashMap<>();
	    	element.put("id","无该班级编号");
	    	element.put("classname", "无该班级信息");
	    	element.put("classinfo", "无该班级描述");
	    	Buffer.add(element);}
			JSONArray jsonarray=JSONArray.fromObject(Buffer);
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println(jsonarray);
		}
		if(task.equals("3")) {//修改班级信息响应
			String classname=request.getParameter("classname1");
			String classinfo=request.getParameter("classinfo");
			String id=request.getParameter("classindex");
			manager.modify(Integer.parseInt(id), classname, classinfo);
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println("修改成功");
		}
		if(task.equals("4")) {//删除班级信息响应
			String id=request.getParameter("classindex");
			manager.cutoff(Integer.parseInt(id));
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println("删除成功");
		}
		if(task.equals("5")) {//给前端页面的下拉框初始化选项值(classname)
			ArrayList Buffer=manager.getclassname();
			JSONArray jsonarray=JSONArray.fromObject(Buffer);
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println(jsonarray);
		}
		if(task.equals("6")) {//添加学生信息响应
			String studentname=request.getParameter("studentname");
			String studentindex=request.getParameter("studentindex");
			String studentsex=request.getParameter("studentsex");
			String department=request.getParameter("department");
			String studentclass=request.getParameter("studentclass");
			String location=request.getParameter("location");
			response.setContentType("text/html;charset=UTF-8");
			if(!studentname.equals("") && !studentindex.equals("") && !department.equals("") && !location.equals(""))
			{manager.addstudent(studentname, studentindex, studentsex, department, studentclass, location);
			response.getWriter().println("添加成功");}
		    else {
		    response.getWriter().println("输入不能为空哦");
		}}
		if(task.equals("7")) {//查询学生信息响应
			String studentname=request.getParameter("studentname");
			String studentindex=request.getParameter("studentindex");
			ArrayList> Buffer=manager.getBuffer(studentname, studentindex);
			if(Buffer.size()==0)
			{HashMap element=new HashMap<>();
			element.put("id","无该学生编号");
	    	element.put("studentname","无该学生姓名");
	    	element.put("studentindex","无该学生学号");
	    	element.put("studentsex","无该学生性别");
	    	element.put("department","无该学生所属学院");
	    	element.put("studentclass","无该学生所属班级");
	    	element.put("location","无该学生家庭地址");
	    	Buffer.add(element);}
			JSONArray jsonarray=JSONArray.fromObject(Buffer);
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println(jsonarray);
		}
		if(task.equals("8")){//删除学生信息响应
			String studentname=request.getParameter("studentname");
			String studentindex=request.getParameter("studentindex");
			manager.cutoff(studentname, studentindex);
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println("删除成功");
		}
		if(task.equals("9")) {//修改学生信息响应
			String id=request.getParameter("id");
			String studentname1=request.getParameter("studentname1");
			String studentindex1=request.getParameter("studentindex1");
			String studentsex=request.getParameter("studentsex");
			String department=request.getParameter("department");
			String studentclass=request.getParameter("studentclass");
			String location=request.getParameter("location");
			response.setContentType("text/html;charset=UTF-8");
			if(!department.equals("") && !location.equals(""))
			{manager.modify(Integer.parseInt(id), studentname1, studentindex1, studentsex, department, studentclass, location);
			response.getWriter().println("修改成功");}
		    else {
		    response.getWriter().println("输入不能为空哦");
		}}}	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

 JDBC代码

import java.sql.ResultSet;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import com.mysql.cj.xdevapi.Statement;
class manager {
	static private String driver="com.mysql.cj.jdbc.Driver";//数据库驱动类所对应的字符串
	static private String URL="jdbc:mysql://localhost:3306/mydatabase?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8";
            //URL语法格式如下
	//jdbc:mysql:是固定的写法,后面跟主机名localhost,3306是默认的MySQL端口号
	//serverTimezone=UTC是指定时区时间为世界统一时间
	//useUnicode=true是指是否使用Unicode字符集,赋值为true
	//characterEncoding=utf-8是指定字符编码格式为UTF8
	static private Connection cnt=null;
	
	static void initConnection() {//建立与数据库的连接
		try {
			Class.forName(driver);
			cnt=DriverManager.getConnection(URL,"root","941593760s");
	}
			catch(SQLException e) {
				e.printStackTrace();
			}
			catch(ClassNotFoundException e) {
				e.printStackTrace();}
			catch(Exception e) {
				e.printStackTrace();
			}}
static void addmsg(String username,String password) {//添加注册信息		
		if(cnt==null) {
			initConnection();
		}
		
		try{
			PreparedStatement ps=cnt.prepareStatement("insert into user values(?,?)");			
			ps.setString(1, username);
			ps.setString(2, password);
		    ps.executeUpdate();
			}
		catch(SQLException e) {
			e.printStackTrace();
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		
	}

	static void addclass(String classname,String classinfo) {//添加班级信息			
	if(cnt==null) {
		initConnection();
	}
		try{
			PreparedStatement ps=cnt.prepareStatement("insert into class (classname,classinfo) values(?,?)");			
			ps.setString(1, classname);
			ps.setString(2, classinfo);
		    ps.executeUpdate();
			}
		catch(SQLException e) {
			e.printStackTrace();
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		
	}
	static boolean examinationDL(String username,String password) {//检验登录信息(密码与用户名)是否正确		
		if(cnt==null) {
			initConnection();
		}
		try(
			PreparedStatement ps=cnt.prepareStatement("select * from user where username=? and password=?"))			
			{ps.setString(1, username);
			ps.setString(2, password);
		    ResultSet rs=ps.executeQuery();
		    if(rs.next()) {
		    	return(true);}//登录成功		   
			}		
		catch(Exception e) {
			e.printStackTrace();
		}
		return(false);
	}
	static boolean examinationZC(String username) {	//检验注册所用的用户名是否有重复	有重复返回false 无则返回true
		if(cnt==null) {
			initConnection();
		}
		try(
			PreparedStatement ps=cnt.prepareStatement("select * from user where username=?"))			
			{ps.setString(1, username);			
		    ResultSet rs=ps.executeQuery();
		    if(rs.next()) {
		    	return(false);}//有重复的的名称,请重新注册(保证数据库里面的用户名唯一)		   
			}		
		catch(Exception e) {
			e.printStackTrace();
		}
		return(true);
	}
	static ArrayList> getBuffer(String classname) {//以集合的形式返回班级信息,用于JSON数据交换
		if(cnt==null) {
			initConnection();
		}
		ArrayList> Buffer=new ArrayList<>();//在方法里面创建对象,保证线程并发安全
		try(
				PreparedStatement ps=cnt.prepareStatement("select * from class where classname=?"))			
				{		ps.setString(1, classname);					   
			ResultSet rs=ps.executeQuery();
			    while(rs.next()) {	
			    	HashMap element=new HashMap<>();//java中Map形式的数据集合对应json语法里的对象形式,即{e1,e2……}
			    	element.put("id", rs.getInt("id")+"");
			    	element.put("classname", rs.getString("classname"));
			    	element.put("classinfo", rs.getString("classinfo"));
			    	Buffer.add(element);//将Map集合作为List的元素,这种形式的集合对用于json中用数组封装集合的写法,即[{e1,e2……},{e1,e2……}……]
			    	}		   
				}		
			catch(Exception e) {
				e.printStackTrace();
			}
			return(Buffer);
	}
	static ArrayList> getBuffer(String studentname,String studentindex) {//以集合的形式返回学生信息,用于JSON数据交换
		if(cnt==null) {
			initConnection();
		}
		ArrayList> Buffer=new ArrayList<>();//在方法里面创建对象,保证线程并发安全
		try(
				PreparedStatement ps=cnt.prepareStatement("select * from student where studentname=? and studentindex=?"))			
				{		ps.setString(1, studentname);
				        ps.setString(2, studentindex);
			    ResultSet rs=ps.executeQuery();
			    if(rs.next()) {	
			    	HashMap element=new HashMap<>();
			    	element.put("id", rs.getInt("id")+"");
			    	element.put("studentname", rs.getString("studentname"));
			    	element.put("studentindex", rs.getString("studentindex"));
			    	element.put("studentsex", rs.getString("studentsex"));
			    	element.put("department", rs.getString("department"));
			    	element.put("studentclass", rs.getString("studentclass"));
			    	element.put("location", rs.getString("location"));
			    	Buffer.add(element);
			    	}		   
				}		
			catch(Exception e) {
				e.printStackTrace();
			}
			return(Buffer);
	}
	static void withdraw(String username) {//撤回消息
		if(cnt==null) {
			initConnection();
		}
		try(	PreparedStatement ps1=cnt.prepareStatement("select * from messageLibrary where username=? order by id DESC limit 1");//按照字段id降序
				//排列(即从大到小排列),然后用limit限定查询出的记录数,后面的数字即为输出的记录数。命令的总体功能就是——查询出最后一条记录。其中主键id要用 auto-increment修饰(自动加一)
				PreparedStatement ps2=cnt.prepareStatement("delete from messageLibrary where id=?"))			
				{		 ps1.setString(1, username);
			            ResultSet rs=ps1.executeQuery();
				        if(rs.next()) {
				        	int id=rs.getInt("id");
				        	ps2.setInt(1, id);
				        	ps2.executeUpdate();
				        }
			    	}		   
					
			catch(Exception e) {
				e.printStackTrace();
			}
	}
	static void modify(int id,String classname,String classinfo) {//根据唯一的编号,修改班级记录
		if(cnt==null) {
			initConnection();
		}
		try(
			PreparedStatement ps=cnt.prepareStatement("update class set classname=?,classinfo=? where id=?"))//where后面的条件不能使用需要进行修改的字段			
			{ps.setInt(3, id);
			ps.setString(1, classname);
			ps.setString(2, classinfo);
			ps.executeUpdate();}		  		   	
		catch(Exception e) {
			e.printStackTrace();
		}		
	}
	static void modify(int id,String studentname1,String studentindex1,String studentsex,String department,String studentclass,String location) {
		//根据学生id(编号)修改学生信息
		if(cnt==null) {
			initConnection();
		}
		try(
			PreparedStatement ps=cnt.prepareStatement("update student set studentname=?,studentindex=?,studentsex=?,"
					+ "department=?,studentclass=?,location=? where id=?"))			
			{
			ps.setString(1, studentname1);
			ps.setString(2, studentindex1);
			ps.setString(3, studentsex);
			ps.setString(4, department);
			ps.setString(5, studentclass);
			ps.setString(6, location);			
			ps.setInt(7, id);
			ps.executeUpdate();}		  		   	
		catch(Exception e) {
			e.printStackTrace();
		}		
	}
	static void cutoff(String studentname,String studentindex) {//根据学生姓名和学号删除学生记录
		if(cnt==null) {
			initConnection();
		}
		try(
			PreparedStatement ps=cnt.prepareStatement("delete from student where studentname=? and studentindex=?"))			
			{ps.setString(1, studentname);
			ps.setString(2, studentindex);
			ps.executeUpdate();}		  		   	
		catch(Exception e) {
			e.printStackTrace();
		}		
	}
	static void cutoff(int id) {//根据编号删除班级记录
		if(cnt==null) {
			initConnection();
		}
		try(
			PreparedStatement ps=cnt.prepareStatement("delete from class where id=?"))			
			{ps.setInt(1, id);
			ps.executeUpdate();}		  		   	
		catch(Exception e) {
			e.printStackTrace();
		}		
	}
	static void addstudent(String studentname,String studentindex,String studentsex,String department,String studentclass,String location) {//添加学生信息
		if(cnt==null) {
			initConnection();
		}
			try{
				PreparedStatement ps=cnt.prepareStatement("insert into student (studentname,studentindex,studentsex,department,"
				+ "studentclass,location) values(?,?,?,?,?,?)");			
				ps.setString(1, studentname);
				ps.setString(2, studentindex);
				ps.setString(3, studentsex);
				ps.setString(4, department);
				ps.setString(5, studentclass);
				ps.setString(6, location);
			    ps.executeUpdate();
				}
			catch(SQLException e) {
				e.printStackTrace();
			}
			catch(Exception e) {
				e.printStackTrace();
			}}
	static ArrayList getclassname() {
		if(cnt==null) {
			initConnection();
		}
		ArrayList Buffer=new ArrayList();
		try(
			PreparedStatement ps=cnt.prepareStatement("select * from class"))			
			{ResultSet rs=ps.executeQuery();		
		while(rs.next()) {
			Buffer.add(rs.getString("classname"));
		}}
		catch(Exception e) {
			e.printStackTrace();
		}
		return(Buffer);}}

前端部分代码





学生查询部分






查询条件

学生姓名:

学生学号:

           
编号 学生姓名 学生学号 性别 所属学院 所属班级 家庭地址

请输入学生姓名



请输入学生学号




性别:   男    女

请输入学生所在院系



请选择学生班级

家庭地址



          




学生管理总界面










结语:全篇未用框架,全是原生语言编写,所以看上去很臃肿。但这些都是学框架之前所必须要熟知的基础,也不可怠慢。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/944762.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-18
下一篇 2022-05-18

发表评论

登录后才能评论

评论列表(0条)