用jsp实现网站登录界面的制作,并连接数据库

            课堂测试

任务需求:

撰写一篇博客

需要网站系统开发需要掌握的技术;

本次课堂测试的源程序代码;

运行结果截图;

说明课堂测试未按时完成的原因。

列出你对这门课的希望和自己的目标,并具体列出你计划每周花多少时间在这门课上。

 

 

这里介绍一下怎样连接数据库,并用jsp制作一个简单的登录界面

1.首先需要搭建好环境,有Tomcat,eslipse,jdk等,并配置好环境变量,并安装好数据库,这里我使用的数据库是mysql数据库,并下载了一个MySQL的图形界面的软件,当上面的准备工作完成后就可以开始做了。

2.(1)首先应该连接好数据库

这是数据库的图形显示界面,

 (2)打开后首先创建一个mysql新连接。

 

(3)然后在这个界面设置好这个连接点的名字,还有密码,密码需要记住,在以后打开mysql后连接数据库的的时候需要输入,其他的内容不需要修改,完成后点击确定即可。

 

(4)在这个连接点的wzw1下新建一个表

 

(5)新建表以后需要在表格中填入信息,因为我们用到的是用户的用户名和密码,所以建立user和password

 

(6)点击添加字段

 

 

(7)添加字段以后然后继续填入信息

 

(8)然后点击保存,在弹出的界面中输入表的名字

 

(9)我新建的表名是wzw2,打开然后看到这个界面,说明,建表成功

 

这样,你就完成了mysql的对于建立登陆界面的初级设置。

3,接下来,打开eslipse,新建一个这样的工程

 

会出现如下界面

 

第一次打开需要配置好tomcat

 

然后输入工程名,点击finish即可

4.建立好工程后,从你的mysql-connector-java下找到下图所示的文件,将他复制下来

 

打开创建的工程,在文件名为WebContent下的WEB—INF下的lib文件下,粘贴复制的内容,这样就可以把mysql和这个工程相连接,如下图所示

 

这样就连接成功了

 

5.然后可以新建一个jsp文件

 

输入自己想命名的文件名,点击finish

 

打开jsp文件会出现如下界面,需要将charset=ISO-8859-1改为charset=utf-8

 

写jsp文件需要了解一些html的编写语法,下面是我的代码

 

 

 

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

 

 

<script>

    function $(id) {

        return document.getElementById(id);    //这个是返回一个id格式命名的对象,比如说下面的用户名标签里面的id是“user”,那么返回的就是user这个对象,

        //返回的对象可以留给下面的check()方法使用

    }

    function check(){//check()方法是用来判断是否跳转到下一个jsp界面。

        var user=$("user").value;

        var psd=$("psd").value;//用user和psd获取对象的信息

        $("userinfo").innerHTML="";

        $("psdinfo").innerHTML="";//用userinfo和psdinfo来书写提示内容,例如没有输入用户名这个提示信息,没有输入密码等,

        if(user=="")//如果用户名为空,将userinfo的内容赋为如下内容,即可以显示提示信息

            {

                $("userinfo").innerHTML="用户名不能为空";

                $("user").focus();

                return false;//这时候不能跳转页面,所以返回为false

            }

        if(psd=="")

            {

                $("psdinfo").innerHTML="密码不能为空";//同上

                $("psd").focus();

                return false;

            }

        return true;

    }

    //script之中写的是Java的内容,下面的是

</script>

 

 

 

<title>登录</title>

</head>

<body background=file:///E:/工作目录/myJavaweb/1.jpg>

 

    <center>

    <form action ="loginResultre.jsp" method="post" onsubmit="return check()">//这个标签是用来引用下一个jsp文件,引用方式是通过看check(),如果是true就进入下一个界面,否则就停在这个界面。

    <table>

    <tr><td>用户名</td><td><input name="userName" id="user"><span id="userinfo"></span></td></tr>

    <tr><td>密码</td><td><input type="password"name="userword" id="psd"><span id="psdinfo"></span></td></tr>

    <tr><td><input type="submit" value="登录"></td></tr>

    </table>

    </form>

    </center>

</body>

</html>

 

 

 

<%@ page language="java" import="java.sql.*" 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>

    <%//这个《%是用来编译Java内容

        Connection conn = null;

        PreparedStatement pstmt = null;

        ResultSet rs = null;//定义好链接,执行,和结果

        String driverName = "com.mysql.jdbc.Driver";

        String userName = "root";//数据库的名

        String userPwd = "199762";//数据库密码

        String dbName = "wzw1";//数据表的名字

        String url1 = "jdbc:mysql://localhost:3306/" + dbName;

        String url2 = "?user=" + userName + "&password=" + userPwd;

        String url3 = "&useUnicode=true&characterEncoding=UTF-8";//规定好字符集

        String url = url1 + url2 + url3;//将上面三条的信息总起来

        request.setCharacterEncoding("UTF-8");//规定好字符集

        Class.forName(driverName);//连接数据库

        conn = DriverManager.getConnection(url);//把信息传过来

        String sql = "select * from wzw1 where user=? and password=?";//查询的命令

        pstmt = conn.prepareStatement(sql);//执行

        String user = request.getParameter("userName");//获取上一个页面的信息

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

        pstmt.setString(1, user);//对两个内容进行处理

        pstmt.setString(2, password);

        rs = pstmt.executeQuery();//查询

        if(rs.next()) {

            %><center><h1>用户 <%=rs.getString("user")%>登陆成功!</h1></center>

        <%}

        else {

            %><center><h1>用户名或密码错误!</h1></center>

        <%}

        if(rs != null) {

            rs.close();

        }

        if(pstmt != null) {

            pstmt.close();

        }

        if(conn != null) {

            conn.close();//这里哪里出现问题了,就关掉那个变量

        }

    %>

</body>

</html>

结果截图:

主页:

 

登录后的结果

 

如果输入为空,则提示。

 

 

 

 

课堂测试未完成的原因:暑假里用的时间不够多,没有认真对待。

 

希望和目标:希望能利用Java技术实现网页的动态设计,理解Java算法,完成老师交给的任务。

 

计划花在软件工程上的时间:周一到周五:每天一小时,周六日:每天四个小时。

合计13小时。

posted @ 2017-02-24 20:25  倾恬xt  阅读(14687)  评论(1编辑  收藏  举报