The overall process of adding, deleting, modifying and querying function items realized by super detailed SSM framework

Tips ： This project is for learning purposes only , Not sold as a commodity , A certain method or word in the text may be mistakenly written , But this article focuses on the idea , As the study notes of the blogger , Resources can be chatted privately with bloggers

---

Preface

Tips ： Here you can add the general content to be recorded in this article ：
Spring+SpringMVC+MyBatis（SSM）

SSM Framework code writing process
1、 Draw page , To write A.jsp
2、 Write the customer request address , Initiate customer request , To write B.jsp
3、 Write control layer code (xxxController.java)
4、 Write business layer code （xxxService.java)
5、 Write data persistence layer code （xxxDao.java and xxxDao.xml)

---

Tips ： This item takes adding, deleting, modifying and querying users as an example , The following cases can be used for reference

Run a screenshot ：

The original page ：

Full page ：

Project package directory ：（ The red part is the following ）

Attribute of user table in database

One 、 User data viewing function

To write A.jsp

First, in the tree.jsp【A.jsp】 Add a hyperlink named ：userlist0823.jsp treat as 【B.jsp】

<li>
	<a href="${pageContext.request.contextPath }/user/userlist0823.action">
		<i class="fa fa-user fa-fw" ></i>  User management : Zhang San 0823
	</a>
</li>

After operation ：

Current user management ： Zhang San 0823（userlist0823.jsp ） The is blank in , As shown in the figure below ：

To write B.jsp

In this page, we change to the following code

<%@include file="/WEB-INF/header.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<div id= "page-wrapper">
<!--  Write something in the middle  -->
</div>

<%@include file="/WEB-INF/footer.jsp"%>

Write control layer code (xxxController.java)

//@RequestMapping annotation ： Request mapping 
				// The address in parentheses , source ： Just now, A.jsp Written in userlist0823.jsp The address of the page 
@RequestMapping(value = "/user/userlist0823.action") 
	public String userlist() {
                 //  Add users 
		
		return "user_list0823";
	}

Continue to write B.jsp page

go back to B On the page , Join in Bootstrap Border table layout

<!-- Use bootstrap  -->
<div id="page-wrapper">
	<table class="table table-bordered">
		<caption> Border table layout </caption>
		<thead>
			<tr>
				<th> user name </th>
				<th> password </th>
				<th> Gender </th>
				<th> Age </th>
				<th> operation </th>
			</tr>
		</thead>

		<tbody>
				<tr>
					<td>Tanmay</td>
					<td>Bangalore</td>
					<td>560001</td>
					<td>Bangalore</td>
					<td>								// Add modification 、 Remove buttons masquerading as hyperlinks 
						<a href="#” class="btn btn-primary btn-xs" role="button"> modify </a>
						<a href="#” class="btn btn-primary btn-xs" role="button"> Delete </a>
					</td>	
				</tr>
		</tbody>
	</table>
</div>

Next, in the control layer class (UserController.java) Calling business layer classes in (UserService.java) The method in

Continue writing control layer UserController.java

	@RequestMapping(value = "/user/userlist0823.action")
	public String userlist() {
    
		List userlist = userService.getUserlist0823();
		return "user_list0823";
	}

Write business layer code (xxxService.java)

The automatic generation type is List Methods ：getUserList0823
In the corresponding implementation class UserServiceImpl.java Add unimplemented methods to
Database connection is required in the business layer
Next, you need to create classes in the business layer (UserService.java) Call the data layer class (UserDao.java) The method in

@Override
public List getUserList0823() {
    
	List userlist = userDao.getUsers0823();
	return userlist;
}

Write data persistence layer code (xxxDao.java and xxxDao.xml)

stay UserDao.java Add getUsers0823 Method
stay UserDao.xml The mapping file is to execute SQL sentence

<!-- 
resultType yes sql Encapsulation type of statement query result set , Is a user's user type  
 That is to say, put sql The results of the query are encapsulated in bean Go back inside , It's for storing data .
-->
<select id="getUsers0823" resultType="user">
	select * from t_user
</select>

B.jsp The page display

The next process should be in B.jsp Show the data in
Go back to the control layer UserController.java

@RequestMapping(value = "/user/userlist0823.action")
                        //Model: Parameters  m: Parameter name 
public String userlist0823(Model m) {
    
	List userlist = userService.getUserList0823();
	System.out.println(userlist.size());
	m.addAttribute("users", userlist);
	return "user_list0823";
}

stay B.jsp That is to say user_list0823.jsp Add forEach loop

