javaweb csu
1.0.0
Web课程设计 - 中南大学主页 - 简书
制作一个与中南大学主页类似的页面：
head 标签内通常会由 title，meta，link，script 标签。
<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>整体页面自上而下分为 3 部分：
| 绿色框 | div class = “top” | 页面头部 |
| 紫色框 | div class = “main” | 页面主体 |
| 红色框 | div class = “foot” | 页面尾部 |
左边中南大学矩形 logo，img 标签
右边内容分为3行
第1行： 未来学生 在校学生 教职员工 校友校董 包含2个下拉列表（教育机构 研究机构）
第2行： 信息门户| 中南e行| 邮件系统| 图书馆| 简| 繁| English 这些都是 a 标签，通过合理地设置字体大小和间距就可以做出这种效果
第3行： 1个搜索框
通过设置浮动，使得左边的图片和右边的内容显示在一行。
主体部分自上而下分为 4 部分：
| 红色 | nav 导航栏包含8个选项 |
| 紫色 | banner 学校图片海报 |
| 蓝色 | 中南要闻，2个 li 浮动显示 |
| 绿色 | 学生信息查询 |
页面底部蓝色的固定在浏览器底部，如果页面内容足够多，就不用设置 fixed 属性，底部的 bar 自动就在页面底部，效果也不错。
div id = “foot” 对应的CSS
/*底部*/
#foot {
width: 100%;
height: 50px;
padding: 0;
background: #0f70b4;
position: fixed;
bottom: 0;
}教育机构和首页栏目弹出菜单一样，将子菜单 ul 包括在上一级标签教育机构的 li 下面。
默认情况下 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;
}同样，对于首页部分，也是这样的原理。
对应的 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;
}这个菜单基于 html 最原始的标签 ul 的。ul 默认的内容li时竖直排列的，通过设置 ul 和 li 的 float 等属性使得这些 li 标签横向排列。
对应的 css
/*导航栏内容设置*/
#nav {
width: 943px;
height: 32px;
padding: 0 0 0 5px;
margin: 0;
list-style: none;
}
/*设置下拉菜单*/
.dropdown {
float: left;
}制作一个信息查询页面：
（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）表间关系
在前端设置了输入框，输入学生姓名进行查询。
对应 html 代码，采用了 bootstrap 的输入框和按钮样式。
在输入框的下面定了一个空的 table，用于当查询的时候返回内容。
<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>初始
查询
查询另一个人
页面没有刷新，效果很不错。
在 src 目录下定义了 HelloForm 这个类，主要包括：
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 分为以下几步：
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();
}
%>
