多余的话不说了直接上代码 如果有不好的地方请多多指教。

项目结构  所有的名字都是随便起的 不要介意哈

1.spring主配置文件ApplicationContext.xml

?xml version 1.0 encoding UTF-8 ?
beans xmlns http://www.springframework.org/schema/beans
    xmlns:xsi http://www.w3.org/2001/XMLSchema-instance
    xmlns:p http://www.springframework.org/schema/p
    xmlns:context http://www.springframework.org/schema/context
    xmlns:aop http://www.springframework.org/schema/aop
    xmlns:mvc http://www.springframework.org/schema/mvc
    xmlns:tx http://www.springframework.org/schema/tx
    xsi:schemaLocation http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context-2.5.xsd
    http://www.springframework.org/schema/aop
    http://www.springframework.org/schema/aop/spring-aop-2.0.xsd
    http://www.springframework.org/schema/tx
    http://www.springframework.org/schema/tx/spring-tx-2.0.xsd
    http://www.springframework.org/schema/mvc
    http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
    bean id jdbc class org.springframework.jdbc.datasource.DriverManagerDataSource
       property name driverClassName value com.mysql.jdbc.Driver /property
       property name url value jdbc:mysql://localhost:3306/farmingYears?useUnicode true amp;characterEncoding utf8 /property
       property name username value root /property
       property name password value samsung1108 /property
    /bean
    bean id sqlSessionFactory class org.mybatis.spring.SqlSessionFactoryBean
       property name dataSource ref jdbc /property
       property name configLocation value classpath:conf/mybatis/myBatisConfig.xml /property
    /bean
   
    bean id loginDao class org.mybatis.spring.mapper.MapperFactoryBean
       property name mapperInterface value com.farmyears.dao.login.LoginDao /property
       property name sqlSessionFactory ref sqlSessionFactory /property
    /bean
    bean id registUserInfoDao class org.mybatis.spring.mapper.MapperFactoryBean
       property name mapperInterface value com.farmyears.dao.modifyUserInfo.RegistUserInfoDao /property
       property name sqlSessionFactory ref sqlSessionFactory /property
    /bean
    bean id workNoteDao class org.mybatis.spring.mapper.MapperFactoryBean
       property name mapperInterface value com.farmyears.dao.note.WorkNoteDao /property
       property name sqlSessionFactory ref sqlSessionFactory /property
    /bean
    bean id dicePlayDao class org.mybatis.spring.mapper.MapperFactoryBean
       property name mapperInterface value com.farmyears.dao.business.DicePlayDao /property
       property name sqlSessionFactory ref sqlSessionFactory /property
    /bean
    bean id fileUpAndDownDao class org.mybatis.spring.mapper.MapperFactoryBean
       property name mapperInterface value com.farmyears.dao.file.FileUpAndDownDao /property
       property name sqlSessionFactory ref sqlSessionFactory /property
    /bean
    bean id voteSystemDao class org.mybatis.spring.mapper.MapperFactoryBean
       property name mapperInterface value com.farmyears.dao.vote.VoteSystemDao /property
       property name sqlSessionFactory ref sqlSessionFactory /property
    /bean
   
    !-- 开启注解 --
    mvc:annotation-driven/
    context:component-scan base-package com.farmyears
       context:include-filter type regex expression com.farmyears.action /
       context:include-filter type regex expression com.farmyears.service /
       context:include-filter type regex expression com.farmyears.dao /
    /context:component-scan
   
    bean class org.springframework.web.servlet.view.InternalResourceViewResolver
       property name prefix value / /property
       property name suffix value .jsp /property
    /bean
/beans

2.Mybatis主配置文件  MyBatisConfig.xml

