Web的综合应用

1) 设计一个登陆界面：如果用户名和密码正确，就显示你的个人信息表(两列)；

实验方法：通过CSS+html搭建登录界面，使用JSP进行登录信息判断，如果用户名和密码正确，就显示个人信息表。

实验源代码：

@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);

}

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</div>

</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" %>

<%@ 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>

<head>

/* 显示个人信息列表 */

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>

<%=title %>

<%if(title.equals("登录成功"))

{ %>

</ul>

<c:forEach var="item"items="${list}">

<li>${item.department}</li>

</ul>

</c:forEach>

</div>

<%} %>

</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" %>

<%@ 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>

<head>

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>

</ul>

<c:forEach var="item"items="${list}">

<li>${item.department}</li>

</ul>

</c:forEach>

</div>

</body>

</html>

猜你喜欢