springMVC结合Mybatis自学搭简单框架

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

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

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&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>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 = 0; i < list.size(); i++) { // 循环每一条数据
UserVO vo2 = list.get(i);
objs = new Object[headers.length];
objs[0] = i+1;// 序号
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 = 0; 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=0; 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 + ' />');
}
}

login.js

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;
}

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