Phase III CGB2105-Day09

CGB2105-Day09

Shining sun 2021-08-02 10:04:44 3754
Category column: 2105 Article label: java
2105 The column contains this content
17 articles 26 subscriptions

1. Knowledge review

1.1 Axios case

1.1.1 Ajax history

  1. JS native Ajax operation processing is complex and not easy to use
  2. jQuery is a high-level function class library of JS. It encapsulates many API s to simplify the process of program call (callback Hell: Ajax nesting problem)
  3. promise object transforms Ajax nested structure into chain loaded structure. ajax.get().then(xxxxxx)
    4. Axios mainly encapsulates the promise object, which makes the call easier. Integrate axios to initiate ajax requests under most conditions in VUE.js

1.1.2 type of request

There are eight common request types for http, but generally four require separate memory

  1. GET request type characteristics during query operation: parameter structure key = value URL? Key = value & key2 = Value2

  2. New (form) POST request type features: the parameters will be encapsulated in the request header, which is relatively more secure. key=value key2=value2 can be received directly as an object
    The post parameter in Axios is a JSON string {key1: value1, key2: Value2} which converts the JSON string into an object @ RequestBody

  3. DELETE request type characteristics: consistent with GET request type

  4. Update operation PUT request type features: consistent with POST request type

  5. RestFul style: you can use (separate system) parameter usage / segmentation in the above four request types. Note that the parameter structure can be selected flexibly

1.2 Axios job - delete data

1.2.1 edit page JS

Add click event for delete button

Edit page JS to initiate Ajax request

Description of request method:

1.2.2 editing Controller method

1.2.3 edit Service method

1.3 Axios job - modify data

1.3.1 business description

  1. The DIV to be modified contains 4 parts of data. name/age/sex where id!!!
  2. When the user clicks the Modify button, the data should be echoed
  3. When the user needs to click the submit button after the modification, he should initiate an ajax request to modify the data

matters needing attention:
If you see the INPUT box in vue.js, it indicates two-way data binding. The attribute must be defined in data

