SSM整合案例（Spring+Struts+Mybatis）

项目目录结构

第一步：创建数据库和数据表

 CREATE DATABASE
 IF NOT EXISTS mybatis;

 USE mybatis;

 CREATE TABLE t_user (
     user_id INT (11) NOT NULL AUTO_INCREMENT,
     user_name VARCHAR (20) NOT NULL,
     user_age VARCHAR (20) NOT NULL,
     PRIMARY KEY (user_id)
 ) ENGINE = INNODB DEFAULT CHARSET = utf8;

第二步：导入jar包

第三步：创建实体类

 package com.oracle.model;

 /**
  *
  * @ClassName: 类名：User
  * @Description: 描述：User实体类
  * @author: 作者：Back
  * @date: 时间：2017年1月12日 下午2:12:55
  */
 public class User {
     // 用户id
     private int id;
     // 用户年龄
     private String age;
     // 用户名
     private String userName;

     /**
      *
      * @Title:User
      * @Description:隐式构造方法
      */
     public User() {

     }

     /**
      *
      * @Title:User
      * @Description:全参构造方法
      * @param id
      * @param age
      * @param userName
      */
     public User(int id, String age, String userName) {
         super();
         this.id = id;
         this.age = age;
         this.userName = userName;
     }

     /**
      *
      * @Title: getId
      * @Description: TODO
      * @return
      * @return: int
      */
     public int getId() {
         return id;
     }

     /**
      *
      * @Title: setId
      * @Description: TODO
      * @param id
      * @return: void
      */
     public void setId(int id) {
         this.id = id;
     }

     /**
      *
      * @Title: getAge
      * @Description: TODO
      * @return
      * @return: String
      */
     public String getAge() {
         return age;
     }

     /**
      *
      * @Title: setAge
      * @Description: TODO
      * @param age
      * @return: void
      */
     public void setAge(String age) {
         this.age = age;
     }

     /**
      *
      * @Title: getUserName
      * @Description: TODO
      * @return
      * @return: String
      */
     public String getUserName() {
         return userName;
     }

     /**
      *
      * @Title: setUserName
      * @Description: TODO
      * @param userName
      * @return: void
      */
     public void setUserName(String userName) {
         this.userName = userName;
     }

 }

第四步：创建UserDao接口

 package com.oracle.dao;

 import java.util.List;

 import com.oracle.model.User;

 /**
  *
  * @ClassName: 类名：UserMapper
  * @Description: 描述：UserMapper接口
  * @author: 作者：Back
  * @date: 时间：2017年1月12日 下午2:16:10
  */
 public interface UserMapper {
     /**
      *
      * @Title: save
      * @Description: 新增用户信息
      * @param user
      * @return: void
      */
     public void save(User user);

     /**
      *
      * @Title: update
      * @Description: 修改用户信息
      * @param user
      * @return
      * @return: boolean
      */
     public boolean update(User user);

     /**
      *
      * @Title: delete
      * @Description: 删除用户信息
      * @param id
      * @return
      * @return: boolean
      */
     public boolean delete(int id);

     /**
      *
      * @Title: findById
      * @Description: 根据id查找用户信息
      * @param id
      * @return
      * @return: User
      */
     public User findById(int id);

     /**
      *
      * @Title: findAll
      * @Description: 查找全部用户信息
      * @return
      * @return: List<User>
      */
     public List<User> findAll();
 }

