spring mvc+Mybatis+bootstrap简单应用
苏波涛
实现一个spring mvc结合Mybatis的简单示例，前端的界面主要是JSP，包含了少量的js和jQuery等内容，css渲染则使用了bootstrap。当然，整体来说还是很简单的一个demo。
这个项目，主要是实现了对于数据库中User表的增删改查功能，放在界面也就是登录、注册、修改个人信息和删除用户。
关于spring MVC的内容，可以参照我的前几篇博客，主要都是简单的示例。关于mybatis，可以去看http://download.csdn.net/detail/tan1912224958/8535731 这个资料，里面讲解得非常详细，很适合初学者学习。
嗯，下面spring MVC和mybatis整合示例的各个部分。
PS：博主使用的环境为eclipse for Java web developers，创建的是Dynamic Web Project。使用的所有包参照链接：【http://download.csdn.net/detail/qq_28379809/9923026。】
可能少了一个SQL连接的jar包，如果运行失败的话，参照下面的免费下载链接：http://download.csdn.net/detail/orzma/4828533
一、配置文件，一共是四个，两个是spring mvc的，两个是Mybatis的，这里没有关联。
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">
<!-- 解决中文乱码问题 -->
<filter>
<filter-name>CharacterEncodingFilter</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>CharacterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app><?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns:beans="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" xmlns:p="http://www.springframework.org/schema/p"
xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd "
default-autowire="byName">
<mvc:annotation-driven />
<!-- ①：对web包中的所有类进行扫描，以完成Bean创建和自动依赖注入的功能 -->
<context:component-scan base-package="net.use" />
<!-- 这两个类用来启动基于Spring MVC的注解功能，将控制器与方法映射加入到容器中 -->
<beans:bean
class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />
<beans:bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
<!-- 这个类用于Spring MVC视图解析 -->
<beans:bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<beans:property name="prefix" value="/WEB-INF/pages/" />
<beans:property name="suffix" value=".jsp" />
</beans:bean>
</beans:beans>
User.xml，这个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">
<!-- <mapper namespace="com.yihaomen.mybatis.models.UserMapper"> -->
<mapper namespace="net.use.inter.IUserOperation">
<!--执行增加操作的SQL语句。id和parameterType分别与IUserOperation接口中的addUser方法的名字和参数类型一致。
以#{name}的形式引用Student参数的name属性，MyBatis将使用反射读取Student参数的此
属性。#{name}中name大小写敏感。引用其他 的gender等属性与此一致。seGeneratedKeys设置 为"true"表明
要MyBatis获取由数据库自动生成的主键；keyProperty="id"指定把获取到的主键值注入 到Student的id属性-->
<insert id="addUser" parameterType="User" useGeneratedKeys="true" keyProperty="id">
insert into user(name,age,address,pwd) values(#{name},#{age},#{address},#{pwd})
</insert>
<!-- 为了返回list 类型而定义的returnMap -->
<resultMap type="User" id="resultListUser">
<id column="id" property="id" />
<result column="name" property="name" />
<result column="age" property="age" />
<result column="address" property="address" />
<result column="pwd" property="pwd" />
</resultMap>
<!-- 多参数传入参照博客：http://www.cnblogs.com/mingyue1818/p/3714162.html -->
<select id="selectUsers" resultMap="resultListUser">
select * from user where name =#{arg0} and pwd =#{arg1}
</select>
<!-- delete user from the database -->
<delete id="deleteUser">
delete from user where name =#{arg0} and pwd =#{arg1}
</delete>
<!-- first find the id of the user,and then change it -->
<update id="updateUser" parameterType="User" >
update user set name=#{name},age=#{age},address=#{address},pwd=#{pwd} where id=#{id}
</update>
<select id="findUserByID" parameterType="int" resultType="User">
select * from `user` where id = #{id}
</select>
</mapper>
<?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="net.use.info.User"/>
</typeAliases>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC"/>
<dataSource type="POOLED">
<property name="driver" value="com.mysql.jdbc.Driver"/>
<property name="url" value="jdbc:mysql://127.0.0.1:3306/mybatis" />
<property name="username" value="root"/>
<property name="password" value="19961006"/>
</dataSource>
</environment>
</environments>
<mappers>
<mapper resource="net/use/mapper/User.xml"/>
</mappers>
</configuration>二、Java部分
UserController.java，spring MVC的控制器，也就是浏览器请求提交后的实际执行者，根据上面的配置文件，所有的浏览器请求都会被提交到这个Controller中，然后根据不同的URL由不同的方法执行。
其中，这些方法主要包含了两大类，一种是跳转界面的，也就是打开某个界面，第二种就是处理请求的，会调用mybatis的mapper里定义的方法来执行SQL操作，从数据库取出或更新某些内容。
package net.use.controller;
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 net.use.form.UserForm;
import net.use.info.User;
import net.use.mapper.SessionFactory;
@Controller
public class UserController {
@RequestMapping("")
public String index(Model model) {
return "login";//
}
@RequestMapping("toLogin")
public String toLo(Model model) {
return "login";//
}
@RequestMapping("toRegister")
public String toRe() {
return "register";
}
@RequestMapping("toUpdate")
public String toUp() {
return "update";
}
@RequestMapping("toDelete")
public String toDe() {
return "delete";
}
/*
@RequestMapping(value="/detail")
public String detail(@ModelAttribute("form") UserForm userForm,Model model) {
SessionFactory sessionFactory = new SessionFactory();
User user = sessionFactory.getUser(userForm.getName(),userForm.getPwd());
model.addAttribute("user",user);
return "detail";//
}
*/
@RequestMapping(value="/login")
public String toLogin(@ModelAttribute("form") UserForm userForm,Model model) {
System.out.println("function:toLogin;the original userForm:"+userForm.getName()+","+userForm.getPwd());
SessionFactory sessionFactory = new SessionFactory();
User user = sessionFactory.getUser(userForm.getName(),userForm.getPwd());
model.addAttribute("user",user);
return "detail";
}
@RequestMapping(value="/register")
public String save(@ModelAttribute("form") UserForm userForm, Model model) {
//model.addAttribute("user", user);
//System.out.println(user.getName()+","+user.getSex()+","+user.getPwd()+","+user.getAge());
//first,to convert the userform to the user
System.out.println("function:save;the original userForm:"+userForm.getName()+","+userForm.getPwd()+","+userForm.getAge()+","+
userForm.getAddress());
System.out.println("the type of the age:"+userForm.getAge().getClass());
SessionFactory sessionFactory = new SessionFactory();
User isUser=sessionFactory.getUser(userForm.getName(), userForm.getPwd());
if(isUser.getName() !=null) {
System.out.println("该用户名和密码对应的用户已经存在！");
}else {
User user = new User();
user.setName(userForm.getName());
user.setAge(userForm.getAge());
user.setAddress(userForm.getAddress());
user.setPwd(userForm.getPwd());
sessionFactory.addUser(user);
user=sessionFactory.getUser(user.getName(), user.getPwd());//now the new user has an id
model.addAttribute("user",user);
}
return "detail";//
}
@RequestMapping(value="/update")
public String update(@ModelAttribute("form") UserForm userForm, Model model) {
//首先有一个让用户输入id的页面，然后根据此id来确认要修改的用户，跟着，在update界面，将用户的修改后的信息提交
SessionFactory sessionFactory = new SessionFactory();
User oldUser = sessionFactory.findUserByID(Integer.parseInt(userForm.getId()));
System.out.println("the old user:"+oldUser.getId()+","+oldUser.getName()+","+oldUser.getPwd()+","+oldUser.getAge()+","+
oldUser.getAddress());
if( ! userForm.getId().equals(oldUser.getId()+"")) {
System.out.println("指定的用户id不存在，请重新输入");
}else {
User newUser = new User();
newUser.setName(userForm.getName());
int age=userForm.getAge();
System.out.println(age);
newUser.setAge(userForm.getAge());
newUser.setAddress(userForm.getAddress());
newUser.setPwd(userForm.getPwd());
newUser.setId(oldUser.getId());//old user and the new user should has the same id
sessionFactory.updateUser(newUser);
model.addAttribute("user", newUser);
}
return "detail";
}
@RequestMapping(value="/delete")
public String delete(@ModelAttribute("form") UserForm userForm, Model model) {
System.out.println("the original userForm to delete:"+userForm.getId()+","+userForm.getName());
SessionFactory sessionFactory = new SessionFactory();
User user = sessionFactory.findUserByID(Integer.parseInt(userForm.getId()));
sessionFactory.deleteUser(user.getName(), user.getPwd());
return "login";
}
}
UserForm.java
额，这个是User类的一个非常近似的类，因为博主对于数据绑定部分的内容还有些朦胧，所以采取了先将界面表单数据绑定到这个Form类，然后再手动地映射到user类。
package net.use.form;
public class UserForm {
private String name; // name
private String pwd; // pwd
private Integer age; // age
private String address;
private String id;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
}
User.java
本示例中唯一的data类，对应着浏览器表单和数据库User表。
package net.use.info;
import java.io.Serializable;
public class User implements Serializable {
/**
* @author zjn
*/
private static final long serialVersionUID = 1L;
private int id;
private String name; // name
private String pwd; // pwd
private int age; // age
private String address;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
//private Connection connection;//connection是对象
//全部实现了set和get方法�? 以此完成依赖注入（设值注入）
}
IUserOperation.java
mybatis的接口实现。其中定义了实际对于数据库的操作接口，至于具体的方法实现，是在User.xml配置文件中实现的（上面）。
package net.use.inter;
import java.util.List;
import net.use.info.User;
public interface IUserOperation {
//this interface is the interface connected with the User.xml configuration files, the method defined in this interface
//and implment in the User.xml
public void addUser(User user);
public List<User> selectUsers(String name,String pwd);
public void deleteUser(String name, String pwd);
public void updateUser(User user);
public User findUserByID(int id);
}
SessionFactory.java
这个类是对于数据库操作的再封装，因为不想让Controller类的方法每次都去重新初始化一个SQLSessionFactory，还要去分别执行那么多的操作，为了代码的简洁性，增加了这个类。
对于浏览器请求来说，它会先分发给Controller类，Controller类会根据URL调用不同的方法，而如果这个请求是要对数据库进行操作的，那么，该方法就会初始化一个SessionFactory对象，然后调用它的方法，得到自己想要的User 返回值/对数据库内容进行更新。
而对于SessionFactory来说，它会调用上面的IUserOperation接口中的方法，然后由User.xml中配置的具体方法去实现。
package net.use.mapper;
import java.io.IOException;
import java.io.Reader;
import java.util.List;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import net.use.info.User;
import net.use.inter.IUserOperation;
public class SessionFactory {
private static SqlSessionFactory sqlSessionFactory;
private static Reader reader;
static {
try {
reader = Resources.getResourceAsReader("Configuration.xml");
sqlSessionFactory = new SqlSessionFactoryBuilder().build(reader);
} catch (IOException e) {
e.printStackTrace();
}
}
public static SqlSessionFactory getSession() {
return sqlSessionFactory;
}
public User getUser(String name,String pwd){
SqlSession session = sqlSessionFactory.openSession();
User user = new User();
try {
//User user = (User) session.selectOne("com.yihaomen.mybatis.models.UserMapper.selectUserByID",1);
IUserOperation userOperation=session.getMapper(IUserOperation.class);
List<User> users = userOperation.selectUsers(name, pwd);
if(users.size()==0) {
System.out.println("用户不存在");
}else if(users.size()==1){
System.out.println("用户存在，信息如下："+users.get(0).getId()+","+users.get(0).getName()+","+users.get(0).getAge()+","
+users.get(0).getAddress()+","+users.get(0).getPwd());
user = users.get(0);
}else {
System.out.println("数据库出错！发现重复的用户信息！");
}
}finally {
session.close();
}
return user;
}
/**
* 测试增加,增加后，必须提交事务，否则不会写入到数据库.
*
*/
public void addUser(User user) {
SqlSession session = sqlSessionFactory.openSession();
try {
IUserOperation userOperation = session.getMapper(IUserOperation.class);
userOperation.addUser(user);
session.commit();
System.out.println("当前添加的用户的id为:"+user.getId());
}finally {
session.close();
}
}
public void deleteUser(String name,String pwd) {
SqlSession session = sqlSessionFactory.openSession();
try {
IUserOperation userOperation = session.getMapper(IUserOperation.class);
userOperation.deleteUser(name,pwd);
System.out.println("已从数据库删除该用户");
session.commit();
}finally {
session.close();
}
}
//update,first to get the user,then change,then commit
public void updateUser(User user) {
SqlSession session = sqlSessionFactory.openSession();
try {
IUserOperation userOperation = session.getMapper(IUserOperation.class);
userOperation.updateUser(user);
System.out.println("已从数据库更新该用户信息");
session.commit();
}finally {
session.close();
}
}
public User findUserByID(int id) {
SqlSession session = sqlSessionFactory.openSession();
try {
IUserOperation userOperation = session.getMapper(IUserOperation.class);
User user=userOperation.findUserByID(id);
System.out.println("用户存在，信息如下："+user.getId()+","+user.getName()+","+user.getAge()+","
+user.getAddress()+","+user.getPwd());
session.commit();
return user;
}finally {
session.close();
}
}
}
三、JSP界面
浏览器端界面，包括登录、注册、更新、删除四个基本的界面。其中主要是JSP界面，包含了少量的js方法。
login
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h2>Login</h2>
</div>
<div class="panel-body" style="padding-top: 40px;">
<form class="form-horizontal" role="form" method="POST" action="login">
<input type="hidden" name="_token" value="U6oWdxyOCmls99JDRAJ5HUpHphpMpVOmeNmrElz9">
<div class="form-group">
<label for="name" class="col-md-4 control-label">User name</label>
<div class="col-md-6">
<input id="username" type="text" class="form-control" name="name" value="" required autofocus>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" name="pwd" required >
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember Me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Login
</button>
<a class="btn btn-link" href="http://localhost:8080/Spring_Mybatis/toRegister">
Create new Account?
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
register
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Register</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- insert jquery validate -->
<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.js"></script>
<script>
function validateForm(){
var res = check_validate1(document.forms["reForm"]["age"]);
if(res==false){
alert("age must be a number!");
document.forms["reForm"]["age"].value="";
//$("#age").focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h2>Create New Account</h2>
</div>
<div class="panel-body">
<form id="reForm" class="form-horizontal" role="form" method="POST" action="register">
<input type="hidden" name="_token" value="QFe0UARw5ThQWOQTtEetutiShrDpBZbCQBd87ypf">
<div class="form-group">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="" required autofocus>
</div>
</div>
<div class="form-group">
<label for="age" class="col-md-4 control-label">Age</label>
<div class="col-md-6">
<input id="age" type="text" class="form-control" name="age" value="" required>
</div>
</div>
<div class="form-group">
<label for="address" class="col-md-4 control-label">Address</label>
<div class="col-md-6">
<input id="address" type="text" class="form-control" name="address" value="" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input id="pwd" type="password" class="form-control" name="pwd" required>
</div>
</div>
<div class="form-group">
<label for="password-confirm" class="col-md-4 control-label">Confirm Password</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
</div>
</div>
<div class="form-group">
<label for="password-confirm" class="col-md-4 control-label"></label>
<div class="col-md-6">
<div class="g-recaptcha" data-sitekey="6Lc--SkUAAAAAFpxJNUtEhde4ACQlQySrjtL4rO9"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<a href="http://localhost:8080/Spring_Mybatis/toLogin" class="btn btn-primary">
Cancel
</a>
<button type="submit" class="btn btn-primary">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>detail
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Detail</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- insert jquery -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- insert jquery validate -->
<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.js"></script>
<script>
function reFunction(){
var name=document.getElementById("name").value;
if(name==""){
alert("用户为空");
}else{
var form=document.getElementById("form");
form.submit();
alert("Update success!");
}
}
$(document).ready(function(){
if( (${user.id}) =="" ){
alert("用户名或密码错误，请重新输入！");
window.history.back(-1);
}
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">测试</a>
</div>
<div>
<!--向右对齐-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
${user.name}<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="http://localhost:8080/Spring_Mybatis/toLogin">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h2>User Info</h2>
</div>
<div class="panel-body">
<form id ="form" class="form-horizontal" role="form" method="POST" action="update">
<div class="form-group">
<label for="id" class="col-md-4 control-label">Id</label>
<div class="col-md-6">
<input id="id" type="text" class="form-control" name="id" disabled="true" value="" placeholder="${user.id}" required autofocus>
</div>
</div>
<div class="form-group">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" disabled="true" value="" placeholder="${user.name}" required autofocus>
</div>
</div>
<div class="form-group">
<label for="age" class="col-md-4 control-label">Age</label>
<div class="col-md-6">
<input id="age" type="text" class="form-control" name="age" value="" disabled="true" placeholder="${user.age}"required autofocus>
</div>
</div>
<div class="form-group">
<label for="address" class="col-md-4 control-label">Address</label>
<div class="col-md-6">
<input id="address" type="text" class="form-control" name="address" value="" disabled="true" placeholder="${user.address}" required>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<a href="http://localhost:8080/Spring_Mybatis/toUpdate?id=${user.id}&name=${user.name}" class="btn btn-primary">Update User</a>
<a href="http://localhost:8080/Spring_Mybatis/toDelete?id=${user.id}&name=${user.name}" class="btn btn-primary">Delete User</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Delete
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delete 测试</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
function GetQueryString(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)
return unescape(r[2]);
return null;
}
$(document).ready(function(){
//$("#sonpage_title").html(decodeURI(getQueryStringByName('name')));
$("#id").val(GetQueryString("id"));
$("#name").val(GetQueryString("name"));
$("#username").val(GetQueryString("name"));
//document.findElementById("username").innerHTML=GetQueryString("name");
});
function returnLast(){
window.history.go(-1);
}
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">测试</a>
</div>
<div>
<!--向右对齐-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a id="username" href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="http://localhost:8080/Spring_Mybatis/toLogin">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h2>Delete Your Account</h2>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="delete">
<input type="hidden" name="_token" value="QFe0UARw5ThQWOQTtEetutiShrDpBZbCQBd87ypf">
<div class="form-group">
<label for="id" class="col-md-4 control-label">Id</label>
<div class="col-md-6">
<input id="id" type="text" class="form-control" name="id" readonly="true">
</div>
</div>
<div class="form-group">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" readonly="true">
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="button" class="btn btn-primary" οnclick="returnLast()">
Cancel
</button>
<button type="submit" class="btn btn-primary">
Confirm to delete the user?
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>update
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Update</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
function GetQueryString(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)
return unescape(r[2]);
return null;
}
$(document).ready(function(){
$("#id").val(GetQueryString("id"));
$("#username").val(GetQueryString("name"));
});
function returnLast(){
window.history.back(-1);
}
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">测试</a>
</div>
<div>
<!--向右对齐-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a id="username" href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="http://localhost:8080/Spring_Mybatis/toLogin">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h2>Update Your Account</h2>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="update">
<input type="hidden" name="_token" value="QFe0UARw5ThQWOQTtEetutiShrDpBZbCQBd87ypf">
<div class="form-group">
<label for="id" class="col-md-4 control-label">Id</label>
<div class="col-md-6">
<input id="id" type="text" class="form-control" name="id" readonly="true">
</div>
</div>
<div class="form-group">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="" required autofocus>
</div>
</div>
<div class="form-group">
<label for="age" class="col-md-4 control-label">Age</label>
<div class="col-md-6">
<input id="age" type="text" class="form-control" name="age" value="" required autofocus>
</div>
</div>
<div class="form-group">
<label for="address" class="col-md-4 control-label">Address</label>
<div class="col-md-6">
<input id="address" type="text" class="form-control" name="address" value="" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input id="pwd" type="password" class="form-control" name="pwd" required>
</div>
</div>
<div class="form-group">
<label for="password-confirm" class="col-md-4 control-label">Confirm Password</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
</div>
</div>
<div class="form-group">
<label for="password-confirm" class="col-md-4 control-label"></label>
<div class="col-md-6">
<div class="g-recaptcha" data-sitekey="6Lc--SkUAAAAAFpxJNUtEhde4ACQlQySrjtL4rO9"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="button" class="btn btn-primary" οnclick="returnLast()">
Cancel
</button>
<button type="submit" class="btn btn-primary">
update
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>ok！
所有的代码已经齐全了。
类似资料：