Web前端开发：SQL Jsp小项目（一）
Jsp的学习算是告一段落，针对这段时间的学习，写了一个Jsp小项目来巩固学到的知识。
框架示意图
User list process
UserAdd process
需要的界面效果：
需要工具：Eclipse、TomCat v8.0和PL/SQL
先用PL/SQL创建一个用户c##cms，并创建一个cms_user表单
首先，需要写一个JSP——add界面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%> <%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> <html>
<head>
<base href="<%=basePath%>" />
<title>用户添加</title>
<link rel="stylesheet" type="text/css" title="xp"
href="css/skins/xp/validator/component.css" />
<link rel="stylesheet" type="text/css" title="xp"
href="css/skins/xp/navbar/nav.css" />
<link rel="stylesheet" type="text/css" title="xp"
href="css/skins/xp/table/skin.css" />
<link rel="stylesheet" type="text/css" title="xp"
href="css/skins/xp/time/skin.css" />
<script type="text/javascript" src="jscript/time/calendar.js"></script>
<script type="text/javascript" src="jscript/time/calendar-zh.js"></script>
<script type="text/javascript" src="jscript/time/calendar-setup.js"></script>
<script type="text/javascript" src="jscript/common.js"></script>
<script type="text/javascript" src="jscript/validator/form_validator.js" /></script> <style type="text/css">
body, table, td, select, textarea, input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<div id="main"> <form name="backuserform" method="post" action="admin/UserAddServlet"
onSubmit='return submitForm(document.forms[0]);'>
<table class="standard">
<thead>
<tr>
<th align="center" colspan="">用户添加</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">用户名</td>
<td align="left"><input name="name" type="text" TABINDEX=""
id="name" />
<div class="Info">
<div id="name_info"></div>
</div></td>
</tr>
<tr>
<td align="left">用户密码</td>
<td align="left"><input name="password" type="password"
value="" TABINDEX="" id="password" />
<div class="Info">
<div id="password_info"></div>
</div></td>
</tr> <tr>
<td align="left">角色</td>
<td align="left"><select name="role" TABINDEX="" id="role">
<option value="">超级管理员</option>
</select> <div class="Info">
<div id="role_info"></div>
</div></td>
</tr> <tr>
<td align="left">是否有效</td>
<td align="left"><select name="valid" TABINDEX="" id="valid">
<option value="">有效</option>
<option value="">无效</option>
</select>
<div class="Info">
<div id="valid_info"></div>
</div></td>
</tr>
<tr>
<td align="left">EMAIL</td>
<td align="left"><input name="email" type="text" value=""
TABINDEX="" id="email" />
<div class="Info">
<div id="email_info"></div>
</div></td>
</tr> <tr>
<td align="left">电话</td>
<td align="left"><input name="phone" type="text" value=""
TABINDEX="" id="phone" />
<div class="Info">
<div id="phone_info"></div>
</div></td>
</tr> <tr>
<td colspan="" align="center"><input class="submitButton"
type="submit" TABINDEX="" name="submit" value="提 交">
<input type="button" name="返回" class="submitButton" value="返回"
onclick="history.back();"></td>
</tr> </tbody>
<tfoot>
<tr>
<td colspan="" style="text-align: left"></td> </tr>
</tfoot>
</table>
</form>
</div>
</body>
</html>
本页面接收的数据打包封装并发送到UserServlet，
package com.jaovo.jcms.user; import java.io.IOException;
import java.sql.Timestamp;
import java.util.Date; import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServlet; import com.jaovo.jcms.service.UserService; public class UserAddServlet extends HttpServlet{ public UserAddServlet() {
super();
} @Override
public void service(ServletRequest request, ServletResponse response)
throws ServletException, IOException {
//获取 客户端（浏览器）提交的数据
String name = request.getParameter("name");
String password = request.getParameter("password");
String valid = request.getParameter("valid");
String email = request.getParameter("email");
String phone = request.getParameter("phone"); //把数据封装到User对象里面去
User user = new User();
user.setName(name);
user.setEmail(email);
user.setPassword(password);
user.setPhone(phone);
user.setTime_stamp(new Timestamp(new Date().getTime()));//获取系统当前时间，当做注册时间 //这里要进行插入数据库
UserService us = new UserService();
us.addUser(user); this.getServletContext()
.getRequestDispatcher("/admin/user_list.jsp")
.forward(request, response);
}
}
UserServlet接收到之后，还需要一个实体类，来封装数据，创建User实体类：
package com.jaovo.jcms.user;
import java.util.Date;
public class User {
private String name;
private String password;
private int valid;
private String email;
private String phone;
private Date time_stamp;
private int id;
//private String role;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public int getValid() {
return valid;
}
public void setValid(int valid) {
this.valid = valid;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public Date getTime_stamp() {
return time_stamp;
}
public void setTime_stamp(Date time_stamp) {
this.time_stamp = time_stamp;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public User() {
super();
// TODO Auto-generated constructor stub
}
public User(String name, String password, int valid, String email,
String phone, Date time_stamp, int id) {
super();
this.name = name;
this.password = password;
this.valid = valid;
this.email = email;
this.phone = phone;
this.time_stamp = time_stamp;
this.id = id;
}
@Override
public String toString() {
return "User [name=" + name + ", password=" + password + ", valid="
+ valid + ", email=" + email + ", phone=" + phone
+ ", time_stamp=" + time_stamp + ", id=" + id + "]";
}
}
调用UserService方法写入数据库（注: 真正连接数据库的方法另外写在一个工具类中，以方便后面优化）：
package com.jaovo.jcms.service; import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Timestamp;
import java.util.ArrayList;
import java.util.Date; import com.jaovo.jcms.user.User;
import com.jaovo.jcms.util.DB; //服务：是为了往数据库中操作（添加）来创建一个层
public class UserService {
//---------------用户添加的方法
public void addUser(User user) {
Connection conn = DB.getConnection();//-------已经把事务提交给关闭了
PreparedStatement pstmt = null;
String sql = "insert into cms_user(name,password,valid,email,phone,time_stamp) values(?,?,?,?,?,?)";
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(, user.getName());
pstmt.setString(, user.getPassword());
pstmt.setInt(, user.getValid());
pstmt.setString(, user.getEmail());
pstmt.setString(, user.getPhone());
pstmt.setTimestamp(, new Timestamp(new Date().getTime()));
//执行到数据库
pstmt.executeUpdate();
DB.commit(conn);
} catch (SQLException e) {
DB.rollback(conn);//回滚 其实一条语句失败了不需要回滚
e.printStackTrace();
}finally{
DB.close(pstmt);
DB.close(conn);
}
} //用户的查询方法
public ArrayList getUser(String name){
String sql = "select name,password,valid,time_stamp,email,phone,id from cms_user where name like ?";
Connection conn = DB.getConnection();
PreparedStatement pstmt = null;
ResultSet rs = null; ArrayList<User> list = new ArrayList<User>(); try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(, "%"+name+"%");
rs = pstmt.executeQuery(); while (rs.next()) {
User user = new User();
user.setName(rs.getString());
user.setPassword(rs.getString());
user.setValid(rs.getInt());
user.setTime_stamp(rs.getTimestamp());
user.setEmail(rs.getString());
user.setPhone(rs.getString());
user.setId(rs.getInt());//------返回数据库，查看序列 list.add(user);
}
} catch (SQLException e) {
DB.rollback(conn);
e.printStackTrace();
}finally{
DB.close(rs);
DB.close(pstmt);
DB.commit(conn);
DB.close(conn);
}
return list;
}
}
真正连接数据库的工具类，DB类：
package com.jaovo.jcms.util; import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException; //DB.java 是一个Jdbc链接类
/*
* 只是一个工具类
*/
public class DB {
//用来获取数据库链接
public static Connection getConnection() {
Connection conn = null;
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
conn = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:orcl","c##cms","cms");
//-------------------
//事务提交为false
conn.setAutoCommit(false);
} catch (SQLException | ClassNotFoundException e) {
e.printStackTrace();
}
return conn;
} //关闭语句对象
public static void close(PreparedStatement pstmt){
try {
if (pstmt != null) {
pstmt.close();
}
} catch (SQLException e) {
System.out.println("关闭异常-语句对象DB---------");
e.printStackTrace();
}
}
//关闭返回集
public static void close(ResultSet rs) {
try {
if (rs != null) {
rs.close();
}
} catch (SQLException e) {
System.out.println("关闭异常-返回集DB-----------");
e.printStackTrace();
}
} //关闭链接
public static void close(Connection conn) {
try {
if (conn != null) {
conn.close();
}
} catch (SQLException e) {
System.out.println("关闭异常-资源DB-----------");
e.printStackTrace();
}
} //事务回滚的方法
public static void rollback(Connection conn) {
try {
conn.rollback();
} catch (SQLException e) {
e.printStackTrace();
}
} //设置手动提交方法
public static void commit(Connection conn) {
if (conn != null) {
try {
conn.commit();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
需要配置xml文件：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>JCMS</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>userAddServlet</servlet-name>
<servlet-class>com.jaovo.jcms.user.UserAddServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>userAddServlet</servlet-name>
<url-pattern>/admin/userAddServlet</url-pattern>
</servlet-mapping> <servlet>
<servlet-name>userListServlet</servlet-name>
<servlet-class>com.jaovo.jcms.user.UserListServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>userListServlet</servlet-name>
<url-pattern>/admin/userListServlet</url-pattern>
</servlet-mapping>
</web-app>
回到正题，在上面UserServlet里面的，数据封装之后返回user_list.jsp,这个界面负责遍历显示数据库中的用户并提供更改，删除功能（暂未实现，下个版本实现）
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<%@ page import="com.jaovo.jcms.user.User" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<base href="<%=basePath%>" />
<head>
<title>backuser</title>
<style type="text/css">
body,table,td,select,textarea,input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
</style>
<link rel="stylesheet" type="text/css" title="xp"
href="css/skins/xp/validator/component.css" />
<link rel="stylesheet" type="text/css" title="xp"
href="css/skins/xp/navbar/nav.css" />
<link rel="stylesheet" type="text/css" title="xp"
href="css/skins/xp/table/skin.css" />
<link rel="stylesheet" type="text/css" title="xp"
href="css/skins/xp/time/skin.css" /> <script type="text/javascript"> function turn(frm,oper,totalpage,curpage,msg){ if(oper=='first'){ if(curpage==){
return;
}
frm.pagenum.value = ;
frm.submit();
return;
}else if(oper=='prev'){
if(curpage==){
return;
}
frm.pagenum.value = (curpage-);
frm.submit();
return;
}else if(oper=='next'){
if(curpage>=totalpage){
return;
}
frm.pagenum.value = (curpage+);
frm.submit();
return;
}else if(oper=='last'){
if(curpage>=totalpage){
return;
}
frm.pagenum.value = totalpage;
frm.submit();
return;
}else if(oper=='jump'){
var jpage = document.getElementById("jumpto");
var jpagev = curpage;
if(jpage.value==""||!(jpage.value.search(/^(-|\+)?\d+$/) != -)){
alert(msg);
jpage.focus();
jpage.select();
return;
}else{
jpagev = parseInt(jpage.value);
}
if(jpagev==curpage||jpagev>totalpage||jpagev<=){
return;
}
frm.pagenum.value = jpagev;
frm.submit();
return;
}
} </script> </head>
<%
ArrayList userList = (ArrayList)request.getAttribute("userList");
if(userList == null){
userList = new ArrayList();
}
%> <body>
<div id="main">
<form name="sportform" method="post"
action="admin/userListServlet">
<table class="sadminheading" style="top-margin: 10">
<tr>
<td nowrap class="admintitle" colspan="" align="center">
用户列表
</td>
</tr> <tr>
<td align="left" width="10%">
用户名:
</td>
<td align="left" width="40%">
<input name="name" type="text" />
</td>
<td align="right">
<input type="submit" name="提交" value="提交"/>
<input type="hidden" name="pagenum" value="" />
<input type="hidden" name="pagerows" value="" />
</td>
</tr> </table>
</form>
<table class="standard">
<thead>
<tr>
<th>
id
</th>
<th>
用户名
</th>
<th>
用户密码
</th>
<th>
角色
</th>
<th>
</th>
<th>
是否有效
</th>
<th>
</th> </tr>
</thead>
<tbody>
<!-- 循环遍历出每个用户的信息 -->
<%
for(Iterator i = userList.iterator();i.hasNext();){
User user = (User)i.next();
%>
<tr>
<td>
<%=user.getId() %>
</td>
<td>
<%=user.getName() %>
</td>
<td>
<%=user.getPassword() %>
</td>
<td>
--Null--
</td>
<td>
<%=user.getEmail() %>
</td>
<td>
<%=user.getValid() %>
</td> <td>
<a href='#' onclick="location.href='user_update.html';">修改</a>
<a href='#'
onclick="if(confirm('delete')) location.href='user_list.html?id=1';">删除</a>
</td> </tr>
<%
}
%>
<!-- 循环结束 -->
<tr>
<td colspan="">
No data found
</td>
</tr> </tbody>
<tfoot>
<tr>
<td colspan="" style="text-align: left">
/ total rows
</td>
<td colspan="" align="right">
<a href="#"
onclick="turn(document.forms[0],'first',5,1,'jump page');">first</a>
<a href="#"
onclick="turn(document.forms[0],'prev', 5,1,'jump page');">prev</a> <a href="#"
onclick="turn(document.forms[0],'next',5,1,'jump page');">next</a>
<a href="#"
onclick="turn(document.forms[0],'last',5,1,'jump page');">last</a> go
<input type="text" name="cpage" size="" id="jumpto" />
<a href="#"
onclick="turn(document.forms[0],'jump',5,1,'jump page');">go</a>
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
真正遍历显示数据在userListServlet：
package com.jaovo.jcms.user; import java.io.IOException;
import java.util.ArrayList; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.jaovo.jcms.service.UserService; public class UserListServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("name");
UserService us = new UserService();
//---------调用它里面的查询方法-----------
ArrayList<User> userList = us.getUser(name);
//---------设置到request对象里面去
request.setAttribute("userList", userList);
this.getServletContext().getRequestDispatcher("/admin/user_list.jsp").forward(request, response);//-------------跳转回去
}
}
遍历出数据，携带数据跳转回到list界面，这就算初步完成了。
效果图：
创建一个用户之后查看当前所有用户：
做一个勤劳的码农
Web前端开发：SQL Jsp小项目（一）的更多相关文章
- Web前端开发中的小错误
Web前端开发中的小错误 错误1:表单的label标签跟表单字段没有关联 利用“for”属性允许用户单击label也可以选中表单中的内容.这可以扩大复选框和单选框的点击区域,非常实用. 错误2:log ...
- Web前端开发：SQL Jsp小项目（二）------添加修改
沿着昨天整理好的页面,今天实现list页面中的修改, User update框架 需要的效果图: 先看用户查询界面, 修改id为4的那个用户: 修改后返回用户查看界面. 1 .先是从list界面开始, ...
- 大三小学期 web前端开发的一些小经验
1.html是页面的布局设计,就是页面上要放哪些东西,比如登录界面需要按钮,输入框等等:css是被用于使用设计部件和布局,例如哪些部件放在哪里,多宽多大,是否有边框等:js/jQuery是用于实现函数 ...
- 妙味WEB前端开发全套视频教程+项目实战+移动端开发（99G）
一共99GB的视频教程,全部存于百度网盘中,13个栏目,每个栏目里还划分有独立的小栏目 最基本的web前端学习介绍,到项目实战,再到移动端的开发,真正彻底掌握前端开发的精髓: 视频教程在线预览:(百度 ...
- Web前端开发最佳实践（7）：使用合理的技术方案来构建小图标
大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实 ...
- 4. web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- Web前端开发工程师养成计划【转载】
Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...
- web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- web前端开发和后端开发有什么区别？
web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责 ...
随机推荐
- 【Cocos2d-x】 HttpClient 网络通信(Http)的简单应用
Cocos2dx 为我们封装了在cocos2dx中http的网络框架,其文件在cocos2dx引擎包的extensions\network文件下的 HttpClient.HttpRequest .Ht ...
- flex-mp3
Mp3Player.as package ddw.adobe { import flash.events.Event; import flash.events.IOErrorEvent; import ...
- 【转】移动端App测试实用指南
转自:互联网那点事 英文原文: http://mobile.smashingmagazine.com/2012/10/22/a-guide-to-mobile-app-testing/ 测试人员常被看 ...
- C++访问权限
1.C++类本身没有访问权限的概念,就是class Base. 2.类成员的访问权限有:public.protected.private 3.类的继承方式有:public.protected.priv ...
- Codeforces Round #327 (Div. 2) C. Median Smoothing 找规律
C. Median Smoothing Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/591/p ...
- iOS开发——语法&高级Block练习
高级Block练习 一 .最简单的block使用 使用block的三个步骤:1.定义block变量 2.创建block代码块 3.调用block匿名函数 定义一个block的构成包括:返回值,bloc ...
- oc-02-NSLog使用
#import <Foundation/Foundation.h> /* NSLog() : C语言中的 printf的增强版 作用: 向控制台输出打印数据. 增强的地方 : 打印时间 , ...
- debian分区方案（就这个看着靠谱点）转
debian分区方案(就这个看着靠谱点)转 桌面系统/tmp 1G (仅用作临时文件) ext3/ext4/home Max (用户目录数据) ext3/ext4/usr 20G (软件) ext3/ ...
- Josephina and RPG
Josephina and RPG Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- Android（java）学习笔记101：WindowManager 中LayoutParams的各种属性
WindowManager 中LayoutParams的各种属性 WindowManager.LayoutParams 是 WindowManager 接口的嵌套类(内部类):它继承于 ViewGro ...