JSP制作简单登陆界面

运行环境

eclipse+tomcat+MySQL 不知道的可以参考Jsp运行环境——Tomcat

项目列表

这里我先把jsp文件先放在Web-INF外面访问

  1. 需要建立的几个文件在图上.jsp
  2. 还要导入MySQL的jar包mysql-5.0.5.jar，导到WEB-INF中的lib文件夹就可以不需要Bulid Path
  3. 开始编写代码：

代码演示：

index.jsp就好像一般网站的首页一样感觉，将header.jsp和footer.jsp引入其中

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>首页</title>

<style>

    #nav>ul>li{

        float:left;

        margin-left:50px;

    }

    #login{

        clear:both;

    }

</style>

</head>

<body>

<!-- 引入header.jsp的头部文件 -->

<%@ include file="header.jsp" %>

<div id="login">

    <a href="login.jsp"><button>登陆</button></a>

</div>

<!-- 引入footer.jsp的脚部文件 -->

<%@include file="footer.jsp" %>

</body>

</html>

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<div id="nav">

    <ul>

        <li ><a href="">导航1</a></li>

        <li><a href="">导航2</a></li>

        <li><a href="">导航3</a></li>

        <li><a href="">导航4</a></li>

        <li><a href="">导航5</a></li>

        <li><a href="">导航6</a></li>

    </ul>

</div>

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

    <div>

<p>xxxxxxxxxxx可以试试|xxxxxxxxxxxx技术有限公司</p>

 <p>京 ICP 证 1234567 号|Copyright © 1999-2017, All Rights Reserved </p>

 </div>
页面内容展示：

login.jsp登陆用户名密码填写界面

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>登陆页面</title>

</head>

<body>

<%--表单--%>

    <fieldset>

    <legend>登陆界面</legend>

    <form action="test.jsp" method="post">

    <input type="text" name="username"><br>

    <input type="password" name="password"><br>

    <input type="submit" value="登陆">

    <!-- EL语句，后面验证表单时，验证错误反回信息-->

    ${error}

    </form>

</fieldset>

</body>

</html>

内容显示：

test.jsp 是对表单login.jsp 的提交的内容与数据库中的数据对比验证，再相应的跳转

<%@page import="java.sql.*"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

//请求获取login.jsp的用户名username的值

 String username=request.getParameter("username");

//请求获取login.jsp的密码password的值

String password=request.getParameter("password");

//数据库MySQL的地址

String DBURL="jdbc:mysql://localhost:3306/zhou?useUnicode=true&characterEncoding=utf-8";

String DBName="root"; //登入用户名

String DBPwd="123456";//登入密码

//加载mysql驱动

Class.forName("com.mysql.jdbc.Driver");

//连接数据库

Connection conn=DriverManager.getConnection(DBURL,DBName,DBPwd);

//创建Statement对象

Statement st=conn.createStatement();

//sql语句，搜索这个username和password在数据库是否存在

String sql="select * from user where name='"+username+"'and pwd='"+password+"'";

//运行sql语句，并把得到的结果放入结果集ResultSet中

ResultSet rs=st.executeQuery(sql);

//判断这个结果集是否存在，一般username只有一个

if(rs.next()){

    //设置一个username，将后面username其内容赋值给前面一个username，可以以便下一个页面使用

    request.setAttribute("username", username);

    //跳转页面到userpage.jsp

    request.getRequestDispatcher("userpage.jsp").forward(request, response);

}else{

    //设置一个error,将后面的字赋给这个error，以便先一个跳转页面的使用，request的作用域有限

    request.setAttribute("error", "用户名或密码错误!!!");

    request.getRequestDispatcher("login.jsp").forward(request, response);

}

conn.close();
rs.close();

%>

登陆错误显示的页面内容：

userpage.jsp这个页面就是登陆成功之后显示的页面

<%@page import="javafx.scene.chart.PieChart.Data"%>

<%@page import="java.util.Date"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>用户界面</title>

</head>

<body>

<div>

<!-- ${username}是获取到test.jsp 中判断中重新设置的username，知道是谁登陆了，这个是谁的页面 -->

<p>${username},你好，登陆成功！！</p>

</div>

<%

//session的作用域问题，可以记录一个网站的浏览量。先得到一个count

    Object obj=session.getAttribute("count");

//判断这个对象是否为空

    if(obj==null){

        //空则重新设置一下count的值

        session.setAttribute("count", 0);

    }else{

        //否则将得到的对象强转加1，就可以记录浏览量

        int i=(int)obj+1;

        session.setAttribute("count", i);

        %>

        <div>你是第<%=i %>位登陆的用户</div>

    <%

    }

    //获取当前时间

    Date date=new Date();

    out.print("现在时间："+date);

%>

<div>你的IP地址：<%=request.getRemoteAddr()%></div>

</body>

</html>

页面内容：localhost就是127.0.0.1，有时候地址栏是local host时会显示8个0：

　

整个简单的登陆就完事了

想了解EL语言的具体感觉可以看这个 JSP中的EL表达式详细介绍

