欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JAVA中SSM框架的搭建实现CRUD的方法

程序员文章站 2023-12-13 19:48:40
最近在开发公司的一个系统,系统的框架是用ssm的框架搭建的,当然和这次写博客的不一样,它拥有很多的配置文件,企业级的开发所需要的配置文件是非常繁琐的,今天记录一下一个简单的...

最近在开发公司的一个系统,系统的框架是用ssm的框架搭建的,当然和这次写博客的不一样,它拥有很多的配置文件,企业级的开发所需要的配置文件是非常繁琐的,今天记录一下一个简单的ssm框架的搭建和实现一个crud的操作。

JAVA中SSM框架的搭建实现CRUD的方法

使用的是maven插件来配置我们需要的jar包,由于操作不多,所以并没有配置很多,要注意自己使用的jdk的版本,选择不同版本号的jdk

<project xmlns="http://maven.apache.org/pom/4.0.0" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance"
 xsi:schemalocation="http://maven.apache.org/pom/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
 <modelversion>4.0.0</modelversion>
 <groupid>com.lr</groupid>
 <artifactid>ssm</artifactid>
 <packaging>war</packaging>
 <version>0.0.1-snapshot</version>
 <name>ssm maven webapp</name>
 <url>http://maven.apache.org</url>
 <!-- 用来设置版本号 --> 
  <properties> 
    <srping.version>4.0.2.release</srping.version> 
    <mybatis.version>3.2.8</mybatis.version> 
    <slf4j.version>1.7.12</slf4j.version> 
    <log4j.version>1.2.17</log4j.version> 
  </properties> 
  <!-- 用到的jar包 --> 
  <dependencies> 
    <!-- 单元测试 --> 
    <dependency> 
      <groupid>junit</groupid> 
      <artifactid>junit</artifactid> 
      <version>4.11</version> 
      <!-- 表示开发的时候引入,发布的时候不会加载此包 --> 
      <scope>test</scope> 
    </dependency> 
    <!-- java ee包 --> 
    <dependency> 
      <groupid>javax</groupid> 
      <artifactid>javaee-api</artifactid> 
      <version>7.0</version> 
    </dependency> 
    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
    <dependency>
      <groupid>com.fasterxml.jackson.core</groupid>
      <artifactid>jackson-databind</artifactid>
      <version>2.8.8</version>
    </dependency>
    
    <!-- spring框架包 start --> 
    <dependency> 
      <groupid>org.springframework</groupid> 
      <artifactid>spring-test</artifactid> 
      <version>${srping.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.springframework</groupid> 
      <artifactid>spring-core</artifactid> 
      <version>${srping.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.springframework</groupid> 
      <artifactid>spring-oxm</artifactid> 
      <version>${srping.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.springframework</groupid> 
      <artifactid>spring-tx</artifactid> 
      <version>${srping.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.springframework</groupid> 
      <artifactid>spring-jdbc</artifactid> 
      <version>${srping.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.springframework</groupid> 
      <artifactid>spring-aop</artifactid> 
      <version>${srping.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.springframework</groupid> 
      <artifactid>spring-context</artifactid> 
      <version>${srping.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.springframework</groupid> 
      <artifactid>spring-context-support</artifactid> 
      <version>${srping.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.springframework</groupid> 
      <artifactid>spring-expression</artifactid> 
      <version>${srping.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.springframework</groupid> 
      <artifactid>spring-orm</artifactid> 
      <version>${srping.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.springframework</groupid> 
      <artifactid>spring-web</artifactid> 
      <version>${srping.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.springframework</groupid> 
      <artifactid>spring-webmvc</artifactid> 
      <version>${srping.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.springframework</groupid> 
      <artifactid>spring-aspects</artifactid> 
      <version>${srping.version}</version> 
    </dependency> 
    <!-- spring框架包 end --> 
    <!-- mybatis框架包 start --> 
    <dependency> 
      <groupid>org.mybatis</groupid> 
      <artifactid>mybatis</artifactid> 
      <version>${mybatis.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.mybatis</groupid> 
      <artifactid>mybatis-spring</artifactid> 
      <version>1.2.2</version> 
    </dependency> 
    <!-- mybatis框架包 end --> 
    <!-- 数据库驱动 --> 
    <dependency> 
      <groupid>mysql</groupid> 
      <artifactid>mysql-connector-java</artifactid> 
      <version>5.1.35</version> 
    </dependency> 
    <!-- 导入dbcp的jar包,用来在applicationcontext.xml中配置数据库 --> 
    <dependency> 
      <groupid>commons-dbcp</groupid> 
      <artifactid>commons-dbcp</artifactid> 
      <version>1.4</version> 
    </dependency> 
    <!-- jstl标签类 --> 
    <dependency> 
      <groupid>jstl</groupid> 
      <artifactid>jstl</artifactid> 
      <version>1.2</version> 
    </dependency> 
    <dependency> 
      <groupid>taglibs</groupid> 
      <artifactid>standard</artifactid> 
      <version>1.1.2</version> 
    </dependency> 
    <!-- log start --> 
    <dependency> 
      <groupid>log4j</groupid> 
      <artifactid>log4j</artifactid> 
      <version>${log4j.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.slf4j</groupid> 
      <artifactid>slf4j-api</artifactid> 
      <version>${slf4j.version}</version> 
    </dependency> 
    <dependency> 
      <groupid>org.slf4j</groupid> 
      <artifactid>slf4j-log4j12</artifactid> 
      <version>${slf4j.version}</version> 
    </dependency> 
    <!-- log end --> 
    <!-- json --> 
    <!-- 格式化对象,方便输出日志 --> 
    <dependency> 
      <groupid>com.alibaba</groupid> 
      <artifactid>fastjson</artifactid> 
      <version>1.2.6</version> 
    </dependency> 
    <dependency> 
      <groupid>org.codehaus.jackson</groupid> 
      <artifactid>jackson-mapper-asl</artifactid> 
      <version>1.9.13</version> 
    </dependency> 
    <!-- 上传组件包 start --> 
    <dependency> 
      <groupid>commons-fileupload</groupid> 
      <artifactid>commons-fileupload</artifactid> 
      <version>1.3.1</version> 
    </dependency> 
    <dependency> 
      <groupid>commons-io</groupid> 
      <artifactid>commons-io</artifactid> 
      <version>2.4</version> 
    </dependency> 
    <dependency> 
      <groupid>commons-codec</groupid> 
      <artifactid>commons-codec</artifactid> 
      <version>1.10</version> 
    </dependency> 
    <!-- 上传组件包 end --> 
 
    <!-- al相关添加 --> 
    <dependency> 
      <groupid>net.sourceforge.jexcelapi</groupid> 
      <artifactid>jxl</artifactid> 
      <version>2.6</version> 
    </dependency> 
    <dependency> 
      <groupid>org.apache.poi</groupid> 
      <artifactid>poi</artifactid> 
      <version>3.8</version> 
    </dependency> 
    <dependency> 
      <groupid>org.apache.poi</groupid> 
      <artifactid>poi-ooxml</artifactid> 
      <version>3.9</version> 
    </dependency> 
    <!-- al相关添加 --> 
  </dependencies> 
 
   <build> 
    <finalname>maven_project</finalname> 
    <plugins> 
      <plugin> 
        <groupid>org.apache.maven.plugins</groupid> 
        <artifactid>maven-compiler-plugin</artifactid> 
        <version>2.3.2</version> 
        <configuration> 
          <source>1.7</source> 
          <target>1.7</target> 
        </configuration> 
      </plugin> 
    </plugins> 
  </build>  
</project>

然后配置数据库的连接,改成自己的数据库就行了

driver=com.mysql.jdbc.driver
url=jdbc\:mysql\://locahost\:3306/db
username=root
password=root
maxactive=20
maxidle=20
minidle=1
maxwait=60000

配置文件spring-dao.xml,spring会自动查找其下的类

<?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:mvc="http://www.springframework.org/schema/mvc" 
  xsi:schemalocation="http://www.springframework.org/schema/beans  
            http://www.springframework.org/schema/beans/spring-beans-3.1.xsd  
            http://www.springframework.org/schema/context  
            http://www.springframework.org/schema/context/spring-context-3.1.xsd  
            http://www.springframework.org/schema/mvc  
            http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd"> 
             
             
  <!-- dao接口所在包名,spring会自动查找其下的类 --> 
  <bean class="org.mybatis.spring.mapper.mapperscannerconfigurer"> 
    <!--basepackage指定要扫描的包,在此包之下的映射器都会被搜索到。 
     可指定多个包,包与包之间用逗号或分号分隔--> 
    <property name="basepackage" value="com.lr.dao" /> 
    <property name="sqlsessionfactory" ref="sqlsessionfactory"></property> 
  </bean>             
             
</beans>

配置文件spring和mybatis的整合文件

<?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:mvc="http://www.springframework.org/schema/mvc" 
  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/mvc  
            http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd"> 
 
  <!-- 引入配置文件 --> 
<context:property-placeholder location="classpath:/jdbc.properties" />
  <bean id="datasource" class="org.apache.commons.dbcp.basicdatasource" destroy-method="close"> 
    <property name="driverclassname" value="com.mysql.jdbc.driver" />
    <property name="url" value="jdbc:mysql://localhost:3306/db?useunicode=true&characterencoding=utf8" />
    <property name="username" value="root" />
    <property name="password" value="root" />
    <!-- 初始化连接大小 -->
    <property name="initialsize" value="3" /> 
    <!-- 连接池最大数量 -->
    <property name="maxactive" value="20" />
    <!-- 连接池最大空闲 -->
    <property name="maxidle" value="20" />
    <!-- 连接池最小空闲 --> 
    <property name="minidle" value="1" />
    <!-- 获取连接最大等待时间 --> 
    <property name="maxwait" value="60000" />
  </bean> 
 
  <!-- spring和mybatis完美整合,不需要mybatis的配置映射文件 --> 
  <bean id="sqlsessionfactory" class="org.mybatis.spring.sqlsessionfactorybean"> 
    <property name="datasource" ref="datasource" /> 
    <!-- 自动扫描mapping.xml文件 --> 
    <property name="mapperlocations" value="classpath:com/lr/mapper/*.xml"></property> 
  </bean> 
   
</beans>

配置事物的文件

<?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:tx="http://www.springframework.org/schema/tx" 
  xmlns:mvc="http://www.springframework.org/schema/mvc" 
  xsi:schemalocation="http://www.springframework.org/schema/beans  
            http://www.springframework.org/schema/beans/spring-beans-3.1.xsd  
            http://www.springframework.org/schema/context  
            http://www.springframework.org/schema/context/spring-context-3.1.xsd  
            http://www.springframework.org/schema/aop  
            http://www.springframework.org/schema/aop/spring-aop-3.1.xsd 
            http://www.springframework.org/schema/tx 
            http://www.springframework.org/schema/tx/spring-tx-3.1.xsd"> 
 
  <!-- (事务管理)transaction manager, use jtatransactionmanager for global tx --> 
  <bean id="transactionmanager" 
    class="org.springframework.jdbc.datasource.datasourcetransactionmanager"> 
    <property name="datasource" ref="datasource" /> 
  </bean> 
   
   <!-- 配置参与事务的类 --> 
   <aop:config> 
     <aop:pointcut id="allservicemethod" expression="execution(* com.lr.service.*.*(..))"/> 
     <aop:advisor pointcut-ref="allservicemethod" advice-ref="txadvice" /> 
   </aop:config> 
   
  <!-- 使用声明方式配置事务 --> 
  <tx:advice id="txadvice" transaction-manager="transactionmanager"> 
     <tx:attributes> 
        <tx:method name="*" propagation="required" rollback-for="java.lang.exception"/> 
     </tx:attributes> 
  </tx:advice> 
   
</beans>

配置springmvc.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:mvc="http://www.springframework.org/schema/mvc" 
  xsi:schemalocation="http://www.springframework.org/schema/beans  
            http://www.springframework.org/schema/beans/spring-beans-3.1.xsd  
            http://www.springframework.org/schema/context  
            http://www.springframework.org/schema/context/spring-context-3.1.xsd  
            http://www.springframework.org/schema/mvc  
            http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd"> 
   
  <!-- 自动扫描 --> 
  <context:component-scan base-package="com.lr.controller" /> 
   
  <mvc:annotation-driven /> 
  
  <mvc:default-servlet-handler/>
  
  <!-- 定义跳转的文件的前后缀 ,视图模式配置--> 
  <bean class="org.springframework.web.servlet.view.internalresourceviewresolver"> 
    
    <property name="prefix" value="/web-inf/jsp/" /> 
    <property name="suffix" value=".jsp" /> 
  </bean>

好了!!!需要配置的文件已经配置完成了,足够我们进行一波操作了

接下来是后台的一些代码,这里主要是实体类,dao层,service层,controller层,我把后台的文件一起上传了,mapper.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.lr.dao.iuserdao">
  <resultmap id="baseresultmap" type="com.lr.dto.user">
    <result column="id" property="id" jdbctype="integer" /> 
    <result column="name" property="name" jdbctype="varchar" /> 
    <result column="password" property="password" jdbctype="varchar" /> 
    <result column="age" property="age" jdbctype="integer" /> 
  </resultmap>
  
  <sql id="base_column_list"> 
    id, name, password, age 
  </sql> 
  
  
   <!--  增加用户 -->
   <insert id="adduser" parametertype="com.lr.dto.user">
    insert into user(name,password,age) values(#{name},#{password},#{age})
  </insert>
  
   <!-- 查询用户--> 
  <select id="querybyprimarykey" resultmap="baseresultmap" 
    parametertype="java.lang.integer"> 
    select 
    <include refid="base_column_list" /> 
    from user 
    where id = #{id} 
  </select> 
  
  
   <!-- 删除用户 --> 
  <delete id="deletebyprimarykey" parametertype="java.lang.integer"> 
    delete from user 
    where id = #{id}  
  </delete> 
  
  
  <!-- 更新用户 --> 
  <update id="updatebyprimarykey" parametertype="com.lr.dto.user" >  
    update user set name=#{name},password=#{password},age=#{age} where id=#{id}
  </update> 
  
  <select id="findalluser" resulttype="com.lr.dto.user">
    select * from user
  </select>
  
</mapper>
package com.lr.dao;

import java.util.list;

import com.lr.dto.user;

public interface iuserdao {
   //查询用户 
  public user querybyprimarykey(int id); 
   //删除用户 
  public int deletebyprimarykey(int id); 
  //更新用户
  public int updatebyprimarykey(user user);
  //添加用户
  public int adduser(user user);
  //查询所有用户
  public list<user> findalluser();
}
package com.lr.service;

import java.util.list;

import com.lr.dto.user;

public interface iuserservice {
  //查询用户 
   public user getuserbyid(int userid);
   //删除
   public void deleteuser(int id);
   //更新用户
   public void updateuser(user user);
  //添加用户
   public void adduser(user user);
   //查看所有用户
   public list<user> findalluser();
}
package com.lr.service.impl;

import java.util.list;

import javax.annotation.resource;

import org.springframework.stereotype.service;

import com.lr.dao.iuserdao;
import com.lr.dto.user;
import com.lr.service.iuserservice;
@service("userservice")
public class userserviceimpl implements iuserservice{
  @resource
  private iuserdao userdao;
  
  public iuserdao getuserdao() {
    return userdao;
  }
  public void setuserdao(iuserdao userdao) {
    this.userdao = userdao;
  }
  //查询用户
  @override
  public user getuserbyid(int userid) {
    
    return userdao.querybyprimarykey(userid);
  }
  //更新用户
  @override
  public void updateuser(user user) {
    userdao.updatebyprimarykey(user);
    
  }
  //删除用户
  @override
  public void deleteuser(int id) {
    
    userdao.deletebyprimarykey(id);
  }
  
  //添加用户
  @override
  public void adduser(user user) {
    
    userdao.adduser(user);
  }
  
  //查询所有用户
  @override
  public list<user> findalluser() {
    
    return userdao.findalluser();
  }
}
package com.lr.controller;

import java.util.list;

import javax.servlet.http.httpservletrequest;

import org.springframework.beans.factory.annotation.autowired;
import org.springframework.stereotype.controller;
import org.springframework.ui.model;
import org.springframework.web.bind.annotation.requestmapping;
import org.springframework.web.bind.annotation.responsebody;

import com.lr.dto.user;
import com.lr.service.iuserservice;

@controller
public class usercontroller {
  @autowired
  private iuserservice userservice;
  
  public iuserservice getuserservice() {
    return userservice;
  }
  public void setuserservice(iuserservice userservice) {
    this.userservice = userservice;
  } 
  
  //主页面
  @requestmapping("/")
  public string usermgr() {
    return "showuser";
  }
  
  //添加用户
  @requestmapping("/adduser")
  @responsebody
  public void useradd(user user) {
    userservice.adduser(user);
  }
  
  //删除用户
  @requestmapping("/deleteuser")
  @responsebody
  public void deleteuser(int id){
    userservice.deleteuser(id);
  }
  
  //修改用户
  @requestmapping("/updateuser")
  @responsebody
  public void upadteuser(user user){
    
    userservice.updateuser(user);
    
  }
  //根据id查找用户
  @requestmapping("/showuser") 
  @responsebody
  public user showuser(int id,model model){ 
     return userservice.getuserbyid(id);     
  }
  
  //查询所有用户
  @requestmapping("/findalluser")
  @responsebody
  public list<user> findalluser(){
    return userservice.findalluser();
  }
}
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>

<!doctype html>
<html>
 <head>  
  <meta charset="utf-8"><script type="text/javascript" src="<%= application.getcontextpath() %>/js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">
  
  
  
  //添加用户
    $(function(){
      $("#add").on("click", addnewuser);    
    })
    function addnewuser(){
      var name = $.trim($("#txtname").val());
      var password = $.trim($("#txtpassword").val());
      var age = $.trim($("#txtage").val());
      
      $.post("/ssm/adduser", {"name": name, "password": password, "age": age}, function(){
        alert("添加成功!")
      });
    }
    
    
    
  //删除用户
    $(function(){
      $("#delete").on("click",deleteuser);
    })
    function deleteuser(){
      var id=$.trim($("#deleteid").val());
      $.get("/ssm/deleteuser",{"id":id},function(){
        alert("删除成功!")
      });
    }
    
    
  //查询所有用户
    $(function(){
      $("#findalluser").click(function(){
        $.ajax({
          type:"post",
          datatype:"json",
          url:"/ssm/findalluser",
          success:function(msg){
            var str="";
            for(i in msg){
              str+="<tr><th>"+msg[i].id+"</th><th>"+msg[i].name+"</th><th>"
              +msg[i].password+"</th><th>"+msg[i].age+"</th><tr>"
            }
            $("#findall").append(str);
          }
        });
      });
    });
    
    
    //根据id查找一个用户
    
    $(function(){
      $("#find").click(function(){
        $.ajax({
          type:"post",
          data:{id:$("#findid").val()},
          datatype:"json",
          url:"/ssm/showuser",
          success:function(user){
            var str="";
              str+="<tr><th>"+user.id+"</th><th>"+user.name+"</th><th>"
              +user.password+"</th><th>"+user.age+"</th><tr>"
            $("#finduserbyid").append(str);
          }
          
        })
      })
    })
    
    
    //根据id修改用户信息
    $(function(){
      $("#update").on("click",updateuser);
    })
    function updateuser(){
       alert($.trim($("#updateid").val()))
      alert($.trim($("#updatename").val()))
      alert($.trim($("#updatepassword").val()))
      alert($.trim($("#updateage").val())) 
    
      var id=$.trim($("#updateid").val());
      var name=$.trim($("#updatename").val());
      var password=$.trim($("#updatepassword").val());
      var age=$.trim($("#updateage").val());
      $.post("/ssm/updateuser",{"id":id,"name":name,"password":password,"age":age},function(){
        alert("修改成功!")
      });
    }
  </script>
  
  
 <title>用户管理</title>  
 </head>
 <body>
  <div>
    <p>姓名:<input type="text" id="txtname"></p>
    <p>密码:<input type="password" id="txtpassword"></p>
    <p>年龄:<input type="text" id="txtage"></p>
    <p><button id="add">添加</button></p>
  </div>
  <hr style="height:1px;border:none;border-top:1px dashed #0066cc;" />
  
  <div>
    <p>输入用户id:<input type="text" id="deleteid"></p>
    <p><button id="delete">删除</button></p>
  </div>
  
  <hr style="height:1px;border:none;border-top:1px dashed #0066cc;" />
  
  <div><p><button id="findalluser">查询所有</button></p></div>
  <div>
    <table width="300" border="1" >
      <thead id="findall">
        <tr>
          <th width="50">id</th>
          <th width="50">姓名</th>
          <th width="50">密码</th>
          <th width="50">年龄</th>
        </tr>
      </thead>
    </table>
  </div>
  <hr style="height:1px;border:none;border-top:1px dashed #0066cc;" />
  
  <div>
    <p>输入用户id:<input type="text" id="findid"></p>
    <p><button id="find">查询</button></p>
  </div>
   <div>
    <table width="300" border="1" >
      <thead id="finduserbyid">
        <tr>
          <th width="50">id</th>
          <th width="50">姓名</th>
          <th width="50">密码</th>
          <th width="50">年龄</th>
        </tr>
      </thead>
    </table>
  </div>
  <hr style="height:1px;border:none;border-top:1px dashed #0066cc;" />
  <div>
    <p>输入用户id:<input type="text" id="updateid"></p>
    <p>输入用户姓名:<input type="text" id="updatename"></p>
    <p>输入密码:<input type="password" id="updatepassword"></p>
    <p>输入用户年龄:<input type="password" id="updateage"></p>
    <p><button id="update">修改</button></p>
  </div>
 </body>
</html>

上一篇:

下一篇: