软概（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. ...
随机推荐
- (三)Sass和Compass--制作精灵图片
6.1 精灵的工作原理 // 将各种图片合并到一张图片里面,并在不同的状态下改变背景图片的位置; 6.2 精灵的重要性 // 压缩图片的内存; // 减少HTTP请求 6.2.3 Compass处理精 ...
- Google Chrome 中安装 PostMan 扩展
简介 PostMan 是调试 HTTP 请求的好工具,也是业界的佼佼者,这对于我们开发 Web Service 提供了很好的调试入口,支持请求认证机制.最关键的是,这个工具提供 Google Chro ...
- 2017-12-01 中英文代码对比之ZLOGO 4 & LOGO
基于前文中文编程语言之Z语言初尝试: ZLOGO 4的一些评论, 此文尝试作一个非常简单的代码对比, 使讨论更加有实例根据. 下图是节选自前文最后的示例代码, 由于选取的对照LOGO版本 (alanc ...
- 【机器学习】激活函数（Activation Function）
https://blog.csdn.net/ChenVast/article/details/81382795 激活函数是模型整个结构中的非线性扭曲力 神经网络的每层都会有一个激活函数 1.逻辑函数( ...
- Python 再谈变量作用域与变量引用
再谈变量作用域与变量引用 by:授客 QQ:1033553122 module3.py #!/usr/bin/env python # -*- coding:utf-8 -*- __author_ ...
- Java String和Date的转换
String—>Date方法一: String dateString = "2016-01-08"; try { SimpleDateFormat sdf = new Sim ...
- Spring security实现国际化问题
这两天Spring用户登录国际化这个问题困扰我好久啊,于昨天晚上终于把它干掉了. 场景就是我们公司的产品-incopat,需要支持中英文,用户登录这块用的spring自带的security,需求讲的通 ...
- SpringCloud+Feign环境下文件上传与form-data同时存在的解决办法(2)
书接上文. 上文中描述了如何在 SpringCloud+Feign环境下上传文件与form-data同时存在的解决办法,实践证明基本可行,但却会引入其他问题. 主要导致的后果是: 1. 无法与普通Fe ...
- 微信小程序-下拉事件（onPullDownRefresh）不触发
1.app.json 没有配置 "window": { /* 其他配置信息 */ "enablePullDownRefresh":true } 2.scroll ...
- linux kernel 源码安装
有时我们在安装系统后,发现没有安装当前系统的内核源码在/usr/src/kernels目录下,其实我们是少安装了一个rpm包: 当你配置好yum源后: yum install kernel-devel ...