设计难题及解决方案(当然了,这是我的思考过程,并不是最佳) 如何分配好前端四个功能模块布置像是许久未发文了,竟惊喜于百忙之中得以抽身。如不嫌弃,让心静上一静,听我叙上一叙这次的实践成果吧。
我用的是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);}}
前端部分代码
学生查询部分
查询条件
学生姓名:
学生学号:
编号
学生姓名
学生学号
性别
所属学院
所属班级
家庭地址
请输入学生姓名
请输入学生学号
性别: 男
女
请输入学生所在院系
请选择学生班级
家庭地址
学生管理总界面
结语:全篇未用框架,全是原生语言编写,所以看上去很臃肿。但这些都是学框架之前所必须要熟知的基础,也不可怠慢。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)