javaweb csu
1.0.0
Desain Kursus Web-Halaman Beranda Universitas Pusat Selatan-Jianshu
Buatlah halaman yang mirip dengan beranda Central South University:
Tag head biasanya berisi tag title, meta, link, dan 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 >Halaman keseluruhan dibagi menjadi 3 bagian dari atas ke bawah:
| kotak hijau | kelas div = "atas" | Tajuk halaman |
| bingkai ungu | kelas div = "utama" | Badan halaman |
| kotak merah | kelas div = "kaki" | akhir halaman |
Logo persegi panjang Central South University di sebelah kiri, tag img
Konten di sebelah kanan dibagi menjadi 3 baris
Baris 1 : Calon Mahasiswa Mahasiswa Saat Ini Alumni Fakultas Bupati Berisi 2 drop down list (Institusi Pendidikan Lembaga Penelitian)
Baris 2: Portal Informasi |. Zhongnan e-line |. Sistem surat |. Perpustakaan |. Sederhana |. Bahasa Inggris Ini semua adalah tag.
Baris 3: 1 kotak pencarian
Dengan mengatur float, gambar di sebelah kiri dan konten di sebelah kanan ditampilkan dalam satu baris.
Bagian utama dibagi menjadi 4 bagian dari atas ke bawah:
| merah | bilah navigasi nav berisi 8 opsi |
| Ungu | poster gambar sekolah spanduk |
| biru | Berita Tiongkok Tengah dan Selatan, tampilan mengambang 2 li |
| hijau | Penyelidikan informasi siswa |
Bilah biru di bagian bawah halaman ditetapkan di bagian bawah browser. Jika konten di halaman cukup, tidak perlu menyetel atribut tetap. Bilah di bagian bawah akan otomatis berada di bagian bawah halaman, dan efeknya bagus.
CSS yang sesuai dengan div id = “kaki”
/*底部*/
# foot {
width : 100 % ;
height : 50 px ;
padding : 0 ;
background : # 0f70b4 ;
position : fixed;
bottom : 0 ;
}Institusi pendidikan sama dengan menu pop-up kolom halaman beranda, dan submenu ul disertakan di bawah li label institusi pendidikan tingkat atas.
Secara default, tampilan ul = tidak ada, saat mouse diarahkan, tampilan = blok
/*教育机构*/
# 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;
}Prinsip yang sama berlaku untuk halaman beranda.
Css yang sesuai
. 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;
}Menu ini didasarkan pada tag ul asli dari html. Konten default li dari ul disusun secara vertikal. Dengan mengatur float dan atribut lainnya dari ul dan li, tag li ini dapat disusun secara horizontal.
Css yang sesuai
/*导航栏内容设置*/
# nav {
width : 943 px ;
height : 32 px ;
padding : 0 0 0 5 px ;
margin : 0 ;
list-style : none;
}
/*设置下拉菜单*/
. dropdown {
float : left;
}Buat halaman permintaan informasi:
(1)Meja siswa
-- auto-generated definition
CREATE TABLE Student
(
sNo VARCHAR ( 10 ) NOT NULL
PRIMARY KEY ,
sName VARCHAR ( 32 ) NOT NULL ,
class VARCHAR ( 32 ) NOT NULL
);Masukkan 3 baris data ke dalam tabel
(2) Tabel nilai
-- 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);Masukkan data ke dalam tabel
(3) Hubungan antar tabel
Kotak masukan disiapkan di ujung depan untuk memasukkan nama siswa untuk kueri.
Sesuai dengan kode html, kotak input dan gaya tombol bootstrap digunakan.
Tabel kosong ditentukan di bawah kotak input untuk mengembalikan konten saat melakukan kueri.
< 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 >awal
Pertanyaan
Tanyakan pada orang lain
Halamannya tidak di-refresh, tapi efeknya sangat bagus.
Kelas HelloForm didefinisikan dalam direktori src, terutama meliputi:
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 dibagi menjadi beberapa langkah berikut:
temp.jsp adalah file jsp sementara, digunakan untuk mengonversi kumpulan hasil yang dikembalikan dengan menjalankan sql menjadi item daftar, dan kemudian konten ini ditambahkan ke tabel yang disediakan oleh index.jsp, sehingga memuat data secara asinkron di halaman utama.
<%@ 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();
}
% >