?xml version 1.0 encoding UTF-8 ?
!DOCTYPE configuration PUBLIC -//mybatis.org//DTD Config 3.0//EN http://mybatis.org/dtd/mybatis-3-config.dtd
  configuration
   settings
    setting name mapUnderscoreToCamelCase value true /
   /settings
   typeAliases
    typeAlias type com.farmyears.vo.UserVO alias userVO /
    typeAlias type com.farmyears.vo.ChatUserVO alias chatUserVO /
    typeAlias type com.farmyears.vo.FileInfoVO alias fileInfoVO /
    typeAlias type com.farmyears.vo.VoteVO alias voteVO /
  /typeAliases
   mappers
    mapper resource conf/mybatis/file/fileInfoRecordSQL.xml /mapper
    mapper resource conf/mybatis/note/workNoteSQL.xml /mapper
    mapper resource conf/mybatis/user/chatUserInfoSQL.xml /mapper
    mapper resource conf/mybatis/user/loginSQL.xml /mapper
    mapper resource conf/mybatis/user/modifyUserInfo.xml /mapper
    mapper resource conf/mybatis/vote/voteSystemSQL.xml /mapper
   /mappers
  /configuration

3.Mybatis主配置文件中Mapper的resource来源 上图说明 注意此路径要从src目录下开始

上面具体每个文件里的sql就不全贴了 只贴一个login的为例子 写的不足之处还请见谅

loginSQL.xml