第五步：在数据持久层（dao层）同级目录下创建UserMapper.xml SQL映射语句文件

 <?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">

 <!-- namespace：必须与对应的接口全类名一致 id:必须与对应接口的某个对应的方法名一致 parameterType：参数类型 resultType：返回值类型-->
 <mapper namespace="com.oracle.dao.UserMapper">
     <!-- 新增用户信息 -->
     <insert id="save" parameterType="User">
         insert into
         t_user(user_name,user_age) values(#{userName},#{age})
     </insert>
     <!-- 更新用户信息 -->
     <update id="update" parameterType="User">
         update t_user set
         user_name=#{userName},user_age=#{age} where user_id=#{id}
     </update>
     <!-- 删除用户信息 -->
     <delete id="delete" parameterType="int">
         delete from t_user where
         user_id=#{id}
     </delete>
     <!-- 根据用户Id查询用户信息 -->
     <!-- mybsits_config中配置的alias类别名,也可直接配置resultType为类路劲 -->
     <select id="findById" parameterType="int" resultType="User">
         select
         user_id id,user_name userName,user_age age from t_user where
         user_id=#{id}
     </select>
     <!-- 查询所有用户信息 -->
     <select id="findAll" resultType="User">
         select user_id id,user_name
         userName,user_age age from t_user
     </select>
 </mapper>

第六步：在service下创建UserService.java接口

 package com.oracle.service;

 import java.util.List;

 import com.oracle.model.User;

 /**
  *
  * @ClassName: 类名：UserService
  * @Description: 描述：业务逻辑接口层
  * @author: 作者：Back
  * @date: 时间：2017年1月12日 下午2:45:26
  */
 public interface UserService {
     /**
      *
      * @Title: save
      * @Description: 新增用户信息
      * @param user
      * @return: void
      */
     public void save(User user);

     /**
      *
      * @Title: update
      * @Description: 修改用户信息
      * @param user
      * @return
      * @return: boolean
      */
     public boolean update(User user);

     /**
      *
      * @Title: delete
      * @Description: 删除用户信息
      * @param id
      * @return
      * @return: boolean
      */
     public boolean delete(int id);

     /**
      *
      * @Title: findById
      * @Description: 根据用户id查找用户信息
      * @param id
      * @return
      * @return: User
      */
     public User findById(int id);

     /**
      *
      * @Title: findAll
      * @Description: 查找全部用户信息
      * @return
      * @return: List<User>
      */
     public List<User> findAll();
 }

第七步：在com.oracle.service.impl下实现Service接口

 package com.oracle.service.impl;
 import java.util.List;

 import javax.annotation.Resource;

 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;

 import com.liuxianglin.dao.UserMapper;
 import com.liuxianglin.model.User;
 import com.liuxianglin.service.UserService;

 /**
  * Copyright © 2017刘祥林|BMEETYMISS. All rights reserved.
  *
  * @Title: 文件名：UserviceImpl.java
  * @Prject: 项目名：SSM
  * @Package: 包名：com.liuxianglin.service.impl
  * @ClassName: 类名：UserviceImpl
  * @Description: 描述：TODO
  * @author: 作者：Back
  * @date: 时间：2017年1月11日 下午5:23:58
  * @version: 版本：V1.0
  */

 @Service
 @Transactional // 此处不再进行创建SqlSession和提交事务，都已交由spring去管理了
 public class UserviceImpl implements UserService {

     @Resource
     private UserMapper mapper;

     /*
      * (non Javadoc)
      *
      * @Title: save
      *
      * @Description: TODO
      *
      * @param user
      *
      * @see com.liuxianglin.service.UserService#save(com.liuxianglin.model.User)
      */
     @Override
     public void save(User user) {
         // TODO Auto-generated method stub
         mapper.save(user);
     }

     /*
      * (non Javadoc)
      *
      * @Title: update
      *
      * @Description: TODO
      *
      * @param user
      *
      * @return
      *
      * @see
      * com.liuxianglin.service.UserService#update(com.liuxianglin.model.User)
      */
     @Override
     public boolean update(User user) {
         // TODO Auto-generated method stub
         return mapper.update(user);
     }

     /*
      * (non Javadoc)
      *
      * @Title: delete
      *
      * @Description: TODO
      *
      * @param id
      *
      * @return
      *
      * @see com.liuxianglin.service.UserService#delete(int)
      */
     @Override
     public boolean delete(int id) {
         // TODO Auto-generated method stub
         return mapper.delete(id);
     }

     /*
      * (non Javadoc)
      *
      * @Title: findById
      *
      * @Description: TODO
      *
      * @param id
      *
      * @return
      *
      * @see com.liuxianglin.service.UserService#findById(int)
      */
     @Override
     public User findById(int id) {
         // TODO Auto-generated method stub
         User user = mapper.findById(id);
         return user;
     }

     /*
      * (non Javadoc)
      *
      * @Title: findAll
      *
      * @Description: TODO
      *
      * @return
      *
      * @see com.liuxianglin.service.UserService#findAll()
      */
     @Override
     public List<User> findAll() {
         // TODO Auto-generated method stub
         List<User> findAllList = mapper.findAll();
         return findAllList;
     }

 }

第八步：在actioin中创建UserAction.java

 package com.oracle.action;

 import java.io.IOException;
 import java.io.PrintWriter;
 import java.util.List;

 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;

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

 import com.liuxianglin.model.User;
 import com.liuxianglin.service.UserService;

 /**
  * Copyright © 2017刘祥林|BMEETYMISS. All rights reserved.
  *
  * @Title: 文件名：UserAction.java
  * @Prject: 项目名：SSM
  * @Package: 包名：com.liuxianglin.action
  * @ClassName: 类名：UserAction
  * @Description: 描述：TODO
  * @author: 作者：Back
  * @date: 时间：2017年1月11日 下午5:31:17
  * @version: 版本：V1.0
  */
 @Controller
 @RequestMapping("/user")
 public class UserAction {
     // 自动注入属性
     @Autowired
     private UserService service;

     public String toAddUser(HttpServletRequest request) {
         return "/addUser";
     }

     /**
      *
      * @Title: addUser
      * @Description: 跳转到添加用户界面
      * @param user
      * @param request
      * @return
      * @return: String
      */
     @RequestMapping("/addUser")
     public String addUser(User user, HttpServletRequest request) {
         service.save(user);
         return "redirect:/user/getAllUser";
     }

     /**
      *
      * @Title: updateUser
      * @Description:编辑用户
      * @param user
      * @param request
      * @return
      * @return: String
      */
     public String updateUser(User user, HttpServletRequest request) {
         if (service.update(user)) {
             user = service.findById(user.getId());
             request.setAttribute("user", user);
             return "redirect:/user/getAllUser";
         } else {
             return "/error";
         }
     }

     /**
      *
      * @Title: delUser
      * @Description: 删除用户
      * @param id
      * @param request
      * @param response
      * @return: void
      */
     public void delUser(int id, HttpServletRequest request, HttpServletResponse response) {
         String result = "{\"result\":\"error\"}";
         if (service.delete(id)) {
             result = "{\"result\":\"success\"}";
         }
         response.setContentType("application/json");
         try {
             PrintWriter out = response.getWriter();
             out.write(result);
         } catch (IOException e) {
             e.printStackTrace();
         }
     }

     /**
      *
      * @Title: getUser
      * @Description: 根据id查询单个用户
      * @param id
      * @param request
      * @return
      * @return: String
      */
     public String getUser(int id, HttpServletRequest request) {
         request.setAttribute("user", service.findById(id));
         return "/editUser";
     }

     /**
      *
      * @Title: getAllUser
      * @Description: 获取全部用户列表
      * @param request
      * @return
      * @return: String
      */
     public String getAllUser(HttpServletRequest request) {
         List<User> findAll = service.findAll();
         request.setAttribute("userList", findAll);
         return "/allUser";
     }

 }

第九步：在src下创建log4j.properties属性文件

 ### set log levels ###
 log4j.rootLogger = info , Console , D
 #Console
 log4j.appender.Console=org.apache.log4j.ConsoleAppender
 log4j.appender.Console.layout=org.apache.log4j.PatternLayout
 log4j.appender.Console.layout.ConversionPattern=%d [%t] %-5p [%c] - %m%n
 log4j.logger.java.sql.ResultSet=INFO
 log4j.logger.org.apache=INFO
 log4j.logger.java.sql.Connection=INFO
 log4j.logger.java.sql.Statement=INFO
 log4j.logger.java.sql.PreparedStatement=INFO
 #output2file
 log4j.appender.D = org.apache.log4j.DailyRollingFileAppender
 log4j.appender.D.File = D:/logs/log.log
 log4j.appender.D.Append = true
 log4j.appender.D.Threshold = DEBUG
 log4j.appender.D.layout = org.apache.log4j.PatternLayout
 log4j.appender.D.layout.ConversionPattern = %-d{yyyy-MM-dd HH:mm:ss} [ %t:%r ] - [ %p ] %m%n

第十步：在src下创建mybatis-config.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>

     <!-- 实体类,简称 -设置别名 -->
     <typeAliases>
         <typeAlias alias="User" type="com.oracle.model.User" />
     </typeAliases>
     <!-- 实体接口映射资源 -->
     <!-- 说明：如果xxMapper.xml配置文件放在和xxMapper.java统一目录下，mappers也可以省略，因为org.mybatis.spring.mapper.MapperFactoryBean默认会去查找与xxMapper.java相同目录和名称的xxMapper.xml -->
     <mappers>
         <mapper resource="com/oracle/dao/UserMapper.xml" />
     </mappers>
 </configuration>  

第十一步：在src下创建spring-common.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:tx="http://www.springframework.org/schema/tx"
     xsi:schemaLocation="
         http://www.springframework.org/schema/beans
         http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
         http://www.springframework.org/schema/context
         http://www.springframework.org/schema/context/spring-context-4.0.xsd
         http://www.springframework.org/schema/tx
         http://www.springframework.org/schema/tx/spring-tx-4.0.xsd">

     <!-- 1. 数据源 : DriverManagerDataSource -->
     <bean id="dataSource"
         class="org.springframework.jdbc.datasource.DriverManagerDataSource">
         <!-- jdbc驱动类名字 -->
         <property name="driverClassName" value="com.mysql.jdbc.Driver" />
         <!-- 数据库地址 -->
         <property name="url" value="jdbc:mysql://localhost:3306/mybatis" />
         <!-- 数据账户名 -->
         <property name="username" value="root" />
         <!-- 数据密码 -->
         <property name="password" value="123456" />
     </bean>

     <!-- 2. mybatis的SqlSession的工厂: SqlSessionFactoryBean dataSource:引用数据源 MyBatis定义数据源,同意加载配置 -->
     <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
         <property name="dataSource" ref="dataSource"></property>
         <property name="configLocation" value="classpath:mybatis-config.xml" />
     </bean>

     <!-- 3. mybatis自动扫描加载Sql映射文件/接口 : MapperScannerConfigurer sqlSessionFactory
         basePackage:指定sql映射文件/接口所在的包（自动扫描） -->
     <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
         <property name="basePackage" value="com.oracle.dao"></property>
         <property name="sqlSessionFactory" ref="sqlSessionFactory"></property>
     </bean>

     <!-- 4. 事务管理 : DataSourceTransactionManager dataSource:引用上面定义的数据源 -->
     <bean id="txManager"
         class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
         <property name="dataSource" ref="dataSource"></property>
     </bean>

     <!-- 5. 使用声明式事务 transaction-manager：引用上面定义的事务管理器 -->
     <tx:annotation-driven transaction-manager="txManager" />

 </beans>

第十四步：在src下创建一个spring-mvc.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:context="http://www.springframework.org/schema/context"
     xmlns:mvc="http://www.springframework.org/schema/mvc"
     xsi:schemaLocation="http://www.springframework.org/schema/beans
     http://www.springframework.org/schema/beans/spring-beans.xsd
     http://www.springframework.org/schema/context
     http://www.springframework.org/schema/context/spring-context-4.0.xsd
     http://www.springframework.org/schema/mvc
     http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">

     <!-- 注解扫描包 -->
     <context:component-scan base-package="com.oracle" />

     <!-- 开启注解 -->
     <mvc:annotation-driven />

     <!-- 配置静态资源，直接映射到对应的文件夹，不被DispatcherServlet处理，3.04新增功能，需要重新设置spring-mvc-3.0.xsd -->
     <mvc:resources mapping="/img/**" location="/img/" />
     <mvc:resources mapping="/js/**" location="/js/" />
     <mvc:resources mapping="/css/**" location="/css/" />
     <mvc:resources mapping="/html/**" location="/html/" />

     <!-- 定义跳转的文件的前后缀 ，视图模式配置 -->
     <bean id="viewResolver"
         class="org.springframework.web.servlet.view.InternalResourceViewResolver">
         <!-- 这里的配置我的理解是自动给后面action的方法return的字符串加上前缀和后缀，变成一个 可用的url地址 -->
         <property name="prefix" value="/WEB-INF/jsp/" />
         <property name="suffix" value=".jsp" />
     </bean>
 </beans>

第十五步：配置web.xml文件

 <?xml version="1.0" encoding="UTF-8"?>
 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xmlns="http://xmlns.jcp.org/xml/ns/javaee"
     xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
     id="WebApp_ID" version="3.1">
     <display-name>SpringMVC_Spriing_Mybatis</display-name>
     <!-- 加载Spring容器配置 -->
     <listener>
         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
     </listener>

     <!-- 设置Spring容器加载所有的配置文件的路径 -->
     <context-param>
         <param-name>contextConfigLocation</param-name>
         <param-value>classpath*:spring-*.xml</param-value>
     </context-param>

     <!-- 配置SpringMVC核心控制器 -->
     <servlet>
         <servlet-name>springMVC</servlet-name>
         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
         <!-- 配置初始配置化文件,前面contextConfigLocation看情况二选一 -->
         <init-param>
             <param-name>contextConfigLocation</param-name>
             <param-value>classpath*:spring-mvc.xml</param-value>
         </init-param>
         <!-- 启动加载一次 -->
         <load-on-startup>1</load-on-startup>
     </servlet>

     <!--为DispatcherServlet建立映射 -->
     <servlet-mapping>
         <servlet-name>springMVC</servlet-name>
         <!-- 此处可以可以配置成*.do，对应struts的后缀习惯 -->
         <url-pattern>/</url-pattern>
     </servlet-mapping>

     <!-- 防止Spring内存溢出监听器 -->
     <listener>
         <listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class>
     </listener>

     <!-- 解决工程编码过滤器 -->
     <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>

     <welcome-file-list>
         <welcome-file>index.jsp</welcome-file>
     </welcome-file-list>
 </web-app>

第十六步：前端配置引入jquery-1.7.1.js  创建index.jsp文件

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 <%
     String path = request.getContextPath();
     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
             + path + "/";
 %>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <base href="<%=basePath%>">
 <title>首页</title>
 </head>
 <body>
     <a href="<%=basePath%>user/getAllUser">进入用户管理页</a>
 </body>
 </html>

创建allUser.jsp

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%
     String path = request.getContextPath();
     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
             + path + "/";
 %>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <base href="<%=basePath%>">
 <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
 <title>用户列表</title>

 <script type="text/javascript">
     function del(id){
         alert("删除");
         $.get("<%=basePath%>
     user/delUser?id=" + id, function(data) {
             if ("success" == data.result) {
                 window.location.reload();
             } else {
                 alert("删除失败");
             }
         });
     }
 </script>
 </head>
 <body>
     <h6>
         <a href="<%=basePath%>user/toAddUser">添加用户</a>
     </h6>
     <table border="1">
         <tbody>
             <tr>
                 <th>姓名</th>
                 <th>年龄</th>
                 <th>操作</th>
             </tr>
             <c:if test="${!empty userList }">
                 <c:forEach items="${userList}" var="user">
                     <tr>
                         <td>${user.userName }</td>
                         <td>${user.age }</td>
                         <td><a href="<%=basePath%>user/getUser?id=${user.id}">编辑</a>
                             <a href="javascript:del('${user.id }')">删除</a></td>
                     </tr>
                 </c:forEach>
             </c:if>
         </tbody>
     </table>
 </body>
 </html>

