软概（lesson 1）：Javaweb实现用户登录界面
一、问题描述
二、网站系统开发所需要的技术
网站界面开发：html
后台所需要的技术：java基本内容，数据库语句，连接数据库实现增删改查
本题所用技术：数据库链接以及增加功能，基本html语句
技术内容：
1. 环境配置
在myeclipse下不需要配置Tomcat环境，这里主要写在eclipse下配置Tomcat环境
这是我们新建的一个Dynamic Web项目，在图中可以看到有一个Target runtime，我们点击new runtime然后找到自己下载的Tomcat文件就可以了。实训老师讲的是直接把他那个tomcat8拷过去改个端口号就行，但是我这里还是建议自己配置一下tomcat吧，而且myeclipse最高只支持到7版本。
2.数据库的链接：
这里我用的是sqlserver2008数据库，附上连接数据库的代码
package Bean;
import java.sql.*;
public class DBBean {
private String driverStr = "com.microsoft.sqlserver.jdbc.SQLServerDriver";//驱动
private String connStr = "jdbc:sqlserver://localhost:1433; DatabaseName=WEB";//驱动端口数据库名
private String dbusername = "sa";//登陆数据库账号
private String dbpassword = "";//登陆数据库密码
private Connection conn = null;
private Statement stmt = null; public DBBean()
{ //数据库连接
try
{
Class.forName(driverStr);//加载驱动
conn = DriverManager.getConnection(connStr, dbusername, dbpassword);
stmt = conn.createStatement();
}
catch (Exception ex) {
System.out.println("数据连接失败！");
} }
实训老师用的是MySQL，区别不大，这里也附上他提供的连接方法
package com.jaovo.msg.Util; import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException; public class DBUtil { public static Connection getConnection() {
try {
//1 加载驱动
Class.forName("com.mysql.jdbc.Driver").newInstance();
} catch (InstantiationException | IllegalAccessException | ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
String user = "root";
String password = "root";
String url = "jdbc:mysql://localhost:3306/jaovo_msg";
Connection connection = null;
try {
//2 创建链接对象connection
connection = DriverManager.getConnection(url,user,password);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return connection;
} //关闭资源的方法
public static void close(Connection connection ) {
try {
if (connection != null) {
connection.close();
} } catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public static void close(PreparedStatement preparedStatement ) {
try {
if (preparedStatement != null) {
preparedStatement.close();
} } catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public static void close(ResultSet resultSet ) {
try {
if (resultSet != null) {
resultSet.close();
} } catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} }
3.前台html设计
由于这里琐碎知识点较多，我这里就直接提供我学习html 的网站：http://www.w3school.com.cn/html/html_jianjie.asp
4.其他知识
这里主要涉及到数据库的操作，包括一些数据库语句，这些在下面的代码中都有体现，我就不一 一阐述了。
二、
login.html
·<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录页面</title>
<style type="text/css">
body {
background-image: url(image/background.jpg);
}
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function()
{
var bt=document.getElementById("bt");
bt.onclick=function()
{
if(document.myform.username.value=="")
{
alert("用户名不能为空!");
document.myform.username.focus();
return false;
}
else if(document.myform.password.value=="")
{
alert("密码不能为空!");
document.myform.password.focus();
return false;
}
}
}
</script> <style type="text/css">
body {
background-image: image/background.jpg;
background-repeat: no-repeat;
background-color: #CFF;
}
#apDiv1 {
position: absolute;
width: 570px;
height: 236px;
z-index: 1;
left: 277px;
top: 191px;
}
#apDiv2 {
position: absolute;
width: 284px;
height: 248px;
z-index: 1;
left: 778px;
top: 9px;
}
</style>
</head> <body>
<center>
<h1 style="color:#0F0">登录</h1>
<form action="judge.jsp" method="post" name="myform">
<ul>
<li>用户名:<input type="text" name="username" id="name" /></li>
<li>密码:<input type="password" name="password" id="age" /></li>
<li><input type="submit" value="登录" id="bt"/></li>
</ul>
</form>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="600">
<param name="movie" value="flash5126.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="image/flash5126.swf" width="300" height="600">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->
<div>
<h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</center>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>
sucess.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'success.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">
-->
<style type="text/css">
body {
background-image: url(image/background2.jpg); } .ziti {
font-size: 50px;
font-style: oblique;
color: #000;
}
</style>
</head> <body class="ziti">
<%
//判断application对象中有没有保存名为count的参数
//如果没有，在application对象中新增一个名为count的参数
if(application.getAttribute("count")==null){
application.setAttribute("count", new Integer(0));
}
Integer count = (Integer)application.getAttribute("count");
//使用application对象读取count参数的值，再在原值基础上累加1
application.setAttribute("count",new Integer(count.intValue()+1));
%>
<center>
登录成功！ <br>
<h5>
<!-- 输出累加后的count参数对应的值 -->
欢迎您访问，本页面已经被访问过 <font color="#ff0000"><%=application.getAttribute("count") %></font>次。。。。
</h5>
</center>
</body>
</html>
fail.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'success.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">
-->
<style type="text/css">
body {
background-image: url(image/background3.jpg); } .ziti {
font-size: 50px;
font-style: oblique;
color: #000;
}
</style>
</style>
</head> <body class="ziti">
<center>
登录失败！ <br>
</center>
</body>
</html>
judge.jsp
<%@ page import="java.sql.*" 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>Insert title here</title>
</head>
<body>
<jsp:useBean id="db" class= "Bean.DBBean" scope="page"/>
<%
request.setCharacterEncoding("utf-8");
String username=(String)request.getParameter("username");
String password=(String)request.getParameter("password");
String sql="select * from dbo.login where username="+"'"+username+"'";//定义一个查询语句
ResultSet rs=db.executeQuery(sql);//运行上面的语句
if(rs.next())
{
if(password.equals(rs.getObject("password"))){
response.sendRedirect("success.jsp");
}
else{
response.sendRedirect("fail.html");
}
}
else
{
out.print("<script language='javaScript'> alert('账号错误——else');</script>");
response.setHeader("refresh", "0;url=login.html");
} %>
</body>
</html>
DBBean
package Bean;
import java.sql.*;
public class DBBean {
private String driverStr = "com.microsoft.sqlserver.jdbc.SQLServerDriver";//驱动
private String connStr = "jdbc:sqlserver://localhost:1433; DatabaseName=WEB";//驱动端口数据库名
private String dbusername = "sa";//登陆数据库账号
private String dbpassword = "123456";//登陆数据库密码
private Connection conn = null;
private Statement stmt = null; public DBBean()
{ //数据库连接
try
{
Class.forName(driverStr);//加载驱动
conn = DriverManager.getConnection(connStr, dbusername, dbpassword);
stmt = conn.createStatement();
}
catch (Exception ex) {
System.out.println("数据连接失败！");
} } public int executeUpdate(String s) {
int result = 0;
System.out.println("--更新语句:"+s+"\n");
try {
result = stmt.executeUpdate(s);
} catch (Exception ex) {
System.out.println("执行更新错误！");
}
return result;
} public ResultSet executeQuery(String s) {
ResultSet rs = null;
System.out.print("--查询语句:"+s+"\n");
try {
rs = stmt.executeQuery(s);
} catch (Exception ex) {
System.out.println("ִ执行查询错误！");
}
return rs;
}
public void execQuery(String s){
try {
stmt.executeUpdate(s);
} catch (SQLException e) {
// TODO Auto-generated catch block
System.out.println("执行插入错误！");
}
} public void close() {
try {
stmt.close();
conn.close();
} catch (Exception e) {
}
}
}
三、运行结果截图
四、课堂测试未及时完成原因
其实课堂测试的源代码培训老师已经放到群里，但是当时确实不太会，也看不懂，甚至连如何创建项目都不太会，只知道依葫芦画瓢，照着视频敲。所以那时候也没想着就是照着老师的代码直接复制然后草草完成任务，而是想把这些都搞懂了，在写。
五、对这门课的希望以及目标
一开始确实对这门课很绝望，但是后来和一个学长聊了以后又再次充满希望，觉得自己有能力学好这门课。未来一到两周可能花费时间较少，因为这两周的事情比较多，要把以前欠的债全都还掉，等熬过去，每周的课余时间都会花在这门课上，也希望自己学期末可以为自己感到自豪。
软概（lesson 1）：Javaweb实现用户登录界面的更多相关文章
- 很漂亮的用户登录界面HTML模板
效果预览:http://keleyi.com/keleyi/phtml/divcss/21.htm HoverTree开源项目实现了分层后,准备实现管理员后台登录,这里先把登录界面的HTML模板整理好 ...
- 美化VC界面(用户登录界面)
源代码:下载 VC开发程序单调的界面相信大家都是深有感触,提到界面美化编程,人们都会说做界面不要用VC写,太难了.一句俗语:难者不会,会者不难.VC的美化界面编程并没有人们想像的那么难.这篇文章是我写 ...
- html简约风用户登录界面网页制作html5-css-jquary-学习模版
2018--12-12 喜迎双十二,咳咳,,,,我不是打广告哈,购物的节日也不要忘记学习. 大家好,我又来了. 今天抽出来空把自己的学习心得给大家分享,这是一个可开发可扩展的用户登录界面,用于开发学习 ...
- Android studio 开发一个用户登录界面
Android studio 开发一个用户登录界面 activity_main.xml <?xml version="1.0" encoding="utf-8&qu ...
- jQuery和CSS3炫酷GOOGLE样式的用户登录界面
这是一款使用jQuery和CSS3打造的GOOGLE样式的用户登录界面特效.该登录界面特效中,右上角的小问号和错误提示小图标使用SVG来制作.username和password输入框採用浮动标签特效. ...
- 编写Java程序，使用Swing布局管理器与常用控件，实现用户登录界面
返回本章节 返回作业目录 需求说明: 使用Swing布局管理器与常用控件,实现用户登录界面 实现思路: 创建用户登录界面的类LoginFrame,在该类中创建无参数的构造方法,在构造方法中,设置窗体大 ...
- JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
- Java Web 开发利用Struts2+Spring+mybatis写一个用户登录界面以及简单的数据交互
框架的东西太复杂也难以讲通,直接上代码: 一.首先得配置环境 和导入必要的jar包 有一些重要的如下: Filter文件夹下的SafetyFilter.java model文件夹下的 Global ...
- Google用户登录界面 Android实现
实验效果: 项目目录: Java代码(放在Src文件下) package com.bn.chap9.login; import java.io.BufferedReader; import java. ...
随机推荐
- 项目启动时发生NOT found
一直想记录一下这个小问题 情景: 我昨晚美滋滋的做完功能,测了测没bug提交到git上之后就屁颠屁颠的回家了,结果今天早上来就失了智,git pull拉了一下代码后,一运行,我去,我的页面呢,页面上直 ...
- jquery制作移动端菜单栏左右滑动
//菜单栏滑动function move_scollX(){ var startPosition, endPosition, distanceX,distanceY; $(".left&qu ...
- hosts 文件
各系统平台hosts文件存放路径 路径如下: Windows系统: C:\Windows\System32\drivers\etc\hosts Linux系统:/etc/hosts ...
- 每篇半小时1天入门MongoDB——1. MongoDB介绍和安装
目录:ASP.NET MVC企业级实战目录 MongoDB简介 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据 ...
- Android 开创java世界(JNI Invocation API)
在Android的世界中,由名称为app_process的C++本地应用程序(路径为:framework/base/cmds/app_process/app_main.cpp)调用JNI Invoca ...
- python常用模块json
python jons模块 json模块 主要是解决数据格式的转换问题,比如python接收到json对象需要转换为python对象,供python处理,亦或者python数据需要发送到其给其他客户端 ...
- 如何使用C语言的面向对象
我们都知道,C++才是面向对象的语言,但是C语言是否能使用面向对象的功能? (1)继承性 typedef struct _parent { int data_parent; }Parent; type ...
- C#项目实践之一——WPF多媒体通讯录
1.Window.Resources 是一种Window级的资源定义. Window.Resources它的作用范围就是在Window容器里的所有子控件,也只有这些子控件才能引用/调用这些资源 Gr ...
- C# show和showdialog区别
简单地说他们的区别就是show弹出来的窗体和父窗体(上一个窗体的简称)是属于同一等级的,这两个窗体可以同时存在而且可以随意切换,但是showdialog弹出来的窗体就不能这样,他永远是被置顶的,如果不 ...
- Redhat 下 XAMPP 安装和部署 DVWA 教程
XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包.这个软件包原来的名字是 LAMPP,但是为了避免误解,最新的几个版本就改名为 XAMPP 了.它可以在Windo ...