JSP制作简单登陆的更多相关文章

  1. Eclipse通过jdbc连接数据库制作简单登陆界面

    一.前言: 做网站开发,要求有多种搭配方式,前台技术可以使用PHP.ASP.JSP.ASP.NET.CGI等任何一种: 需要用到的基础语言用的最多的就是HTML/CSS.JS.JAVA.XML这些了, ...

  2. 🈲Eclipse通过jdbc连接数据库制作简单登陆界面【新手必看】

    一.前言: 做网站开发,要求有多种搭配方式,前台技术可以使用PHP.ASP.JSP.ASP.NET.CGI等任何一种: 需要用到的基础语言用的最多的就是HTML/CSS.JS.JAVA.XML这些了, ...

  3. 用asp连接Access数据库 制作简单登陆界面

    [题外话:最近做Internet作业,在这写一个适合初学入门的ASP连接ACCESS数据库做登陆界面的简单的例子,以慰藉我一口气把以前做过的系统中的PHP代码全改成ASP代码来临时应付作业的心情... ...

  4. 【JSP】简单登陆界面

    学生登陆查询系统 1 程序的主要功能及特点 实现一个登录界面的基本功能,具体要求: 登录界面login.jsp含有表单,用户能够输入用户名和密码,并提交表单给verify.jsp. Verify.js ...

  5. 对于使用javaweb技术制作简单管理系统的学习

    近期在老师的引导下我们学习了利用Javaweb技术制作简单的管理系统,其中涉及到的技术很多,由于大多都是自学 对这些技术的理解还太浅显但能实现一些相关功能的雏形. (一).登录功能 在登陆功能中通过与 ...

  6. Jsp制作验证码

    验证码 验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers and Humans Apart&qu ...

  7. 利用Java EE里jsp制作登录界面

    jsp连接数据库.百度经验. 1.在新建的Project中右键新建Floder 2.创建名为lib的包 3.创建完毕之后的工程目录 4.接下来解压你下载的mysql的jar包,拷贝其中的.jar文件 ...

  8. Highcharts使用教程（1）：制作简单图表

    今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...

  9. ZAM 3D 制作简单的3D字幕 流程(二)

    原地址:http://www.cnblogs.com/yk250/p/5663907.html 文中表述仅为本人理解,若有偏差和错误请指正! 接着 ZAM 3D 制作简单的3D字幕 流程(一) .本篇 ...

随机推荐

  1. angularjs下拉框实现渲染html

    angualrjs处于安全的考虑,插值 指令会对相应字符串进行过滤,避免出现html攻击.但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框,代码如下: <body ng-app=& ...

  2. 为什么使用bootstrap在一个页面同时做两个轮播效果时，只有第一个有效？？

    我们都知道使用bootstrap做轮播效果非常快,但是有时候一个页面会需要两个轮播:但这个时候再次使用bootstrap做轮播效果时就会失效:原因在于bootstrap的Carousel问题,只要修改 ...

  3. 【CC2530入门教程-03】CC2530的中断系统及外部中断应用

    第3课  CC2530的中断系统及外部中断应用 广东职业技术学院  欧浩源 一.中断相关的基础概念  内核与外设之间的主要交互方式有两种:轮询和中断. 轮询的方式貌似公平,但实际工作效率很低,且不能及 ...

  4. LinCode 刷题 之二叉树最小深度

    http://www.lintcode.com/zh-cn/problem/minimum-depth-of-binary-tree/  题目描述信息 /** * Definition of Tree ...

  5. php后台拼接输出table表格

    <?php header("Content-type:text/html;charset=utf-8"); $str=''; $str.='<table border= ...

  6. Array和ArrayList的区别与联系

    博主今天去了一个java的实习面试,发现有好多java最基础的数据结构对于博主来说反而感到陌生,在面试官问一些常见的例如HashMap这样的数据结构,博主能回答的头头是道,但是在问到Array和Arr ...

  7. 音乐API之QQ音乐

    欢迎大家来到我的博客,这是我在博客园写的第一篇文章,但不会是最后一篇,希望大家多多关注我,支持我哦!正文开始,今天我们要讲的是QQ音乐的API,都是来源于官方的地址,以前我也想写一个,但百度谷歌之后都 ...

  8. Linux系统介绍

    类似Windows, Linux也是一个操作系统,Linux是一套开放源代码程序,并可以自由传播的类Unix操作系统软件,多用户,多任务并且支持多线程和多CPU的操作系统. Linux系统主要被应用于 ...

  9. 序列、视图、索引（面试看这个就GO了）

    oracle内置对象 序列.视图.索引 序列 create sequence aaa start with 1; 使用 视图 创建好之后 然后直接用 就OK了 有了视图可以代替子查询,使得sql简洁 ...

  10. Flask+uwsgi+Nginx+Ubuntu部署

    学了一段时间flask,可是一直没有做过部署, 于是想着怎么部署呢, 想想,先吧服务给搞通吧,于是呢 就先想着去吧服务给搞起来,这里选择的是Flask+uwsgi+Nginx+Ubuntu, Pyth ...