<%@include file="/WEB-INF/header.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!-- Use bootstrap  -->
<div id="page-wrapper">
	<table class="table table-bordered">
		<caption> Border table layout </caption>
		<thead>
			<tr>
				<th> user name </th>
				<th> password </th>
				<th> Gender </th>
				<th> Age </th>
				<th> operation </th>
			</tr>
		</thead>

		<tbody>
			<c:forEach items="${users}" var="u">
				<tr>
					<td>${
    u.user_name}</td>
					<td>${
    u.user_pass}</td>
					<td>${
    u.user_sex}</td>
					<td>${
    u.user_age}</td>
					<td>
						<a href="#" class="btn btn-primary btn-xs" role="button"> modify </a>
						<a href="#" class="btn btn-primary btn-xs" role="button"> Delete </a>
					</td>	
				</tr>
			</c:forEach>
		</tbody>
	</table>
</div>
<%@include file="/WEB-INF/footer.jsp"%>

Run a screenshot

Two 、 User deletion function

When deleting, we need to know which data is being deleted
So when deleting, it needs to be based on a dynamic change ID Value to delete the corresponding data

Click Delete to delete the corresponding ID Number to the corresponding SQL During the execution of the statement , This statement can be deleted correspondingly , Here to id=8 For example
He Deletes one at a time ID The number is 8 Users of

DELETE from t_user where user_id=8

To write B.jsp page

【user_list0823.jsp】 Delete the hyperlink write request of the button

// Request address and tree.jsp The request address in is the same 
<a href="${pageContext.request.contextPath }/user/deluser0823.action?userid=${u.user_id}"   // According to the user id Inquire about 
class="btn btn-default btn-xs" role="button"> Delete </a>

Write control layer code (xxxController.java)

//  Delete user 
@RequestMapping(value = "/user/deluser0823.action")
	public String deluser0823(String userid) {
     
		System.out.println(userid);
		int i = userService.delUserlist0823(userid);
		return "user_list0823";
	}

But in UserController.java There is no delUserlist0823 This method , So put the mouse in the red position to create it

Write business layer code (xxxService.java)

Create later to UserService.java , Automatically added a piece of code
Then in the corresponding implementation class UserServiceImpl.java Add unimplemented methods to

@Override
	public int delUserlist0823(String userid) {
    
		int i=userDao.delUserlist0823(userid);
		return i;
	}

Now there is no fourth line delUserlist0823 This method
Put the mouse over and continue to click create
Let him be in UserDao.java Continue to create this method

Write data persistence layer code (xxxDao.java and xxxDao.xml)

After this method is created , Let him through the execution of this method , Trigger Dao The corresponding mapping file in the layer
Now it can be based on userid Parameter changes , You can dynamically delete different users who click

<delete id="delUserlist0823">
	delete
	from t_user
	where user_id=#{userid}
</delete>

Continue writing control layer code (xxxController.java)

Because the result of our execution is UserService.java 【delUserlist0823(userid)】 Called in , He will assign the deletion result to i , And then put i Back up to his caller UserController

//  Delete user 
@RequestMapping(value = "/user/deluser0823.action")
	public String deluser0823(String userid, Model m) {
     
		int i = userService.delUserlist0823(userid);
		System.out.println(i);
		return "redirect:/user/userlist0823.action";
	}

Now the deletion operation is over
But now there's another problem ： Can be deleted by mistake , It does not meet the requirements of system security

Continue to write B.jsp

Add a... To the button onclick Trigger time

onclick="javascript:return confirm(' Are you sure you want to delete this user ?')"

<a href="${pageContext.request.contextPath }/user/deluser0823.action?userid=${u.user_id}"
onclick="javascript:return confirm(' Are you sure you want to delete this user ?')"
class="btn btn-default btn-xs" role="button"> Delete </a>

Run a screenshot

3、 ... and 、 New user functions

stay user_list0823.jsp Add a new button in , Put it in … Location
This button is a hyperlink

<a href="#" class="btn btn-primary btn-xs" role="button"> New users </a>

To write B.jsp

【user_list0823.jsp】 in , Add a modal box in a separate location
Then draw some forms in the middle , Put the user name 、 password 、 Age and so on