?xml version 1.0 encoding UTF-8 ?
!DOCTYPE mapper PUBLIC -//mybatis.org//DTD Mapper 3.0//EN http://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespace com.farmyears.dao.login.LoginDao
  select id getUserInforByUserCode parameterType String
  resultType com.farmyears.vo.UserVO
  SELECT
  USER_ID as userId, USER_NAME as userName, USER_SEX as userSex, USER_BIRTH as userBirth,
  USER_AGE as userAge, USER_CODE as userCode, USER_EDUCATION as userEducation, USER_JOB as userJob,
  USER_ADDRESS as userAddress, USER_PASSWORD as userPassword, USER_PERMISSION as userPermission, USER_SCHOOL as userSchool, USER_PROFESSION as userProfession FROM user_table WHERE
  USER_CODE #{userCode}
  /select
 
  select id getUserInfoList parameterType com.farmyears.vo.UserVO
  resultType com.farmyears.vo.UserVO
  SELECT
  USER_ID as userId, USER_NAME as userName, USER_SEX as userSex, USER_BIRTH as userBirth,
  USER_AGE as userAge, USER_CODE as userCode, USER_EDUCATION as userEducation, USER_JOB as userJob,
  USER_ADDRESS as userAddress, USER_PASSWORD as userPassword, USER_PERMISSION as userPermission,
  USER_SCHOOL as userSchool, USER_PROFESSION as userProfession FROM user_table
  WHERE 1 1
   if test userName ! null and userName !
   AND USER_NAME LIKE CONCAT( % , #{userName}, % )
   /if
   if test userAddress ! null and userAddress !
   AND USER_ADDRESS LIKE CONCAT( % , #{userAddress}, % )
   /if
   if test userSchool ! null and userSchool !
   AND USER_SCHOOL LIKE CONCAT( % , #{userSchool}, % )
   /if
   if test userProfession ! null and userProfession !
   AND USER_PROFESSION LIKE CONCAT( % , #{userProfession}, % )
   /if
  LIMIT #{start}, #{limit}
  /select
  select id excelExport parameterType com.farmyears.vo.UserVO
  resultType com.farmyears.vo.UserVO
  SELECT
  USER_ID as userId, USER_NAME as userName, USER_SEX as userSex, USER_BIRTH as userBirth,
  USER_AGE as userAge, USER_CODE as userCode, USER_EDUCATION as userEducation, USER_JOB as userJob,
  USER_ADDRESS as userAddress, USER_PASSWORD as userPassword, USER_PERMISSION as userPermission,
  USER_SCHOOL as userSchool, USER_PROFESSION as userProfession FROM user_table
  WHERE 1 1
   if test userName ! null and userName !
   AND USER_NAME LIKE CONCAT( % , #{userName}, % )
   /if
   if test userAddress ! null and userAddress !
   AND USER_ADDRESS LIKE CONCAT( % , #{userAddress}, % )
   /if
   if test userSchool ! null and userSchool !
   AND USER_SCHOOL LIKE CONCAT( % , #{userSchool}, % )
   /if
   if test userProfession ! null and userProfession !
   AND USER_PROFESSION LIKE CONCAT( % , #{userProfession}, % )
   /if
  /select
  select id getUserInfoCount parameterType com.farmyears.vo.UserVO
  resultType com.farmyears.vo.UserVO
  SELECT
  COUNT(USER_ID) as userCount
  FROM user_table
  WHERE 1 1
   if test userName ! null and userName !
   AND USER_NAME LIKE CONCAT( % , #{userName}, % )
   /if
   if test userAddress ! null and userAddress !
   AND USER_ADDRESS LIKE CONCAT( % , #{userAddress}, % )
   /if
   if test userSchool ! null and userSchool !
   AND USER_SCHOOL LIKE CONCAT( % , #{userSchool}, % )
   /if
   if test userProfession ! null and userProfession !
   AND USER_PROFESSION LIKE CONCAT( % , #{userProfession}, % )
   /if
  /select
/mapper

此处加一个小知识 #{}和${}这两个大家平时可能只顾着用了 #{}可以防止sql注入 ${}不行 详细的原理自行查找到处都有。

4. 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
  listener
    listener-class org.springframework.web.context.ContextLoaderListener /listener-class
  /listener
  context-param
    param-name contextConfigLocation /param-name
    param-value classpath:conf/spring/ApplicationContext.xml /param-value
  /context-param
  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:conf/spring/ApplicationContext.xml /param-value
    /init-param
    load-on-startup 1 /load-on-startup
  /servlet
  servlet-mapping
    servlet-name springMVC /servlet-name
    url-pattern *.do /url-pattern
  /servlet-mapping
  !--
  filter
     filter-name characterEncodingFilter /filter-name
     filter-class org.springframework.web.filter.CharacterEncodingFilter /filter-class
     init-param
      param-name encoding /param-name
      param-value utf8 /param-value
     /init-param
     init-param
      param-name forceEncoding /param-name
      param-value true /param-value
     /init-param
  /filter
  filter-mapping
     filter-name characterEncodingFilter /filter-name
     url-pattern /* /url-pattern
  /filter-mapping
  --
  filter
     filter-name characterFilter /filter-name
     filter-class com.farmyears.common.filter.CharacterFilter /filter-class
  /filter
  filter-mapping
     filter-name characterFilter /filter-name
     url-pattern /* /url-pattern
  /filter-mapping
  welcome-file-list
     welcome-file jsp/login/login.jsp /welcome-file
  /welcome-file-list
/web-app

5.接下来上后台代码

Controller

package com.farmyears.action.login;

import java.io.IOException;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.annotation.Resource;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.farmyears.common.util.ExcelExportUtil;
import com.farmyears.service.login.LoginService;
import com.farmyears.vo.LoginResultVO;
import com.farmyears.vo.PageList;
import com.farmyears.vo.UserVO;

//以下代码都是业余学习 写得代码没有什么严格的规范遵循 仅供参考。

Controller
RequestMapping( user )
public class LogingAction {

  Resource
 private LoginService service;

  RequestMapping( /firstPage )
 public ModelAndView backFirstPage(HttpServletRequest request, HttpServletResponse respose, ModelAndView mav)
   throws IOException, ServletException {
  mav.setViewName( jsp/main
  return mav;
 }
  RequestMapping( /login )
 public ModelAndView service(HttpServletRequest request, HttpServletResponse respose, ModelAndView mav,
   String userCode, String password) throws IOException, ServletException {

  userCode (userCode null || userCode.equals( )) ? 000000 : userCode;
  String rigestSymble request.getParameter( rigest
  if ( YES .equalsIgnoreCase(rigestSymble)) {
   mav.setViewName( jsp/login/rigestUserInfo
   return mav;
  }
  if ( 000000 .equals(userCode)) {
   mav.setViewName( jsp/login/login
  } else {
   LoginResultVO vo service.getUserInforByUserCode(userCode, password);
   if ( 0 .equals(vo.getStatus()) || 2 .equals(vo.getStatus())) {
    mav.addObject( loginResult , vo);
    mav.setViewName( jsp/login/login
   } else {
    mav.addObject( loginResult , vo);
    mav.setViewName( jsp/main
   }
  }
  return mav;
 }

  RequestMapping( /userList )
 public ModelAndView getUserList(HttpServletRequest request, HttpServletResponse respose, ModelAndView mav) {
  String userName request.getParameter( userNameId
  String userAddress request.getParameter( userAddressId
  String userSchool request.getParameter( userSchoolId
  String userProfession request.getParameter( userProfessionId
  String start request.getParameter( start
  String limit request.getParameter( limit
  start null start ? 0 : start;
  limit null limit ? 10 : limit;
  UserVO vo new UserVO();
  vo.setUserName(userName);
  vo.setUserAddress(userAddress);
  vo.setUserSchool(userSchool);
  vo.setUserProfession(userProfession);
  vo.setStart(Integer.parseInt(start));
  vo.setLimit(Integer.parseInt(limit));
  UserVO vo2 service.getUserInfoCount(vo);
  PageList pageList service.getUserInfoList(vo);
  pageList.setUserCount(vo2.getUserCount());
  mav.setViewName( jsp/business/userList
  mav.addObject( pageList , pageList);
  return mav;
 }

  RequestMapping( /excelExport )
 public void excelExport(HttpServletRequest request, HttpServletResponse response, ModelAndView mav) {
  String userName request.getParameter( userNameId
  String userAddress request.getParameter( userAddressId
  String userSchool request.getParameter( userSchoolId
  String userProfession request.getParameter( userProfessionId
  String start request.getParameter( start
  String limit request.getParameter( limit
  UserVO vo new UserVO();
  vo.setUserName(userName);
  vo.setUserAddress(userAddress);
  vo.setUserSchool(userSchool);
  vo.setUserProfession(userProfession);
  PageList pageList service.excelExport(vo);
  List UserVO list pageList.getPageList();
  // 进行查询并导出
  if (list ! null list.size() 0) {// 查询的数据不为空就对数据进行导出
   // 导出文件的标题
   SimpleDateFormat sdf new SimpleDateFormat( yyyyMMddhhmmss
   String title User Infomation List- sdf.format(new Date()) .xls
   // 设置表格标题行
   String[] headers new String[] { 序号 , 姓名 , 性别 , 出生日期 , 年龄 , 身份证号 , 职业 , 住址 , 学历 , 毕业院校 , 专业
   List Object[] dataList new ArrayList Object[]
   Object[] objs null;
   for (int i i list.size(); i ) { // 循环每一条数据
    UserVO vo2 list.get(i);
    objs new Object[headers.length];
    objs[0] i // 序号
    objs[1] vo2.getUserName();
    objs[2] vo2.getUserSex();
    objs[3] vo2.getUserBirth();
    objs[4] vo2.getUserAge();
    objs[5] vo2.getUserCode();
    objs[6] vo2.getUserJob();
    objs[7] vo2.getUserAddress();
    objs[8] vo2.getUserEducation();
    objs[9] vo2.getUserSchool();
    objs[10] vo2.getUserProfession();
    // 数据添加到excel表格
    dataList.add(objs);
   }
   // 使用流将数据导出
   OutputStream out null;
   try {
    // 防止中文乱码
    String headStr attachment; filename \\ new String(title.getBytes( gb2312 ), ISO8859-1 ) \\
    response.setContentType( octets/stream
    response.setContentType( APPLICATION/OCTET-STREAM
    response.setHeader( Content-Disposition , headStr);
    out response.getOutputStream();
    ExcelExportUtil util new ExcelExportUtil(title, headers, dataList);
    util.export(out);
   } catch (Exception e) {
    e.printStackTrace();
   }
  }

 }

}

Service接口

package com.farmyears.service.login;

import org.springframework.stereotype.Service;

import com.farmyears.vo.LoginResultVO;
import com.farmyears.vo.PageList;
import com.farmyears.vo.UserVO;

Service
public interface LoginService {
 public LoginResultVO getUserInforByUserCode(String userCode, String password);
 public PageList getUserInfoList(UserVO vo);
 public UserVO getUserInfoCount(UserVO vo);
 public PageList excelExport(UserVO vo);
}

Service实现类

package com.farmyears.service.impl.login;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.farmyears.dao.login.LoginDao;
import com.farmyears.service.login.LoginService;
import com.farmyears.vo.LoginResultVO;
import com.farmyears.vo.PageList;
import com.farmyears.vo.UserVO;

Service( loginService )
public class LoginServiceImpl implements LoginService {
  Resource
 private LoginDao dao;

  Override
 public LoginResultVO getUserInforByUserCode(String userCode, String password) {
  UserVO vo dao.getUserInforByUserCode(userCode);
  // 用户不存在
  LoginResultVO resultVo new LoginResultVO();
  if (null vo) {
   UserVO vo1 new UserVO();
   vo1.setUserCode(userCode);
   vo1.setUserPassword(password);
   resultVo.setVo(vo1);
   resultVo.setStatus( 0
   resultVo.setUserNameMsg( User does not exist!
  } else if (vo.getUserPassword().equals(password)) {
   resultVo.setStatus( 1
   if ( SUPPER_ADMIN .equals(vo.getUserName())) {
    vo.setUserPermission( SUPPER_ADMIN
   } else if ( ADMIN .equals(vo.getUserName())) {
    vo.setUserPermission( ADMIN
   } else {
    vo.setUserPermission( COMMON
   }
   resultVo.setVo(vo);

  } else {
   // 密码错误
   UserVO vo2 new UserVO();
   vo2.setUserCode(userCode);
   vo2.setUserPassword(password);
   resultVo.setVo(vo2);
   resultVo.setStatus( 2
   resultVo.setPasswordMsg( Password error!
  }
  return resultVo;
 }

  Override
 public PageList getUserInfoList(UserVO vo) {
  List UserVO list dao.getUserInfoList(vo);
  PageList pageList new PageList();
  pageList.setPageList(list);
  return pageList;
 }

  Override
 public UserVO getUserInfoCount(UserVO vo) {
  UserVO result dao.getUserInfoCount(vo);
  return result;
 }

  Override
 public PageList excelExport(UserVO vo) {
  List UserVO list dao.excelExport(vo);
  PageList pageList new PageList();
  pageList.setPageList(list);
  return pageList;
 }
}

Dao接口

package com.farmyears.dao.login;

import java.util.List;

import org.springframework.stereotype.Repository;

import com.farmyears.vo.UserVO;

Repository
public interface LoginDao {
 public UserVO getUserInforByUserCode(String userCode);
 public List UserVO getUserInfoList(UserVO vo);
 public UserVO getUserInfoCount(UserVO vo);
 public List UserVO excelExport(UserVO vo);
}

接下来上前台代码

main.jsp

% 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 /
    %
!DOCTYPE html
html
head
  base href % basePath%
  meta http-equiv Content-Type content text/html; charset UTF-8
/head
frameset rows 7%, *, 3% frameborder 1 border 1 framespacing 1 bordercolor #00aaff
  frameset cols *
   frame src % path% /jsp/pageTab/Top_Right.html name Top-right scrolling auto noresize noresize /
  /frameset
  frameset cols 10%, *
   frame src % path% /jsp/pageTab/Left.html name Left scrolling auto noresize noresize /
   frame src % path% /jsp/pageTab/Advertising.html name showMain scrolling auto noresize noresize /
  /frameset
  frame src % path% /jsp/pageTab/Footer.html name Foot scrolling auto noresize noresize /
/frameset
/html

login.jsp

% page language java contentType text/html; charset UTF-8 pageEncoding UTF-8 %
% taglib uri http://java.sun.com/jsp/jstl/core prefix c %
%
 String path request.getContextPath();
 String basePath request.getScheme() :// request.getServerName() : request.getServerPort() path /
%
!DOCTYPE html
html

head
base href % basePath%
meta http-equiv Content-Type content text/html;charset UTF-8 /
title 登陆 /title
link rel stylesheet type text/css href % path % /css/login/loginCss.css /
script type text/javaScript src % path % /js/jquery-3.2.1.min.js /script
script type text/javaScript src % path % /js/common/MD5.js /script
script type text/javaScript src % path % /js/login/login.js /script
/head
body οnkeydοwn keyClickFun()
  div id loginSystemId class loginSystemClass
   form id loginFormId action user/login.do method post οnsubmit return check()
    input type hidden id rigestSymble name rigest value NO /
    div id titleId class titleClass 管理员登陆系统 /div
    table class inputTable
     tr
      td class trtd0 /td
      td class trtd1 span id usernameSpan 用户名 /span /td
      td class trtd2 input type text name userCode class userInput id usernameId value ${loginResult.vo.userCode} οnblur checkUserCode(); / /td
      td class trtd3 span id nameMsg ${loginResult.userNameMsg} /span /td
     /tr
     tr
      td class trtd0 /td
      td class trtd1 span id passwordSpan 密 码 /span /td
      td class trtd2 input type password name password class userInput id passwordId value ${loginResult.vo.userPassword} / /td
      td class trtd3 span id passwordMsg ${loginResult.passwordMsg} /span /td
     /tr
    
     tr class buttonClass
      td class trtd5 colspan 2 input type button value 注册 id rigestId οnclick rigestFunction() / /td
      td input type submit value 登陆 id submitId / /td
      td class trtd4 input type button value 取消 id cancelId οnclick cancelFunction() / /td
     /tr
    /table
   /form
  /div
/body
footer
   Author:dehui.zhang
/footer
/html

main.js

$(function(){
 //背景动态闪烁
 //changeBackgorundColor();
 $( #backPage ).click(function(){
  alert( 返回到首页的功能还在升级中。。。
  //opensubPage( backFormId , user/firstPage.do , BACK_PAGE ,
 });
 
 
});
/**
 * 通过form表单动态发送请求
 * param url
 * param param  数组 如[ start 0 name Tom ]组
 * returns
 */
function opensubPage(formId, url, symble, target){
 var basePath getBasePath();
 var abURL basePath url;
 $( # formId).attr( action , abURL);
 if (target ! ) {
  $( # formId).attr( target , target);
 }
 var param getParamFormPage(symble);
 createInputElement(formId, param);
 $( # formId).submit();
}

//参数
function getParamFormPage(symble){
 var param [];
 if (symble USER_INFO ) {
  param.push( start 0
 }else if (symble MAX_MIN_PLAY ) {
  
 } else if (symble MY_NOTE ){
  var userName   dehui.zhang
  param.push( createAuthor userName);
 } else if (symble Web_Chat ) {
  
 }else if (symble File_Up_Down ) {
  
 }else if (symble BACK_PAGE ){
  
 }else if (symble VOTE ){
  
 }else {
  var temp symble.split( *
  for (var i i temp.length; i ) {
   param.push(temp[i]);
  }
 }
 return param;
}

/**
 * js文件中获取基础路径
 * returns
 */
function getBasePath(){
 var base window.location
 var location base.split( /
 var basePath location[0] // location[2] / location[3] /
 return basePath;
}

/**
 * 动态添加input标签
 * param param
 * returns
 */
function createInputElement(formId, param){
 var str $( # formId)
 str.empty();  //清空追加子元素
 for(var i i param.length; i ){
  var temp param[i];
  var name temp.split( )[0];
  var value temp.split( )[1];
  str.append( input type text name name value value /
 }
}

function changeBackgorundColor(){
 window.setInterval(function(){
  changeBackgroundCol( userListDiv , #ffffff
  setTimeout( changeBackgroundCol( userListDiv , #ff80ff ) , 100);
 }, 1000);
}
function changeBackgroundCol(elementId, color){
 var t $( # elementId);
 t.css( background-color , color);
}

login.js

 function keyClickFun() {
  if (window.event.keyCode 13) {
   $( #rigestSymble ).val( NO
   $( #submitId ).click();
  }
 }
 function checkUserCode(){
  var reg /^[0-9]{18}$/;
  var userCode $( #usernameId ).val();
  if (!reg.test(userCode)) {
   $( #nameMsg ).text( Please enter the correct user name.
   return;
  } else {
   $( #nameMsg ).text(
  }
 
 }
 function check(){
  if($( #rigestSymble ).val() YES ){
   return true;
  }
  $( #rigestSymble ).val( NO
  var userCode $( #usernameId ).val();
  var password $( #passwordId ).val();
  if (userCode ) {
   alert( Please input userName!
   return false;
  }
  if (password ) {
   alert( Please input password!
   return false;
  }
  
  //对用户输入的密码进行加密
  var newPassword hex_md5(password);
  $( #passwordId ).val(
  $( #passwordId ).val(newPassword);
  return true;
 }
 
 function cancelFunction(){
  $( #rigestSymble ).val( NO
  $( #usernameId ).val(
  $( #passwordId ).val(
  $( #nameMsg ).text(
  $( #passwordMsg ).text(
 }
 
 function rigestFunction(){
  $( #rigestSymble ).val( YES
  $( #loginFormId ).submit();
 }

main.css

body {
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 background-color: #00ffff;
}
#formId{
 display:none;
}
#backFormId{
 display:none;
}
.main_top_title{ 
 height: 100%;
 width: 100%;
 line-height: 12px;
 text-align: center;
 color: #ffffff;
 position: absolute;
 font-weight: bold;
 margin: 0 0 0 0;
 background-image: url(../resource/image/title_second.jpg);
 background-repeat: no-repeat;
 background-size: cover;
}
.main_top_title2{
 height: 100%;
 width: 100%;
 margin: auto 5;
 font-size: 40px;
 font-weight: bold;
 font-family:fantasy;
 color: #ffffff;
 background-color: #00ffff;
 margin: 0 0 0 0;
}
.main_left{
 height: 100%;
 width: 100%;
 margin: 0 0 0 0;
 text-align: left;
 position: absolute;
 background-color: #00ffff;
}
.main_left_title{
 height: 30px;
 width: 100%;
 float: left;
 margin-top: 20px;
 text-align: center;
 font-weight: bold;
}
.main_left_title a:hover {
 color: #ffffff;
}
.main_auto{
 height: 100%;
 width: 100%;
 position: absolute;
 background-image: url(../resource/image/background_xunyicao2.jpg);
 background-repeat: no-repeat;
 background-size: cover;
}
a{
 text-decoration: none;
}
.footerDiv{
 width: 100%;
 height:100%;
 margin: 0 0;
 position: absolute;
 text-align: center;
 background-color: #00ffff;
 font-size:14px;
 font-weight:bold;
 color:white;
 left: 0;
 bottom: 0;
}

login.css

body {
    text-align:center;
    background-image: url(../../resource/image/caihong.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
 .titleClass {
    background-color:#4888ff;
    width: 400px;
    height:30px;
    line-height:30px;
    float: left;
    margin-bottom: 25px;
    color:#ffffff;
    font-weight:bold;
    }
 #submitId {
    color: #ffffff;
    background-color:#cccccc;
    font-weight:bold;
    margin:0 45 0 10;
  }
 #cancelId {
    color: #ffffff;
    background-color:#cccccc;
    font-weight:bold;
    margin:0 10 0 45;
  }
 #rigestId {
    color: #ffffff;
    background-color:#cccccc;
    font-weight:bold;
    margin:0 10 0 45;
  }
 .loginSystemClass {
   float:left;
   margin-top: 250px;
   margin-left:500px;
   background-color:#48ccff;
   padding:0 0 10 0;
   width: 400px;
   height:200px;
 }
 .userInput{
  width: 150px;
 }
 #nameMsg {
    color: red;
    font-size: 10px;
  }
 #passwordMsg {
    color: red;
    font-size: 10px;
  }
  
 #usernameSpan {
    color:ffffff;
    font-size:14px;
    font-weight:bold;
  }
  
 #passwordSpan {
    color:ffffff;
    font-size:14px;
    font-weight:bold;
  }
 .inputTable{
  text-align:center;
  height: 150px;
  margin: 0, auto;
 }
 .trtd0{
  width: 50px;
 }
 .trtd1{
  width: 80px;
 }
 .trtd2{
  text-align: left;
  width: 150px;
 }
 .trtd3{
  text-align: left;
  width: 100px;
 }
 .buttonClass{
  height: 100px;
  padding-bottom: 0;
 }
 .trtd4{
  text-align: left;
 }
 .trtd5{
  text-align: right;
 }
footer{
 width: 100%;
 position: absolute;
 text-align: center;
 background-color: #00ffff;
 font-size:14px;
 font-weight:bold;
 color:white;
 left: 0;
 bottom: 0;
}

以上我只是挑取了其中一个业务从前到后的代码贴出来了 这是工作之余自学写的 有不足之处还请多多包涵。。。