實驗一
一、實驗內容
制作一個與中南大學主頁類似的頁面：
- 熟悉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 完成
