zoukankan      html  css  js  c++  java
  • 初试Web登录界面

      web项目中有形形色色的标签,现在流行的Web项目一般都是HTML+CSS+JSP,来完整的写出一个功能完善,外形美观的Web网页。

      周一进行了Web简单登录网站的测验。下面来写一下我的网站是怎么写的。

      首先,新建一个工程Dynamic Web。然后缕一下思路,首先,这个网页需要一个连接数据库的程序,需要一个登录界面,需要一个信息核对程序,需要一个登录成功后的界面。然后,开始写程序。

      在Java Resources 的src里面新建一个Bean包,然后里面建一个类DBean,在Dean里面要写的就是连接数据库的程序。我是用这种方法来连接数据库的。下面是我的代码:

      

    package bean;
    import java.sql.*;
    public class DBean {
    private String driverStr = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
    private String connStr = "jdbc:sqlserver://localhost:1433; DatabaseName=Test";
    private String dbusername = "sa";
    private String dbpassword = "123456";
    private Connection conn = null;
    private Statement stmt = null;

    public DBean()
    {
    try
    {
    Class.forName(driverStr); //加载数据库驱动
    conn = DriverManager.getConnection(connStr, dbusername, dbpassword);//连接数据库
    stmt = conn.createStatement(); //实例化Statement对象(为了执行不带参数的简单SQL语句)
    }
    catch (Exception ex) {
    System.out.println("无法同数据库建立连接!");
    }

    }

    public int executeUpdate(String s) { //更新表 ,SQL语句

    int result = 0;
    try {
    result = stmt.executeUpdate(s);
    } catch (Exception ex) {
    System.out.println("执行更新错误!");
    System.out.println(s);
    }
    return result;
    }

    public ResultSet executeQuery(String s) { //SQL查询
    ResultSet rs = null;
    try {
    rs = stmt.executeQuery(s);
    } catch (Exception ex) {
    System.out.println( "执行查询错误!");
    System.out.println(s);
    }
    return rs;
    }
    public void execQuery(String s){ //SQL更改
    try {
    stmt.executeUpdate(s);
    } catch (SQLException e) {
    // TODO Auto-generated catch block
    System.out.println("执行插入错误");
    System.out.println(s);
    }
    }

    public void close() { //关闭连接
    try {
    stmt.close();
    conn.close();
    } catch (Exception e) {
    }
    }
    }

      通过jdbc方法来连接数据库的。程序中,有连接数据库的函数来进行加载数据库驱动,进行数据库的连接,并且实例化有一个Statement对象。然后还有数据库更新查询函数,用来下面运行SQL更新,查询语句。这个连接数据库的程序就写好了。

      然后要进行登录界面,核对界面,登陆成功界面的编写,在WebContent里面新建了三个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>
    <title>登录界面</title>

    <script type="text/javascript">
    function checkIP() {
    //js表单验证方法
    var text1=document.getElementById("username").value;//通过id获取需要验证的表单元素的值,返回username的值
    var text2=document.getElementById("password").value;//通过id获取需要验证的表单元素的值,返回password的值
    if(text1=="")
    {//当上面获取的值为空时
    alert("用户名不能为空!");//弹出提示
    return false;//返回false(不提交表单)
    }
    if(text2=="")
    {//当上面获取的值为空时
    alert("密码不能为空!");//弹出提示
    return false;//返回false(不提交表单)
    }
    return true;//提交表单
    }

    </script>

    </head>
    <body class="body_one" background="D:/网页图片/hehua.jpg">

    <div id="all">
    <div id="input">
    <center>
    <form id="indexform" name="indexForm" action="LoginCheck.jsp" method="post" onsubmit="return checkIP();">
    <table border="0" align="center" cellspacing=0 padding:0 >
    <tr>
    <td>账&nbsp;户:</td>
    <td><input type="text" id="username" name="username"class="textIn_one"></td>
    </tr>
    <tr><td rowspan="2">&nbsp;</td></tr>
    <tr>
    <td> </td>
    </tr>
    <tr>
    <td>密&nbsp;码:</td>
    <td><input type="password" id="password" name="password" class="textIn_one" ></td>
    </tr>
    <tr><td rowspan="2">&nbsp;</td></tr>
    <tr>
    <td> </td>
    </tr>

    </table>
    <table >
    <br>
    <tr>
    <td><div class="button_1">
    <input type="submit" value="登录" onclick="checkIP()"style="color:#000;120px;height:40px;font-size: 25px;">
    </div><div class="button_2">
    <input type="reset" value="重置"style="color:#000;120px;height:40px;font-size: 25px;">
    </div></td>
    </tr>
    </form>
    </table>

    </center>
    </div>
    <p class="Copyright" align="center">Copyright &copy; 2016.Company name All rights reserved.</p>
    </div>

    </body>
    </html>

      首先,是有function定义的一个函数来判断是否输入了 账号或者密码,如果没有输入用alter警示语来显示警示框。然后下面是用HTML语言写的一个登录界面,有账号登录和密码登录,有登录按钮和重置按钮。在登录之后页面跳转到了登录核对程序来进行程序核对。

      下面是我的程序核对程序:

      

    <%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@page import="java.sql.*" %>
    <%@page import="java.io.PrintWriter" %>
    <%@page import="java.io.IOException" %>
    <!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>

    <jsp:useBean id="db" class="bean.DBean" scope="page" />
    <% //凭借db来 调用bean.DBean程序
    request.setCharacterEncoding("UTF-8"); //读取请求数据时所使用的字符编码为UTF-8
    String password=(String)request.getParameter("password");//获取文本里面输入的密码
    String username=(String)request.getParameter("username");//获取从文本里面输入的账号
    session.setAttribute("password",password); //把从文本里面获取的面值,保存在变量password中
    session.setAttribute("username",username);


    String sql="select * from Test.dbo.userTable where username="+"'"+username+"'";//SQL查询语句,查询username
    ResultSet rs=db.executeQuery(sql);//执行SQL语句
    if(rs.next()) //查询下一个数据,即password
    {
    if(password.equals(rs.getObject("password"))) //从数据库中调用密码
    {
    session.setAttribute("LoginID",username);//将账号保存到LoginID中,方便以后调用
    response.sendRedirect("Main.jsp"); // 调到主函数页面
    }
    else
    {
    out.print("<script language='javaScript'> alert('密码输入错误,请重新输入!');</script>");//密码不对,提示重新输入
    response.setHeader("refresh", "1;url=Login.jsp");//刷新页面,转到登录输入页面进行重新输入
    }
    }
    else{
    out.print("<script language='javaScript'> alert('账号输入有误,请重新输入!');</script>");//账号不对提示重新输入
    response.sendRedirect("Login.jsp");//调到输入页面
    }
    rs.close();//关闭数据库调用
    db.close(); //停止java文件的调用



    %>
    </body>
    </html>

      此界面先引用了连接数据库的程序来连接数据库,然后又定义了账号密码变量,通过request.getParament方法来获页面中输入账号和密码的数据,并赋值给这两个变量。下面再通过SQL查询语句从数据库中调取账号密码数据,来进行if语句的核对,核对成功之后跳转到登录成功界面的程序,登录失败之后跳转到登录程序。以上就是这个程序的大概。登录成功的网页比较简单,具体程序如下:

      

    <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
    <%
    String path = request.getContextPath(); //
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <base href="<%=basePath%>">

    <title>My JSP 'Main.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

    </head>

    <body>
    Welcom,<%=session.getAttribute("username") %><br>

    </body>
    </html>

  • 相关阅读:
    2021.4.11(每周总结)
    2021.4.9
    2021.4.8
    2021.4.7
    k8s集群安装(一)安装方案介绍
    k8s映射外部服务Endpoints
    Linux服务器配置上网代理squid
    SonarQube学习笔记
    yum安装指定版本mysql
    linux目录没有颜色的处理
  • 原文地址:https://www.cnblogs.com/xieshiyu/p/6439918.html
Copyright © 2011-2022 走看看