中南大學(xué)主頁(yè) - Shuai-Xie - Github
實(shí)驗(yàn)一
一躯枢、實(shí)驗(yàn)內(nèi)容
制作一個(gè)與中南大學(xué)主頁(yè)類似的頁(yè)面：
- 熟悉html锄蹂、CSS以及JavaScript使用敬扛，完成網(wǎng)頁(yè)設(shè)計(jì)啥箭。CSS和JS文件單獨(dú)書(shū)寫(xiě)急侥。
- 版面排版和內(nèi)容需基本接近學(xué)校主頁(yè)
- 只需完成首頁(yè)的制作贝润，無(wú)需做二級(jí)頁(yè)面
- “教育機(jī)構(gòu)”需有類似的彈出窗口菜單
- “首頁(yè)”等菜單需要有類似的彈出菜單
二题暖、實(shí)驗(yàn)設(shè)計(jì)
2.1 head 標(biāo)簽內(nèi)容
head 標(biāo)簽內(nèi)通常會(huì)由 title胧卤，meta枝誊，link叶撒，script 標(biāo)簽祠够。
- title 是網(wǎng)頁(yè)標(biāo)題欄名稱；
- meta 提供有關(guān)頁(yè)面的元信息落君，比如作者绎速，頁(yè)面字符格式等；
- link 可以鏈接標(biāo)題欄要顯示的圖標(biāo)：
images/favicon.ico (icon文件在線生成生成器轉(zhuǎn)化圖片)
link也可以鏈接css文件路徑赵哲，自定義的css和bootstrap的css； - script 寫(xiě)入自己的 js 文件或者 src 鏈接的 jQuery 文件绘闷。
<head>
<title>中南大學(xué)</title>
<!-- meta 可提供有關(guān)頁(yè)面的元信息（meta-information）-->
<meta name="keywords" content="中南大學(xué)" charset="utf-8"/>
<!--標(biāo)題欄圖標(biāo)-->
<!--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"> <!--快捷方式的圖標(biāo)-->
<!--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 頁(yè)面布局
整體頁(yè)面自上而下分為 3 部分：
| 綠色框 | div class = “top” | 頁(yè)面頭部 |
| 紫色框 | div class = “main” | 頁(yè)面主體 |
| 紅色框 | div class = “foot” | 頁(yè)面尾部 |
2.2.1 頁(yè)面頭部
左邊中南大學(xué)矩形 logo，img 標(biāo)簽
右邊內(nèi)容分為3行
第1行：
未來(lái)學(xué)生 在校學(xué)生 教職員工 校友校董
包含2個(gè)下拉列表（教育機(jī)構(gòu) 研究機(jī)構(gòu)）第2行：
信息門(mén)戶| 中南e行| 郵件系統(tǒng)| 圖書(shū)館| 簡(jiǎn)| 繁| English
這些都是 a 標(biāo)簽法竞，通過(guò)合理地設(shè)置字體大小和間距就可以做出這種效果第3行：
1個(gè)搜索框
通過(guò)設(shè)置浮動(dòng)，使得左邊的圖片和右邊的內(nèi)容顯示在一行呆细。
2.2.2 頁(yè)面主體
主體部分自上而下分為 4 部分：
| 紅色 | nav 導(dǎo)航欄包含8個(gè)選項(xiàng) |
| 紫色 | banner 學(xué)校圖片海報(bào) |
| 藍(lán)色 | 中南要聞，2個(gè) li 浮動(dòng)顯示 |
| 綠色 | 學(xué)生信息查詢 |
2.2.3 頁(yè)面底部
頁(yè)面底部藍(lán)色的固定在瀏覽器底部坑夯，如果頁(yè)面內(nèi)容足夠多，就不用設(shè)置 fixed 屬性，底部的 bar 自動(dòng)就在頁(yè)面底部厌处，效果也不錯(cuò)阔涉。
div id = “foot” 對(duì)應(yīng)的CSS
/*底部*/
#foot {
width: 100%;
height: 50px;
padding: 0;
background: #0f70b4;
position: fixed;
bottom: 0;
}
2.3 彈出子菜單
教育機(jī)構(gòu)和首頁(yè)欄目彈出菜單一樣，將子菜單 ul 包括在上一級(jí)標(biāo)簽教育機(jī)構(gòu)的 li 下面椭住。
- 紅色箭頭指示隱藏的下拉列表 ul class="jyjgli"
- 綠色箭頭指示 ul 的父級(jí)標(biāo)簽 li id="eduqlink"
默認(rèn)情況下 ul 的 display=none，當(dāng)鼠標(biāo) hover 時(shí)些举，display=block
/*教育機(jī)構(gòu)*/
#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需要上下級(jí)*/
/*li:hover ul*/
#main_nav li:hover ul {
display: block;
}
同樣，對(duì)于首頁(yè)部分叼丑，也是這樣的原理关翎。
- 紅色 ul 對(duì)應(yīng)子菜單
- 綠色 li 對(duì)應(yīng)父級(jí)標(biāo)簽
對(duì)應(yīng)的 css
.dropdown-content {
display: none; /*隱藏下拉菜單的內(nèi)容*/
position: absolute;
background-color: #f9f9f9;
list-style: none;
width: 115px;
font-size: 14px;
line-height: 32px;
font-weight: 100;
}
/*hover設(shè)置光標(biāo)懸停未點(diǎn)擊之前的樣式*/
.dropdown:hover .dropdown-content {
display: block;
}
2.4 導(dǎo)航條橫向菜單
這個(gè)菜單基于 html 最原始的標(biāo)簽 ul 的。ul 默認(rèn)的內(nèi)容li時(shí)豎直排列的幢码，通過(guò)設(shè)置 ul 和 li 的 float 等屬性使得這些 li 標(biāo)簽橫向排列笤休。
對(duì)應(yīng)的 css
- "#nav對(duì)應(yīng)ul
- .dropdown對(duì)應(yīng)ul下的li
/*導(dǎo)航欄內(nèi)容設(shè)置*/
#nav {
width: 943px;
height: 32px;
padding: 0 0 0 5px;
margin: 0;
list-style: none;
}
/*設(shè)置下拉菜單*/
.dropdown {
float: left;
}
實(shí)驗(yàn)二
一、實(shí)驗(yàn)內(nèi)容
制作一個(gè)信息查詢頁(yè)面：
- 在數(shù)據(jù)庫(kù)（任選）中建兩個(gè)數(shù)據(jù)表（學(xué)生信息表（學(xué)號(hào)症副、姓名店雅、班級(jí)）和學(xué)生成績(jī)表（學(xué)號(hào)、課程名稱闹啦、成績(jī)琳袄、成績(jī)登記時(shí)間）
- 頁(yè)面中輸入學(xué)生姓名點(diǎn)擊搜索即可查詢到該學(xué)生的所有成績(jī)
- 成績(jī)以表格形式顯示
- 需使用Ajax技術(shù)
二、實(shí)驗(yàn)設(shè)計(jì)
2.1 建立數(shù)據(jù)庫(kù)
（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 行數(shù)據(jù)
（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);
表中插入數(shù)據(jù)
（3）表間關(guān)系
2.2 前端輸入框
在前端設(shè)置了輸入框螺句，輸入學(xué)生姓名進(jìn)行查詢取劫。
對(duì)應(yīng) html 代碼，采用了 bootstrap 的輸入框和按鈕樣式喇澡。
在輸入框的下面定了一個(gè)空的 table秀睛，用于當(dāng)查詢的時(shí)候返回內(nèi)容藤抡。
2.3 Ajax 向后端傳輸數(shù)據(jù)
<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添加數(shù)據(jù)
}
});
}
</script>
- type：post 向后端傳遞 name 輸入框輸入的 data
- url：數(shù)據(jù)傳入的鏈接：原鏈接+/HelloFrom
- data：傳遞的數(shù)據(jù)
- success：成功后進(jìn)行的操作，jsp 中預(yù)留的 table append 數(shù)據(jù)
初始
查詢
查詢另一個(gè)人
頁(yè)面沒(méi)有刷新绳锅，效果很不錯(cuò)。
2.4 后端 Servlet 數(shù)據(jù)查詢
在 src 目錄下定義了 HelloForm 這個(gè)類丙笋，主要包括：
- 數(shù)據(jù)庫(kù)屬性設(shè)定
- 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 驅(qū)動(dòng)名及數(shù)據(jù)庫(kù) URL
private static final String JDBC_DRIVER = "com.mysql.jdbc.Driver";
private static final String DB_URL = "jdbc:mysql://localhost:3306/csu"; // 同DataGrip
// 數(shù)據(jù)庫(kù)的用戶名與密碼笙各，需要根據(jù)自己的設(shè)置
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 {
// 獲取輸入的學(xué)生姓名
String name = new String(request.getParameter("name").getBytes(), "UTF-8");
try {
// 注冊(cè) JDBC 驅(qū)動(dòng)器
Class.forName(JDBC_DRIVER);
// 打開(kāi)一個(gè)連接
Connection conn = DriverManager.getConnection(DB_URL, USER, PASS);
// 執(zhí)行sql查詢
Statement stmt = conn.createStatement();
// String sql = "SELECT * FROM Grade WHERE no = \"0902140133\"; ";
// 注意String要加引號(hào)
String sql = "SELECT * FROM Grade " +
"WHERE no = (SELECT sNo FROM Student WHERE sName = \"" + name + "\");";
// 執(zhí)行查詢得到結(jié)果集
ResultSet rs = stmt.executeQuery(sql);
// 向jsp頁(yè)面?zhèn)鬟f數(shù)據(jù)
RequestDispatcher rd = request.getRequestDispatcher("temp.jsp");
request.setAttribute("data", rs);
rd.forward(request, response);
} catch (Exception e) {
e.printStackTrace();
}
}
}
doGet 分為以下幾步：
- 獲取前端輸入的學(xué)生姓名，request.getParameter("name")
- 給 HelloForm 注冊(cè) JDBC 驅(qū)動(dòng)器
- 打開(kāi)與 MySQL 數(shù)據(jù)庫(kù)的鏈接
- 定義 sql 語(yǔ)句
- 執(zhí)行 sql 查詢得到結(jié)果集
- 將結(jié)果集傳回給 temp.jsp 頁(yè)面
2.5 幫助 Ajax 的 temp.jsp
temp.jsp 是一個(gè)臨時(shí)的 jsp 文件晃洒，用于將執(zhí)行 sql 返回的結(jié)果集轉(zhuǎn)化成列表項(xiàng)，然后這些內(nèi)容被 index.jsp 預(yù)留的 table 添加并思，從而在主頁(yè)面異步加載數(shù)據(jù)衣式。
<%@ 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%">學(xué)號(hào)</th>
<th width="25%">課程</th>
<th width="25%">成績(jī)</th>
<th width="25%">登記時(shí)間</th>
</tr>
<%
ResultSet rs = (ResultSet) request.getAttribute("data");
// 展開(kāi)結(jié)果集數(shù)據(jù)庫(kù)
try {
while (rs.next()) {
String sNo = rs.getString("no");
String course = rs.getString("course");
String grade = rs.getString("grade");
String registerTime = rs.getString("registerTime");
// 輸出數(shù)據(jù)
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 完成
