javaweb csu
1.0.0
Webkursdesign – Homepage der Central South University – Jianshu
Erstellen Sie eine Seite ähnlich der Homepage der Central South University:
Das Head-Tag enthält normalerweise Titel-, Meta-, Link- und Skript-Tags.
< 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 >Die gesamte Seite ist von oben nach unten in 3 Teile unterteilt:
| grüne Box | div class = „top“ | Seitenkopf |
| lila Rahmen | div class = „main“ | Seitenkörper |
| rotes Kästchen | div class = „foot“ | Ende der Seite |
Rechteckiges Logo der Central South University links, img-Tag
Der Inhalt auf der rechten Seite ist in 3 Zeilen unterteilt
Zeile 1: Studieninteressierte, aktuelle Studierende, Fakultäts-Alumni-Regenten. Enthält 2 Dropdown-Listen (Bildungseinrichtungen, Forschungseinrichtungen).
Zeile 2: Informationsportal |. Mail-System |. Dies sind alles vereinfachte Tags.
Zeile 3: 1 Suchfeld
Durch das Setzen des Floats werden das Bild links und der Inhalt rechts in einer Zeile angezeigt.
Der Hauptteil ist von oben nach unten in 4 Teile unterteilt:
| Rot | Die Navigationsleiste „nav“ enthält 8 Optionen |
| Lila | Banner-Schulbildplakat |
| Blau | Nachrichten aus Zentral- und Südchina, schwebende 2-Li-Anzeige |
| Grün | Informationsanfrage für Studierende |
Die blaue Leiste am unteren Rand der Seite ist am unteren Rand des Browsers fixiert. Wenn genügend Inhalt auf der Seite vorhanden ist, muss das feste Attribut nicht festgelegt werden Seite, und der Effekt ist gut.
CSS entsprechend div id = „foot“
/*底部*/
# foot {
width : 100 % ;
height : 50 px ;
padding : 0 ;
background : # 0f70b4 ;
position : fixed;
bottom : 0 ;
}Die Bildungseinrichtung ist mit dem Popup-Menü der Startseitenspalte identisch, und das Untermenü ul ist unter der LI der übergeordneten Bildungseinrichtung enthalten.
Standardmäßig ist uls display=none, wenn die Maus darüber schwebt, 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;
}Das gleiche Prinzip gilt für die Homepage.
Entsprechendes 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;
}Dieses Menü basiert auf dem Original-Tag ul von HTML. Der Standardinhalt li von ul ist vertikal angeordnet. Durch Festlegen des Floats und anderer Attribute von ul und li können diese li-Tags horizontal angeordnet werden.
Entsprechendes CSS
/*导航栏内容设置*/
# nav {
width : 943 px ;
height : 32 px ;
padding : 0 0 0 5 px ;
margin : 0 ;
list-style : none;
}
/*设置下拉菜单*/
. dropdown {
float : left;
}Erstellen Sie eine Informationsabfrageseite:
(1)Studententisch
-- auto-generated definition
CREATE TABLE Student
(
sNo VARCHAR ( 10 ) NOT NULL
PRIMARY KEY ,
sName VARCHAR ( 32 ) NOT NULL ,
class VARCHAR ( 32 ) NOT NULL
);Fügen Sie 3 Datenzeilen in die Tabelle ein
(2)Notentabelle
-- 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);Daten in die Tabelle einfügen
(3) Beziehung zwischen Tabellen
Am Frontend ist ein Eingabefeld eingerichtet, in das der Name des Studierenden zur Abfrage eingegeben werden kann.
Entsprechend dem HTML-Code werden die Eingabefeld- und Schaltflächenstile von Bootstrap verwendet.
Unterhalb des Eingabefelds wird eine leere Tabelle definiert, um bei Abfragen Inhalte zurückzugeben.
< 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 >anfänglich
Abfrage
Fragen Sie eine andere Person
Die Seite wird nicht aktualisiert, aber der Effekt ist sehr gut.
Die HelloForm-Klasse ist im src-Verzeichnis definiert und umfasst hauptsächlich:
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 ist in die folgenden Schritte unterteilt:
temp.jsp ist eine temporäre JSP-Datei, die zum Konvertieren der durch die Ausführung von SQL zurückgegebenen Ergebnismenge in Listenelemente verwendet wird. Anschließend werden diese Inhalte der von index.jsp reservierten Tabelle hinzugefügt, wodurch Daten asynchron auf die Hauptseite geladen werden.
<%@ 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();
}
% >
