Cross-domain principle:
1. Use axios to send a get request
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../vue2.4.4.js"></script>
9 <script src="../axios.js"></script>
10
11 </head>
12
13 <body>
14 <!-- Define a vue management block, (View in MVVM) -->
15 <div id="app">
16 <button @click="getApiData">Click to get data</button>
17 {{name}}
18 </div>
19
20 </body>
21
22 <script>
23
24 // Instantiate vue object (View Model in MVVM)
25 new View({
26 // The block controlled by vm is the div whose id is app, and all vue instructions in this div can be parsed by vm
27 on: '# app',
28 data:{
29 // Data (Model in MVVM)
30 name:""
31 },
32 methods:{
33 getApiData:function() {
34 //Set the request path
35 var url = "http://157.122.54.189:9093/api/getprodlist";
36 // send request: return data to a return function
37 _this= this;
38 // and the callback function in the then method will be executed after the response is successful
39 axios.get(url).then(function(result) {
40 // result is all the returned data
41 // included the response message line
42 // response header
43 // Response message body
44 console.log(result.data.message[0]);
45 _this.name = result.data.message[0].name;
46 });
47 }
48 }
49 })
50 </script>
51 </html>
2. Use axios to send post requests
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../vue2.4.4.js"></script>
9 <script src="../axios.js"></script>
10
11 </head>
12
13 <body>
14 <!-- Define a vue management block, (View in MVVM) -->
15 <div id="app">
16 <button @click="postApiData">Click to submit data</button>
17 </div>
18
19 </body>
20
21 <script>
22
23 // Instantiate vue object (View Model in MVVM)
24 new View({
25 // The block controlled by vm is the div whose id is app, and all vue instructions in this div can be parsed by vm
26 el: '# app',
27 data:{
28 // Data (Model in MVVM)
29 },
30 methods:{
31 postApiData: function () {
32 var url = "http://157.122.54.189:9093/api/addproduct";
33 // post has two parameters
34 //parameter 1: the requested path
35 //Parameter 2: Submitted parameters
36 //Two forms of submission parameters:
37 // 1. You can directly pass in the string name=Zhang San&age=19
38 // 2. You can pass in {name:"three",age:19} in the form of an object
39 axios.post(url,{name:"Drag the oil bottle to report"}).then(function(res) {
40 var resData = res.data;
41 if(resData.status == "0") { //0 means success, 1 means failure
42 alert (resData.message);
43 }else{
44 alert (resData.message);
45 }
46 });
47
48 }
49 }
50 })
51 </script>
52 </html>
3. Use axios to send post or get request details
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../vue2.4.4.js"></script>
9 <script src="../axios.js"></script>
10
11 </head>
12
13 <body>
14 <!-- Define a vue management block, (View in MVVM) -->
15 <div id="app">
16 <button @click="getApiData">Click to get data</button>
17 <button @click="postApiData">Click to submit data</button>
18 {{name}}
19
20 </div>
21
22 </body>
23
24 <script>
25 //Detail processing 1: You can set a unified host and port number for the ajax request of axios
26 axios.defaults.baseURL = "http://157.122.54.189:9093/";
27 //Detail processing 2: You can add the axios object to the prototype object of Vue, and you only need to use this. object name when you use it in the future.
28 Vue.prototype.$http = axios;
29
30
31 // Instantiate vue object (View Model in MVVM)
32 new View({
33 // The block controlled by vm is the div whose id is app, and all vue instructions in this div can be parsed by vm
34 el: '# app',
35 data:{
36 // Data (Model in MVVM)
37 name:""
38 },
39 methods:{
40 getApiData:function() {
41 //Set the request path
42 var url = "api/getprodlist";
43 // Send request: return data to a return function
44 _this= this;
45 // and the callback function in the then method will be executed after the response is successful
46 this.$http.get(url).then(function(result) {
47 // result is all the returned data
48 // included the response message line
49 // response header
50 // response body
51 _this.name = result.data.message[0].name;
52 }).catch(function(){
53 alert("Error");
54 });
55 },
56
57 postApiData: function () {
58 var url = "api/addproduct";
59 // post has two parameters
60 //parameter 1: the requested path
61 //Parameter 2: Submitted parameters
62 //Two forms of submission parameters:
63 // 1. You can directly pass in the string name=Zhang San&age=19
64 // 2. You can pass in {name:"three",age:19} in the form of an object
65 this.$http.post(url,{name:"Drag the oil bottle to report 3"}).then(function(res) {
66 var resData = res.data;
67 if(resData.status == "0") { //0 means success, 1 means failure
68 alert (resData.message);
69 }else{
70 alert (resData.message);
71 }
72 }).catch(function(){
73 alert("Error");
74 }); ;
75
76 }
77 }
78 })
79 </script>
80 </html>
4. Use axios to complete brand management
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 #app {
11 width: 600px;
12 margin: 10px auto;
13 }
14
15 .tb {
16 border-collapse: collapse;
17 width: 100%;
18 }
19
20 .tb th {
21 background-color: #0094ff;
22 color: white;
23 }
24
25 .tb td,
26 .tb th {
27 padding: 5px;
28 border: 1px solid black;
29 text-align: center;
30 }
31
32 .add {
33 padding: 5px;
34 border: 1px solid black;
35 margin-bottom: 10px;
36 }
37 </style>
38 <script src="../vue2.4.4.js"></script>
39 <script src="../axios.js"></script>
40 </head>
41
42 <body>
43 <div id="app">
44 <div class="add">
45 品牌名称: <input v-model="name" type="text">
46 <button @click="add">添加</button>
47 </div>
48 <div class="add">品牌名称：<input type="text"></div>
49 <div>
50 <table class="tb">
51 <tr>
52 <th>Number</th>
53 <th>Brand Name</th>
54 <th>Founded</th>
55 <th>Operation</th>
56 </tr>
57 <tr v-if="list.length <= 0">
58 <td colspan="4">No brand data</td>
59 </tr>
60 <!-- When adding: key="index", all parameters must be written completely -->
61 <tr v-for="(item,key,index) in list" :key="index">
62 <td>{{item.id}}</td>
63 <td>{{item.name}}</td>
64 <td>{{item.ctime}}</td>
65 <td><a href="#" @click="del(item.id)">删除</a></td>
66 </tr>
67 </table>
68 </div>
69
70 </div>
71 </body>
72
73 </html>
74
75 <script>
76 // 1 sets all hostnames and ports together
77 axios.defaults.baseURL = "http://157.122.54.189:9093";
78 // 2 Add axios to Vue's prototype object
79 Vue.prototype.$http = axios;
80
81 var vm = new Vue({
82 el: "#app",
83 data: {
84 name: '',
85 list: [] // The data should come from the api provided by the server
86 },
87 mounted:function() { //Hook function
88 this.getList();
89 },
90 methods: {
91 // Get all the list data, this method should be called directly after the page is loaded
92 getList:function() {
93 var url = "/api/getprodlist";
94 // Change the pointer of this
95 _this = this;
96 this.$http.get(url).then(function(result){
97 var res = result.data;
98 if(res.status == 0) {
99 //Assign data to list
100 _this.list = res.message;
101 }else{
102 alert("Error");
103 }
104 }).catch(function(){
105 alert("Error");
106 });
107 },
108 // Get the value in the text box and submit the value to the server through the api
109 add:function() {
110 var url = "/api/addproduct";
111 _this = this;
112 // Get the value corresponding to the name attribute
113 this.$http.post(url,{"name":this.name}).then(function(result){
114 var res = result.data;
115 if(res.status == "0") {
116 alert(res.message);
117 _this.getList();
118 }else{
119 alert(res.message);
120 }
121 }).catch(function() {
122 alert("Something went wrong");
123 });
124 },
125 del:function(id){
126 //Format id delete data
127 var url = "/api/delproduct/"+id;
128 // Send asynchronous request
129 _this = this;
130 this.$http.get(url).then(function(result){
131 var res = result.data;
132 if(res.status == "0") {
133 alert(res.message);
134 //Update data
135 _this.getList();
136 }else{
137 alert(res.message);
138 }
139
140 }).catch(function(){
141 alert("Error");
142 });
143 }
144 }
145 });
146
147 </script>
5. Use vue-resource to send asynchronous requests (including get and post requests)
The two js files must be loaded in order
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../vue2.4.4.js"></script>
9 <script src="../vue-resource.js"></script>
10
11 </head>
12
13 <body>
14 <!-- Define a vue management block, (View in MVVM) -->
15 <div id="app">
16 {{name}}
17 </div>
18
19 </body>
20
21 <script>
22
23 // Instantiate vue object (View Model in MVVM)
24 new View({
25 // The block controlled by vm is the div whose id is app, and all vue instructions in this div can be parsed by vm
26 el: '# app',
27 data:{
28 // Data (Model in MVVM)
29 name:""
30 },
31 methods:{
32
33 },
34 created:function() {
35 // Send request to server to load data
36 //vue-resource sends a get request
37 /* this.$http.get("http://157.122.54.189:9093/api/getprodlist").then(function(result){
38 //Get the content of the response
39 var res = result.body;
40 this.name = res.message[0].name;
41 });
42 */
43 //vue-resource sends a post request
44 this.$http.post("http://157.122.54.189:9093/api/addproduct",{"name":"小明"}).then(function(result){
45 var res = result.body;
46 alert(res.message);
47 });
48 }
49 })
50 </script>
51 </html>
Six. Use vue-resource to achieve cross-domain
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8
9 <script src="../vue2.4.4.js"></script>
10 <script src="../vue-resource.js"></script>
11 </head>
12
13 <body>
14 <!-- Define a vue management block, (View in MVVM) -->
15 <div id="app">
16
17 </div>
18
19 </body>
20
21 <script>
22
23 // Instantiate vue object (View Model in MVVM)
24 new View({
25 // The block controlled by vm is the div whose id is app, and all vue instructions in this div can be parsed by vm
26 el: '# app',
27 data:{
28 // Data (Model in MVVM)
29 },
30 mounted:function() {
31 var url = "http://157.122.54.189:9093/jsonp";
32 //In vue-resources, the function name of callback will be automatically added to the path, and the result obtained is result
33 this.$http.jsonp(url).then(function(result){
34 var res = JSON.parse(JSON.parse(result.body));
35 console.log(res.message);
36 });
37 }
38 })
39 </script>
40 </html>