<form action="${pageContext.request.contextPath }/user/adduser0823.action"
	class="form-horizontal" role="form">
	<!--  Modal frame （Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel"> New users </h4>
				</div>
				<div class="modal-body">

					<div class="form-group">
						<label for="firstname" class="col-sm-2 control-label"> user name </label>
						<div class="col-sm-10">
						//SSM Within the framework of , Text box in page form name Value , Usually associated with operational data tables 【t_user】 The corresponding entity class 【User】 The property name 【user_name、user_pass、user_age And so on 】 bring into correspondence with .
							<input type="text" class="form-control" id="firstname"
								name="user_name" placeholder=" Please enter the user name ">
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label"> password </label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="user_pass"
								name="user_pass" placeholder=" password ">
						</div>
					</div>

					<div class="form-group">
						<label for="firstname" class="col-sm-2 control-label"> Age </label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="user_age"
								name="user_age" placeholder=" Age ">
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label"> Sex </label>
						<div class="col-sm-10">
							<label class="radio-inline"> <input type="radio"
								name="user_sex" id="optionsRadios3" value="1" checked>  male 
							</label> <label class="radio-inline"> <input type="radio"
								name="user_sex" id="optionsRadios4" value="0">  Woman 
							</label>
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label"> mailbox </label>
						<div class="col-sm-10">
							<input type="text" name="user_email" class="form-control"
								id="lastname" placeholder=" mailbox ">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal"> close </button>			//from Submission of forms , The type of submit button is submit【type="submit"】
					// Execute after the commit operation form Form action Property request 
					<button type="submit" class="btn btn-primary"> Submit </button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</form>

There is still a missing button to trigger , The previously added buttons were masqueraded with hyperlinks
So we add a button to trigger the modal box , Replace the hyperlink button

<!--  Button trigger mode box  -->
<button 
	class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal"> New users 
</button>

Write control layer code (xxxController.java)

@RequestMapping(value = "/user/adduser0823.action")
	public String adduser0823(User user) {
             //  Add users 
	
		System.out.println(user.toString());
		return "user_list0823";
	}

At this point click 【 New users 】 Button to add , The data will be displayed on the console ,
It indicates that the control layer has obtained the data
Make a statement int Variable of type i , And then call adduserlist0823 Such a method

@RequestMapping(value = "/user/adduser0823.action")
	public String adduser0823(User user) {
             //  Add users 
		int i = userService.addUserlist0823(user);
		System.out.println(user.toString());
		return "user_list0823";
	}

Write business layer code (xxxService.java)

stay UserService.java Created in adduserlist0823 Such a method
Then in the implementation class UserServiceImpl.java This method is also automatically added to the ：

@Override
public int addUserlist0823(User user) {
    
	int i = userDao.inserUserlist0823(user);
	return i;
}

Write data persistence layer code (xxxDao.java and xxxDao.xml)

The next in UserDao Interface to create such a method
And then in UserDao.xml Add... To the document SQL sentence

