{"id":29291,"date":"2024-11-25T14:06:17","date_gmt":"2024-11-25T06:06:17","guid":{"rendered":"https:\/\/fwq.ai\/blog\/29291\/"},"modified":"2024-11-25T14:06:17","modified_gmt":"2024-11-25T06:06:17","slug":"%e4%bd%bf%e7%94%a8require-jsvue%e5%bc%80%e5%8f%91%e5%be%ae%e4%bf%a1%e4%b8%8a%e4%bc%a0%e5%9b%be%e7%89%87%e7%bb%84%e4%bb%b6%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/29291\/","title":{"rendered":"\u4f7f\u7528require.js+vue\u5f00\u53d1\u5fae\u4fe1\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6\u65b9\u6cd5"},"content":{"rendered":"

\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4e3a\u5927\u5bb6\u8be6\u7ec6\u4ecb\u7ecd\u4e86require.js+vue+vue-router+vue-resource\u5f00\u53d1\u5fae\u4fe1\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6,\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u4eec\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b<\/p>\n

\u7531\u4e8e\u9879\u76ee\u662fthinkPHP\u505a\u540e\u7aef\u6846\u67b6\uff0c\u4e00\u76f4\u4ee5\u6765\u90fd\u662f\u591a\u9875\u9762\u7684\u540e\u7aef\u8def\u7531\uff0c\u60f3\u4f7f\u7528\u706b\u70ed\u7684webpack\u6709\u70b9\u65e0\u4ece\u4e0b\u624b\uff08\u539f\u8c05\u6211\u592a\u83dc\uff0c\u800c\u4e14\u63a8\u5e7fvue\u53ea\u6709\u6211\u4e00\u4e2a\u4eba\u2026\u2026\uff09\uff0c\u6ca1\u529e\u6cd5\uff0c\u60f3\u628avue\u7528\u8d77\u6765\uff0c\u552f\u6709\u5728\u539f\u6765\u7684\u57fa\u7840\u4e0a\u6539\u8fdb\u3002\u4f7f\u7528webpack\u7684\u5de8\u5927\u597d\u5904\u5c31\u662f\u53ef\u4ee5\u4f7f\u7528 .vue \u8fd9\u6837\u7684\u5355\u6587\u4ef6\u6765\u5199vue\u7ec4\u4ef6\uff0c\u8fd9\u6837\u6bcf\u4e00\u4e2a\u7ec4\u4ef6\u5c31\u662f\u4e00\u4e2a .vue \u6587\u4ef6\uff0c\u54ea\u91cc\u7528\u4e0a\u8fd9\u4e2a\u7ec4\u4ef6\u5c31\u5f15\u5165\u8fdb\u6765\uff0c\u7ef4\u62a4\u8d77\u6765\u786e\u5b9e\u5f88\u723d\u3002\u7136\u800c\u4e00\u76f4\u4ee5\u6765\u9879\u76ee\u7528\u7684\u90fd\u662frequire.js\uff0c\u90a3\u53c8\u60f3\u4ee5\u8fd9\u6837\u7684\u5f62\u5f0f\u6765\u7ec4\u7ec7vue\u7ec4\u4ef6\uff0c\u8fd8\u8981\u52a0\u4e0avue-router\u548cvue-resource\uff0c\u600e\u4e48\u7834\uff1f\u8fd9\u7bc7\u6587\u7ae0\u4ee5\u5f00\u53d1\u5fae\u4fe1\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6\u4e3a\u4f8b\u5b50\u5c0f\u7ed3\u4e00\u4e0brequire.js+vue+vue-router+vue-resource\u7684\u5f00\u53d1\u6d41\u7a0b\u3002<\/p>\n

\u7528require.js\u7ec4\u7ec7\u4f60\u7684\u7ec4\u4ef6
\u6211\u4eec\u4f1a\u6709\u4e00\u4e2acomponents\u76ee\u5f55\u53bb\u653e\u6211\u4eec\u7684\u5404\u4e2a\u7ec4\u4ef6\uff0c\u6bcf\u4e2a\u7ec4\u4ef6\u6709\u7528\u81ea\u5df1\u540d\u5b57\u547d\u540d\u7684\u6587\u4ef6\u5939\uff0c\u6bd4\u5982\u8fd9\u6b21\u7684\u4f8b\u5b50album\u7ec4\u4ef6\uff0c\u91cc\u9762\u5c31\u653e\u7740\u8fd9\u4e2a\u7ec4\u4ef6\u7684html\u3001js\u3001css\uff0c\u5177\u4f53\u600e\u6837\u7528require.js\u53bb\u52a0\u8f7dhtml\u548ccss\uff0c\u5927\u5bb6\u767e\u5ea6\u4e00\u4e0b\u628a\u76f8\u5173\u63d2\u4ef6\u4e0b\u8f7d\u4e0b\u6765\u5373\u53ef\u3002\u4e8e\u662f\u8be5\u7ec4\u4ef6\u7684js\u4e2d\u5c31\u53ef\u4ee5\u5728define\u91cc\u628a\u76f8\u5173\u7684\u4f9d\u8d56\u90fd\u52a0\u8f7d\u8fdb\u53bb\uff0c\u6700\u540e\u628a\u7ec4\u4ef6return\u51fa\u53bb\uff0c\u522b\u7684\u7ec4\u4ef6\u4e5f\u53ef\u4ee5\u901a\u8fc7define\u52a0\u8f7d\u8fd9\u4e2a\u7ec4\u4ef6\uff0c\u8fd9\u4e5f\u8fbe\u5230\u4e86\u6a21\u5757\u5316\u7ba1\u7406\u7ec4\u4ef6\u7684\u76ee\u7684\u4e86\u3002 <\/p>\n

\"\u4f7f\u7528require.js+vue\u5f00\u53d1\u5fae\u4fe1\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6\u65b9\u6cd5\u63d2\u56fe\"<\/p>\n

\u8fd9\u91cc\u7684\u8bdd\uff0c\u6211\u603b\u7ed3\u4e86\u4e00\u4e2a\u4f7f\u7528require.js\u5199vue\u7ec4\u4ef6\u7684\u6a21\u677f\uff0c\u4f7f\u7528WebStorm\u628a\u8fd9\u4e2a\u6a21\u677f\u52a0\u4e0a\u53bb\uff0c\u6bcf\u6b21\u5199\u7ec4\u4ef6\u7684\u65f6\u5019\u6253\u51e0\u4e2a\u5b57\u5c31\u628a\u6a21\u677f\u751f\u6210\u51fa\u6765\uff0c\u4e0d\u8981\u592a\u723d\u554a\uff01\uff08componentName\u662f\u6a21\u677f\u7684\u53d8\u91cf\uff0c\u6a21\u677f\u751f\u6210\u51fa\u6765\u4f60\u586b\u4e0a\u4f60\u7684\u7ec4\u4ef6\u540d\u5b57\u5c31\u53ef\u4ee5\uff09<\/p>\n

<\/p>\n

define([\"vue\",\"text!..\/js\/lib\/components\/$componentName$\/index.html\",\"css!..\/js\/lib\/components\/$componentName$\/index.css\"],function (Vue,Template) {\r\n \/\/ \u8fd9\u91cc\u662f\u6a21\u5757\u7684\u4ee3\u7801\r\n var $componentName$ = Vue.extend({\r\n  template : Template,\r\n  props : [],\r\n  data : function() {\r\n   return {\r\n\r\n   }\r\n  },\r\n  \/\/ \u5728\u7f16\u8bd1\u7ed3\u675f\u548c $el \u7b2c\u4e00\u6b21\u63d2\u5165\u6587\u6863\u4e4b\u540e\u8c03\u7528\r\n  ready : function() {\r\n\r\n  },\r\n  \/\/ \u5728\u5f00\u59cb\u9500\u6bc1\u5b9e\u4f8b\u65f6\u8c03\u7528\u3002\u6b64\u65f6\u5b9e\u4f8b\u4ecd\u7136\u6709\u529f\u80fd\u3002\r\n  beforeDestroy : function() {\r\n\r\n  },\r\n  methods : {\r\n\r\n  },\r\n  events : {\r\n\r\n  }\r\n });\r\n return $componentName$;\r\n});<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u603b\u4f53\u9884\u89c8\u8fd9\u4e2a\u4f8b\u5b50
<\/strong>\u4e3a\u4e86\u6f14\u793a\u5b8c\u6574\u7684\u6d41\u7a0b\uff0c\u6211\u628a\u8fd9\u4e2a\u4f8b\u5b50\u505a\u6210\u4e00\u4e2a\u5c0f\u5355\u9875\u53ebshow-album\uff0c\u5c31\u4e24\u4e2a\u9875\u9762\uff1a 
1.\u4e3b\u9875\u53ebmain-page <\/p>\n
\u7acb\u5373\u5b66\u4e60<\/span>\u201c\u201d\uff1b<\/p>\n
\"\u4f7f\u7528require.js+vue\u5f00\u53d1\u5fae\u4fe1\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6\u65b9\u6cd5\u63d2\u56fe1\"<\/p>\n
2.\u8be6\u60c5\u9875\u53ebdetail-page <\/p>\n
\"\u4f7f\u7528require.js+vue\u5f00\u53d1\u5fae\u4fe1\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6\u65b9\u6cd5\u63d2\u56fe2\"<\/p>\n
\u8be6\u60c5\u9875\u91cc\u7684\u529f\u80fd\u6709\uff1a<\/p>\n
\u63a5\u6536\u7236\u7ec4\u4ef6\u4f20\u8fc7\u6765\u7684\u53c2\u6570\u8fdb\u884c\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6\u7684\u521d\u59cb\u5316
\u70b9\u51fb\u6bcf\u5f20\u56fe\u7247\u53f3\u4e0a\u89d2\u7684\u53c9\u53c9\u53ef\u4ee5\u5220\u9664\u56fe\u7247
\u70b9\u51fb\u6700\u540e\u90a3\u4e2a\u5c0f\u76f8\u673a\u56fe\u6848\u8c03\u7528\u5fae\u4fe1\u201d\u4ece\u624b\u673a\u76f8\u518c\u4e2d\u9009\u56fe\u63a5\u53e3\u201d\uff0c\u7528\u6237\u53ef\u4ee5\u5728\u81ea\u5df1\u624b\u673a\u4e0a\u9009\u56fe
\u9009\u5b8c\u56fe\u7247\u540e\uff0c\u56fe\u7247\u6309\u6bd4\u4f8b\u8c03\u6574\u5c3a\u5bf8\u53d8\u6210\u5982\u56fe\u6240\u793a\u90a3\u6837\u7684\u7f29\u7565\u56fe
\u70b9\u51fb\u76f8\u5e94\u7684\u56fe\u7247\u8c03\u7528\u5fae\u4fe1\u201c\u9884\u89c8\u56fe\u7247\u63a5\u53e3\u201d\u8fdb\u884c\u56fe\u7247\u9884\u89c8
\u5f53\u56fe\u7247\u7b49\u4e8e\u6700\u5927\u56fe\u7247\u6570\u65f6\uff0c\u6700\u540e\u90a3\u4e2a\u5c0f\u76f8\u673a\u56fe\u6848\u6d88\u5931
\u66b4\u9732\u51fa\u4e24\u4e2a\u65b9\u6cd5\u4f9b\u522b\u7684\u7ec4\u4ef6\u8c03\u7528\u2460\u4e0a\u4f20\u56fe\u7247\u65b9\u6cd5\uff08\u4e0a\u4f20\u5230\u5fae\u4fe1\u670d\u52a1\u5668\u5e76\u6267\u884c\u4e0a\u4f20\u6210\u529f\u540e\u7684\u56de\u8c03\uff09uploadImage \u2461\u83b7\u53d6\u6240\u6709\u56fe\u7247\u4fe1\u606f\u65b9\u6cd5\uff0c\u5305\u62ec\u521d\u59cb\u5316\u76f8\u518c\u3001\u5220\u9664\u8fc7\u7684\u3001\u65b0\u589e\u7684\u56fe\u7247\u4fe1\u606fgetAllImgInfo<\/p>\n
OK\uff0c\u4ecb\u7ecd\u5b8c\u6bd5\uff0c\u73b0\u5728\u6b63\u5f0f\u5f00\u59cb\uff01<\/p>\n
\u4e00.\u4f7f\u7528vue-router\u505a\u8def\u7531\uff0c\u642d\u5efashow-album.js
<\/strong>\u6574\u4e2a\u529f\u80fd\u53ebshow-album\uff0c\u6240\u4ee5\u8fd9\u4e2a\u529f\u80fd\u7684js\u6211\u4eec\u5c31\u6539\u540d\u4e3ashow-album.js\uff0c\u8fd9\u4e2ajs\u7684\u7ed3\u6784\u662f\u8fd9\u6837\uff1a<\/p>\n
define([\"vue\",\"vueResource\",\"vueRouter\",\"vAlbum\"],function (Vue,VueResource,VueRouter,Album) {\r\n  \/\/ \u5b89\u88c5\u8d44\u6e90\u6a21\u5757\r\n  Vue.use(VueResource);\r\n  \/\/ \u5b89\u88c5\u8def\u7531\u6a21\u5757\r\n  Vue.use(VueRouter);\r\n  \/\/ jquery\u5728\u6267\u884cpost\u8bf7\u6c42\u65f6\uff0c\u4f1a\u8bbe\u7f6eContent-Type\u4e3aapplication\/x-www-form-urlencoded\uff0c\r\n  \/\/ \u6240\u4ee5\u670d\u52a1\u5668\u80fd\u591f\u6b63\u786e\u89e3\u6790\uff0c\u800c\u4f7f\u7528\u539f\u751fajax\u8bf7\u6c42\u65f6\uff0c\u5982\u679c\u4e0d\u663e\u793a\u7684\u8bbe\u7f6eContent-Type\uff0c\u90a3\u4e48\u9ed8\u8ba4\u662ftext\/plain\uff0c\r\n  \/\/ \u8fd9\u65f6\u670d\u52a1\u5668\u5c31\u4e0d\u77e5\u9053\u600e\u4e48\u89e3\u6790\u6570\u636e\u4e86\uff0c\u6240\u4ee5\u624d\u53ea\u80fd\u901a\u8fc7\u83b7\u53d6\u539f\u59cb\u6570\u636e\u6d41\u7684\u65b9\u5f0f\u6765\u8fdb\u884c\u89e3\u6790\u8bf7\u6c42\u6570\u636e\u3002\r\n  \/\/ \u7531\u4e8evue\u662f\u4f7f\u7528\u539f\u751fPOST\uff0c\u6240\u4ee5\u8981\u8bbe\u7f6e\u4e00\u4e0b\u670d\u52a1\u5668\u624d\u80fd\u6b63\u786e\u89e3\u91caPOST\u8fc7\u53bb\u7684\u6570\u636e\r\n  Vue.http.options.emulateJSON = true;\r\n  \/\/\u5b9a\u4e49mainPage\u9875\u9762\r\n  var mainPage = Vue.extend({\r\n   template : \"#main-page-temp\"\r\n  })\r\n  \/\/\u5b9a\u4e49detailPage\u9875\u9762\r\n  var detailPage = Vue.extend({\r\n   template : \"#detail-page-temp\",\r\n   components : {\r\n    'album' : Album\r\n   }\r\n  })\r\n  \/\/ \u6839\u7ec4\u4ef6\r\n  var showAlbum = Vue.extend({\r\n   components : {\r\n    'main-page' : mainPage,\r\n    'detail-page' : detailPage\r\n   }\r\n  })\r\n  \/\/ \u5b9e\u4f8b\u5316\u8def\u7531\r\n  var router = new VueRouter();\r\n  \/\/ \u914d\u7f6e\u8def\u7531\r\n  router.map({\r\n   '\/main-page' : {\r\n    name : 'mainPage',\r\n    component: mainPage\r\n   },\r\n   \/\/\u8fd9\u91cc\u4f7f\u7528\u8def\u7531\u7684\u52a8\u6001\u7247\u6bb5\r\n   '\/detail-page\/:inspection_id\/:image_type' : {\r\n    name : 'detailPage',\r\n    component : detailPage\r\n   }\r\n  });\r\n  router.redirect({\r\n   \/\/ \u91cd\u5b9a\u5411\u4efb\u610f\u672a\u5339\u914d\u8def\u5f84\u5230 \/home\r\n   '*': '\/main-page'\r\n  });\r\n  \/\/ \u542f\u52a8\u5e94\u7528\r\n  \/\/ \u8def\u7531\u5668\u4f1a\u521b\u5efa\u4e00\u4e2a\u5b9e\u4f8b\uff0c\u5e76\u4e14\u6302\u8f7d\u5230\u9009\u62e9\u7b26\u5339\u914d\u7684\u5143\u7d20\u4e0a\u3002\r\n  router.start(showAlbum, '#show-album'); \r\n});<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
HTML\u90a3\u8fb9\u5c31\u5f88\u7b80\u5355\u4e86\uff1a<\/p>\n
<template>\r\n <group>\r\n  <cell>\r\n  <\/cell>\r\n <\/group><\/template><template>\r\n  <album><\/album>\r\n  <button>\r\n<\/button><\/template><p>\r\n <!-- \u8def\u7531\u5916\u94fe -->\r\n <router-view><\/router-view><\/p><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u73b0\u5728\u70b9\u51fb\u4e3b\u9875\u4e0a\u7684\u4e00\u6761\u8bb0\u5f55\uff0c\u5c31\u53ef\u4ee5\u8df3\u8f6c\u5230\u8be6\u60c5\u9875\uff0c\u5728\u8be6\u60c5\u9875\u540e\u9000\uff0c\u5c31\u4f1a\u56de\u5230\u4e3b\u9875\u4e86\u3002\u8fd9\u6837\u603b\u4f53\u7ed3\u6784\u5c31\u5b8c\u6210\u4e86\u3002<\/p>\n
\u4e8c.\u5f00\u53d1\u5fae\u4fe1\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6
<\/strong><\/p>\n
\u5177\u4f53\u7684\u4ee3\u7801\u5c31\u4e0d\u7f57\u5217\u51fa\u6765\u4e86\uff0c\u6211\u4eec\u5c31\u6309\u7167\u4e0a\u9762\u7684\u7ec4\u4ef6\u529f\u80fd\u6e05\u5355\uff0c\u8bf4\u8bf4\u6bcf\u4e2a\u529f\u80fd\u600e\u6837\u5b8c\u6210<\/p>\n
1.\u63a5\u6536\u7236\u7ec4\u4ef6\u4f20\u8fc7\u6765\u7684\u53c2\u6570\u8fdb\u884c\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6\u7684\u521d\u59cb\u5316 
\u9996\u5148\uff0c\u5b50\u7ec4\u4ef6\u4e2d\u8bbe\u7f6e\u597dprops<\/p>\n
<\/p>\n
props : {\r\n \/\/\u521d\u59cb\u5316\u6709\u65e0\u7167\u7247\r\n imgSrcs : {\r\n  type : Array,\r\n  default : []\r\n },\r\n \/\/\u662f\u5426\u53ef\u7f16\u8f91 \u9ed8\u8ba4true\r\n canEdit : {\r\n  type : Boolean,\r\n  default : true\r\n },\r\n \/\/\u6700\u5927\u4e0a\u4f20\u6570 \u9ed8\u8ba49\r\n maxNum : {\r\n  type : Number,\r\n  default : 9\r\n },\r\n \/\/\u4e0a\u4f20\u540e\u7684\u56de\u8c03\r\n afterUpload : {\r\n  type : Function\r\n }\r\n}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u7136\u540e\u5728\u7236\u7ec4\u4ef6\u4e2d\u4f7f\u7528\u5b50\u7ec4\u4ef6\u65f6\u628a\u53c2\u6570\u4f20\u8fdb\u53bb\u5373\u53ef<\/p>\n
<\/p>\n
<album :img-srcs=\"initImgSrcs\" :canedit=\"true\" :afterupload=\"afterUploadFunction\"><\/album><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
2.\u70b9\u51fb\u6700\u540e\u90a3\u4e2a\u5c0f\u76f8\u673a\u56fe\u6848\u8c03\u7528\u5fae\u4fe1\u201d\u4ece\u624b\u673a\u76f8\u518c\u4e2d\u9009\u56fe\u63a5\u53e3\u201d\uff0c\u7528\u6237\u53ef\u4ee5\u5728\u81ea\u5df1\u624b\u673a\u4e0a\u9009\u56fe 
\u5728\u5c0f\u76f8\u673a\u56fe\u6848\u7684html\u4e2d\u7ed1\u5b9achooseImage\u65b9\u6cd5@click=\u201dchooseImage\u201d<\/p>\n
<span>\r\n  <img  alt=\"\u4f7f\u7528require.js+vue\u5f00\u53d1\u5fae\u4fe1\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6\u65b9\u6cd5\" >\r\n <\/span><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u7136\u540e\u5728methods\u4e2d\u6dfb\u52a0\u8be5\u65b9\u6cd5\uff0c\u901a\u8fc7wx.chooseImage\u8bf7\u6c42\u5fae\u4fe1\u9009\u62e9\u56fe\u7247\u63a5\u53e3\u3002\u4f7f\u7528\u5fae\u4fe1js-sdk\u524d\u9700\u8981\u914d\u7f6e\uff0c\u6240\u4ee5\u6211\u4eec\u5728\u7ec4\u4ef6\u7684ready\u65f6\u5c31\u8fdb\u884c\u914d\u7f6e\u5373\u53ef\u3002<\/p>\n
ready : function() {\r\n   \/\/\u914d\u7f6e\u5fae\u4fe1JS-SDK\r\n   this.getSignPackage();\r\n  },\r\nmethods : {\r\n chooseImage : function () {\r\n  var _this = this;\r\n  wx.chooseImage({\r\n   count: _this.maxNum - _this.albums.length, \/\/ \u9ed8\u8ba49\r\n   sizeType: ['original', 'compressed'], \/\/ \u53ef\u4ee5\u6307\u5b9a\u662f\u539f\u56fe\u8fd8\u662f\u538b\u7f29\u56fe\uff0c\u9ed8\u8ba4\u4e8c\u8005\u90fd\u6709\r\n   sourceType: ['album', 'camera'], \/\/ \u53ef\u4ee5\u6307\u5b9a\u6765\u6e90\u662f\u76f8\u518c\u8fd8\u662f\u76f8\u673a\uff0c\u9ed8\u8ba4\u4e8c\u8005\u90fd\u6709\r\n   success: function (res) {\r\n    var _localIds = res.localIds;\r\n    \/\/\u8bb0\u5f55\u65b0\u589e\u7167\u7247\u4fe1\u606f\r\n    for (var i = 0,len = _localIds.length;i <p>3.\u9009\u5b8c\u56fe\u7247\u540e\uff0c\u56fe\u7247\u6309\u6bd4\u4f8b\u8c03\u6574\u5c3a\u5bf8\u53d8\u6210\u5982\u56fe\u6240\u793a\u90a3\u6837\u7684\u7f29\u7565\u56fe <br>\u8fd9\u91cc\u8981\u4f7f\u7528\u5230\u56fe\u7247\u9884\u5904\u7406\uff0c\u5373var img = new Image ()\uff1b\u901a\u8fc7\u5b9e\u4f8b\u5316\u4e00\u4e2aImage\u5b9e\u4f8b\u53bb\u83b7\u53d6\u539f\u56fe\u7684\u5c3a\u5bf8\uff0c\u6211\u4eec\u624d\u53ef\u4ee5\u6839\u636e\u8fd9\u4e2a\u539f\u56fe\u5c3a\u5bf8\u53bb\u8ba1\u7b97\u51fa\u76f8\u5e94\u7684\u7b49\u6bd4\u4f8b\u7f29\u7565\u56fe\u3002\u5177\u4f53\u662f\u8fd9\u6837\uff1a<\/p><pre class=\"brush:js;\">var img = new Image();\r\nvar $albumSingle = \"\";\r\n\/\/\u8fd9\u91cc\u7684\u987a\u5e8f\u662f\u5148new Image(),\u7136\u540e\u6267\u884cimg.src,\u5b8c\u4e86\u4e4b\u540e\u56fe\u7247\u624d\u7b97\u88c5\u8f7d\u5b8c\u6210\r\n\/\/\u8fd9\u6837\u6700\u540e\u624d\u4f1a\u8c03\u7528onload\u65b9\u6cd5\r\nimg.onload = function() {\r\n albumsData = {\r\n  localId : imgSrcs[i],\r\n  albumSingleStyle : {height : imgWrapWidth + \"px\"},\r\n  \/\/compressImage\u662f\u538b\u7f29\u56fe\u7247\u7684\u65b9\u6cd5\uff0c\u5c06\u8fd9\u4e2a\u56fe\u7247\u5b9e\u4f8b\u4ee5\u53ca\u56fe\u7247\u7236\u5143\u7d20\u7684\u5bbd\u5ea6\u4f20\u8fdb\u53bb\u6765\u8ba1\u7b97\u3002\r\n  imgElementStyle : _this.compressImage(img,imgWrapWidth)\r\n };\r\n _this.albums.push(albumsData);\r\n};\r\nimg.src = imgSrcs[i];<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u7279\u522b\u6ce8\u610f\u7684\u4e00\u4e2a\u5730\u65b9\uff1a\u7531\u4e8e\u6bcf\u5f20\u56fe\u7247\u7684\u90fd\u6709\u81ea\u5df1\u7684\u5c3a\u5bf8\u6837\u5f0f\uff0c\u6240\u4ee5\u6211\u4eec\u8981\u5728\u7ec4\u4ef6\u7684data\u9009\u9879\u4e2d\u6dfb\u52a0\u4e00\u4e2aalbums\u7684\u6570\u636e\u4f5c\u4e3a\u7167\u7247\u7684\u6570\u636e\u96c6\uff0c\u91cc\u9762\u5305\u542b\u6bcf\u5f20\u7167\u7247\u81ea\u5df1\u7684\u8def\u5f84\u4e0e\u6837\u5f0f\uff0c\u8fd9\u6837\u5faa\u73af\u6e32\u67d3\u6bcf\u5f20\u56fe\u7247\u65f6\uff0c\u624d\u4f1a\u6bcf\u5f20\u56fe\u7247\u5bf9\u5e94\u81ea\u5df1\u7684\u5c5e\u6027\u3002\u8fd8\u6709\u5c31\u662f\uff0c\u56e0\u4e3a\u76f8\u540c\u7684\u56fe\u7247\u53ef\u4ee5\u91cd\u590d\u4e0a\u4f20\uff0c\u6240\u4ee5\u5faa\u73af\u65f6\u8981\u52a0\u4e0atrack-by=\u201d$index\u201d<\/p>\n
\/\/\u6bcf\u5f20\u56fe\u7247\u81ea\u5df1\u7684\u5c5e\u6027\r\nalbumsData = {\r\n localId : imgSrcs[i],\r\n albumSingleStyle : {height : imgWrapWidth + \"px\"},\r\n \/\/compressImage\u662f\u538b\u7f29\u56fe\u7247\u7684\u65b9\u6cd5\uff0c\u5c06\u8fd9\u4e2a\u56fe\u7247\u5b9e\u4f8b\u4ee5\u53ca\u56fe\u7247\u7236\u5143\u7d20\u7684\u5bbd\u5ea6\u4f20\u8fdb\u53bb\u6765\u8ba1\u7b97\u3002\r\n imgElementStyle : _this.compressImage(img,imgWrapWidth)\r\n};\r\n\/\/\u5c06\u6bcf\u5f20\u56fe\u7247\u7684\u5c5e\u6027\u90fd\u653e\u5230albums\u6570\u636e\u96c6\u91cc\r\n_this.albums.push(albumsData);<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
4.\u70b9\u51fb\u76f8\u5e94\u7684\u56fe\u7247\u8c03\u7528\u5fae\u4fe1\u201c\u9884\u89c8\u56fe\u7247\u63a5\u53e3\u201d\u8fdb\u884c\u56fe\u7247\u9884\u89c8
<\/span><\/p>\n
\u5728\u56fe\u7247\u4e2d\u7ed1\u5b9a\u70b9\u51fb\u4e8b\u4ef6\uff0c\u4f20\u5165\u8be5\u56fe\u7247\u7684\u7d22\u5f15\uff0c\u53bb\u89e6\u53d1\u4e00\u4e2a\u65b9\u6cd5\uff1a<\/p>\n
previewImage : function (index) {\r\n var _albums = this.albums;\r\n var urls = this.getLocalIds(_albums);\r\n wx.previewImage({\r\n  current: urls[index], \/\/ \u5f53\u524d\u663e\u793a\u56fe\u7247\u7684http\u94fe\u63a5\r\n  urls: urls   \/\/ \u9700\u8981\u9884\u89c8\u7684\u56fe\u7247http\u94fe\u63a5\u5217\u8868\r\n});<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
5.\u70b9\u51fb\u6bcf\u5f20\u56fe\u7247\u53f3\u4e0a\u89d2\u7684\u53c9\u53c9\u53ef\u4ee5\u5220\u9664\u56fe\u7247 
\u8fd9\u4e2a\u5728\u53c9\u4e0a\u7ed1\u5b9a\u70b9\u51fb\u4e8b\u4ef6\uff0c\u8fd9\u4e2a\u4e8b\u4ef6\u53bb\u5904\u7406\u5220\u9664\u56fe\u7247\u3002<\/p>\n
<\/i><\/span><\/p>\n
deleteImage\u65b9\u6cd5\uff0c\u7531\u4e8e\u8981\u8bb0\u5f55\u4e0b\u7528\u6237\u5220\u9664\u4e86\u54ea\u4e9b\u521d\u59cb\u5316\u7684\u56fe\u7247\uff0c\u6240\u4ee5\u8981\u5728\u5220\u9664\u65f6\u5224\u65ad\u4e00\u4e0b\u8fd9\u5f20\u56fe\u7247\u662f\u4e0d\u662f\u521d\u59cb\u5316\u65f6\u5c31\u6709\u7684\uff1a<\/p>\n
deleteImage : function (index,album) {\r\n \/\/ \u6bd4\u8f83\u8981\u5220\u9664\u7684\u7167\u7247\u662f\u5426\u5728\u521d\u59cb\u5316\u7167\u7247\u91cc\r\n for (var i = 0,len = this.oldImagesCache.length;i <p>6.\u5f53\u56fe\u7247\u7b49\u4e8e\u6700\u5927\u56fe\u7247\u6570\u65f6\uff0c\u6700\u540e\u90a3\u4e2a\u5c0f\u76f8\u673a\u56fe\u6848\u6d88\u5931 <span style=\"color: #800000\">v-if=\u201dalbums.length <\/span><\/p><p>7.\u66b4\u9732\u51fa\u4e24\u4e2a\u65b9\u6cd5\u4f9b\u522b\u7684\u7ec4\u4ef6\u8c03\u7528\u2460\u4e0a\u4f20\u56fe\u7247\u65b9\u6cd5\uff08\u4e0a\u4f20\u5230\u5fae\u4fe1\u670d\u52a1\u5668\u5e76\u6267\u884c\u4e0a\u4f20\u6210\u529f\u540e\u7684\u56de\u8c03\uff09uploadImage \u2461\u83b7\u53d6\u6240\u6709\u56fe\u7247\u4fe1\u606f\u65b9\u6cd5\uff0c\u5305\u62ec\u521d\u59cb\u5316\u76f8\u518c\u3001\u5220\u9664\u8fc7\u7684\u3001\u65b0\u589e\u7684\u56fe\u7247\u4fe1\u606fgetAllImgInfo <br>\u600e\u6837\u66b4\u9732\u65b9\u6cd5\u4f9b\u522b\u7684\u7ec4\u4ef6\u8c03\u7528\uff0c\u8fd9\u662f\u4e2a\u5927\u95ee\u9898\u3002\u6211\u4e5f\u4e0d\u77e5\u9053\u600e\u6837\u505a\u624d\u662f\u6700\u4f73\u5b9e\u8df5\uff0c\u56e0\u4e3a\u505a\u6cd5\u6709\u591a\u79cd\uff0c\u6bd4\u5982\u5b50\u7ec4\u4ef6$dispatch\uff0c\u7136\u540e\u7236\u7ec4\u4ef6\u5728events\u91cc\u63a5\u6536\u4e00\u4e0b\uff0c\u4f46\u8fd9\u6837\u597d\u50cf\u5f88\u9ebb\u70e6\uff0c\u4e8e\u662f\u6211\u9009\u62e9\u4e86\u8fd9\u6837\u505a\uff1a <br>\u5728\u5b50\u7ec4\u4ef6\u4e2d\u4f7f\u7528v-rel:xxx\u6dfb\u52a0\u8be5\u7ec4\u4ef6\u7d22\u5f15<\/p><p><span style=\"color: #800000\"><album v-ref:album :img-srcs=\"initImgSrcs\"><\/album><\/span><\/p><p>\u7136\u540e\u5728\u7236\u7ec4\u4ef6\u91cc\u901a\u8fc7this.$refs.xxx.uploadImage()\u5373\u53ef\u8c03\u7528\u5b50\u7ec4\u4ef6\u66b4\u9732\u51fa\u6765\u7684\u65b9\u6cd5<\/p><p>\u76f8\u5173\u6587\u7ae0\uff1a<\/p><p><a href=\"http:\/\/www.php.cn\/js-tutorial-343979.html\" target=\"_self\">\u5206\u5206\u949f\u5e26\u4f60\u73a9\u8f6cVue.js\u7ec4\u4ef6<\/a><\/p><p><a href=\"http:\/\/www.php.cn\/js-tutorial-357391.html\" target=\"_self\">\u56fe\u6587\u8be6\u89e3Vue.js\u5f00\u53d1\u73af\u5883\u5feb\u901f\u642d\u5efa\u65b9\u6cd5<\/a><\/p><p><a href=\"http:\/\/www.php.cn\/js-tutorial-357403.html\" target=\"_self\">\u4f7f\u7528vue.js\u7f16\u5199\u597d\u73a9\u7684\u62fc\u56fe\u5c0f\u6e38\u620f\u5b9e\u4f8b\u4ee3\u7801<\/a><\/p><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u4f7f\u7528require.js+vue\u5f00\u53d1\u5fae\u4fe1\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6\u65b9\u6cd5\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4e3a\u5927\u5bb6\u8be6\u7ec6\u4ecb\u7ecd\u4e86require.js+vue+vue-router+vue-resource\u5f00\u53d1\u5fae\u4fe1\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6,\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u4eec\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b \u7531\u4e8e\u9879\u76ee\u662fthinkPHP\u505a\u540e\u7aef\u6846\u67b6\uff0c\u4e00\u76f4\u4ee5\u6765\u90fd\u662f\u591a\u9875\u9762\u7684\u540e\u7aef\u8def\u7531\uff0c\u60f3\u4f7f\u7528\u706b\u70ed\u7684webpack\u6709\u70b9\u65e0\u4ece\u4e0b\u624b\uff08\u539f\u8c05\u6211\u592a\u83dc\uff0c\u800c\u4e14\u63a8\u5e7fvue\u53ea\u6709\u6211\u4e00\u4e2a\u4eba\u2026\u2026\uff09\uff0c\u6ca1\u529e\u6cd5\uff0c\u60f3\u628avue\u7528\u8d77\u6765\uff0c\u552f\u6709\u5728\u539f\u6765\u7684\u57fa\u7840\u4e0a\u6539\u8fdb\u3002\u4f7f\u7528webpack\u7684\u5de8\u5927\u597d\u5904\u5c31\u662f\u53ef\u4ee5\u4f7f\u7528 .vue \u8fd9\u6837\u7684\u5355\u6587\u4ef6\u6765\u5199vue\u7ec4\u4ef6\uff0c\u8fd9\u6837\u6bcf\u4e00\u4e2a\u7ec4\u4ef6\u5c31\u662f\u4e00\u4e2a .vue \u6587\u4ef6\uff0c\u54ea\u91cc\u7528\u4e0a\u8fd9\u4e2a\u7ec4\u4ef6\u5c31\u5f15\u5165\u8fdb\u6765\uff0c\u7ef4\u62a4\u8d77\u6765\u786e\u5b9e\u5f88\u723d\u3002\u7136\u800c\u4e00\u76f4\u4ee5\u6765\u9879\u76ee\u7528\u7684\u90fd\u662frequire.js\uff0c\u90a3\u53c8\u60f3\u4ee5\u8fd9\u6837\u7684\u5f62\u5f0f\u6765\u7ec4\u7ec7vue\u7ec4\u4ef6\uff0c\u8fd8\u8981\u52a0\u4e0avue-router\u548cvue-resource\uff0c\u600e\u4e48\u7834\uff1f\u8fd9\u7bc7\u6587\u7ae0\u4ee5\u5f00\u53d1\u5fae\u4fe1\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6\u4e3a\u4f8b\u5b50\u5c0f\u7ed3\u4e00\u4e0brequire.js+vue+vue-router+vue-resource\u7684\u5f00\u53d1\u6d41\u7a0b\u3002 \u7528require.js\u7ec4\u7ec7\u4f60\u7684\u7ec4\u4ef6\u6211\u4eec\u4f1a\u6709\u4e00\u4e2acomponents\u76ee\u5f55\u53bb\u653e\u6211\u4eec\u7684\u5404\u4e2a\u7ec4\u4ef6\uff0c\u6bcf\u4e2a\u7ec4\u4ef6\u6709\u7528\u81ea\u5df1\u540d\u5b57\u547d\u540d\u7684\u6587\u4ef6\u5939\uff0c\u6bd4\u5982\u8fd9\u6b21\u7684\u4f8b\u5b50album\u7ec4\u4ef6\uff0c\u91cc\u9762\u5c31\u653e\u7740\u8fd9\u4e2a\u7ec4\u4ef6\u7684html\u3001js\u3001css\uff0c\u5177\u4f53\u600e\u6837\u7528require.js\u53bb\u52a0\u8f7dhtml\u548ccss\uff0c\u5927\u5bb6\u767e\u5ea6\u4e00\u4e0b\u628a\u76f8\u5173\u63d2\u4ef6\u4e0b\u8f7d\u4e0b\u6765\u5373\u53ef\u3002\u4e8e\u662f\u8be5\u7ec4\u4ef6\u7684js\u4e2d\u5c31\u53ef\u4ee5\u5728define\u91cc\u628a\u76f8\u5173\u7684\u4f9d\u8d56\u90fd\u52a0\u8f7d\u8fdb\u53bb\uff0c\u6700\u540e\u628a\u7ec4\u4ef6return\u51fa\u53bb\uff0c\u522b\u7684\u7ec4\u4ef6\u4e5f\u53ef\u4ee5\u901a\u8fc7define\u52a0\u8f7d\u8fd9\u4e2a\u7ec4\u4ef6\uff0c\u8fd9\u4e5f\u8fbe\u5230\u4e86\u6a21\u5757\u5316\u7ba1\u7406\u7ec4\u4ef6\u7684\u76ee\u7684\u4e86\u3002 \u8fd9\u91cc\u7684\u8bdd\uff0c\u6211\u603b\u7ed3\u4e86\u4e00\u4e2a\u4f7f\u7528require.js\u5199vue\u7ec4\u4ef6\u7684\u6a21\u677f\uff0c\u4f7f\u7528WebStorm\u628a\u8fd9\u4e2a\u6a21\u677f\u52a0\u4e0a\u53bb\uff0c\u6bcf\u6b21\u5199\u7ec4\u4ef6\u7684\u65f6\u5019\u6253\u51e0\u4e2a\u5b57\u5c31\u628a\u6a21\u677f\u751f\u6210\u51fa\u6765\uff0c\u4e0d\u8981\u592a\u723d\u554a\uff01\uff08componentName\u662f\u6a21\u677f\u7684\u53d8\u91cf\uff0c\u6a21\u677f\u751f\u6210\u51fa\u6765\u4f60\u586b\u4e0a\u4f60\u7684\u7ec4\u4ef6\u540d\u5b57\u5c31\u53ef\u4ee5\uff09 define([“vue”,”text!..\/js\/lib\/components\/$componentName$\/index.html”,”css!..\/js\/lib\/components\/$componentName$\/index.css”],function (Vue,Template) {  \/\/ \u8fd9\u91cc\u662f\u6a21\u5757\u7684\u4ee3\u7801  var $componentName$ = Vue.extend({   template : Template,   props : [],   data : function() {    return {    }   },   \/\/ \u5728\u7f16\u8bd1\u7ed3\u675f\u548c $el \u7b2c\u4e00\u6b21\u63d2\u5165\u6587\u6863\u4e4b\u540e\u8c03\u7528   ready : function() {   },   \/\/ \u5728\u5f00\u59cb\u9500\u6bc1\u5b9e\u4f8b\u65f6\u8c03\u7528\u3002\u6b64\u65f6\u5b9e\u4f8b\u4ecd\u7136\u6709\u529f\u80fd\u3002   beforeDestroy : function() {   },   methods : {   },   events : {   }  });  return $componentName$; }); \u767b\u5f55\u540e\u590d\u5236 \u603b\u4f53\u9884\u89c8\u8fd9\u4e2a\u4f8b\u5b50\u4e3a\u4e86\u6f14\u793a\u5b8c\u6574\u7684\u6d41\u7a0b\uff0c\u6211\u628a\u8fd9\u4e2a\u4f8b\u5b50\u505a\u6210\u4e00\u4e2a\u5c0f\u5355\u9875\u53ebshow-album\uff0c\u5c31\u4e24\u4e2a\u9875\u9762\uff1a 1.\u4e3b\u9875\u53ebmain-page \u7acb\u5373\u5b66\u4e60\u201c\u201d\uff1b 2.\u8be6\u60c5\u9875\u53ebdetail-page \u8be6\u60c5\u9875\u91cc\u7684\u529f\u80fd\u6709\uff1a \u63a5\u6536\u7236\u7ec4\u4ef6\u4f20\u8fc7\u6765\u7684\u53c2\u6570\u8fdb\u884c\u4e0a\u4f20\u56fe\u7247\u7ec4\u4ef6\u7684\u521d\u59cb\u5316\u70b9\u51fb\u6bcf\u5f20\u56fe\u7247\u53f3\u4e0a\u89d2\u7684\u53c9\u53c9\u53ef\u4ee5\u5220\u9664\u56fe\u7247\u70b9\u51fb\u6700\u540e\u90a3\u4e2a\u5c0f\u76f8\u673a\u56fe\u6848\u8c03\u7528\u5fae\u4fe1\u201d\u4ece\u624b\u673a\u76f8\u518c\u4e2d\u9009\u56fe\u63a5\u53e3\u201d\uff0c\u7528\u6237\u53ef\u4ee5\u5728\u81ea\u5df1\u624b\u673a\u4e0a\u9009\u56fe\u9009\u5b8c\u56fe\u7247\u540e\uff0c\u56fe\u7247\u6309\u6bd4\u4f8b\u8c03\u6574\u5c3a\u5bf8\u53d8\u6210\u5982\u56fe\u6240\u793a\u90a3\u6837\u7684\u7f29\u7565\u56fe\u70b9\u51fb\u76f8\u5e94\u7684\u56fe\u7247\u8c03\u7528\u5fae\u4fe1\u201c\u9884\u89c8\u56fe\u7247\u63a5\u53e3\u201d\u8fdb\u884c\u56fe\u7247\u9884\u89c8\u5f53\u56fe\u7247\u7b49\u4e8e\u6700\u5927\u56fe\u7247\u6570\u65f6\uff0c\u6700\u540e\u90a3\u4e2a\u5c0f\u76f8\u673a\u56fe\u6848\u6d88\u5931\u66b4\u9732\u51fa\u4e24\u4e2a\u65b9\u6cd5\u4f9b\u522b\u7684\u7ec4\u4ef6\u8c03\u7528\u2460\u4e0a\u4f20\u56fe\u7247\u65b9\u6cd5\uff08\u4e0a\u4f20\u5230\u5fae\u4fe1\u670d\u52a1\u5668\u5e76\u6267\u884c\u4e0a\u4f20\u6210\u529f\u540e\u7684\u56de\u8c03\uff09uploadImage \u2461\u83b7\u53d6\u6240\u6709\u56fe\u7247\u4fe1\u606f\u65b9\u6cd5\uff0c\u5305\u62ec\u521d\u59cb\u5316\u76f8\u518c\u3001\u5220\u9664\u8fc7\u7684\u3001\u65b0\u589e\u7684\u56fe\u7247\u4fe1\u606fgetAllImgInfo OK\uff0c\u4ecb\u7ecd\u5b8c\u6bd5\uff0c\u73b0\u5728\u6b63\u5f0f\u5f00\u59cb\uff01 \u4e00.\u4f7f\u7528vue-router\u505a\u8def\u7531\uff0c\u642d\u5efashow-album.js\u6574\u4e2a\u529f\u80fd\u53ebshow-album\uff0c\u6240\u4ee5\u8fd9\u4e2a\u529f\u80fd\u7684js\u6211\u4eec\u5c31\u6539\u540d\u4e3ashow-album.js\uff0c\u8fd9\u4e2ajs\u7684\u7ed3\u6784\u662f\u8fd9\u6837\uff1a define([“vue”,”vueResource”,”vueRouter”,”vAlbum”],function (Vue,VueResource,VueRouter,Album) {   \/\/ \u5b89\u88c5\u8d44\u6e90\u6a21\u5757   Vue.use(VueResource);   \/\/ \u5b89\u88c5\u8def\u7531\u6a21\u5757   Vue.use(VueRouter);   \/\/ jquery\u5728\u6267\u884cpost\u8bf7\u6c42\u65f6\uff0c\u4f1a\u8bbe\u7f6eContent-Type\u4e3aapplication\/x-www-form-urlencoded\uff0c   \/\/ \u6240\u4ee5\u670d\u52a1\u5668\u80fd\u591f\u6b63\u786e\u89e3\u6790\uff0c\u800c\u4f7f\u7528\u539f\u751fajax\u8bf7\u6c42\u65f6\uff0c\u5982\u679c\u4e0d\u663e\u793a\u7684\u8bbe\u7f6eContent-Type\uff0c\u90a3\u4e48\u9ed8\u8ba4\u662ftext\/plain\uff0c   \/\/ \u8fd9\u65f6\u670d\u52a1\u5668\u5c31\u4e0d\u77e5\u9053\u600e\u4e48\u89e3\u6790\u6570\u636e\u4e86\uff0c\u6240\u4ee5\u624d\u53ea\u80fd\u901a\u8fc7\u83b7\u53d6\u539f\u59cb\u6570\u636e\u6d41\u7684\u65b9\u5f0f\u6765\u8fdb\u884c\u89e3\u6790\u8bf7\u6c42\u6570\u636e\u3002   \/\/ \u7531\u4e8evue\u662f\u4f7f\u7528\u539f\u751fPOST\uff0c\u6240\u4ee5\u8981\u8bbe\u7f6e\u4e00\u4e0b\u670d\u52a1\u5668\u624d\u80fd\u6b63\u786e\u89e3\u91caPOST\u8fc7\u53bb\u7684\u6570\u636e   Vue.http.options.emulateJSON = true;   \/\/\u5b9a\u4e49mainPage\u9875\u9762   var mainPage = Vue.extend({    template : “#main-page-temp”   })   \/\/\u5b9a\u4e49detailPage\u9875\u9762 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-29291","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/29291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=29291"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/29291\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=29291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=29291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=29291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}