SSM VUE Axios Detailed Explanation

How to display SQL log? ?
Description of parameter passing in SpringMVC
restful

grammar:
User Specifications:
Parameters received:
MyBatis simplifies SQL annotations

Front-end and back-end calls

1. Vue Getting Started Case
2. Vue life cycle

concept
Type (③+⑧)

3. Front-end and back-end call Axios

Ajax
Case 1:
Case 2: Splicing by the method of ?attribute=attribute value
Case 3: Data transfer through objects

Summarize

How to display SQL log? ?

Configure information in the yml core configuration file

#Sql log file printing records:
  level: 
    com.jt.mapper:debug

Description of parameter passing in SpringMVC

Simple parameter value passing: Use MVC to write parameters into the method and pass values directly

Object receiving data: Too many parameters are encapsulated into objects

Object reference assignment: Duplicate parameter passing dog.name

restful

grammar:

1. Use / to separate parameters

2. Once the parameter order is defined, it cannot be changed

3. Verbs cannot appear in the request path because they cannot reveal the intention of the operation and hide the purpose.

User Specifications:

Use different request types to differentiate business needs

get query

post Add/form submission

put modification

delete

Parameters received:

1. Use / to separate parameters

2. Parameters are wrapped in {}

3. Parameter format @PathVariable("name") String name

4. If there are too many parameters, and the parameter names are consistent with the attribute names in the object, you can use object reception

    @RequestMapping("user/{name}/{age}/{id}")
    public Integer user(@PathVariable("name") String name,
                        @PathVariable("age") Integer age,
                        @PathVariable("id") Integer id){
        return userService.user(name,age,id);
    }
    /*Object receiving method*/
// @RequestMapping("user/{name}/{age}/{id}")
// public Integer userr(User user) {
// return userService.user(user);
// }

<update id="user">
        update demo_user set name=#{name},age=#{age} where id =#{id}
    </update>

MyBatis simplifies SQL annotations

@Insert() @sele() @Update() @Delete()

Simplify SQL, but only for simple operations, annotations and mapping files cannot appear at the same time

Front-end and back-end calls

1. Vue Getting Started Case

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE Getting Started Case</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<h1>Get data: {{msg}}</h1>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					msg:"Hello VUE JS"
				}
			})
		</script>
		
	</body>
</html>

Variables in js
var has no scope, let has scope, const defines constants

2. Vue life cycle

concept

It is an extended function provided by VUE for users. The life cycle function is automatically executed.

Type (③+⑧)

1. Initialization phase ④

beforeCreate (create Vue object, the attribute is temporarily null) Created (load the attribute value, only create but not execute, instantiation is successful)

beforeMount (parse el: "#app" and hand over the specified area/data rendering area to the Vue object for management) Mouted (after the object is created, and rendering starts in the specified area, parsing the expression, after successful execution, the user can see the parsed page)

2. Modification of VUE objects during object usage phase②

beforeUpdate Updated

3. Destruction Phase ②

beforeDestroy Destroyed→The VUE object is destroyed and no longer exists

3. Front-end and back-end call Axios

Ajax

Features: partial refresh, asynchronous access

Synchronous vs. Asynchronous

Ajax Design Principles: Ajax Engine

Callback function? ? To notify users

Case 1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios Exercise</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<!-- http://localhost:8090/getUser -->
		<h1>Ajax Getting Started Case</h1>
		<script>
			let url="http://localhost:8090/getUser"
			axios.get(url)
			       .then(function(promise){
				    console.log(promise.data)
			})
		</script>
	</body>
</html>

Note: You need to add @CrossOrigin annotation at the Controller layer! ! ! ! ! ! !

Case 2: Splicing by the method of ?attribute=attribute value

Requirement: Query user url according to Id: url address: http://localhost:8090/axios/findUserById

Front-end code:

	let user = {
					age: 21,
					sex: "female"
				}
				axios.get("http://localhost:8090/axios/findUserByAS", {
						params: user
					})
					.then(function(promise) {
						console.log(promise.data)
					})

Case 3: Data transfer through objects

Requirement: Query user information based on age/sex URL: http://localhost:8090/axios/findUserByAS

Front-end code:

	let user = {
					age: 21,
					sex: "female"
				}
				axios.get("http://localhost:8090/axios/findUserByAS", {
						params: user
					})
					.then(function(promise) {
						console.log(promise.data)
					})

Summarize

3 ways to pass parameters in front-end Get request

Method 1: Splicing by the method of ?attribute=attribute value

Method 2: Data transfer through objects

Method 3: Use the restFul structure to implement parameter passing.

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

ssm+vue front-end and back-end separation framework integration implementation (with source code)
vue+SSM realizes verification code function
Vue axios interceptor commonly used repeated request cancellation
What are the differences between vue navigation guard and axios interceptor
Vue3 configures axios cross-domain implementation process analysis
vue-axios requests multiple interfaces at the same time and waits until all interfaces are fully loaded before processing the operation

<<: mysqldump parameters you may not know

>>: About the problem of running git programs in jenkins deployed by docker