SSM框架练习 “在线通讯录”

最新推荐文章于 2022-12-11 10:13:03 发布

置顶 qq_40068137

最新推荐文章于 2022-12-11 10:13:03 发布

阅读量2.1k

点赞数 4

分类专栏：机试试题文章标签： java SSM springmvc spring

本文链接：https://blog.csdn.net/qq_40068137/article/details/89972319

版权

机试试题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里说的是一个小案例的做法和实现思路

附上: 案例链接

1、首先创建一个数据库

#创建数据库
CREATE DATABASE addressBookOnline;

#创建表
CREATE TABLE contact(
	id INT PRIMARY KEY AUTO_INCREMENT,
	cname VARCHAR(10) NOT NULL COMMENT '姓名',
	mobile VARCHAR(11) COMMENT '手机',
	qq VARCHAR(10) COMMENT 'QQ',
	email VARCHAR(20) COMMENT 'Email',
	address VARCHAR(255) COMMENT '地址'
)CHARSET utf8;

#插入三条数据
INSERT INTO `addressbookonline`.`contact` (`cname`,`mobile`,`qq`,`email`,`address`) 
VALUES("张三", "18899759840", "110909090", "175335553@qq.com", "江南大道石溪旁边1"),
("李四", "18899259849", "1112155533", "605133327@qq.com", "江南大道石溪旁边2"),
("王五", "18899659849", "11234490189", "1753665383@qq.com", "江南大道石溪旁边3") ;

接下来呢就创建一个javaweb项目

项目结构
在这里插入图片描述

2、根据数据表创建实体bean

import java.io.Serializable;

/**
 * 联系人类
 * @author lizh
 *
 */
public class Contact implements Serializable {
	
	private static final long serialVersionUID = 1L;
	
	private int id;
	private String cname; // 姓名
	private String mobile; // 手机
	private String qq; // QQ
	private String email; // Email 
	private String address; // 地址
	
	//================ get / set =================
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getCname() {
		return cname;
	}
	public void setCname(String cname) {
		this.cname = cname;
	}
	public String getMobile() {
		return mobile;
	}
	public void setMobile(String mobile) {
		this.mobile = mobile;
	}
	public String getQq() {
		return qq;
	}
	public void setQq(String qq) {
		this.qq = qq;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	public static long getSerialversionuid() {
		return serialVersionUID;
	}
	
	@Override
	public String toString() {
		return "Contact [id=" + id + ", cname=" + cname + ", mobile=" + mobile + ", qq=" + qq + ", email=" + email
				+ ", address=" + address + "]";
	}
	
}

3、根据业务需求创建dao

import java.util.List;

import org.apache.ibatis.annotations.Param;

import com.bdqn.entity.Contact;
import com.bdqn.entity.PageResult;

/**
 * 联系人抽象方法
 * @author lizh
 *
 */
public interface ContactDao {
	
	/**
	 * 分页查询所有联系人
	 * 按照联系人姓名模糊查询
	 * 按照联系人ID查找联系人
	 * @param cname 姓名
	 * @param id ID
	 * @param pageResult
	 * @return List<Contact>
	 */
	List<Contact> selectContactByPageAndCondition(@Param("cname") String cname, @Param("id") Integer id, 
			@Param("pageResult") PageResult<Contact> pageResult);
	
	/**
	 * 根据姓名和ID查询个数
	 * @param cname 姓名
	 * @param id ID
	 * @return int
	 */
	int selectContactCountByCondition(@Param("cname") String cname, @Param("id")Integer id);
	
	/**
	 *添加联系人
	 * @param contact 联系人对象
	 * @return int
	 */
	int insertContact(Contact contact);
	
	/**
	 *修改联系人
	 * @param contact 联系人对象
	 * @return int
	 */
	int updateContact(Contact contact);
}

4、创建根据业务需求创建service

import com.bdqn.entity.Contact;
import com.bdqn.entity.PageResult;

/**
 * 联系人抽象Service方法
 * @author lizh
 *
 */
public interface ContactService {
	/**
	 * 分页查询所有联系人
	 * 按照联系人姓名模糊查询
	 * 按照联系人ID查找联系人
	 * @param cname 姓名
	 * @param id ID
	 * @param pageResult
	 */
	void selectContactByPageAndCondition(String cname, Integer id, PageResult<Contact> pageResult);
	
	/**
	 * 根据姓名和ID查询个数
	 * @param cname 姓名
	 * @param id ID
	 * @return int
	 */
	int selectContactCountByCondition(String cname, Integer id);
	
	/**
	 *添加联系人
	 * @param contact 联系人对象
	 * @return
	 */
	int insertContact(Contact contact);
	
	/**
	 *修改联系人
	 * @param contact 联系人对象
	 * @return
	 */
	int updateContact(Contact contact);
}

5、创建根据业务需求创建serviceImpl实现类

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.bdqn.dao.ContactDao;
import com.bdqn.entity.Contact;
import com.bdqn.entity.PageResult;
import com.bdqn.service.ContactService;

@Service
public class ContactServiceImpl implements ContactService{

	@Autowired
	private ContactDao contactDao;
	
	@Override
	public void selectContactByPageAndCondition(String cname, Integer id, PageResult<Contact> pageResult) {
		// 得到rowCount 当前查询的总条数
		int rowCount = selectContactCountByCondition(cname, id);
		// 设值
		pageResult.setRowCount(rowCount);
		// 查询当前的数据
		List<Contact> contactList = contactDao.selectContactByPageAndCondition(cname, id, pageResult);
		// 封装到数据当中
		pageResult.setData(contactList);
	}

	@Override
	public int selectContactCountByCondition(String cname, Integer id) {
		return contactDao.selectContactCountByCondition(cname, id);
	}

	@Override
	public int insertContact(Contact contact) {
		return contactDao.insertContact(contact);
	}

	@Override
	public int updateContact(Contact contact) {
		return contactDao.updateContact(contact);
	}

}

6、实现dao的mapper.xml

<!DOCTYPE mapper
	 PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
	 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.bdqn.dao.ContactDao">

