javaweb csu
1.0.0
Conception de cours Web-Page d'accueil de l'Université Central South-Jianshu
Créez une page similaire à la page d’accueil de la Central South University :
La balise head contient généralement des balises de titre, méta, lien et 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 >La page globale est divisée en 3 parties de haut en bas :
| boîte verte | classe div = "haut" | En-tête de page |
| cadre violet | classe div = "principale" | Corps de la page |
| boîte rouge | classe div = "pied" | fin de page |
Logo rectangulaire de la Central South University sur la gauche, balise img
Le contenu de droite est divisé en 3 lignes
Rangée 1 : Étudiants potentiels Étudiants actuels Anciens élèves du corps professoral Régents Contient 2 listes déroulantes (Établissements d'enseignement, Établissements de recherche)
Ligne 2 : Portail d'information | Ligne électronique Zhongnan | Système de messagerie | Simplifié | Anglais traditionnel Ce sont toutes des balises. Cet effet peut être obtenu en définissant la taille de la police et l'espacement de manière raisonnable.
Ligne 3 : 1 champ de recherche
En définissant le flotteur, l'image de gauche et le contenu de droite sont affichés sur une seule ligne.
La partie principale est divisée en 4 parties de haut en bas :
| rouge | la barre de navigation contient 8 options |
| Violet | affiche de photo décole de bannière |
| bleu | Nouvelles de la Chine centrale et méridionale, affichage flottant de 2 li |
| vert | Demande d'informations sur les étudiants |
La barre bleue en bas de la page est fixée en bas du navigateur. S'il y a suffisamment de contenu sur la page, il n'est pas nécessaire de définir l'attribut fixe. La barre en bas sera automatiquement en bas de la page. page, et l'effet est bon.
CSS correspondant à div id = « pied »
/*底部*/
# foot {
width : 100 % ;
height : 50 px ;
padding : 0 ;
background : # 0f70b4 ;
position : fixed;
bottom : 0 ;
}L'établissement d'enseignement est le même que le menu contextuel de la colonne de la page d'accueil, et le sous-menu ul est inclus sous le li de l'établissement d'enseignement de niveau supérieur.
Par défaut, display=none de ul, lorsque la souris survole, 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;
}Le même principe s'applique à la page d'accueil.
CSS correspondant
. 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;
}Ce menu est basé sur la balise originale ul du HTML. Le contenu par défaut li de ul est disposé verticalement en définissant le float et d'autres attributs de ul et li, ces balises li peuvent être disposées horizontalement.
CSS correspondant
/*导航栏内容设置*/
# nav {
width : 943 px ;
height : 32 px ;
padding : 0 0 0 5 px ;
margin : 0 ;
list-style : none;
}
/*设置下拉菜单*/
. dropdown {
float : left;
}Créez une page de requête d'informations :
(1)Tableau des étudiants
-- auto-generated definition
CREATE TABLE Student
(
sNo VARCHAR ( 10 ) NOT NULL
PRIMARY KEY ,
sName VARCHAR ( 32 ) NOT NULL ,
class VARCHAR ( 32 ) NOT NULL
);Insérez 3 lignes de données dans le tableau
(2)Tableau des notes
-- 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);Insérer des données dans le tableau
(3) Relation entre les tables
Une zone de saisie est configurée sur le front-end pour saisir le nom de l'étudiant à des fins de requête.
Correspondant au code html, les styles de zone de saisie et de bouton de bootstrap sont utilisés.
Une table vide est définie sous la zone de saisie pour renvoyer le contenu lors de l'interrogation.
< 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 >initial
Requête
Interroger une autre personne
La page n'est pas rafraîchie, mais l'effet est très bon.
La classe HelloForm est définie dans le répertoire src, comprenant principalement :
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 est divisé en les étapes suivantes :
temp.jsp est un fichier jsp temporaire, utilisé pour convertir le jeu de résultats renvoyé par l'exécution de SQL en éléments de liste, puis ce contenu est ajouté à la table réservée par index.jsp, chargeant ainsi les données de manière asynchrone sur la page principale.
<%@ 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();
}
% >
