javaweb csu
1.0.0
การออกแบบหลักสูตรเว็บ-หน้าแรกของ Central South University-Jianshu
ทำเพจให้คล้ายกับหน้าแรกของ Central South University:
แท็ก head มักประกอบด้วยแท็กชื่อ เมตา ลิงก์ และสคริปต์
< 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 = "บนสุด" | ส่วนหัวของหน้า |
| กรอบสีม่วง | คลาส div = "หลัก" | เนื้อความของหน้า |
| กล่องสีแดง | คลาส div = "เท้า" | ท้ายหน้า |
โลโก้สี่เหลี่ยม Central South University ทางด้านซ้าย แท็ก img
เนื้อหาทางด้านขวาแบ่งออกเป็น 3 บรรทัด
แถวที่ 1: นักศึกษาที่คาดหวัง นักศึกษาปัจจุบัน คณะ ศิษย์เก่าผู้สำเร็จราชการแทนพระองค์ มีรายการแบบเลื่อนลง 2 รายการ (สถาบันการศึกษา สถาบันวิจัย)
บรรทัดที่ 2: พอร์ทัลข้อมูล |. Zhongnan e-line |. Library |. Traditional English ทั้งหมดนี้สามารถทำได้โดยการตั้งค่าขนาดตัวอักษรและระยะห่างที่เหมาะสม
แถวที่ 3: 1 ช่องค้นหา
ด้วยการตั้งค่าโฟลต รูปภาพทางด้านซ้ายและเนื้อหาทางด้านขวาจะแสดงเป็นบรรทัดเดียว
ส่วนหลักแบ่งออกเป็น 4 ส่วนจากบนลงล่าง:
| สีแดง | แถบนำทาง nav มี 8 ตัวเลือก |
| สีม่วง | แบนเนอร์โปสเตอร์รูปภาพโรงเรียน |
| สีฟ้า | ข่าวจีนตอนกลางและตอนใต้ จอแสดงผลลอยน้ำ 2 ลี้ |
| สีเขียว | สอบถามข้อมูลนักศึกษา |
แถบสีน้ำเงินที่ด้านล่างของหน้าได้รับการแก้ไขที่ด้านล่างของเบราว์เซอร์ หากมีเนื้อหาเพียงพอบนหน้า ไม่จำเป็นต้องตั้งค่าแอตทริบิวต์คงที่ หน้าและผลเป็นสิ่งที่ดี
CSS ที่สอดคล้องกับ div id = “foot”
/*底部*/
# foot {
width : 100 % ;
height : 50 px ;
padding : 0 ;
background : # 0f70b4 ;
position : fixed;
bottom : 0 ;
}สถาบันการศึกษาจะเหมือนกับเมนูป๊อปอัปของคอลัมน์หน้าแรก และเมนูย่อย ul จะรวมอยู่ใน li ของสถาบันการศึกษาที่มีป้ายกำกับระดับบน
ตามค่าเริ่มต้น display=none ของ ul เมื่อเลื่อนเมาส์ไว้ display=block
/*教育机构*/
# main_nav li ul . jyjgli {
position : absolute;
top : 21 px ;
right : 0 ;
width : 350 px ;
height : 410 px ;
padding : 15 px 5 px 15 px 18 px ;
background : # 396f98 ;
border : 1 px 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 : 115 px ;
font-size : 14 px ;
line-height : 32 px ;
font-weight : 100 ;
}
/*hover设置光标悬停未点击之前的样式*/
. dropdown : hover . dropdown-content {
display : block;
}เมนูนี้อิงตามแท็กดั้งเดิม ul ของ html เนื้อหาเริ่มต้น li ของ ul ถูกจัดเรียงในแนวตั้ง โดยการตั้งค่า float และคุณลักษณะอื่นๆ ของ ul และ li แท็ก li เหล่านี้จึงสามารถจัดเรียงในแนวนอนได้
css ที่สอดคล้องกัน
/*导航栏内容设置*/
# nav {
width : 943 px ;
height : 32 px ;
padding : 0 0 0 5 px ;
margin : 0 ;
list-style : none;
}
/*设置下拉菜单*/
. dropdown {
float : left;
}สร้างหน้าแบบสอบถามข้อมูล:
(1)โต๊ะนักเรียน
-- 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) ตารางเกรด
-- 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 มีการใช้กล่องอินพุตและรูปแบบปุ่มของบูตสแตรป
ตารางว่างถูกกำหนดไว้ใต้ช่องป้อนข้อมูลเพื่อส่งคืนเนื้อหาเมื่อทำการสืบค้น
< 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 >อักษรย่อ
แบบสอบถาม
สอบถามบุคคลอื่น
หน้าไม่รีเฟรชแต่เอฟเฟกต์ดีมาก
คลาส HelloForm ถูกกำหนดไว้ในไดเร็กทอรี src ซึ่งส่วนใหญ่ประกอบด้วย:
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 ดังนั้นจึงโหลดข้อมูลบนหน้าหลักแบบอะซิงโครนัส
<%@ 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();
}
% >
