Web前端开发:SQLJsp小项目(二)------添加修改

12/6/2015来源:Javascript教程人气:1272

  沿着昨天整理好的页面,今天实现list页面中的修改,

  User update框架

需要的效果图:

先看用户查询界面,

修改id为4的那个用户:

  

  修改后返回用户查看界面。

  1 .先是从list界面开始,在昨天的代码基础上,实现修改功能:

   2.携带被修改用户的Id属性,跳转到UserModifyServlet

package com.jaovo.jcms.user;

import java.io.IOException;

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 UserModifyServlet extends HttpServlet{
    PRivate static final long serialVersionUID = 1L;
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //获得客户端传过来的数据
        String id = request.getParameter("id");
        System.out.println(id);
        
        UserService userService = new UserService();
        User user = userService.getUserById(Integer.parseInt(id));
        
        request.setAttribute("user", user);
        
        this.getServletContext().getRequestDispatcher("/admin/user_update.jsp").forward(request, response);
        
    }
        
}

 

  3.UserModifyServlet携带的Id,获取该用户的属性,并跳转到update界面,依然是在Eclips工具中写一个user_update.jsp:

<%@page import="com.jaovo.jcms.util.PageList"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="com.jaovo.jcms.user.*"%>
<%@ page import="java.util.*"%>
<%@ page import="com.jaovo.jcms.util.*"%>

<%
    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>


        <script type="text/javascript">
        var validatedInfo        = "correct";
        var requireErrorInfo    = "required<br/>";
        var msgInfo    = new Array();
        
        msgInfo[0]                = new Array('name required','name error');
        var name                = new formEle(true,"no",null,"name_info",msgInfo[0]);
        
        
        msgInfo[0]                = new Array('pwd required','pwd error');
        var passWord            = new formEle(true,"no",null,"password_info",msgInfo[0]);
                
        msgInfo[0]                = new Array('description required','description error');
        var description            = new formEle(true,"no",null,"description_info",msgInfo[0]);
        
        msgInfo[0]                = new Array('role required','role error');
        var role                = new formEle(true,"no",null,"role_info",msgInfo[0]);     

        msgInfo[0]                = new Array('valid required','please input number like 1 ,2 ,3');
        var valid                = new formEle(true,"num",null,"valid_info",msgInfo[0]);        
                
        msgInfo[0]                = new Array('email required','email error');
        var email                = new formEle(true,"no",null,"email_info",msgInfo[0]);    

        
        function submitForm(obj) {    
        
            var ret = validateAll(obj);            
            if (ret == true) {         
                if (document.forms[0].submit) {        
                    document.forms[0].submit.disabled = true;        
                }        
            }        
            return ret;        
        }
</script>
        <style type="text/css">
body,table,td,select,textarea,input {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}
</style>
    </head>
    <%
    User user = (User)request.getAttribute("user");
    %>
    <body>
        <div id="main">


            <form name="backuserform" method="post"
                action="admin/UserModifiedServlet" 
                onSubmit=''>
                <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" value="<%=user.getName() %>"/>
                                <input name="id" type="hidden" TABINDEX="1" value="<%=user.getId() %>" />
                                <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" value="<%=user.getPassword()%>"/>
                                <div class="Info">
                                    <div id="password_info"></div>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td align="left">
                                角色
                            </td>
                            <td align="left">
                                <select name="role" TABINDEX="3" 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="4" 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="<%=user.getEmail() %> " TABINDEX="5" id="email" />
                                <div class="Info">
                                    <div id="email_info"></div>
                                </div>
                            </td>
                        </tr>

                        <tr>
                        <td align="left">Phone</td>
                        <td align="left"><input name="phone" type="text" value="<%=user.getPhone() %>"
                            TABINDEX="5" 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="6"
                                    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>

  4.需要一个ModifiedServlet.java

package com.jaovo.jcms.user;

import java.io.IOException;

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 UserModifiedServlet extends HttpServlet{
    private static final long serialVersionUID = 1L;//这里以前没有
         @Override
        protected void service(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
             request.setCharacterEncoding("utf-8");
             response.setCharacterEncoding("utf-8");
             
             String id = request.getParameter("id");
             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 = new User();
                
                user.setId(Integer.parseInt(id));
                user.setName(name);
                user.setPassword(password);
                user.setValid(Integer.parseInt(valid));
                user.setEmail(email);
                user.setPhone(phone);
                
                UserService userService = new UserService();
                userService.updateUser(user);
                
                this.getServletContext().getRequestDispatcher("/admin/UserListServlet").forward(request, response);
                //从一个Servlet到另外一个Servlet是同一个request对象
        }
    }

  5.跳转到UserListServlet,同时携带ModifiedServletrequestresponse对象,最后在list界面中显示出修改后的用户信息。

以上就是这次优化的所有代码,后面还会持续优化,望大家斧正。

2015-10-09   09:06:38

  • 生命不息,代码不止!