-
MP update operation
1.1 update operation
@SpringBootTest
public class TestMP2 {@Autowired
private UserMapper userMapper;/**
- Change the user name of ID=229 to June 1 children's day.
*/
@Test
public void updateUser(){
User user = new User();
user.setId(229).setName("children's Day");
//set name="xxx" where id = 229
userMapper.updateById(user);
}
/**
- Update action 2
-
take name="International Children's Day" Change to"The Dragon Boat Festival"
- Parameter Description:
-
1.The entity object encapsulates the modified data set structure
-
2.UpdateWrapper Modified condition constructor
- Sql: update demo_user set name = "Dragon Boat Festival" where name = "61"
*/
@Test
public void updateUser2(){
User user = new User();
user.setName("Dragon Boat Festival");
UpdateWrapper updateWrapper = new UpdateWrapper();
updateWrapper.eq("name", "June 1 children's Day");
userMapper.update(user,updateWrapper);
}
}
- Change the user name of ID=229 to June 1 children's day.
-
Project environment construction
2.1 serial number problem
2.1.1 why serialization
Requirement: sometimes remote procedure call (RPC) is required for project call. User data of system B is required in system a Since they are two different systems, they need the support of communication protocol (http/https/tcp/udp...)
Problem: because the user object can be transmitted over the network through the protocol If the user data transmitted in system B is guaranteed, it can be recognized normally in system A!!! (ensure the accuracy of data!!!)
Movie (disgusting type): fly man
2.1.2 serialization structure
Serialization: arranging objects in a specific byte order
Deserialization: the process of reading a piece of byte information in a specific format order and converting the byte information into an object
Insert picture description here
2.1.3 serialization code
Insert picture description here
2.2 code hierarchy
Insert picture description here
2.3 browser F12 description
Insert picture description here
2.4 user added stock in
2.4.1 edit html page
Edit a form to submit data
User added form
name:Age:
Gender:
2.4.2 editing UserController
@RestController
public class UserController {
@Autowired
private UserService userService;
/**
* URL: /addUser
* method: post
* Parameter: form parameter name/age/sex
* Return value: returns successful character information
*/
@PostMapping("/addUser")
public String addUser(User user){
userService.addUser(user);
return "Successfully added!!";
}
}
2.4.3 editing UserService
@Service
public class UserServiceImpl implements UserService{
@Autowired
private UserMapper userMapper;
@Override
public void addUser(User user) {
userMapper.insert(user);
}
}
2.5 description of form submission
Note: remote data transmission can be realized through the action attribute in the form When you click the submit button of the form, the page will jump synchronously Send the data directly to the back - end server The request is synchronous
Conclusion: there is no need to add cross domain annotations to synchronization requests
Insert picture description here
2.6 download jQuery function class library
Insert picture description here
2.7 introduction to Ajax
2.7.1 introduction
Ajax, namely Asynchronous Javascript And XML, was a new term proposed by Jesse James Garrett in 2005 to describe a 'new' method using a collection of existing technologies, including HTML or XHTML, CSS, JavaScript, DOM, XML, XSLT, and the most important XMLHttpRequest. [3] Using Ajax technology, web applications can quickly present incremental updates on the user interface without reloading (refreshing) the whole page, which makes the program respond to user operations faster. [3]
Summary: local refresh, asynchronous access
2.7.2 synchronization request
Knowledge foreshadowing: synchronization problem
Role: 1 User 2 Service provider
Disadvantages of synchronous request: when the back-end server cannot process the request in time, the user is in the waiting state and the page is in the refresh state
Poor user experience
Insert picture description here
2.7.3 asynchronous request
Synchronization: users access the server directly
Asynchronous: users access the server indirectly. Users can also perform other business operations while waiting for data
Request process:
1. The user submits the request to the Ajax engine for processing (request)
2. After receiving the user's request, the Ajax engine initiates a new URL request to obtain data from the server
3. After receiving the request, the server processes the business according to itself, and finally returns the result to the engine
4.Ajax engine realizes the transfer of return value through pre-defined callback function When the user gets the return value, it starts to call the content in the function
Local refresh
Insert picture description here
2.8 obtaining user list data
2.8.1 editing UserController
/**
*Query all data of User table
*Request path: http://localhost:8090/getUser
*Parameters: no parameters are required
*Return value: List
*/
@GetMapping("/getUser")
public List getUser(){
List<User> userList = userService.getUser();
return userList;
}
2.8.2 editing UserService
Get backend data set through MP
@Override
public List<User> getUser() {
return userMapper.selectList(null);
}
2.8.3 synchronous access page effect
Note: the JSON data information of user can be obtained through localhost:8090/getUser synchronization
Insert picture description here
2.9 front end implementation of user list
2.9.1 circular writing
2.9.1.1 basic for loop
//js implementation of for loop
for(var i=0;i<data.length;i++){
var user = data[i]
console.log(user)
}
2.9.1.2 circular writing in
The in keyword in indicates that the traversal is a subscript
for(var index in data){
console.log(data[index])
}
2.9.1.3 circular writing -of
Enhanced for notation of means to get traversal content directly
//Enhanced for notation of means to get traversal content directly
for(var user of data){
console.log(user)
}
2.9.2 edit userlist HTML page
Initiate an Ajax request to dynamically obtain the data of the back-end server, analyze the data through JS, and then display the data through tables
<!-- 1.Import JS Function class library -->
<script src="jquery-3.6.0.min.js"></script>
<!-- 2.edit JS launch Ajax request -->
<script>
//Circular writing
/**
* //js Implement the for loop
for(var i=0;i<data.length;i++){
var user = data[i]
console.log(user)
}
in The keyword index represents subscript
for(var index in data){
console.log(data[index])
}
//Enhanced for notation of means to get traversal content directly
for(var user of data){
console.log(user)
}
*/
//Let the page load and execute again
//Syntax: programming function
$(function(){
//alert("page loading completed, jQuery call succeeded!!!!")
//get request mode using Ajax
//http://localhost:8090/getUser All data
//Display the data in the form of tables
//Category: 1. $ get() 2.$. post() 3.$. getJSON() 4.$. ajax()
//js can dynamically match types according to the data of the returned value
//$. get("url address", "parameter", function(data) {}, "return value type")
var name = "Zhang San"
var age = 18
//Parameter writing method 1: key = value & key2 = Value2
var args1 = "name="+name + "&age="+age
//Parameter writing method: {key:value,key2:value2}
var args2 = {name:name,age:age}
//If there are parameters, add them directly. If there are no parameters, omit them directly
var url = "http://localhost:8090/getUser";
$.get(url,function(data){
//Enhanced for notation of means to get traversal content directly
for(var user of data){
var id = user.id
var name = user.name
var age = user.age
var sex = user.sex
var tr = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
//Use the ID selector to locate the table tag
//append appends content to each matching element.
$("#tab1").append(tr)
}
})
})
</script>
</head>
<body>
<table id="tab1" border="1px" width="700px" align="center">
<tr>
<td colspan="4" align="center"><h1>Tabular data</h1></td>
</tr>
<tr align="center">
<td>ID number</td>
<td>name</td>
<td>Age</td>
<td>Gender</td>
</tr>
</table>
</body>