<insert id="inserUserlist0823" parameterType="user">
	insert into
	t_user(user_name,user_pass,user_age,user_sex,user_email,user_rank)
	value(#{user_name},#{user_pass},#{user_age},#{user_sex},#{user_email},1)
</insert>

If I want to see if the plug is successful , I want to print out the list , You can also use redirection , Let the request to view the data of the list be executed again , Make a redirect
stay (UserController.java) in

@RequestMapping(value = "/user/adduser0823.action")
	public String adduser0823(User user) {
                 //  Add users 
		int i = userService.addUserlist0823(user);
		System.out.println(user.toString());
		return "redirect:/user/userlist0823.action";
	}

Run a screenshot

Four 、 User modification function

To write B.jsp

First of all, we need to jsp In the page, write a from Forms , You can copy a form with new functions
To distinguish it from the new modal box , Change the new user to the modified user , id=“myModal” Change it to id=“editModal” ,adduser0823 Also changed to ：edituser0823

<!--  according to id Modify the user information mode box （Modal） -->
	```java
<form action="${pageContext.request.contextPath }/user/edituser0823.action"
	class="form-horizontal" role="form">
	<!--  Modal frame （Modal） -->
	<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel"> Modify the user </h4>
				</div>
				<div class="modal-body">

					<div class="form-group">
						<label for="firstname" class="col-sm-2 control-label"> user name </label>
						<div class="col-sm-10">
						//SSM Within the framework of , Text box in page form name Value , Usually associated with operational data tables 【t_user】 The corresponding entity class 【User】 The property name 【user_name、user_pass、user_age And so on 】 bring into correspondence with .
							<input type="text" class="form-control" id="firstname"
								name="user_name" placeholder=" Please enter the user name ">
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label"> password </label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="user_pass"
								name="user_pass" placeholder=" password ">
						</div>
					</div>

					<div class="form-group">
						<label for="firstname" class="col-sm-2 control-label"> Age </label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="user_age"
								name="user_age" placeholder=" Age ">
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label"> Sex </label>
						<div class="col-sm-10">
							<label class="radio-inline"> <input type="radio"
								name="user_sex" id="optionsRadios3" value="1" checked>  male 
							</label> <label class="radio-inline"> <input type="radio"
								name="user_sex" id="optionsRadios4" value="0">  Woman 
							</label>
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label"> mailbox </label>
						<div class="col-sm-10">
							<input type="text" name="user_email" class="form-control"
								id="lastname" placeholder=" mailbox ">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal"> close </button>			//from Submission of forms , The type of submit button is submit【type="submit"】
					// Execute after the commit operation form Form action Property request 
					<button type="submit" class="btn btn-primary"> Submit </button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</form>

Click button ：

<a href="#" class="btn btn-primary btn-xs" role="button"
	data-toggle="modal" data-target="#editModal"> modify </a> 

In this way, the pop-up window for modifying the user will come out

But now there is no original data in the pop-up window , user name 、 password 、 Age 、 Gender and so on
The raw data is not displayed in the respective text boxes , It is not convenient for us to modify
We want him to show it directly on the front , It's more efficient
Let's add a hyperlink onclick event

<a href="#" class="btn btn-primary btn-xs" role="button"
//showuser: Called function , Display user information . The six values are written in order , Strings are enclosed in single quotes 
		onclick="showuser(${
    u.user_id},'${
    u.user_name}','${
    u.user_pass}',
		${
    u.user_sex},${
    u.user_age},'${
    u.user_email}')"
		data-toggle="modal" data-target="#editModal"> modify </a> 

Next use script To write js Script code

// Fill in according to the parameter sequence 
<script type="text/javascript">
	function showuser(userid,username,pass,age,sex,email){
    
	// Test whether you get the data here ,java script The script is not executed 
	alert(username);
	}
</script>

test ：


Now you can see ： This script The function has been executed , The user information has also been obtained

In order to see the data in the text box , First give each text box a ID name ：

<!--  according to id Modify the user information mode box （Modal） -->
	<form
		action="${pageContext.request.contextPath }/user/edituser0823.action"
		class="form-horizontal" role="form">
		<!--  Modify the user mode box （Modal） -->
		<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel"> Modify the user </h4>
					</div>
					<div class="modal-body">

						<div class="form-group">
							<label for="firstname" class="col-sm-2 control-label"> user name </label>
							<div class="col-sm-10">
							//hidden: Hide the text box ,user_id No display 
								<input type="hidden" name="user_id" class="form-control"
									id="userid" placeholder=" Please enter the user name "> 
									
								<input type="text"
									name="user_name" class="form-control" id="name"
									placeholder=" Please enter the user name ">
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label"> password </label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="pass"
									name="user_pass" placeholder=" password ">
							</div>
						</div>

						<div class="form-group">
							<label for="firstname" class="col-sm-2 control-label"> Age </label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="age" name="user_age"
									placeholder=" Age ">
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label"> Sex </label>
							<div class="col-sm-10">
							//checked: Select the check option of the check box button 
							//radio： Check the radio button 
								<label class="radio-inline"> <input type="radio"
									name="user_sex" id="sex1" value="1" checked>  male 
								</label> <label class="radio-inline"> <input type="radio"
									name="user_sex" id="sex0" value="0">  Woman 
								</label>
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label"> mailbox </label>
							<div class="col-sm-10">
								<input type="text" name="user_email" class="form-control"
									id="email" placeholder=" mailbox ">
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal"> close </button>
						<button type="submit" class="btn btn-primary"> Submit </button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
	</form>

Now each text box has a ID, adopt ID You can find this text box , These values can be displayed in a text box

<script type="text/javascript">
	function showuser(userid ,username,pass,age,sex,email){
    
	//alert(username); 
	$("#name").val(username);
	$("#pass").val(pass);
	$("#age").val(age);
	$("#sex").val(sex);
	$("#email").val(email);
	$("#userid").val(userid);
	}
</script>

function ：

Write control layer code (xxxController.java)

@RequestMapping(value = "/user/edituser0823.action")
	public String edituser0823(User user) {
                 //  Modify the user 
		//int i = userService.editUserlist0823(user);
		System.out.println(user.toString());
		return "redirect:/user/userlist0823.action";
	}

Now let's see if the latest information we modified can be displayed on the console , these user_id Is it worth it

Write business layer code (xxxService.java)

stay UserService.java Created in editUserlist0823 Such a method
Then in the implementation class UserServiceImpl.java This method is also automatically added to the ：

@Override
	public int editUserlist0823(User user) {
    
		int i = userDao.editUserlist0823(user);
		return i;
	}

Write data persistence layer code (xxxDao.java and xxxDao.xml)

The next in UserDao Interface to create such a method
And then in UserDao.xml Add... To the document SQL sentence

<update id="editUserlist0823" parameterType="user">
	update t_user 
	set user_name=#{user_name},user_pass=#{user_pass},user_age=#{user_age},user_sex=#{user_sex},user_email=#{user_email} 
	where user_id=#{user_id}
</update> 

This modification is complete

Run a screenshot

---

Source code address ：

Click here to go to the source code address ：
be based on SSM Framework of online shopping mall commodity management system

summary

This article uses ：Bootstrap course Modal boxes and jQuery Tutorial, etc