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前端开发工程师是负责 ...
随机推荐
- 【不积跬步,无以致千里】AMQP协议介绍
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- ADO.NET 快速入门(五):从 DataSet 更新数据库
该主题说明了如何使用 DataSet 在数据库中更新数据.你依然可以直接使用 SqlCommand 在数据库中插入.更新.和删除数据,记住这一点也很重要.理解“从数据库填充DataSet”涵盖的概念有 ...
- UVa657 The die is cast
// 题意:给一个图案,其中'.'表示背景,非'.'字符组成的连通块为筛子.每个筛子里又包含两种字符,其中'X'组成的连通块表示筛子上的点 // 统计每个筛子里有多少个"X"连通块 ...
- sublime自定义snippet代码片段
相信很多人喜欢sublime编辑工具有两个原因:第一sublime很轻巧方便:第二sublime提供很多自定义拓展功能,包括很简单且和很好用的代码片段功能snippet文件. 今天,在这里就介绍下su ...
- struts2源代码学习之初始化(一)
看struts2源代码已有一段时日,从今天開始,就做一个总结吧. 首先,先看看怎么调试struts2源代码吧,主要是下面步骤: 使用Myeclipse创建一个webproject 导入struts2须 ...
- 算法入门系列一--DP初步
数字三角形(数塔问题) 其实动态规划本身并不是一个特定的算法,是一种用途广泛的问题求解方法,一种思想,一种手段. 1.1问题描述与状态定义 有一个有非负整数组成的三角形,第一行一个数字,下面各行除了最 ...
- [Angular 2] Start with Angular2
Create a index.html: <!DOCTYPE html> <html> <head> <title>Really Understandi ...
- 【ZZ】编程能力层次模型
http://blog.csdn.net/shendl/article/details/43835421 前言 程序员的编程技能随着经验的积累,会逐步提高.我认为编程能力可以分为一些层次. 下面通过两 ...
- 网络IPC:套接字之套接字描述符
套接字是通信端点的抽象.与应用程序要使用文件描述符访问文件一样,访问套接字也需要套接字描述符.套接字描述符在UNIX系统是用文件描述符实现的.事实上,许多处理文件描述符的函数(如read和write) ...
- Recommended you 3 most popular Nissan pincode calculators
Have you still felt confused on how to choose a satisfactory Nissan pin code calculator in the marke ...