	<!-- 分页查询联系人信息 -->
	<select id="selectContactByPageAndCondition" resultType="contact">
		SELECT * FROM contact
		<where>
			<if test="id != null">
				ID = #{id}
			</if>
			<if test="cname != null and cname != ''">
				AND CNAME LiKE CONCAT(#{cname}, '%')
			</if>
		</where>
		LIMIT #{pageResult.firstResult}, #{pageResult.pageSize}
	</select>
	
	<!-- 
		查询表里又多少条数据， 以便以后好做分页， 也是根据条件来做分页的
	 -->
	<select id="selectContactCountByCondition" resultType="int">
		SELECT COUNT(*) FROM contact
		<where>
			<if test="id != null">
				ID = #{id}
			</if>
			<if test="cname != null and cname != ''">
				AND CNAME LiKE CONCAT(#{cname}, '%')
			</if>
		</where>
	</select>
	
	<!-- 修改联系人 -->
	<update id="updateContact">
		UPDATE  contact
				SET
		  `cname` = #{cname},
		  `mobile` = #{mobile},
		  `qq` = #{qq},
		  `email` = #{email},
		  `address` = #{address} 
		WHERE `id` = #{id}
	</update>
	
	<!-- 增加联系人 -->
	<insert id="insertContact">
		INSERT INTO contact (`cname`,`mobile`,`qq`,`email`,`address`) 
		VALUES(#{cname}, #{mobile}, #{qq},#{email}, #{address})
	</insert>
</mapper>

7、实现Controller控制器

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;

import com.bdqn.entity.Contact;
import com.bdqn.entity.PageResult;
import com.bdqn.service.ContactService;

@Controller
public class ContactController {
	
	@Autowired
	private ContactService contactService;
	
	@RequestMapping(value= {"/", "/index"})
	public String gotoIndex(Model model, PageResult<Contact> pageResult) {
		contactService.selectContactByPageAndCondition(null, null, pageResult);
		model.addAttribute("pageResult", pageResult);
		return "index";
	}
	
	@RequestMapping("/queryContact")
	public String queryContact(@ModelAttribute("cname") String cname, Integer id, 
			PageResult<Contact> pageResult, Model model) {
		contactService.selectContactByPageAndCondition(cname, id, pageResult);
		model.addAttribute("pageResult", pageResult);
		return "index";
	}
	
	@RequestMapping("/gotoAddPage")
	public String gotoAddPage(Model model) {
		model.addAttribute("url", "addPage.action");
		model.addAttribute("hea", "添加联系人");
		return "editor";
	}
	
	@RequestMapping("/gotoEditorPage")
	public String gotoUpdatePage(Model model, Integer id, PageResult<Contact> pageResult) {
		model.addAttribute("url", "updatePage.action");
		model.addAttribute("hea", "修改联系人");
		contactService.selectContactByPageAndCondition(null, id, pageResult);
		model.addAttribute("pageResult", pageResult);
		return "editor";
	}
	
	@RequestMapping("/addPage")
	public String addContact(Contact contact) {
		contactService.insertContact(contact);
		return "redirect:queryContact.action";
	}
	
	@RequestMapping("/updatePage")
	public String updateContact(Contact contact) {
		contactService.updateContact(contact);
		return "redirect:queryContact.action";
	}
}

配置文件

applicationContext.xml配置文件

<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx.xsd">

	<!-- 配置数据库连接字段 -->
	<bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
		<property name="location" value="classpath:database.properties"></property>
	</bean>
	
	<!-- 配置数据源 -->
	<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
		<property name="driverClassName" value="${driver}"></property>
		<property name="url" value="${url}"></property>
		<property name="username" value="${username}"></property>
		<property name="password" value="${password}"></property>
	</bean>
	
	
	<!-- 配置SQL会话工厂 -->
	<bean class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="configLocation" value="classpath:mybatis-config.xml"></property>
		<property name="dataSource" ref="dataSource"></property>
		<property name="mapperLocations">
			<list>
				<value>classpath:com/bdqn/mapper/*.xml</value>
			</list>
		</property>
	</bean>
	<!-- 配置mapper映射文件 
		使用配置扫描配置     不需要写实现类
	-->
	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		<property name="basePackage" value="com.bdqn.dao"></property>
	</bean>
	
	<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<property name="dataSource" ref="dataSource"></property>
	</bean>	
	
	<!-- aop代理 -->
	<aop:aspectj-autoproxy></aop:aspectj-autoproxy>
	
	<tx:advice id="txAdvice" transaction-manager="transactionManager">
		<tx:attributes>
			<tx:method name="insert*" propagation="REQUIRED"/>
			<tx:method name="update*" propagation="REQUIRED"/>
			<tx:method name="del*" propagation="REQUIRED"/>
			<tx:method name="doAdd*" propagation="REQUIRED"/>
			<tx:method name="*" propagation="SUPPORTS" read-only="true"/>
		</tx:attributes>
	</tx:advice>
	
	<aop:config proxy-target-class="true">
		<aop:pointcut expression="execution(* com.bdqn.service..*.*(..))" id="txPointCut"/>
		<aop:advisor advice-ref="txAdvice" pointcut-ref="txPointCut"/>
	</aop:config>
	<!-- 注解扫描  、用户托管类、自动赋值  -->
	<context:component-scan base-package="com.bdqn"></context:component-scan>
</beans>

database.properties连接数据库配置文件

driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/addressBookOnline?useUnicode=true&characterEncoding=UTF-8
username=root
password=

mybatis-config.xml mybatis支持配置文件

<!DOCTYPE configuration
 PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
 "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

	<!-- 给实体类取别名，用于mapper包下面的映射文件使用 -->
	<typeAliases>
		<package name="com.bdqn.entity"/>
	</typeAliases>

</configuration>

springmvc-servlet.xml 配置文件支持

<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:p="http://www.springframework.org/schema/p"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd">
	
	
	<context:component-scan base-package="com.bdqn"/>
	<mvc:annotation-driven>
		<mvc:message-converters>
			<bean class="org.springframework.http.converter.StringHttpMessageConverter">
				<property name="supportedMediaTypes">
					<list>
						<value>text/html;charset=UTF-8</value>
						<value>application/json;charset=UTF-8</value>
					</list>
				</property>
			</bean>
		</mvc:message-converters>
			
	</mvc:annotation-driven>
	
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/page/"></property>
		<property name="suffix" value=".jsp"></property>
	</bean>
	
	<import resource="applicationContext.xml"/>
</beans>

jar包支持

aopalliance-1.0.0.jar
asm-4.2.jar
aspectj.weaver-1.6.8.jar
cglib-3.1.jar
commons-dbcp.jar
commons-fileupload-1.3.2.jar
commons-io-1.3.2.jar
commons-logging-1.2.jar
commons.pool-1.5.3.jar
fastjson-1.2.4.jar
hibernate-validator-4.0.1.GA.jar
jstl.jar
log4j-1.2.17.jar
mybatis-3.3.0.jar
mybatis-spring-1.2.0.jar
mysql-connector-java-5.1.6.jar
slf4j-api-1.7.12.jar
slf4j-log4j12-1.7.12.jar
spring-aop-4.2.0.RELEASE.jar
spring-beans-4.2.0.RELEASE.jar
spring-context-4.2.0.RELEASE.jar
spring-core-4.2.0.RELEASE.jar
spring-expression-4.2.0.RELEASE.jar
spring-jdbc-4.2.0.RELEASE.jar
spring-tx-4.2.0.RELEASE.jar
spring-web-4.2.0.RELEASE.jar
spring-webmvc-4.2.0.RELEASE.jar
standard.jar
validation-api-1.0.0.GA.jar

结构图
在这里插入图片描述

上面是web页面结构都是存放在WEB-INF文件夹下面，为什么要放在这个文件夹下面呢。因为如果是放在这个文件夹下面的话你要是直接在浏览器地址栏打上地址直接访问这个页面是访问不到的，只能通过服务器转发地址去访问。

接下来就是web.xml的配置了

<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
	
	<!-- 过滤乱码处理 -->
	<filter>
		<filter-name>springCharacterEncodingFilter</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>
	</filter>
	<!-- 过滤映射 -->
	<filter-mapping>
		<filter-name>springCharacterEncodingFilter</filter-name>
		<url-pattern>*.action</url-pattern>
	</filter-mapping>
	
	
	<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:springmvc-servlet.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
		
	</servlet>
	
	<servlet-mapping>
		<servlet-name>springMVC</servlet-name>
		<url-pattern>*.action</url-pattern>
	</servlet-mapping>
</web-app>

这个web.xml文件主要是配置浏览器地址入口加载各种配置文件

接下来就是jsp页面了

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<style type="text/css">
div {
	text-align: center;
}

table {
	margin: 0 auto;
}

.ri {
	margin-left: 300px;
}

.w .r {
	text-align:center;
}

p {
	display: inline-block;
	margin-left: 600px;
}
</style>
</head>
<body>
	<div>
		<form id="myForm" action="/AddressBookOnline/queryContact.action" method="post">
			
			<div class="w">
				<h1>在线通讯录</h1>
				查找联系人 : <input type="text" id="cname" name="cname" value="${cname}"/>
			<input type="button" οnclick="conditionClick()" value="查找"><a href="gotoAddPage.action">添加联系人</a>
			<c:if test="${empty pageResult.data}">
				<h1>没有找到与 “${cname}” 相关的联系人</h1>
			</c:if>
			<c:if test="${not empty pageResult.data}">
				<table border="1" width="800">
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>手机</th>
						<th>QQ</th>
						<th>Email</th>
						<th>地址</th>
					</tr>
					<c:forEach items="${pageResult.data}" var="contact">
						<tr>
							<td>${contact.id}</td>
							<td><a href="gotoEditorPage.action?id=${contact.id}">${contact.cname}</a></td>
							<td>${contact.mobile}</td>
							<td>${contact.qq}</td>
							<td>${contact.email}</td>
							<td>${contact.address}</td>
						</tr>
					</c:forEach>

				</table>
				<span class="r"> <input type="hidden" id="pageNo"
					name="pageNo" value="${pageResult.pageNo}" /> <a
					href="javascript:;" class="first">首页</a> <a href="javascript:;"
					class="prev">上一页</a> <a href="javascript:;" class="next">下一页</a> <a
					href="javascript:;" class="last">尾页</a> <span>第${pageResult.pageNo}页/共${pageResult.pageCount}页</span>
				</span>
				</c:if>
			</div>

		</form>
	</div>
	<script type="text/javascript" src="/AddressBookOnline/js/jquery-1.12.4.js"></script>
	<script type="text/javascript">
		// 使用javascript方法验证是否为空
		function conditionClick() {
			var cname = document.getElementById("cname").value;
			if (cname == "") {
				alert("请填写搜索关键字!")
				return;
			}
			document.getElementById("myForm").submit();
		}
	</script>
	<script type="text/javascript">
		$(function() {
			//给tr隔行变色
			$("tr:even").css("background-color", "pink");

			//设置tr的第一个背景颜色
			$("tr:eq(0)").css("background-color", "#ccc");

			//表单提交单击事件
			$("#sub").click(function() {
				$(".first").click();
			});

			//首页
			$(".first").click(function() {
				$("#pageNo").val("1");
				$("#myForm").submit();
			});

			//尾页
			$(".last").click(function() {
				$("#pageNo").val("${pageResult.pageCount}");
				$("#myForm").submit();
			});

			//上一页
			$(".prev").click(function() {
				var pageNo = $("#pageNo").val();
				if (pageNo <= 1) {
					alert("已经是第一页了");
					return;
				}
				pageNo--;
				$("#pageNo").val(pageNo);
				$("#myForm").submit();
			});
			
			//下一页
			$(".next").click(function() {
				var pageNo = $("#pageNo").val();
				if (pageNo >= '${pageResult.pageCount}') {
					alert("已经是最后一页了");
					return;
				}
				pageNo++;
				$("#pageNo").val(pageNo);
				$("#myForm").submit();
			});
		});
	</script>
</body>
</html>

index.jsp主要显示联系人的列表信息

editor.jsp

<%@ page language="java"  pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<title>申报项目信息</title>
<style type="text/css">
	div {
		text-align: center;
	}
	
	table {
		margin: 0 auto;
	}
</style>
</head>
<body>
<form action="${url}" οnsubmit="return comit(this)" method="post">
<c:if test="${ url eq 'updatePage.action' }">
	<input type="hidden" value="${pageResult.data.get(0).id}" name="id"/>
</c:if>
	<div>
		<h2>${hea}</h2>
		<table align="center">
			  <tr>
			    <td>姓名:</td>
			    <td><input name="cname" id="cname" value="${pageResult.data.get(0).cname}"/></td>
			  </tr>
			  <tr>
			    <td>手机:</td>
			    <td><input name="mobile" id="mobile" value="${pageResult.data.get(0).mobile}" /></td>
			  </tr>
			  <tr>
			    <td>QQ:</td>
			    <td><input name="qq" id="qq" value="${pageResult.data.get(0).qq}" /></td>
			  </tr>
			  <tr>
			    <td>Email:</td>
			    <td><input name="email" id="email" value="${pageResult.data.get(0).email}" /></td>
			  </tr>
			  <tr>
			    <td>地址:</td>
			    <td><input name="address" id="address" value="${pageResult.data.get(0).address}" /></td>
			  </tr>
		 </table>
		 <input value="保存"  id="sub" type="submit"/> <input value="重置" type="reset"/>
	</div>
</form>

<script type="text/javascript">
	function comit(form) {
		var cname = document.getElementById("cname").value;
		var mobile = document.getElementById("mobile").value;
		var qq = document.getElementById("qq").value;
		var email = document.getElementById("email").value;
		var address = document.getElementById("address").value;
		reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
		
		if (cname == "") {
			alert("必须填写联系人姓名");
			return false;
		} else if (mobile.length > 11 || mobile.length <= 10) {
			alert("请正确填写手机!");
			return false;
		} else if (qq == "") {
			alert("请正确填写QQ!");
			return false;
		}else if (isNaN(qq)) {
			alert("请正确填写QQ!");
			return false;
		} else if (!reg.test(email)) {
            alert("邮件格式不正确，请重新输入!");
            return false;
        }
		return true;
	}
</script>

</body>
</html>

这个页面主要是做增加和修改功能的页面