1.3.2 edit page JS

  1. Define and modify html tags
  2. Define the modified object updateUser and two-way data binding
  3. Add click event for submit button. Implement ajax parameter submission
  4. Clear the submitted data and retrieve the list information
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE-Axios practice</title>
	</head>
	<body>
		<!-- definition VUE Root label -->
		<div id="app">
				<div align="center">
						<h1 align="center">New user</h1>
						name: <input type="text" v-model.trim="addUser.name"/>
						Age: <input type="text" v-model.number="addUser.age"/>
						Gender: <input type="text" v-model.trim="addUser.sex"/>
						<button @click="addUserMe">newly added</button>
				</div>
				<hr />
				<div align="center">
						<!-- demand: ID It is a required parameter for modification operation,User cannot modify 
								 disabled="false" JS Specification if set true Can be simplified to key
						-->
						<h1 align="center">User modification</h1>
						number: <input type="text" v-model.trim="updateUser.id"	disabled />
						name: <input type="text" v-model.trim="updateUser.name"/>
						Age: <input type="text" v-model.number="updateUser.age"/>
						Gender: <input type="text" v-model.trim="updateUser.sex"/>
						<!-- After user modification,Initiated when the submit button is clicked ajax request. -->
						<button @click="updateUserMe">Submit</button>
				</div>
				<hr />
			<span class="token operator">&lt;</span>table id<span class="token operator">=</span><span class="token string">"tab1"</span> border<span class="token operator">=</span><span class="token string">"1px"</span> align<span class="token operator">=</span><span class="token string">"center"</span> width<span class="token operator">=</span><span class="token string">"80%"</span><span class="token operator">&gt;</span>
				<span class="token generics"><span class="token punctuation">&lt;</span>tr<span class="token punctuation">&gt;</span></span>
					<span class="token operator">&lt;</span>td colspan<span class="token operator">=</span><span class="token string">"5"</span> align<span class="token operator">=</span><span class="token string">"center"</span><span class="token operator">&gt;</span><span class="token generics"><span class="token punctuation">&lt;</span>h1<span class="token punctuation">&gt;</span></span>User list<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
				<span class="token operator">&lt;</span><span class="token operator">/</span>tr<span class="token operator">&gt;</span>
				<span class="token operator">&lt;</span>tr align<span class="token operator">=</span><span class="token string">"center"</span><span class="token operator">&gt;</span>
					<span class="token generics"><span class="token punctuation">&lt;</span>td<span class="token punctuation">&gt;</span></span>number<span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
					<span class="token generics"><span class="token punctuation">&lt;</span>td<span class="token punctuation">&gt;</span></span>full name<span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
					<span class="token generics"><span class="token punctuation">&lt;</span>td<span class="token punctuation">&gt;</span></span>Age<span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
					<span class="token generics"><span class="token punctuation">&lt;</span>td<span class="token punctuation">&gt;</span></span>Gender<span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
					<span class="token generics"><span class="token punctuation">&lt;</span>td<span class="token punctuation">&gt;</span></span>operation<span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
				<span class="token operator">&lt;</span><span class="token operator">/</span>tr<span class="token operator">&gt;</span>
				<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> instructions<span class="token operator">:</span> Can cycle data<span class="token operator">+</span>label  v<span class="token operator">-</span><span class="token keyword">for</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
				<span class="token operator">&lt;</span>tr align<span class="token operator">=</span><span class="token string">"center"</span> v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"user in userList"</span><span class="token operator">&gt;</span>
					<span class="token operator">&lt;</span>td v<span class="token operator">-</span>text<span class="token operator">=</span><span class="token string">"user.id"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
					<span class="token operator">&lt;</span>td v<span class="token operator">-</span>text<span class="token operator">=</span><span class="token string">"user.name"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
					<span class="token operator">&lt;</span>td v<span class="token operator">-</span>text<span class="token operator">=</span><span class="token string">"user.age"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
					<span class="token operator">&lt;</span>td v<span class="token operator">-</span>text<span class="token operator">=</span><span class="token string">"user.sex"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
					<span class="token generics"><span class="token punctuation">&lt;</span>td<span class="token punctuation">&gt;</span></span>
						<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> Add a click event for the Modify button to pass the current line object <span class="token operator">--</span><span class="token operator">&gt;</span>
						<span class="token operator">&lt;</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"updateUserBtn(user)"</span><span class="token operator">&gt;</span>modify<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
						<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> For current user Object binding click event <span class="token operator">--</span><span class="token operator">&gt;</span>
						<span class="token operator">&lt;</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"deleteUser(user)"</span><span class="token operator">&gt;</span>delete<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
					<span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
				<span class="token operator">&lt;</span><span class="token operator">/</span>tr<span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span><span class="token operator">/</span>table<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
		
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">1.</span>introduce VUE<span class="token punctuation">.</span>js <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">2.</span>introduce<span class="token class-name">Axios</span><span class="token punctuation">.</span>js <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/axios.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 
			requirement analysis<span class="token number">1</span><span class="token operator">:</span>
				<span class="token number">1.</span>It should be initiated when the user opens the page<span class="token class-name">Ajax</span>Request acquisition userList data<span class="token punctuation">.</span>
				<span class="token number">2.</span>take userList The data is displayed in the page  
						<span class="token number">2.1</span>The data in the page must be data Defined in
						<span class="token number">2.2</span> ajax The result of the request is assigned to data attribute
				<span class="token number">3.</span>utilize v<span class="token operator">-</span><span class="token keyword">for</span>The instruction implements data traversal
				
			requirement analysis<span class="token number">2</span><span class="token operator">:</span>  User data warehousing
				<span class="token number">1.</span>Prepare the user's new text box in the page<span class="token operator">/</span>Button
				<span class="token number">2.</span>Prepare rules for bidirectional data binding
				<span class="token number">3.</span>Add event for button<span class="token punctuation">,</span>Realize data adding and warehousing<span class="token punctuation">.</span>
						
	 <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
			<span class="token comment">//Set axios request prefix</span>
			axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">"http://localhost:8090"</span>
			<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
				el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
				data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
					<span class="token comment">//1. Define collection data null</span>
					userList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
					<span class="token comment">//2. Define the user data added by the addUser object</span>
					addUser<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
						name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
						age<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
						sex<span class="token operator">:</span> <span class="token string">''</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token comment">//Define a modified data wrapper</span>
					updateUser<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
						id<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
						name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
						age<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
						sex<span class="token operator">:</span> <span class="token string">''</span>
					<span class="token punctuation">}</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
					<span class="token comment">//1. Define getuserList method to obtain background server data</span>
					async <span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
						let<span class="token punctuation">{<!-- --></span>data<span class="token operator">:</span> result<span class="token punctuation">}</span> <span class="token operator">=</span> await axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"/vue/getUserList"</span><span class="token punctuation">)</span>
						<span class="token comment">//After the ajax call, the data is given to the attribute</span>
						<span class="token keyword">this</span><span class="token punctuation">.</span>userList <span class="token operator">=</span> result
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token comment">//New operation request type: json processing is required for post receiving</span>
					async <span class="token function">addUserMe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
							<span class="token comment">//No return value is required</span>
							await axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">"/vue/insertUser"</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>addUser<span class="token punctuation">)</span>
							<span class="token comment">//Refresh the list page</span>
							<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					async <span class="token function">deleteUser</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
						<span class="token comment">//console.log(user)</span>
						<span class="token comment">//You only need to get the user's ID to complete the deletion operation</span>
						<span class="token comment">//Method selection? id=xx splicing | restFul structure</span>
							let id <span class="token operator">=</span> user<span class="token punctuation">.</span>id
							await axios<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">"/vue/deleteUser?id="</span><span class="token operator">+</span>id<span class="token punctuation">)</span>
							<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Data deleted successfully!!!"</span><span class="token punctuation">)</span>
							<span class="token comment">//You need to retrieve the list data</span>
							<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
							<span class="token comment">/* await axios.delete(`/vue/deleteUser?id=${id}`) */</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token comment">//An event is triggered when the Modify button is clicked</span>
					<span class="token function">updateUserBtn</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
						<span class="token comment">//console.log(user)</span>
						<span class="token comment">//The User object passed by the User should be dynamically passed to the key updateuser of two-way data binding</span>
						<span class="token keyword">this</span><span class="token punctuation">.</span>updateUser <span class="token operator">=</span> user
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token comment">//1. Whether to initiate ajax request 2. Who are the parameters? updateUser 3. What request type put</span>
					<span class="token comment">//this.updateUser is the JSON string @ requestbody passed from the JS object to the backend</span>
					async <span class="token function">updateUserMe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
							await axios<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"/vue/updateUser"</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>updateUser<span class="token punctuation">)</span>
							<span class="token comment">//If the operation is successful, the modified object should be emptied</span>
							<span class="token keyword">this</span><span class="token punctuation">.</span>updateUser <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span>
							<span class="token comment">//If the operation is successful, the list information is retrieved</span>
							<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
							<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Modification operation succeeded!!!!"</span><span class="token punctuation">)</span>
					<span class="token punctuation">}</span>
					
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token comment">//Call 8 lifecycle functions</span>
				<span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
					<span class="token comment">//console.log("vue object instantiated successfully!!!!")</span>
					<span class="token comment">//Call getuserlist() on initialization</span>
					<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153

Request parameter details:

1.3.3 editing backend Controller

Receive the data transmitted by the front end and complete the data modification operation

1.3.4 editing backend services

2. Componentization idea

2.1 component description

Note: traditional page development will introduce a large number of HTML/CSS/JS, but after the introduction, the structure is chaotic and inconvenient for management. The cost of development and maintenance is high
Componentization idea:
In VUE, a component can be regarded as a page, in which independent styles / JS/HTML can be introduced for separate management
Components can be reused
Keywords: Component - page (html/css/js)

2.2 introduction to components

2.2.1 introduction to components

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Componentization</title>
	</head>
	<body>
		<h1>Component structure</h1>
		<div id="app">
				<!-- 1.It is required to edit a quiet night thought, but the code is required to be reused as much as possible. 
							 Implementation strategy: Component thought
						 2.Componentization steps:
								1.Define components   
									Global component: Arbitrary DIV You can import this component
									Local component: Only specific DIV Components can be introduced
								2. Edit the of the component key(Pay attention to the writing of hump rules)    
									 Edit component body special syntax: When defining attributes data(){return{ key:value}}
									 html label: use template Mark
								3.adopt key Reference components.
				 -->
			 <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">1.</span>Use of component labels app Can only be resolved within the label
						<span class="token number">2.</span>If the hump rule command is used, the intermediate command is used<span class="token operator">-</span>Wire connection
				<span class="token operator">--</span><span class="token operator">&gt;</span>
			 <span class="token operator">&lt;</span>hello<span class="token operator">-</span>com<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>hello<span class="token operator">-</span>com<span class="token operator">&gt;</span>
			 <span class="token operator">&lt;</span>hello<span class="token operator">-</span>com<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>hello<span class="token operator">-</span>com<span class="token operator">&gt;</span>
			 <span class="token operator">&lt;</span>hello<span class="token operator">-</span>com<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>hello<span class="token operator">-</span>com<span class="token operator">&gt;</span>
			 
		<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>	
		
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> Define templates for components html 
				 matters needing attention<span class="token operator">:</span> 
						<span class="token number">1.</span>Remember to mark in app outside<span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span>
						<span class="token number">2.</span>The template string must have a root label div		
		<span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>template id<span class="token operator">=</span><span class="token string">"helloTem"</span><span class="token operator">&gt;</span>
			<span class="token generics"><span class="token punctuation">&lt;</span>div<span class="token punctuation">&gt;</span></span>
				<span class="token generics"><span class="token punctuation">&lt;</span>h3<span class="token punctuation">&gt;</span></span>In the Quiet Night<span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">&gt;</span>
				The bright moon in front of the bed is suspected to be frost on the ground.
				Raising my head, I see the moon so bright; withdrawing my eyes, my nostalgia comes around.
				Import properties<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>msg<span class="token punctuation">}</span><span class="token punctuation">}</span>
			<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
		
	
	
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> introduce JS file <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token comment">/* 1.Define components */</span>
		<span class="token class-name">Vue</span><span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">"helloCom"</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span>
			<span class="token comment">//return value must be added to define attribute</span>
			<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
				<span class="token keyword">return</span> <span class="token punctuation">{<!-- --></span>
					msg<span class="token operator">:</span> <span class="token string">"I am a component"</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			template<span class="token operator">:</span> <span class="token string">"#helloTem"</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
		
		<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span>	<span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72

2.2.2 local components

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Componentization</title>
	</head>
	<body>
		<h1>Local component</h1>
		<div id="app">
			<hello-com></hello-com>
			<hello-com></hello-com>
			<hello-com></hello-com>
		</div>
	<span class="token operator">&lt;</span>template id<span class="token operator">=</span><span class="token string">"helloTem"</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>div<span class="token punctuation">&gt;</span></span>
			<span class="token generics"><span class="token punctuation">&lt;</span>h1<span class="token punctuation">&gt;</span></span>I am a local component AAAAAAAAA<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>
			Attribute value<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>msg<span class="token punctuation">}</span><span class="token punctuation">}</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>	
		
	
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> introduce JS file <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		
		<span class="token comment">//Declaration component</span>
		let helloCom <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
			<span class="token comment">//Attribute definition</span>
			<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
				<span class="token keyword">return</span> <span class="token punctuation">{<!-- --></span>
					msg<span class="token operator">:</span> <span class="token string">"I am a local component"</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			template<span class="token operator">:</span> <span class="token string">"#helloTem"</span>
		<span class="token punctuation">}</span>
		
		
		<span class="token comment">/* Note: component labels can only be used within the object of a VUE */</span>
		<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span>	<span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			<span class="token comment">//Define local components</span>
			components<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				<span class="token comment">//Component key: component body</span>
				helloCom<span class="token operator">:</span> helloCom
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

