{"id":7740,"date":"2022-11-12T12:28:07","date_gmt":"2022-11-12T04:28:07","guid":{"rendered":"https:\/\/egonlin.com\/?p=7740"},"modified":"2022-11-12T12:31:25","modified_gmt":"2022-11-12T04:31:25","slug":"%e7%ac%ac%e4%b8%83%e8%8a%82%ef%bc%9avue%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=7740","title":{"rendered":"\u7b2c\u4e03\u8282\uff1aVue\u63d2\u4ef6"},"content":{"rendered":"

\u9879\u76ee\u529f\u80fd\u63d2\u4ef6<\/h1>\n

1\u3001vue-router<\/h2>\n
{\n    path: '\/',\n    name: 'home',\n    \/\/ \u8def\u7531\u7684\u91cd\u5b9a\u5411\n    redirect: '\/home'\n}\n\n{\n    \/\/ \u4e00\u7ea7\u8def\u7531, \u5728\u6839\u7ec4\u4ef6\u4e2d\u88ab\u6e32\u67d3, \u66ff\u6362\u6839\u7ec4\u4ef6\u7684<router-view\/>\u6807\u7b7e\n    path: '\/one-view',\n    name: 'one',\n    component: () => import('.\/views\/OneView.vue')\n}\n\n{\n    \/\/ \u591a\u7ea7\u8def\u7531, \u5728\u6839\u7ec4\u4ef6\u4e2d\u88ab\u6e32\u67d3, \u66ff\u6362\u6839\u7ec4\u4ef6\u7684<router-view\/>\u6807\u7b7e\n    path: '\/one-view\/one-detail',\n    component: () => import('.\/views\/OneDetail.vue'),\n    \/\/ \u5b50\u8def\u7531, \u5728\u6240\u5c5e\u8def\u7531\u6307\u5411\u7684\u7ec4\u4ef6\u4e2d\u88ab\u6e32\u67d3, \u66ff\u6362\u8be5\u7ec4\u4ef6(OneDetail)\u7684<router-view\/>\u6807\u7b7e\n    children: [{\n        path: 'show',\n        component: () => import('.\/components\/OneShow.vue')\n    }]\n}<\/code><\/pre>\n
<!-- router-link\u6e32\u67d3\u4e3aa\u6807\u7b7e -->\n<router-link to="\/">Home<\/router-link> |\n<router-link to="\/about">About<\/router-link> |\n<router-link :to="{name: 'one'}">One<\/router-link> |\n\n<!-- \u4e3a\u8def\u7531\u6e32\u67d3\u7684\u7ec4\u4ef6\u5360\u4f4d -->\n<router-view \/><\/code><\/pre>\n
a.router-link-exact-active {\n    color: #42b983;\n}<\/code><\/pre>\n
\/\/ router\u7684\u903b\u8f91\u8f6c\u8df3\nthis.$router.push('\/one-view')\n\n\/\/ router\u91c7\u7528history\u65b9\u5f0f\u8bbf\u95ee\u4e0a\u4e00\u7ea7\nthis.$router.go(-1)<\/code><\/pre>\n
2\u3001vuex<\/h2>\n
\/\/ \u5728\u4efb\u4f55\u4e00\u4e2a\u7ec4\u4ef6\u4e2d,\u5747\u53ef\u4ee5\u901a\u8fc7this.$store.state.msg\u8bbf\u95eemsg\u7684\u6570\u636e\n\/\/ state\u6c38\u8fdc\u53ea\u80fd\u62e5\u6709\u4e00\u79cd\u72b6\u6001\u503c\nstate: {\n    msg: "\u72b6\u6001\u7ba1\u7406\u5668"\n},\n\/\/ \u8ba9state\u62e5\u6709\u591a\u4e2a\u72b6\u6001\u503c\nmutations: {\n    \/\/ \u5728\u4e00\u4e2a\u4e00\u4e2a\u7ec4\u4ef6\u4e2d,\u5747\u53ef\u4ee5\u901a\u8fc7this.$store.commit('setMsg', new_msg)\u6765\u4fee\u6539state\u4e2d\u7684msg\n    setMsg(state, new_msg) {\n        state.msg = new_msg\n    }\n},\n\/\/ \u8ba9mutations\u62e5\u6709\u591a\u4e2a\u72b6\u6001\u503c\nactions: {\n\n}<\/code><\/pre>\n
3\u3001vue-cookies<\/h2>\n
\/\/ \u5b89\u88c5cookie\u7684\u547d\u4ee4\n\/\/ npm install vue-cookies --save\n\/\/ \u4e3a\u9879\u76ee\u914d\u7f6e\u5168\u5c40vue-cookie\nimport VueCookies from 'vue-cookies'\n\/\/ \u5c06\u63d2\u4ef6\u8bbe\u7f6e\u7ed9Vue\u539f\u578b,\u4f5c\u4e3a\u5168\u5c40\u7684\u5c5e\u6027,\u5728\u4efb\u4f55\u5730\u65b9\u90fd\u53ef\u4ee5\u901a\u8fc7this.$cookie\u8fdb\u884c\u8bbf\u95ee\nVue.prototype.$cookies = VueCookies<\/code><\/pre>\n
\/\/ \u6301\u4e45\u5316\u5b58\u50a8val\u7684\u503c\u5230cookie\u4e2d\nthis.$cookies.set('val', this.val, 300)\n\/\/ \u83b7\u53d6cookie\u4e2dval\u5b57\u6bb5\u503c\nthis.$cookies.get('val')\n\/\/ \u5220\u9664cookie\u952e\u503c\u5bf9\nthis.$cookies.remove('val')<\/code><\/pre>\n
4\u3001axios<\/h2>\n
import axios from 'axios' # \u5b89\u88c5\u7684\u6a21\u5757\u4e0d\u7528\u52a0\u76f8\u5bf9\u8def\u5f84\n\naxios.get().then()<\/code><\/pre>\n
\/\/ \u5b89\u88c5 axios(ajax)\u7684\u547d\u4ee4\n\/\/ npm install axios--save\n\/\/ \u4e3a\u9879\u76ee\u914d\u7f6e\u5168\u5c40axios\nimport Axios from 'axios'\nVue.prototype.$ajax = Axios<\/code><\/pre>\n
let _this = this\nthis.$ajax({\n    method: 'post',\n    url: 'http:\/\/127.0.0.1:5000\/loginAction',\n    params: {\n        usr: this.usr,\n        ps: this.ps\n    }\n}).then(function(res) {\n    \/\/ this\u4ee3\u8868\u7684\u662f\u56de\u8c03then\u8fd9\u4e2a\u65b9\u6cd5\u7684\u8c03\u7528\u8005(axios\u63d2\u4ef6),\u4e5f\u5c31\u662f\u53d1\u751f\u4e86this\u7684\u91cd\u6307\u5411\n    \/\/ \u8981\u66f4\u65b0\u9875\u9762\u7684title\u53d8\u91cf,title\u5c5e\u4e8evue\u5b9e\u4f8b\n    \/\/ res\u4e3a\u56de\u8c03\u7684\u5bf9\u8c61,\u8be5\u5bf9\u8c61\u7684data\u5c5e\u6027\u5c31\u662f\u540e\u53f0\u8fd4\u56de\u7684\u6570\u636e\n    _this.title = res.data\n}).catch(function(err) {\n    window.console.log(err)\n})<\/code><\/pre>\n
# \u7528pycharm\u542f\u52a8\u8be5\u6587\u4ef6\u6a21\u62df\u540e\u53f0\nfrom flask import Flask, request, render_template\nfrom flask_cors import CORS\napp = Flask(__name__)\nCORS(app, supports_credentials=True)\n\n@app.route('\/')\ndef index():\n    return "<h1>\u4e3b\u9875<\/h1>"\n\n@app.route('\/loginAction', methods=['GET', 'POST'])\ndef test_action():\n    # print(request.args)\n    # print(request.form)\n    # print(request.values)\n    usr = request.args['usr']\n    ps = request.args['ps']\n    if usr != 'abc' or ps != '123':\n        return 'login failed'\n    return 'login success'\n\nif __name__ == '__main__':\n    app.run()<\/code><\/pre>\n
5\u3001\u8de8\u57df\u95ee\u9898\u89e3\u51b3<\/h2>\n
# http:\/\/www.mei.com\/silo\/women \u54cd\u5e94\u5934\u4e2dAccess-Control-Allow-Origin: * \u5141\u8bb8\u6240\u6709\u7684\u57df\u8bbf\u95ee\n# \u4ee5\u732b\u773c\u7535\u5f71\u4e3a\u4f8b \uff1ahttps:\/\/m.maoyan.com\/#movie\n\n# devServer.proxy\n# https:\/\/cli.vuejs.org\/zh\/config\/#devserver-proxy<\/code><\/pre>\n
vue.config.js<\/h4>\n
module.exports = {\n  devServer: {\n    proxy: {\n      '\/ajax': {\n        target: 'https:\/\/m.maoyan.com\/',\n        changeOrigin: true\n      }\n    }\n  }\n}<\/code><\/pre>\n
\u7ec4\u4ef6\u4e2d<\/h4>\n
<\/div>
\u67e5\u770b\u66f4\u591a<\/h2>
\u8054\u7cfb\u7ba1\u7406\u5458\u5fae\u4fe1tutu19192010\uff0c\u6ce8\u518c\u8d26\u53f7<\/p>\n<\/div>
<\/div>
<\/td><\/tr>
<\/td><\/tr><\/tbody><\/table>
<\/td><\/tr><\/tbody><\/table><\/form>