SSM项目搭建(一)

来源:互联网 发布:淘宝开店需要交1000吗 编辑:程序博客网 时间:2024/05/22 03:44

绪论

从今天起,关心语言和框架,我有一个项目,辛苦半天,都是BUG。(●ˇ∀ˇ●)

其实,在csdn等各大网站上都有一些有关SSM框架搭建开发项目的博客。为什么我今天还要写,仅仅只是想要学习。有些东西,你不常用就会忘了。开发项目也不会让你去天天搭建框架,其实,我们大部分时间只是在写重复的业务。

springMVC

1、创建一个Javaweb项目

eclipse创建一个Dynamic web project项目,记得勾选添加web.xml文件,新写一个index.jsp页面。
这里写图片描述

index.jsp内容。
这里写图片描述

启动tomcat,OK可以访问。
这里写图片描述

在WEB-INF的lib文件夹下添加这些jar包。
这里写图片描述

2、添加配置

web.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>OV001</display-name>    <welcome-file-list>        <welcome-file>/WEB-INF/views/index.jsp</welcome-file>    </welcome-file-list>    <!--设置session失效时间 -->    <session-config>        <session-timeout>10</session-timeout>    </session-config>    <!-- 关于SpringMVC 配置 -->    <servlet>        <servlet-name>springmvc</servlet-name>        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>        <!-- 文件关联位置 -->        <init-param>            <param-name>contextConfigLocation</param-name>            <param-value>classpath*:config/springmvc-servlet.xml</param-value>        </init-param>        <load-on-startup>1</load-on-startup>    </servlet>    <servlet-mapping>        <servlet-name>springmvc</servlet-name>        <url-pattern>/</url-pattern>    </servlet-mapping>    <error-page>        <error-code>404</error-code>        <location>/WEB-INF/views/404.jsp</location>    </error-page></web-app>

springmvc-servlet.xml配置,这里添加了一些规则,是约束创建包时用到。

<beans xmlns="http://www.springframework.org/schema/beans"    xmlns:context="http://www.springframework.org/schema/context"    xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="    http://www.springframework.org/schema/beans         http://www.springframework.org/schema/beans/spring-beans-3.0.xsd    http://www.springframework.org/schema/context     http://www.springframework.org/schema/context/spring-context-3.0.xsd    http://www.springframework.org/schema/mvc    http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">    <!-- 配置需要扫描的文件,src中文件按照此格式写,否则访问不到 -->    <context:component-scan base-package="com.*.*.controller,com.*.*.dao,com.*.*.service"></context:component-scan>    <mvc:annotation-driven />    <mvc:default-servlet-handler/>    <!-- 视图名称解析器 -->    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">        <!-- 前缀,所以要在WEB-INF下新建一个views文件夹,存放jsp文件,和controller中页面跳转地址相拼接,则为页面对应地址 -->        <property name="prefix">            <value>/WEB-INF/views/</value>        </property>        <!-- 后缀 -->        <property name="suffix">            <value>.jsp</value>        </property>    </bean></beans>

好了,简单的配置基本完成,写个demo测试一下,下图可看到包是根据刚才规则创建的,在WEB-INF中也创建了views文件夹,用来放jsp文件,由于项目有多个模块,为了区分方便,所以先创建一个demo文件夹来用。
这里写图片描述

demo/index.jsp内容。
这里写图片描述

controller内容,这里使用了两种方式,若没有数据传输到页面中,第一个方法中的model参数可去掉。
这里写图片描述

测试,可看到使用不同访问方式,都能够实现页面跳转。
这里写图片描述

这里写图片描述

为了区分,改了一下两个页面的名字。
这里写图片描述

在index页面中添加一个输入框,输入些内容,在demoIndex页面中显示出来。
这里写图片描述

demoIndex添加上el表达式。
这里写图片描述

controller做出修改。
这里写图片描述

测试一下。可以看到的确是获得了数据,只不过乱码了,去解决一下。
这里写图片描述
这里写图片描述

在WEB-INF中配置一下过滤器。

