实验一
一、实验内容
制作一个与中南大学主页类似的页面：
- 熟悉html、CSS以及JavaScript使用，完成网页设计。CSS和JS文件单独书写。
- 版面排版和内容需基本接近学校主页
- 只需完成首页的制作，无需做二级页面
- “教育机构”需有类似的弹出窗口菜单
- “首页”等菜单需要有类似的弹出菜单
二、实验设计
2.1 head 标签内容
head 标签内通常会由 title，meta，link，script 标签。
- title 是网页标题栏名称；
- meta 提供有关页面的元信息，比如作者，页面字符格式等；
- link 可以链接标题栏要显示的图标：
images/favicon.ico (icon文件在线生成生成器转化图片)
link也可以链接css文件路径，自定义的css和bootstrap的css； - script 写入自己的 js 文件或者 src 链接的 jQuery 文件。
<head>
<title>中南大学</title>
<!-- meta 可提供有关页面的元信息（meta-information）-->
<meta name="keywords" content="中南大学" charset="utf-8"/>
<!--标题栏图标-->
<!--rel, shortcut icon, type-->
<link href="images/favicon.ico" rel="icon" type="image/x-icon">
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon"> <!--快捷方式的图标-->
<!--css文件-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
2.2 页面布局
整体页面自上而下分为 3 部分：
| 绿色框 | div class = “top” | 页面头部 |
| 紫色框 | div class = “main” | 页面主体 |
| 红色框 | div class = “foot” | 页面尾部 |
2.2.1 页面头部
左边中南大学矩形 logo，img 标签
右边内容分为3行
第1行：
未来学生 在校学生 教职员工 校友校董
包含2个下拉列表（教育机构 研究机构）第2行：
信息门户| 中南e行| 邮件系统| 图书馆| 简| 繁| English
这些都是 a 标签，通过合理地设置字体大小和间距就可以做出这种效果第3行：
1个搜索框
通过设置浮动，使得左边的图片和右边的内容显示在一行。
2.2.2 页面主体
主体部分自上而下分为 4 部分：
| 红色 | nav 导航栏包含8个选项 |
| 紫色 | banner 学校图片海报 |
| 蓝色 | 中南要闻，2个 li 浮动显示 |
| 绿色 | 学生信息查询 |
2.2.3 页面底部
页面底部蓝色的固定在浏览器底部，如果页面内容足够多，就不用设置 fixed 属性，底部的 bar 自动就在页面底部，效果也不错。
div id = “foot” 对应的CSS
/*底部*/
#foot {
width: 100%;
height: 50px;
padding: 0;
background: #0f70b4;
position: fixed;
bottom: 0;
}
2.3 弹出子菜单
教育机构和首页栏目弹出菜单一样，将子菜单 ul 包括在上一级标签教育机构的 li 下面。
- 红色箭头指示隐藏的下拉列表 ul class="jyjgli"
- 绿色箭头指示 ul 的父级标签 li id="eduqlink"
默认情况下 ul 的 display=none，当鼠标 hover 时，display=block
/*教育机构*/
#main_nav li ul.jyjgli {
position: absolute;
top: 21px;
right: 0;
width: 350px;
height: 410px;
padding: 15px 5px 15px 18px;
background: #396f98;
border: 1px solid white;
display: none;
z-index: 999;
}
/*hover需要上下级*/
/*li:hover ul*/
#main_nav li:hover ul {
display: block;
}
同样，对于首页部分，也是这样的原理。
- 红色 ul 对应子菜单
- 绿色 li 对应父级标签
对应的 css
.dropdown-content {
display: none; /*隐藏下拉菜单的内容*/
position: absolute;
background-color: #f9f9f9;
list-style: none;
width: 115px;
font-size: 14px;
line-height: 32px;
font-weight: 100;
}
/*hover设置光标悬停未点击之前的样式*/
.dropdown:hover .dropdown-content {
display: block;
}
2.4 导航条横向菜单
这个菜单基于 html 最原始的标签 ul 的。ul 默认的内容li时竖直排列的，通过设置 ul 和 li 的 float 等属性使得这些 li 标签横向排列。
对应的 css
- "#nav对应ul
- .dropdown对应ul下的li
/*导航栏内容设置*/
#nav {
width: 943px;
height: 32px;
padding: 0 0 0 5px;
margin: 0;
list-style: none;
}
/*设置下拉菜单*/
.dropdown {
float: left;
}
实验二
一、实验内容
制作一个信息查询页面：
- 在数据库（任选）中建两个数据表（学生信息表（学号、姓名、班级）和学生成绩表（学号、课程名称、成绩、成绩登记时间）
- 页面中输入学生姓名点击搜索即可查询到该学生的所有成绩
- 成绩以表格形式显示
- 需使用Ajax技术
二、实验设计
2.1 建立数据库
（1）Student 表
-- auto-generated definition
CREATE TABLE Student
(
sNo VARCHAR(10) NOT NULL
PRIMARY KEY,
sName VARCHAR(32) NOT NULL,
class VARCHAR(32) NOT NULL
);
表中插入 3 行数据
（2）Grade 表
-- auto-generated definition
CREATE TABLE Grade
(
no VARCHAR(10) NOT NULL,
course VARCHAR(32) NULL,
grade INT(10) NULL,
registerTime DATE NULL,
CONSTRAINT fk_sno
FOREIGN KEY (no) REFERENCES csu.Student (sNo)
);
CREATE INDEX fk_sno
ON Grade (no);
表中插入数据
（3）表间关系
2.2 前端输入框
在前端设置了输入框，输入学生姓名进行查询。
对应 html 代码，采用了 bootstrap 的输入框和按钮样式。
在输入框的下面定了一个空的 table，用于当查询的时候返回内容。
2.3 Ajax 向后端传输数据
<script>
function postData() {
$.ajax({
type: "post",
url: "HelloForm",
data: {
"name": $("#name").val()
},
success: function (res) {
// alert(res);
$("#my_table").html(""); // tbody置空
$("#my_table").append(res); // tbody添加数据
}
});
}
</script>
- type：post 向后端传递 name 输入框输入的 data
- url：数据传入的链接：原链接+/HelloFrom
- data：传递的数据
- success：成功后进行的操作，jsp 中预留的 table append 数据
初始
查询
查询另一个人
页面没有刷新，效果很不错。
2.4 后端 Servlet 数据查询
在 src 目录下定义了 HelloForm 这个类，主要包括：
- 数据库属性设定
- doPost 和 doGet 处理
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Created by shuai
* on 2017/6/10.
*/
@WebServlet("/HelloForm")
public class HelloForm extends HttpServlet {
private static final long serialVersionUID = 1;
// JDBC 驱动名及数据库 URL
private static final String JDBC_DRIVER = "com.mysql.jdbc.Driver";
private static final String DB_URL = "jdbc:mysql://localhost:3306/csu"; // 同DataGrip
// 数据库的用户名与密码，需要根据自己的设置
private static final String USER = "root";
private static final String PASS = "shuai";
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取输入的学生姓名
String name = new String(request.getParameter("name").getBytes(), "UTF-8");
try {
// 注册 JDBC 驱动器
Class.forName(JDBC_DRIVER);
// 打开一个连接
Connection conn = DriverManager.getConnection(DB_URL, USER, PASS);
// 执行sql查询
Statement stmt = conn.createStatement();
// String sql = "SELECT * FROM Grade WHERE no = \"0902140133\"; ";
// 注意String要加引号
String sql = "SELECT * FROM Grade " +
"WHERE no = (SELECT sNo FROM Student WHERE sName = \"" + name + "\");";
// 执行查询得到结果集
ResultSet rs = stmt.executeQuery(sql);
// 向jsp页面传递数据
RequestDispatcher rd = request.getRequestDispatcher("temp.jsp");
request.setAttribute("data", rs);
rd.forward(request, response);
} catch (Exception e) {
e.printStackTrace();
}
}
}
doGet 分为以下几步：
- 获取前端输入的学生姓名，request.getParameter("name")
- 给 HelloForm 注册 JDBC 驱动器
- 打开与 MySQL 数据库的链接
- 定义 sql 语句
- 执行 sql 查询得到结果集
- 将结果集传回给 temp.jsp 页面
2.5 帮助 Ajax 的 temp.jsp
temp.jsp 是一个临时的 jsp 文件，用于将执行 sql 返回的结果集转化成列表项，然后这些内容被 index.jsp 预留的 table 添加，从而在主页面异步加载数据。
<%@ page import="java.sql.ResultSet" %><%--
Created by IntelliJ IDEA.
User: shuai
Date: 2017/6/20
Time: 18:04
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<tr>
<th width="25%">学号</th>
<th width="25%">课程</th>
<th width="25%">成绩</th>
<th width="25%">登记时间</th>
</tr>
<%
ResultSet rs = (ResultSet) request.getAttribute("data");
// 展开结果集数据库
try {
while (rs.next()) {
String sNo = rs.getString("no");
String course = rs.getString("course");
String grade = rs.getString("grade");
String registerTime = rs.getString("registerTime");
// 输出数据
out.println("<tr>");
out.println("<td>" + sNo + "</td>");
out.println("<td>" + course + "</td>");
out.println("<td>" + grade + "</td>");
out.println("<td>" + registerTime + "</td>");
out.println("</tr>");
}
} catch (Exception e) {
e.printStackTrace();
}
%>
Ajax 完成
