• 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="2">用户添加</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td align="left">用户名</td>
                            <td align="left"><input name="name" type="text" TABINDEX="1"
                                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="2" 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="4" id="role">
                                    <option value="1">超级管理员</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="3" id="valid">
                                    <option value="1">有效</option>
                                    <option value="0">无效</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="5" 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="6" id="phone" />
                                <div class="Info">
                                    <div id="phone_info"></div>
                                </div></td>
                        </tr>
    
                        <tr>
                            <td colspan="2" align="center"><input class="submitButton"
                                type="submit" TABINDEX="7" name="submit" value="提&nbsp;交">
                                <input type="button" name="返回" class="submitButton" value="返回"
                                onclick="history.back();"></td>
                        </tr>
    
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="2" 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(1, user.getName());
                pstmt.setString(2, user.getPassword());
                pstmt.setInt(3, user.getValid());
                pstmt.setString(4, user.getEmail());
                pstmt.setString(5, user.getPhone());
                pstmt.setTimestamp(6, 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(1, "%"+name+"%");
                rs = pstmt.executeQuery();
                
                while (rs.next()) {
                    User user = new User();
                    user.setName(rs.getString(1));
                    user.setPassword(rs.getString(2));
                    user.setValid(rs.getInt(3));
                    user.setTime_stamp(rs.getTimestamp(4));
                    user.setEmail(rs.getString(5));
                    user.setPhone(rs.getString(6));
                    user.setId(rs.getInt(7));//------返回数据库,查看序列
                    
                    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==1){
                return;
            }
            frm.pagenum.value = 1;
            frm.submit();
            return;
        }else if(oper=='prev'){
            if(curpage==1){
                return;
            }
            frm.pagenum.value = (curpage-1);
            frm.submit();
            return;
        }else if(oper=='next'){
            if(curpage>=totalpage){
                return;
            }
            frm.pagenum.value = (curpage+1);
            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+$/) != -1)){
                alert(msg);
                jpage.focus();
                jpage.select();
                return;
            }else{
                jpagev = parseInt(jpage.value);
            }
            if(jpagev==curpage||jpagev>totalpage||jpagev<=0){
                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="3" 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="提交"/>&nbsp;&nbsp;&nbsp;
                                <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>
                                email
                            </th>
                            <th>
                                是否有效
                            </th>
                            <th>
                                &nbsp;
                            </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="7">
                                No data found
                            </td>
                        </tr>
    
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3" style="text-align: left">
                                1/1 total rows 1
                            </td>
                            <td colspan="4" 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="5" 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界面,这就算初步完成了。

    效果图:

    创建一个用户之后查看当前所有用户:

    做一个勤劳的码农

  • 相关阅读:
    MySQL Execution Plan--合理利用隐式的业务逻辑
    MySQL Table--MySQL外键
    MySQL倒序索引测试2
    MySQL倒序索引测试1
    CCNA-3.硬件介质
    CCNA-2.OSI 7层网络模型
    CCNA-1.认识网络
    windows本地安装Oracle数据库
    扫码登录实现原理
    phpunit 单元测试
  • 原文地址:https://www.cnblogs.com/wing411/p/4860340.html
Copyright © 2020-2023  润新知