<!--指定过滤器 -->    <filter>        <filter-name>encodingFilter</filter-name>        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>        <!--配置默认字符编码 -->        <init-param>            <param-name>encoding</param-name>            <param-value>UTF-8</param-value>        </init-param>        <!--当没有指定默认编码时允许跳过过滤 -->        <init-param>            <param-name>forceEncoding</param-name>            <param-value>true</param-value>        </init-param>    </filter>    <filter-mapping>        <filter-name>encodingFilter</filter-name>        <url-pattern>/*</url-pattern>    </filter-mapping>

当当当当,汉字正常了。
这里写图片描述

3、尝试写一个小项目

为了让编程变得有意思,在项目中添加了一些好玩的东西。比如:添加过滤器判断是电脑登录还是手机登录,springmvc重定向的应用等等。

功能:

  1. 登录页面,判断用户名和密码,若用户没有登录,不可直接访问其它页面。
  2. 列表页面,根据用户权限显示可查看的用户列表,并且页面有新增、修改、删除和退出功能。
  3. 新增页面,新增和修改为统一页面。

文件目录结构
这里写图片描述

这里写图片描述

controller代码。

package com.ov.system.controller;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpSession;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.servlet.ModelAndView;import com.ov.system.model.Users;import com.ov.system.service.IUsersService;/** * 控制层 */@Controller@RequestMapping("users")public class UsersController {    @Autowired    IUsersService uService;    // 访问登录页面    @RequestMapping("index")    public String toIndex(){        return "index";    }    // 登录信息判断    @RequestMapping(value="login" , method=RequestMethod.POST)    @ResponseBody    public String login(Users u, HttpServletRequest req){        List<Users> uList = uService.queryList(u);        for(int j=0;j<uList.size();j++){            // 判断账号密码            if(uList.get(j).getUname().equals(u.getUname()) && uList.get(j).getUpass().equals(u.getUpass())){                HttpSession session = req.getSession();                // 保存当前登录用户ID                session.setAttribute("uId", uList.get(j).getuId());                return "YES";            }        }        return "NO";    }    // 访问用户列表页面    @RequestMapping("usersList")    public ModelAndView toList(Users u, HttpServletRequest req){        ModelAndView mv = new ModelAndView();        HttpSession session = req.getSession();        String uId = (String) session.getAttribute("uId");        // 获取当前登录用户        u = uService.queryById(uId);        List<Users> uList = uService.queryList(u);        mv.addObject("uList", uList);        mv.setViewName("system/users_list");        return mv;    }    // 新增/修改用户页面    @RequestMapping("usersForm")    public ModelAndView toForm(Users u){        ModelAndView mv = new ModelAndView();        mv.setViewName("system/users_form");        // 若有ID,则查出该用户        if(u.getuId() != null && !"".equals(u.getuId())){            Users us = uService.queryById(u.getuId());            if(us != null){                mv.addObject("us", us);            }        }        return mv;    }    // 添加用户    @RequestMapping("addUsers")    @ResponseBody    public String add(Users u){        boolean flag = uService.addUsers(u);        if(flag){            return "YES";        }        return "NO";    }    // 修改用户    @RequestMapping("updateUsers")    @ResponseBody    public String update(Users u){        boolean flag = uService.updateUsers(u);        if(flag){            return "YES";        }        return "NO";    }    // 删除用户    @RequestMapping("deleteUsers")    public String delete(Users u){        uService.deleteUsers(u);        // 方法重定向,执行usersList查询方法        return "redirect:usersList";    }       // 退出,注销session    @RequestMapping("out")    public String toOut(HttpServletRequest req){        HttpSession session = req.getSession();        session.removeAttribute("uId");        session.invalidate();        return "index";    }}

用户实体类。

package com.ov.system.model;/** * 用户实体类 */public class Users {    // 用户ID    private String uId;    // 账号    private String uname;    // 密码    private String upass;    // 类型    private String utype;    public String getuId() {        return uId;    }    public void setuId(String uId) {        this.uId = uId;    }    public String getUname() {        return uname;    }    public void setUname(String uname) {        this.uname = uname;    }    public String getUpass() {        return upass;    }    public void setUpass(String upass) {        this.upass = upass;    }    public String getUtype() {        return utype;    }    public void setUtype(String utype) {        this.utype = utype;    }       }

service接口

package com.ov.system.service;import java.util.List;import com.ov.system.model.Users;/** * service接口类 */public interface IUsersService {    // 通过id,获取users    public Users queryById(String uId);    // 查询    public List<Users> queryList(Users u);    // 添加    public boolean addUsers(Users u);    // 修改    public boolean updateUsers(Users u);    // 删除    public boolean deleteUsers(Users u);}

service实现类。

package com.ov.system.service.impl;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;import com.ov.system.model.Users;import com.ov.system.service.IUsersService;/** * service实现类 */@Service@Transactionalpublic class UsersServiceImpl implements IUsersService {    // 全局一个map,用来保存用户信息    Map<String, Users> map = new HashMap<String, Users>();    // 默认新增加的用户id从10开始计算    int i = 10;    // 首次登录,加载一个用户    boolean flag = true;    // 根据ID获取用户信息    @Override    public Users queryById(String uId) {        Users us = map.get(uId);                return us;    }    // 查询所有用户信息    @Override    public List<Users> queryList(Users u) {        // 用于首次登录用户加载        if(flag){            Users us = new Users();            us.setuId("1");            us.setUname("张三");            us.setUpass("123");            us.setUtype("1");            map.put("1", us);            flag = false;         }        List<Users> uList = new ArrayList<Users>(map.values());        // 根据当前登录人的身份,过滤用户列表(同级看不到,向下包含)        if(u != null && u.getUtype() !=null && !"".equals(u.getUtype())){            for(int j=0; j<uList.size() ;j++){                if(u.getUtype().compareTo(uList.get(j).getUtype()) >= 0){                    uList.remove(j);                    j--;                }            }                       uList.add(u);        }        return uList;    }    // 新增一个用户    @Override    public boolean addUsers(Users u) {        List<Users> uList = new ArrayList<Users>(map.values());        // 判断该账号是否已经被使用        for(int j=0;j < uList.size();j++){            if(uList.get(j).getUname().equals(u.getUname())){                return false;            }        }        String id = i + "";        u.setuId(id);        map.put(id, u);        i++;        return true;    }    // 修改用户信息    @Override    public boolean updateUsers(Users u) {        // 获取该用户        Users us = map.get(u.getuId());        // 若存在,则修改        if(us != null){            us.setUname(u.getUname());            us.setUpass(u.getUpass());            us.setUtype(u.getUtype());            map.put(us.getuId(), us);            return true;        }        return false;    }    // 删除用户信息    @Override    public boolean deleteUsers(Users u) {        Users us = map.get(u.getuId());        // 若存在,则删除        if(us != null){            map.remove(u.getuId());            return true;        }               return false;    }}

登录过滤器

package com.ov.utils;import java.io.IOException;import java.util.Date;import javax.servlet.Filter;import javax.servlet.FilterChain;import javax.servlet.FilterConfig;import javax.servlet.ServletException;import javax.servlet.ServletRequest;import javax.servlet.ServletResponse;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import com.ov.utils.UtilsClass;/** * 登录过滤器 */public class LoginFilter implements Filter {    // 访问地址中带有这些信息的地址不进行过滤限制    private static final String[] IGNORE_URI = {"/OV001/users/index","/OV001/users/login","/OV001/tools"};    @Override    public void init(FilterConfig filterConfig) throws ServletException {    }    @Override    public void destroy() {    }    @Override    public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain)            throws IOException, ServletException {        // 获取session        HttpServletRequest servletRequest = (HttpServletRequest) request;        HttpServletResponse servletResponse = (HttpServletResponse) response;        HttpSession session = servletRequest.getSession();        // 获取访问地址        String path = servletRequest.getRequestURI();        // 验证访问方式        boolean flag = check(servletRequest, servletResponse);        if(flag){            System.out.println("移动端访问      访问方法:" + path + "    时间:"+ UtilsClass.dateString(new Date()));        }else{            System.out.println("电脑端访问      访问方法:" + path + "    时间:"+ UtilsClass.dateString(new Date()));        }        // 获取当前登录用户        String uId = (String) session.getAttribute("uId");        for (String s : IGNORE_URI) {            if (path.contains(s)) {                filterChain.doFilter(servletRequest, servletResponse);                return;            }        }        // 用户已经登录,可正常访问。其它情况,去默认的登录页面        if (uId != null && !"".equals(uId)) {            filterChain.doFilter(request, response);        } else {            String newUrl = "/OV001/users/index";            servletResponse.sendRedirect(newUrl);        }    }    /**     * 检查访问方式是否为移动端     *      * @param request     * @throws IOException     */    public boolean check(HttpServletRequest request, HttpServletResponse response) throws IOException {        boolean isFromMobile = false;        HttpSession session = request.getSession();        // 检查是否已经记录访问方式(移动端或pc端)        if (null == session.getAttribute("ua")) {            try {                // 获取ua,用来判断是否为移动端访问                String userAgent = request.getHeader("USER-AGENT").toLowerCase();                if (null == userAgent) {                    userAgent = "";                }                isFromMobile = UtilsClass.check(userAgent);                // 判断是否为移动端访问                if (isFromMobile) {                    //System.out.println("移动端访问");                    session.setAttribute("ua", "mobile");                } else {                    //System.out.println("pc端访问");                    session.setAttribute("ua", "pc");                }            } catch (Exception e) {            }        } else {            isFromMobile = session.getAttribute("ua").equals("mobile");        }        return isFromMobile;    }}

工具类

package com.ov.utils;import java.text.DateFormat;import java.text.SimpleDateFormat;import java.util.Date;import java.util.regex.Matcher;import java.util.regex.Pattern;/** * 工具类 */public class UtilsClass {    // \b 是单词边界(连着的两个(字母字符 与 非字母字符) 之间的逻辑上的间隔),        // 字符串在编译时会被转码一次,所以是 "\\b"        // \B 是单词内部逻辑间隔(连着的两个字母字符之间的逻辑上的间隔)        static String phoneReg = "\\b(ip(hone|od)|android|opera m(ob|in)i"                +"|windows (phone|ce)|blackberry"                +"|s(ymbian|eries60|amsung)|p(laybook|alm|rofile/midp"                +"|laystation portable)|nokia|fennec|htc[-_]"                +"|mobile|up.browser|[1-4][0-9]{2}x[1-4][0-9]{2})\\b";        static String tableReg = "\\b(ipad|tablet|(Nexus 7)|up.browser"                +"|[1-4][0-9]{2}x[1-4][0-9]{2})\\b";        //移动设备正则匹配:手机端、平板      static Pattern phonePat = Pattern.compile(phoneReg, Pattern.CASE_INSENSITIVE);        static Pattern tablePat = Pattern.compile(tableReg, Pattern.CASE_INSENSITIVE);        /**      * 检测是否是移动设备访问      * @param userAgent 浏览器标识      * @return true:移动设备接入,false:pc端接入      */      public static boolean check(String userAgent){            if(null == userAgent){                userAgent = "";            }            // 匹配            Matcher matcherPhone = phonePat.matcher(userAgent);            Matcher matcherTable = tablePat.matcher(userAgent);            if(matcherPhone.find() || matcherTable.find()){                return true;            } else {                return false;            }        }    /**     *  日期格式化     */    public static String dateString(Date date){        DateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:ss:mm");        String str = format.format(date);        return str;    }}

springmvc-servlet.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>OV001</display-name>    <welcome-file-list>        <welcome-file>/WEB-INF/views/index.jsp</welcome-file>    </welcome-file-list>    <!--设置session失效时间 -->    <session-config>        <session-timeout>10</session-timeout>    </session-config>    <!--指定过滤器 -->    <filter>        <filter-name>encodingFilter</filter-name>        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>        <!--配置默认字符编码 -->        <init-param>            <param-name>encoding</param-name>            <param-value>UTF-8</param-value>        </init-param>        <!--当没有指定默认编码时允许跳过过滤 -->        <init-param>            <param-name>forceEncoding</param-name>            <param-value>true</param-value>        </init-param>    </filter>    <filter-mapping>        <filter-name>encodingFilter</filter-name>        <url-pattern>/*</url-pattern>    </filter-mapping>    <!-- 配置过滤器,主要用于登录限制 -->    <filter>        <filter-name>LoginFilter</filter-name>        <filter-class>com.ov.utils.LoginFilter</filter-class>        <init-param>            <param-name>logonStrings</param-name><!-- 对登录页面不进行过滤 -->            <param-value>index.jsp</param-value>        </init-param>        <init-param>            <param-name>includeStrings</param-name><!-- 只对指定过滤参数后缀进行过滤 -->            <param-value>.jsp</param-value>        </init-param>        <init-param>            <param-name>redirectPath</param-name><!-- 未通过跳转到登录界面 -->            <param-value>/WEB-INF/index.jsp</param-value>        </init-param>        <init-param>            <param-name>disabletestfilter</param-name><!-- Y:过滤无效 -->            <param-value>N</param-value>        </init-param>    </filter>    <filter-mapping>        <filter-name>LoginFilter</filter-name>        <url-pattern>/*</url-pattern>    </filter-mapping>    <!-- 关于SpringMVC 配置 -->    <servlet>        <servlet-name>springmvc</servlet-name>        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>        <!-- 文件关联位置 -->        <init-param>            <param-name>contextConfigLocation</param-name>            <param-value>classpath*:config/springmvc-servlet.xml</param-value>        </init-param>        <load-on-startup>1</load-on-startup>    </servlet>    <servlet-mapping>        <servlet-name>springmvc</servlet-name>        <url-pattern>/</url-pattern>    </servlet-mapping>    <error-page>        <error-code>404</error-code>        <location>/WEB-INF/views/404.jsp</location>    </error-page></web-app>

web.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>OV001</display-name>    <welcome-file-list>        <welcome-file>/WEB-INF/views/index.jsp</welcome-file>    </welcome-file-list>    <!--设置session失效时间 -->    <session-config>        <session-timeout>10</session-timeout>    </session-config>    <!--指定过滤器 -->    <filter>        <filter-name>encodingFilter</filter-name>        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>        <!--配置默认字符编码 -->        <init-param>            <param-name>encoding</param-name>            <param-value>UTF-8</param-value>        </init-param>        <!--当没有指定默认编码时允许跳过过滤 -->        <init-param>            <param-name>forceEncoding</param-name>            <param-value>true</param-value>        </init-param>    </filter>    <filter-mapping>        <filter-name>encodingFilter</filter-name>        <url-pattern>/*</url-pattern>    </filter-mapping>    <!-- 配置过滤器,主要用于登录限制 -->    <filter>        <filter-name>LoginFilter</filter-name>        <filter-class>com.ov.utils.LoginFilter</filter-class>        <init-param>            <param-name>logonStrings</param-name><!-- 对登录页面不进行过滤 -->            <param-value>index.jsp</param-value>        </init-param>        <init-param>            <param-name>includeStrings</param-name><!-- 只对指定过滤参数后缀进行过滤 -->            <param-value>.jsp</param-value>        </init-param>        <init-param>            <param-name>redirectPath</param-name><!-- 未通过跳转到登录界面 -->            <param-value>/WEB-INF/index.jsp</param-value>        </init-param>        <init-param>            <param-name>disabletestfilter</param-name><!-- Y:过滤无效 -->            <param-value>N</param-value>        </init-param>    </filter>    <filter-mapping>        <filter-name>LoginFilter</filter-name>        <url-pattern>/*</url-pattern>    </filter-mapping>    <!-- 关于SpringMVC 配置 -->    <servlet>        <servlet-name>springmvc</servlet-name>        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>        <!-- 文件关联位置 -->        <init-param>            <param-name>contextConfigLocation</param-name>            <param-value>classpath*:config/springmvc-servlet.xml</param-value>        </init-param>        <load-on-startup>1</load-on-startup>    </servlet>    <servlet-mapping>        <servlet-name>springmvc</servlet-name>        <url-pattern>/</url-pattern>    </servlet-mapping>    <error-page>        <error-code>404</error-code>        <location>/WEB-INF/views/404.jsp</location>    </error-page></web-app>

index.jsp页面代码。

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%    String contextPath = request.getContextPath();    String basePath = request.getScheme() + "://"            + request.getServerName() + ":" + request.getServerPort()            + contextPath + "/";%><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="../tools/jquery-2.1.1/jquery.min.js"></script><title>登录页面</title></head><body><form action="" method="post">    <table>        <tr>            <td colspan="2">您好,欢迎使用</td>        </tr>        <tr>            <td>账号:</td>            <td><input id="uname" name="uname" type="text"></td>        </tr>        <tr>            <td>密码:</td>            <td><input id="upass" name="upass" type="password"></td>        </tr>        <tr>            <td colspan="2" align="center"><input id="saveForm" type="button" value="登录"></td>        </tr>    </table>    </form><script type="text/javascript">$(document).ready(function(){    // 登录信息验证    $("#saveForm").click(function(){        var uname = $('#uname').val();        var upass = $('#upass').val();        if(uname == null || uname.trim() == ''){            alert('账号不能为空');            return false;        }        if(upass == null || upass.trim() == ''){            alert('密码不能为空');            return false;        }        // Ajax提交        $.ajax({              async : true,              cache:false,              type: 'post',            contentType: "application/x-www-form-urlencoded",            data:{uname:uname,upass:upass},            scriptCharset: 'utf-8',            url: "../users/login",            success:function(result){ //请求成功后处理函数。                                      //result = eval(result);                if(result == 'YES'){                                            window.location.href = "../users/usersList";                }else{                    alert('账号密码不匹配');                    return false;                }            } ,            error: function () {//请求失败处理函数              }                    });    });});</script></body></html>

users_list.jsp页面代码。

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib uri="http://www.springframework.org/tags/form" prefix="sf" %><!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>列表页面</title></head><body><a href="../users/out">退出</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="../users/usersForm">新增</a><table class="table" border="1">    <caption>人员信息</caption>    <thead>        <tr>            <th width="100px">编号</th>            <th width="100px">姓名</th>            <th width="100px">密码</th>            <th width="100px">身份</th>            <th width="100px">操作</th>        </tr>    </thead>    <tbody>        <c:forEach items="${uList}" var="item">        <c:set var="index" value="${index+1}" />            <tr class="active">                <td>${index}</td>                <td>${item.uname}</td>                <td>${item.upass}</td>                <td>                    <c:if test="${item.utype == 1}">                        超级管理员                    </c:if>                    <c:if test="${item.utype == 2}">                        管理员                    </c:if>                    <c:if test="${item.utype == 3}">                        普通用户                    </c:if>                </td>                <td>                    <a href="../users/usersForm?uId=${item.uId }">修改</a>&nbsp;                    <a href="../users/deleteUsers?uId=${item.uId }">删除</a>                </td>            </tr>                   </c:forEach>    </tbody></table></body></html>

users_form.jsp页面代码。

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC ><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>新增/修改页面</title><script src="../tools/jquery-2.1.1/jquery.min.js"></script></head><body><a href="../users/usersList">返回</a><br><form action="" method="post">    <table>        <caption>人员信息</caption>        <tr>            <td>账号:</td>            <td><input type="text" id="uname" name="uname" value="${us.uname }"></td>        </tr>        <tr>            <td>密码:</td>            <td><input type="password" id="upass" name="upass" value="${us.upass }"></td>        </tr>        <tr>            <td>身份:</td>            <td>                <select id="utype" name="utype">                    <option value="3">普通用户</option>                    <option value="2">管理员</option>                    <option value="1">超级管理员</option>                </select>            </td>        </tr>        <tr>            <td></td>            <td><input type="button" value="保存" id="saveBtn"></td>        </tr>    </table>    <input id="uId" name="uId" value="${us.uId }" type="hidden"></form><script type="text/javascript">$(document).ready(function(){    // 保存按钮点击事件    $("#saveBtn").click(function(){        var uname = $('#uname').val();        var upass = $('#upass').val();        var utype = $('#utype').val();        if(uname == null || uname.trim() == ''){            alert('账号不能为空');            return false;        }        if(upass == null || upass.trim() == ''){            alert('密码不能为空');            return false;        }        // 判断是否有uId,执行不同的方法        var uId = $('#uId').val();        var uurl = "";        var udata = {};        if(uId != null && uId.trim() != ''){            // 数据更新地址            uurl = "../users/updateUsers";            udata.uname = uname;            udata.upass = upass;            udata.utype = utype;            udata.uId = uId;        }else{            // 新增用户地址            uurl = "../users/addUsers";            udata.uname = uname;            udata.upass = upass;            udata.utype = utype;        }        // Ajax提交        $.ajax({              async : true,              cache:false,              type: 'post',            contentType: "application/x-www-form-urlencoded",            data:udata,            scriptCharset: 'utf-8',            url: uurl,            success:function(result){ //请求成功后处理函数。                                      //result = eval(result);                if(result == 'YES'){                                            alert('保存成功');                    return true;                }else{                    alert('保存失败');                    return false;                }            } ,            error: function () {//请求失败处理函数              }                    });    });});</script></body></html>

运行结果可以看到不同设备进行访问,系统记录的信息。
这里写图片描述


其实,这个程序是一个月之前写的,现在看看还有好多改进的地方,不过作为练手来说已经够了,下面有该项目的压缩包地址,想要学习的同学可以去OV001下载。下一篇博客会把mybatis也添加进来。

(若有什么错误,请留言指正,3Q)

原创粉丝点击