创建editUser.jsp

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%
     String path = request.getContextPath();
     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
             + path + "/";
 %>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <base href="<%=basePath%>">
 <title>编辑用户</title>
 <script type="text/javascript">
     function updateUser(){
         var form = document.forms[0];
         form.action = "<%=basePath%>
     user/updateUser";
         form.method = "post";
         form.submit();
     }
 </script>

 </head>

 <body>
     <h1>添加用户</h1>
     <form action="" name="userForm">
         <input type="hidden" name="id" value="${user.id }" /> 姓名：<input
             type="text" name="userName" value="${user.userName }" /> 年龄：<input
             type="text" name="age" value="${user.age }" /> <input type="button"
             value="编辑" onclick="updateUser()" />
     </form>
 </body>

 </html>

创建addUser.jsp

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%
     // 获取请求的路径
     String path = request.getContextPath();
     // getScheme：协议 getServerName：主机名 getServerPort：端口号
     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
             + path + "/";
 %>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <base href="<%=basePath%>">
 <title>添加用户</title>
 <script type="text/javascript">
     function addUser(){
         var form = document.forms[0];
         form.action = "<%=basePath%>user/addUser";
         form.method = "post";
         form.submit();
     }
 </script>

 </head>

 <body>
     <h1>添加用户</h1>
     <form action="" name="userForm">
         姓名：<input type="text" name="userName"> 年龄：<input type="text"
             name="age"> <input type="button" value="添加"
             onclick="addUser()">
     </form>
 </body>
 </html>