1) 设计一个登陆界面:如果用户名和密码正确,就显示你的个人信息表(两列);
实验方法:通过CSS+html搭建登录界面,使用JSP进行登录信息判断,如果用户名和密码正确,就显示个人信息表。
实验源代码:
login.css
@CHARSET "UTF-8";
body,h3,input {
margin: 0px;
padding: 0px;
}
.clearfix:before,.clearfix:after {
content: '';
display: block;
}
.clearfix {
clear: both;
}
.login {
width: 360px;
min-height: 275px;
border: 1px solid#e4e4e4;
border-radius: 20px;
margin: 100px auto;
font-family: SimSun;
}
.login h3 {
width: 345px;
height: 50px;
line-height: 50px;
/*颜色渐变 */
background: linear-gradient(#1cc871, #2b2a61);
border-radius: 20px 20px0px 0px;
color: #e9e4e4;
padding-left: 15px;
}
.login .error {
width: 360px;
height: 40px;
line-height: 40px;
text-align: center;
color: #C81623;
}
.login .box {
width: 360px;
height: 50px;
line-height: 50px;
}
.login .box .left {
float: left;
width: 90px;
height: 45px;
line-height: 45px;
text-align: right;
padding-right: 20px;
padding-top: 5px;
}
.login .box .right {
float: left;
width: 240px;
height: 50px;
line-height: 50px;
}
.login .box .right input {
outline: none;
width: 220px;
height: 30px;
box-sizing: border-box;
padding-left: 10px;
background-color: #fff;
border-radius: 5px;
border: 1px solid#8285db;
}
.login .submit {
width: 320px;
height: 50px;
line-height: 50px;
text-align: center;
margin-top: 10px;
margin-left: 20px;
}
.login .submit input {
outline-style: none;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
background: linear-gradient(#6fac8b, #4d7961);
border: 1px solidtransparent;
border-radius: 10px;
color: #e4e4e4;
font-family: SimSun;
font-size: 16px;
cursor: pointer;
}
.login .submit input:active {
background: linear-gradient(#4b745e, #375645);
}
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<link rel="stylesheet"href="./resources/css/login.css">
</head>
<body>
<div class="login">
<!-- post是一种安全登录方式 -->
<form action="welcome.jsp"method="post">
<h3>用户登录</h3>
<div class="error"id="error"></div>
<div class="boxclearfix">
<div class="left">用户名</div>
<div class="right">
<input type="text"name="username" placeholder="请输入用户名">
</div>
</div>
<div class="boxclearfix">
<div class="left">密 码</div>
<div class="right">
<input type="password"name="passwd" placeholder="请输入密码" >
</div>
</div>
<div class="submit">
<input type="submit"value="登录">
</div>
</form>
</div>
</body>
</html>
实验截图:
b)如果用户名和密码错误,就提示用户名密码错误;
实验方法:通过获取到输入的用户名以及密码,判断输入的用户名和密码是否错误,如果错误,就显示“登录失败用户名密码错误”。
实验源代码:check.jsp
<%@ page language="java" import="java.util.*"pageEncoding="utf-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%-- 引入Student类 --%>
<%@ page import="com.pc.model.Student" %>
<!-- 引入JSTL的标签库 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
/* 如果出现编码错误 */
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
Stringtitle = "登录成功";
Stringusername = request.getParameter("username");
Stringpasswd = request.getParameter("passwd");
if(username.equals("xzp") && passwd.equals("123")){
title = "登录成功";
}else{
title = "登录失败!用户名密码错误!";
}
System.out.println(username+ "\t" + passwd);
%>
<%
Student stu1 = new Student("谢csdf", "男", 18, "1402班");
List<Student> list = newArrayList<Student>();
list.add(stu1);
pageContext.setAttribute("stu1", stu1);
pageContext.setAttribute("list", list);
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%=title %></title>
<link rel="stylesheet"href="./resources/css/login.css">
<link rel="stylesheet"href="./resources/css/table.css">
<link rel="stylesheet"href="./resources/css/other.css">
<script>
/* 显示个人信息列表 */
function $(id) {
returndocument.getElementById(id);
}
functionparentChild(id, tagName, className) {
var tags =id.parentNode.getElementsByTagName(tagName);
for (var j = 0; j< tags.length; j++) {
tags[j].className = className;
}
}
window.onload = function() {
var lis = $("table").getElementsByTagName("li");
for(var i = 0; i< lis.length; i++) {
lis[i].onmouseover = function() {
parentChild(this, "li", "current");
}
lis[i].onmouseout = function() {
parentChild(this, "li", "");
}
}
}
</script>
</head>
<body>
<div align= "center">
<%=title %>
<%if(title.equals("登录成功"))
{ %>
<div class="table"id="table">
<!-- 表头 -->
<ul class="header">
<li>姓名</li>
<li>性别</li>
<li>年龄</li>
<li>班级</li>
</ul>
<div class="clear"></div>
<!-- 表格内容 -->
<c:forEach var="item"items="${list}">
<ul class="other">
<li>${item.name}</li>
<li>${item.sex}</li>
<li>${item.age}</li>
<li>${item.department}</li>
</ul>
<div class="clear"></div>
</c:forEach>
</div>
<a href="jstl.jsp">好友信息</a>
<%} %>
</div>
</body>
</html>
c) 要求个人信息使用Java来创建一个类;
实验方法:通过JAVA语言进行编写set以及get方法。
源代码:Student.java
package com.pc.model;
public class Student {
// 成员变量私有化
private String name;
private String sex;
private int age;
private String department;
public Student() {
}
public Student(String name, String sex, int age, String department) {
this.name = name;
this.sex = sex;
this.age = age;
this.department = department;
}
//下面就是set和get方法
public String getName() {
return name;
}
public void setName(Stringname) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(Stringsex) {
this.sex = sex;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getDepartment() {
return department;
}
public voidsetDepartment(String department) {
this.department = department;
}
}
d) 在个人信息页面提供一个超链接,超链跳转到好友信息,显示多个好友列表(多列);
实验方法:通过<a>标签设置个超链接以及新建一个friend.jsp文件。用来显示好友信息
源代码:friend.jsp
<%@ page language="java" import="java.util.*"pageEncoding="utf-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%-- 引入Student类 --%>
<%@ page import="com.pc.model.Student" %>
<!-- 引入JSTL的标签库 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
Student stu1 = new Student("wangsan", "男", 20, "通信1402班");
Student stu2 = new Student("李说", "男", 19, "电科1401班");
Student stu3 = new Student("王地", "女", 17, "软件1402班");
Student stu4 = new Student("张吧", "男", 19, "计科1402班");
List<Student> list = newArrayList<Student>();
list.add(stu1);
list.add(stu2);
list.add(stu3);
list.add(stu4);
pageContext.setAttribute("stu1", stu1);
pageContext.setAttribute("list", list);
%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>好友信息</title>
<link rel="stylesheet"href="./resources/css/table.css">
<link rel="stylesheet"href="./resources/css/other.css">
<script>
function $(id) {
returndocument.getElementById(id);
}
functionparentChild(id, tagName, className) {
var tags =id.parentNode.getElementsByTagName(tagName);
for (var j = 0; j< tags.length; j++) {
tags[j].className = className;
}
}
window.onload = function() {
var lis = $("table").getElementsByTagName("li");
for(var i = 0; i< lis.length; i++) {
lis[i].onmouseover = function() {
parentChild(this, "li", "current");
}
lis[i].onmouseout = function() {
parentChild(this, "li", "");
}
}
}
</script>
</head>
<body>
<!-- JSTL的if语句 -->
<div class="box">好友信息</div>
<!-- JSTL的foreach语句 -->
<div class="table"id="table">
<!-- 表头 -->
<ul class="header">
<li>姓名</li>
<li>性别</li>
<li>年龄</li>
<li>班级</li>
</ul>
<div class="clear"></div>
<!-- 表格内容 -->
<c:forEach var="item"items="${list}">
<ul class="other">
<li>${item.name}</li>
<li>${item.sex}</li>
<li>${item.age}</li>
<li>${item.department}</li>
</ul>
<div class="clear"></div>
</c:forEach>
</div>
</body>
</html>