{"id":5966,"date":"2024-04-17T23:12:30","date_gmt":"2024-04-17T15:12:30","guid":{"rendered":"http:\/\/zyg.luchers.cn\/?p=5966"},"modified":"2024-04-17T23:12:30","modified_gmt":"2024-04-17T15:12:30","slug":"%e7%ac%ac%e5%9b%9b%e7%ab%a0%e3%80%81vue%e4%b8%ad%e7%9a%84ajax%ef%bc%88%e8%a7%a3%e5%86%b3ajax%e8%b7%a8%e5%9f%9f%e9%97%ae%e9%a2%98%e3%80%81vue-resource%e3%80%81slot%e6%8f%92%e6%a7%bd%ef%bc%89","status":"publish","type":"post","link":"http:\/\/zyg.luchers.cn\/index.php\/2024\/04\/17\/%e7%ac%ac%e5%9b%9b%e7%ab%a0%e3%80%81vue%e4%b8%ad%e7%9a%84ajax%ef%bc%88%e8%a7%a3%e5%86%b3ajax%e8%b7%a8%e5%9f%9f%e9%97%ae%e9%a2%98%e3%80%81vue-resource%e3%80%81slot%e6%8f%92%e6%a7%bd%ef%bc%89\/","title":{"rendered":"\u7b2c\u56db\u7ae0\u3001Vue\u4e2d\u7684AJAX\uff08\u89e3\u51b3Ajax\u8de8\u57df\u95ee\u9898\u3001vue-resource\u3001slot\u63d2\u69fd\uff09"},"content":{"rendered":"

\u7b2c\u56db\u7ae0\u3001Vue\u4e2d\u7684AJAX<\/h1>\n

1\u3001\u4f7f\u7528vue\u811a\u624b\u67b6\u89e3\u51b3ajax\u8de8\u57df\u95ee\u9898\uff08\u914d\u7f6e\u4ee3\u7406\uff09<\/h2>\n

1\u3001\u65b9\u6cd5\u4e00<\/h3>\n

1\u3001\u5728vue\u4e2d\u7684vue.config.js\u6587\u4ef6\u914d\u7f6e\u5982\u4e0b<\/h4>\n
devServer:{\n  proxy:"http:\/\/localhost:5000"\/\/\u4ee3\u7406\u670d\u52a1\u5668\n}<\/code><\/pre>\n
2\u3001\u6ce8\u610f<\/h4>\n
1\u3001\u4f18\u70b9<\/h5>\n
1\u3001\u914d\u7f6e\u7b80\u5355\uff0c\u8bf7\u6c42\u8d44\u6e90\u65f6\u76f4\u63a5\u53d1\u7ed9\u524d\u7aef\uff088080\uff09\u5373\u53ef\u3002<\/p>\n
2\u3001\u7f3a\u70b9<\/h5>\n
1\u3001\u4e0d\u80fd\u914d\u7f6e\u591a\u4e2a\u4ee3\u7406\uff0c\u4e0d\u80fd\u7075\u6d3b\u7684\u63a7\u5236\u8bf7\u6c42\u662f\u5426\u8d70\u4ee3\u7406\u3002<\/p>\n
3\u3001\u5de5\u4f5c\u65b9\u5f0f<\/h5>\n
1\u3001\u5de5\u4f5c\u65b9\u5f0f\uff1a\u82e5\u6309\u7167\u4e0a\u8ff0\u914d\u7f6e\u4ee3\u7406\uff0c\u5f53\u8bf7\u6c42\u4e86\u524d\u7aef\u4e0d\u5b58\u5728\u7684\u8d44\u6e90\u65f6\uff0c\u90a3\u4e48\u8be5\u8bf7\u6c42\u4f1a\u8f6c\u53d1\u7ed9\u670d\u52a1\u5668 \uff08\u4f18\u5148\u5339\u914d\u524d\u7aef\u8d44\u6e90\uff09<\/p>\n
3\u3001\u4f8b\u5b50<\/h5>\n
const { defineConfig } = require('@vue\/cli-service')\nmodule.exports = defineConfig({\n  transpileDependencies: true,\n  \u65b9\u5f0f\u4e00\n  \/\/ \u5f00\u542f\u4ee3\u7406\u670d\u52a1\u5668\n  devServer:{\n    \/\/ \u628a\u8bf7\u6c42\u8f6c\u53d1\u7684\u4e1c\u897f\n    proxy:'http:\/\/localhost:5000'\n  }\n\n})<\/code><\/pre>\n
2\u3001\u65b9\u6cd5\u4e8c<\/h3>\n
1\u3001\u5728vue\u4e2d\u7684vue.config.js\u6587\u4ef6\u914d\u7f6e\u5982\u4e0b<\/h4>\n
module.exports = {\n    devServer: {\n      proxy: {\n      '\/api1': {\/\/ \u5339\u914d\u6240\u6709\u4ee5 '\/api1'\u5f00\u5934\u7684\u8bf7\u6c42\u8def\u5f84\n        target: 'http:\/\/localhost:5000',\/\/ \u4ee3\u7406\u76ee\u6807\u7684\u57fa\u7840\u8def\u5f84\n        changeOrigin: true,\n        pathRewrite: {'^\/api1': ''}\n      },\n      '\/api2': {\/\/ \u5339\u914d\u6240\u6709\u4ee5 '\/api2'\u5f00\u5934\u7684\u8bf7\u6c42\u8def\u5f84\n        target: 'http:\/\/localhost:5001',\/\/ \u4ee3\u7406\u76ee\u6807\u7684\u57fa\u7840\u8def\u5f84\n        changeOrigin: true,\n        pathRewrite: {'^\/api2': ''}\n      }\n    }\n  }\n}\n\/*\n   changeOrigin\u8bbe\u7f6e\u4e3atrue\u65f6\uff0c\u670d\u52a1\u5668\u6536\u5230\u7684\u8bf7\u6c42\u5934\u4e2d\u7684host\u4e3a\uff1alocalhost:5000\n   changeOrigin\u8bbe\u7f6e\u4e3afalse\u65f6\uff0c\u670d\u52a1\u5668\u6536\u5230\u7684\u8bf7\u6c42\u5934\u4e2d\u7684host\u4e3a\uff1alocalhost:8080\n   changeOrigin\u9ed8\u8ba4\u503c\u4e3atrue\n*\/<\/code><\/pre>\n
2\u3001\u6ce8\u610f<\/h4>\n
1\u3001\u4f18\u70b9<\/h5>\n
1\u3001\u53ef\u4ee5\u914d\u7f6e\u591a\u4e2a\u4ee3\u7406\uff0c\u4e14\u53ef\u4ee5\u7075\u6d3b\u7684\u63a7\u5236\u8bf7\u6c42\u662f\u5426\u8d70\u4ee3\u7406\u3002<\/p>\n
2\u3001\u7f3a\u70b9<\/h5>\n
1\u3001\u914d\u7f6e\u7565\u5fae\u7e41\u7410\uff0c\u8bf7\u6c42\u8d44\u6e90\u65f6\u5fc5\u987b\u52a0\u524d\u7f00\u3002<\/p>\n
3\u3001\u4f8b\u5b50<\/h4>\n
const { defineConfig } = require('@vue\/cli-service')\nmodule.exports = defineConfig({\n  transpileDependencies: true,\n  devServer:{\n    proxy:{\n      \/\/ api\u662f\u8bf7\u6c42\u524d\u7f00\n      '\/atguigu':{\n        target:'http:\/\/localhost:5000',\n        pathRewrite:{'^\/atguigu':''},\n        \/\/ \u7528\u6765\u652f\u6301websocket\n        ws:true,\n        \/\/ \u7406\u89e3\uff1a\u4e3atrue\uff0c\u5c31\u548c\u8d44\u6e90\u670d\u52a1\u5668\u6492\u8c0e \uff0c\u4e3afalse\uff0c\u5c31\u548c\u8d44\u6e90\u670d\u52a1\u5668\u5b9e\u8bdd\u5b9e\u8bf4\u4e3a8080\n        \/\/ \u7528\u4e8e\u63a7\u5236\u8bf7\u6c42\u5934\u4e2d\u7684host\u7684\u503c\n        changeOrigin:true\n      },\n      '\/demo':{\n        target:'http:\/\/localhost:5001',\n        pathRewrite:{'^\/demo':''},\n        \/\/ \u7528\u6765\u652f\u6301websocket\n        ws:true,\n        \/\/ \u7406\u89e3\uff1a\u4e3atrue\uff0c\u5c31\u548c\u8d44\u6e90\u670d\u52a1\u5668\u6492\u8c0e \uff0c\u4e3afalse\uff0c\u5c31\u548c\u8d44\u6e90\u670d\u52a1\u5668\u5b9e\u8bdd\u5b9e\u8bf4\u4e3a8080\n        \/\/ \u7528\u4e8e\u63a7\u5236\u8bf7\u6c42\u5934\u4e2d\u7684host\u7684\u503c\n        changeOrigin:true\n      },\n    \/\/ '\/foo':{\n    \/\/   target:'<orther_url>'\n    \/\/ }\n    }\n  }\n\n})\n<\/code><\/pre>\n
3\u3001\u4f8b\u5b50\u4e2d\u7684App\u662f<\/h3>\n
<template>\n  <div id="app">\n    <button @click="getStudents()">\u83b7\u53d6\u5b66\u751f\u4fe1\u606f<\/button>\n    <button @click="getCars()">\u83b7\u53d6\u6c7d\u8f66\u4fe1\u606f<\/button>\n  <\/div>\n<\/template>\n<script>\n  import axios from 'axios'\n  export default {\n  name: 'App',\n  methods:{\n    getStudents(){\n      axios.get('http:\/\/localhost:8080\/atguigu\/students').then(\n        response =>{\n          console.log('\u8bf7\u6c42\u6210\u529f\u4e86',response.data)\n        },\n        error =>{\n          console.log('\u8bf7\u6c42\u5931\u8d25\u4e86',error.message)\n        }\n      )\n    },\n    getCars(){\n      axios.get('http:\/\/localhost:8080\/demo\/cars').then(\n        response =>{\n          console.log('\u8bf7\u6c42\u6210\u529f\u4e86',response.data)\n        },\n        error =>{\n          console.log('\u8bf7\u6c42\u5931\u8d25\u4e86',error.message)\n        }\n      )\n    }\n  }\n\n}\n<\/script><\/code><\/pre>\n
2\u3001vue-resource<\/h2>\n
1\u3001\u8fd9\u662f\u4e00\u4e2avue \u7684\u63d2\u4ef6\u5e93\uff0c\u4e14\u5728vue1.x\u4f7f\u7528\u5e7f\u6cdb\uff0c\u5b98\u65b9\u4e0d\u518d\u7ef4\u62a4<\/p>\n
3\u3001slot\u63d2\u69fd<\/h2>\n
1\u3001\u573a\u666f<\/h3>\n
\"image-20231123224424216\"<\/div><\/p>\n
2\u3001\u6982\u4f5c\u7528<\/h3>\n
1\u3001\u4f5c\u7528\uff1a\u8ba9\u7236\u7ec4\u4ef6\u53ef\u4ee5\u5411\u5b50\u7ec4\u4ef6\u6307\u5b9a\u4f4d\u7f6e\u63d2\u5165html\u7ed3\u6784\uff0c\u4e5f\u662f\u4e00\u79cd\u7ec4\u4ef6\u95f4\u901a\u4fe1\u7684\u65b9\u5f0f\uff0c\u9002\u7528\u4e8e \u7236\u7ec4\u4ef6 ===> \u5b50\u7ec4\u4ef6<\/strong> \u3002<\/p>\n
2\u3001\u5206\u7c7b\uff1a\u9ed8\u8ba4\u63d2\u69fd\u3001\u5177\u540d\u63d2\u69fd\u3001\u4f5c\u7528\u57df\u63d2\u69fd<\/p>\n
3\u3001\u4f7f\u7528\u65b9\u5f0f<\/h3>\n
1\u3001\u9ed8\u8ba4\u63d2\u69fd<\/h4>\n
\u7236\u7ec4\u4ef6\u4e2d\uff1a\n        <Category>\n           <div>html\u7ed3\u67841<\/div>\n        <\/Category>\n\u5b50\u7ec4\u4ef6\u4e2d\uff1a\n        <template>\n            <div>\n               <!-- \u5b9a\u4e49\u63d2\u69fd -->\n               <slot>\u63d2\u69fd\u9ed8\u8ba4\u5185\u5bb9...<\/slot>\n            <\/div>\n        <\/template><\/code><\/pre>\n
2\u3001\u5177\u540d\u63d2\u69fd<\/h4>\n
\u7236\u7ec4\u4ef6\u4e2d\uff1a\n        <Category>\n            <template slot="center">\n              <div>html\u7ed3\u67841<\/div>\n            <\/template>\n\n            <template v-slot:footer>\n               <div>html\u7ed3\u67842<\/div>\n            <\/template>\n        <\/Category>\n\u5b50\u7ec4\u4ef6\u4e2d\uff1a\n        <template>\n            <div>\n               <!-- \u5b9a\u4e49\u63d2\u69fd -->\n               <slot name="center">\u63d2\u69fd\u9ed8\u8ba4\u5185\u5bb9...<\/slot>\n               <slot name="footer">\u63d2\u69fd\u9ed8\u8ba4\u5185\u5bb9...<\/slot>\n            <\/div>\n        <\/template><\/code><\/pre>\n
3\u3001\u4f5c\u7528\u57df\u63d2\u69fd<\/h4>\n
1\u3001\u7406\u89e3\uff1a\u6570\u636e\u5728\u7ec4\u4ef6\u7684\u81ea\u8eab\uff0c\u4f46\u6839\u636e\u6570\u636e\u751f\u6210\u7684\u7ed3\u6784\u9700\u8981\u7ec4\u4ef6\u7684\u4f7f\u7528\u8005\u6765\u51b3\u5b9a\u3002<\/span>\uff08games\u6570\u636e\u5728Category\u7ec4\u4ef6\u4e2d\uff0c\u4f46\u4f7f\u7528\u6570\u636e\u6240\u904d\u5386\u51fa\u6765\u7684\u7ed3\u6784\u7531App\u7ec4\u4ef6\u51b3\u5b9a\uff09<\/p>\n
2\u3001\u4e2a\u4eba\u7406\u89e3\uff1a\u5c31\u662f\u8bf4\u4f60\u5728\u63d2\u4ef6\u5b9a\u4e49\u7684\u7ed3\u6784\u5728\u7236\u7ec4\u4ef6\u90a3\u91cc\uff0c\u4f46\u662f\u63d2\u4ef6\u7684\u4f7f\u7528\u3001\u6570\u636e\u5728\u5b50\u7ec4\u4ef6\u90a3\u91cc\uff0c\u6240\u4ee5\u9700\u8981\u8c03\u7528slot\u4e2d\u5c31\u628a\u9700\u8981\u7684\u6570\u636e\u4f20\u7ed9\u7236\u7ec4\u4ef6\u4e2d\u7ed3\u6784\u91cc\uff0c\u90a3\u91cc\u6709\u6570\u636e\uff0c\u4e5f\u65b9\u4fbf\u5b9a\u4e49\u63d2\u4ef6\u7684\u683c\u5f0f\u3002<\/p>\n
3\u3001\u683c\u5f0f<\/p>\n
\u7236\u7ec4\u4ef6\u4e2d\uff1a\n        <Category>\n            <template scope="scopeData">\n                <!-- \u751f\u6210\u7684\u662ful\u5217\u8868 -->\n                <ul>\n                    <li v-for="g in scopeData.games" :key="g">{{g}}<\/li>\n                <\/ul>\n            <\/template>\n        <\/Category>\n\n        <Category>\n            <template slot-scope="scopeData">\n                <!-- \u751f\u6210\u7684\u662fh4\u6807\u9898 -->\n                <h4 v-for="g in scopeData.games" :key="g">{{g}}<\/h4>\n            <\/template>\n        <\/Category>\n\u5b50\u7ec4\u4ef6\u4e2d\uff1a\n        <template>\n            <div>\n                <slot :games="games"><\/slot>\n            <\/div>\n        <\/template>\n\n        <script>\n            export default {\n                name:'Category',\n                props:['title'],\n                \/\/\u6570\u636e\u5728\u5b50\u7ec4\u4ef6\u81ea\u8eab\n                data() {\n                    return {\n                        games:['\u7ea2\u8272\u8b66\u6212','\u7a7f\u8d8a\u706b\u7ebf','\u52b2\u821e\u56e2','\u8d85\u7ea7\u739b\u4e3d']\n                    }\n                },\n            }\n        <\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u7b2c\u56db\u7ae0\u3001Vue\u4e2d\u7684AJAX 1\u3001\u4f7f\u7528vue\u811a\u624b\u67b6\u89e3\u51b3ajax\u8de8\u57df\u95ee\u9898\uff08\u914d\u7f6e\u4ee3\u7406\uff09 1\u3001\u65b9\u6cd5\u4e00 1\u3001\u5728vue\u4e2d\u7684 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46],"tags":[],"class_list":["post-5966","post","type-post","status-publish","format-standard","hentry","category-vue"],"_links":{"self":[{"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/posts\/5966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/comments?post=5966"}],"version-history":[{"count":1,"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/posts\/5966\/revisions"}],"predecessor-version":[{"id":5967,"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/posts\/5966\/revisions\/5967"}],"wp:attachment":[{"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/media?parent=5966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/categories?post=5966"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/tags?post=5966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}