javaweb csu
1.0.0
تصميم دورة الويب - الصفحة الرئيسية لجامعة الجنوب الأوسط - جيانشو
أنشئ صفحة مشابهة للصفحة الرئيسية لجامعة Central South:
تحتوي علامة الرأس عادةً على علامات العنوان والوصف والرابط والبرنامج النصي.
< 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 = "القدم" | نهاية الصفحة |
شعار جامعة سنترال ساوث المستطيل على اليسار، علامة img
المحتوى الموجود على اليمين مقسم إلى 3 أسطر
الصف 1: الطلاب المحتملون الطلاب الحاليون خريجو هيئة التدريس الأوصياء يحتوي على قائمتين منسدلتين (المؤسسات التعليمية المؤسسات البحثية)
السطر 2: بوابة المعلومات |. نظام البريد الإلكتروني |. المكتبة المبسطة |. الإنجليزية هذه كلها علامات يمكن تحقيقها عن طريق تحديد حجم الخط والتباعد.
الصف 3: مربع بحث واحد
من خلال ضبط التعويم، يتم عرض الصورة الموجودة على اليسار والمحتوى الموجود على اليمين في سطر واحد.
ينقسم الجزء الرئيسي إلى 4 أجزاء من الأعلى إلى الأسفل:
| أحمر | يحتوي شريط التنقل على 8 خيارات |
| أرجواني | ملصق صورة المدرسة راية |
| أزرق | أخبار وسط وجنوب الصين، عرض عائم 2 لي |
| أخضر | الاستعلام عن معلومات الطالب |
يتم تثبيت الشريط الأزرق الموجود أسفل الصفحة في أسفل المتصفح. إذا كان هناك محتوى كافٍ في الصفحة، فلن تكون هناك حاجة لتعيين السمة الثابتة، وسيكون الشريط الموجود بالأسفل في أسفل المتصفح تلقائيًا الصفحة، والتأثير جيد.
CSS المطابق لمعرف div = "القدم"
/*底部*/
# foot {
width : 100 % ;
height : 50 px ;
padding : 0 ;
background : # 0f70b4 ;
position : fixed;
bottom : 0 ;
}المؤسسة التعليمية هي نفس القائمة المنبثقة لعمود الصفحة الرئيسية، ويتم تضمين القائمة الفرعية تحت عنوان المؤسسة التعليمية ذات المستوى الأعلى.
بشكل افتراضي، عرض ul = لا شيء، عندما يتحرك الماوس، عرض = كتلة
/*教育机构*/
# 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;
}وينطبق نفس المبدأ على الصفحة الرئيسية.
المقابلة المغلق
. 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;
}تعتمد هذه القائمة على العلامة الأصلية لـ html. يتم ترتيب المحتوى الافتراضي لـ ul عموديًا عن طريق تعيين السمات العائمة والسمات الأخرى لـ ul وli، ويمكن ترتيب علامات li هذه أفقيًا.
المقابلة المغلق
/*导航栏内容设置*/
# 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، يتم استخدام مربعات الإدخال وأنماط الأزرار الخاصة بـ bootstrap.
يتم تعريف جدول فارغ أسفل مربع الإدخال لإرجاع المحتوى عند الاستعلام.
< 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();
}
% >