2.2.3 simplified expression of key value

3. Routing in Vue

3.1 introduction to routing

Note: the user initiates a request, jumps through multiple sites in the Internet, and finally obtains the server-side data. The network link in the Internet is called routing. (network terminology)
Routing in VUE: display specific component (page) information according to the user's request URL address (control the user program jump process)

3.2 routing steps

  1. Import route.JS
  2. Specifies the jump link for the route
  3. Defines the padding bit of the route
    **4. Encapsulate component information and specify routing object (hard!!!)**
  4. Declare route in VUE object

3.3 introduction to routing

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Introduction to routing</title>
	</head>
	<body>
		<div id="app">
			<!-- <a href="Set jump address">Baidu</a> -->
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> two<span class="token operator">:</span>Define link
				<span class="token number">1.</span>router<span class="token operator">-</span>link Translated into a label
				<span class="token number">2.</span>keyword <span class="token keyword">to</span>    Translated into href attribute
		 <span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>router<span class="token operator">-</span>link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/user"</span><span class="token operator">&gt;</span>user<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>router<span class="token operator">-</span>link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/dog"</span><span class="token operator">&gt;</span>Dog<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
		
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>three<span class="token operator">:</span> Specify the filling location of the route and display the component information in the future 
			After the filled position is parsed, it is a DIV
		 <span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>router<span class="token operator">-</span>view<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>view<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> Defines the label body of the component <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>template id<span class="token operator">=</span><span class="token string">"userTem"</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>div<span class="token punctuation">&gt;</span></span>
			<span class="token generics"><span class="token punctuation">&lt;</span>h3<span class="token punctuation">&gt;</span></span>User information<span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span>template id<span class="token operator">=</span><span class="token string">"dogTem"</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>div<span class="token punctuation">&gt;</span></span>
			<span class="token generics"><span class="token punctuation">&lt;</span>h3<span class="token punctuation">&gt;</span></span>Dog information<span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">1.</span>Import route JS    Import first vue<span class="token punctuation">.</span>js  Re import route<span class="token punctuation">.</span>js Sequential problem <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue-router.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		
	<span class="token comment">/**
	 * Step 4: prepare components and define routing objects
	 */</span>
		let userCom <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
			template<span class="token operator">:</span> <span class="token string">"#userTem"</span>
		<span class="token punctuation">}</span>
		
		let dogCom<span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
			template<span class="token operator">:</span> <span class="token string">"#dogTem"</span>
		<span class="token punctuation">}</span>
		
		<span class="token comment">/**
		 * Define routing objects
		 * routes:  Multiple mappings of routes are defined through this attribute
		 */</span>
		let vueRouter <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			routes<span class="token operator">:</span> <span class="token punctuation">[</span>
				<span class="token punctuation">{<!-- --></span>path<span class="token operator">:</span> <span class="token string">"/user"</span><span class="token punctuation">,</span> component<span class="token operator">:</span> userCom<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token punctuation">{<!-- --></span>path<span class="token operator">:</span> <span class="token string">"/dog"</span><span class="token punctuation">,</span>  component<span class="token operator">:</span> dogCom<span class="token punctuation">}</span>
			<span class="token punctuation">]</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	
		<span class="token keyword">const</span> APP <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			<span class="token comment">//Realize the mounting of routing</span>
			router<span class="token operator">:</span> vueRouter
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74

3.4 redirection and forwarding

Note: both request and forwarding are server behaviors, and no additional operations will be performed

3.4.1 forwarding problems

Note: the user accesses the server, but the target server cannot process the request. The server will hand over the request to other servers for processing. This process is called forwarding

3.4.2 redirection problem

Note: the user accesses the server, but the target server cannot process the request. The target server returns a web address that can process the request. The user initiates the request again and accesses the server to obtain data

3.4 routing keywords

  1. redirect route redirection
    Requirement: the user is required to access the '/' root directory and redirect to the '/ user' request path

3.5 operation

1. Master the basic usage syntax of component / route / axios!!!
2. According to VUE_demo to understand what routing nesting rules are

Tags: Java

Posted on Tue, 28 Sep 2021 13:11:46 -0400 by nileshn