javaweb csu
1.0.0
Diseño de cursos web-Página de inicio de la Universidad Central Sur-Jianshu
Haga una página similar a la página de inicio de Central South University:
La etiqueta principal generalmente contiene etiquetas de título, meta, enlace y secuencia de comandos.
< 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 página general está dividida en 3 partes de arriba a abajo:
| caja verde | clase div = "superior" | Encabezado de página |
| marco morado | clase div = "principal" | Cuerpo de la página |
| caja roja | clase div = "pie" | final de la pagina |
Logotipo rectangular de Central South University a la izquierda, etiqueta img
El contenido de la derecha está dividido en 3 líneas.
Fila 1: Futuros estudiantes Estudiantes actuales Profesores Ex alumnos Regentes Contiene 2 listas desplegables (Instituciones educativas Instituciones de investigación)
Línea 2: Portal de información | Línea electrónica de Zhongnan | Biblioteca | Simplificado | Inglés tradicional. Este efecto se puede lograr configurando el tamaño y el espaciado de manera razonable.
Fila 3: 1 cuadro de búsqueda
Al configurar el flotador, la imagen de la izquierda y el contenido de la derecha se muestran en una línea.
La parte principal se divide en 4 partes de arriba a abajo:
| rojo | La barra de navegación contiene 8 opciones. |
| Púrpura | cartel de la foto de la escuela de la bandera |
| azul | Noticias del centro y sur de China, pantalla flotante de 2 li |
| verde | Consulta de información del estudiante. |
La barra azul en la parte inferior de la página está fija en la parte inferior del navegador. Si hay suficiente contenido en la página, no es necesario configurar el atributo fijo. La barra en la parte inferior estará automáticamente en la parte inferior. página y el efecto es bueno.
CSS correspondiente a div id = “pie”
/*底部*/
# foot {
width : 100 % ;
height : 50 px ;
padding : 0 ;
background : # 0f70b4 ;
position : fixed;
bottom : 0 ;
}La institución educativa es la misma que el menú emergente de la columna de la página de inicio, y el submenú ul está incluido debajo del li de la etiqueta de nivel superior institución educativa.
De forma predeterminada, ul muestra = ninguno, cuando pasa el mouse, muestra = bloquear
/*教育机构*/
# 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;
}El mismo principio se aplica a la página de inicio.
CSS correspondiente
. 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;
}Este menú se basa en la etiqueta original ul de html. El contenido predeterminado li de ul está organizado verticalmente. Al configurar el valor flotante y otros atributos de ul y li, estas etiquetas li se pueden organizar horizontalmente.
CSS correspondiente
/*导航栏内容设置*/
# nav {
width : 943 px ;
height : 32 px ;
padding : 0 0 0 5 px ;
margin : 0 ;
list-style : none;
}
/*设置下拉菜单*/
. dropdown {
float : left;
}Cree una página de consulta de información:
(1)Mesa de estudiantes
-- auto-generated definition
CREATE TABLE Student
(
sNo VARCHAR ( 10 ) NOT NULL
PRIMARY KEY ,
sName VARCHAR ( 32 ) NOT NULL ,
class VARCHAR ( 32 ) NOT NULL
);Insertar 3 filas de datos en la tabla.
(2)Tabla de calificaciones
-- 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);Insertar datos en la tabla.
(3) Relación entre tablas
Se configura un cuadro de entrada en la parte frontal para ingresar el nombre del estudiante para realizar una consulta.
En correspondencia con el código html, se utilizan el cuadro de entrada y los estilos de botón de bootstrap.
Se define una tabla vacía debajo del cuadro de entrada para devolver contenido al realizar consultas.
< 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 >inicial
Consulta
Consultar a otra persona
La página no se actualiza, pero el efecto es muy bueno.
La clase HelloForm se define en el directorio src e incluye principalmente:
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 se divide en los siguientes pasos:
temp.jsp es un archivo jsp temporal, que se utiliza para convertir el conjunto de resultados devuelto al ejecutar sql en elementos de la lista, y luego estos contenidos se agregan a la tabla reservada por index.jsp, cargando así datos de forma asincrónica en la página principal.
<%@ 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();
}
% >
