windows10下，零基礎(chǔ)學(xué)習(xí)VUE（3）-- axios+flask構(gòu)建前后端通信demo

joy968 發(fā)布于2019-07-31 10:16 / 3012人閱讀

摘要：當(dāng)前為大綱的內(nèi)容待完善中安裝參考文檔示例構(gòu)建在中運(yùn)行服務(wù)在中調(diào)用，并顯示模板部分歡迎來(lái)到首個(gè)測(cè)試頁(yè)面腳本部分腳本部分，未學(xué)習(xí)，不過(guò)就是頁(yè)面丑一點(diǎn)而已，問(wèn)題不大，回頭再學(xué)把。

當(dāng)前為大綱的內(nèi)容：待完善中

1. axios axios 安裝

npm install axios

參考文檔

https://www.kancloud.cn/yunye...

示例demo

https://cn.vuejs.org/v2/cookb...

2. flask 構(gòu)建api:

from flask import Flask, render_template,jsonify
from flask_cors import CORS
app = Flask(__name__,
        static_folder = "./dist/static",
        template_folder = "./dist")

cors = CORS(app, resources={"/api/*": {"origins": "*"}})

from random import *
@app.route("/api/random")
def random_number():
    response = {
        "randomNumber": randint(1, 100)
    }
    return jsonify(response)

在jupyter_notebook中運(yùn)行服務(wù)

from werkzeug.serving import run_simple
run_simple("0.0.0.0", 9001, app)

3. 在vue中調(diào)用，并顯示

模板部分

js腳本部分

css腳本部分，未學(xué)習(xí)，不過(guò)就是頁(yè)面丑一點(diǎn)而已，問(wèn)題不大，回頭再學(xué)把。

GPU云服務(wù)器云服務(wù)器機(jī)器學(xué)習(xí)零基礎(chǔ)學(xué)習(xí) 零基礎(chǔ)入門(mén)學(xué)習(xí) 零基礎(chǔ)深度學(xué)習(xí) 機(jī)器學(xué)習(xí)零基礎(chǔ)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/43554.html

相關(guān)文章

Sanic ＋前端MVVM 一種新一代Python高性能全棧開(kāi)發(fā)實(shí)踐

摘要：前端一種新一代高性能全棧開(kāi)發(fā)實(shí)踐背景本項(xiàng)目將使用配合最簡(jiǎn)單的邏輯來(lái)展示一個(gè)基于的全新一代高性能全棧開(kāi)發(fā)實(shí)踐的為什么是對(duì)于為何不是等著名框架，或許可能很多人會(huì)產(chǎn)生疑惑，本身和非常的相似，而它的出現(xiàn)，不僅是大大改進(jìn)過(guò)去時(shí)代性能低下通病，外加配 SanicCRUD-vue Sanic ＋前端MVVM 一種新一代Python高性能全棧開(kāi)發(fā)實(shí)踐showImg(https://segmentfa...

Profeel 2019-07-25 12:00 評(píng)論0 收藏0
Sanic ＋前端MVVM 一種新一代Python高性能全棧開(kāi)發(fā)實(shí)踐

摘要：前端一種新一代高性能全棧開(kāi)發(fā)實(shí)踐背景本項(xiàng)目將使用配合最簡(jiǎn)單的邏輯來(lái)展示一個(gè)基于的全新一代高性能全棧開(kāi)發(fā)實(shí)踐的為什么是對(duì)于為何不是等著名框架，或許可能很多人會(huì)產(chǎn)生疑惑，本身和非常的相似，而它的出現(xiàn)，不僅是大大改進(jìn)過(guò)去時(shí)代性能低下通病，外加配 SanicCRUD-vue Sanic ＋前端MVVM 一種新一代Python高性能全棧開(kāi)發(fā)實(shí)踐showImg(https://segmentfa...

NusterCache 2019-08-20 17:22 評(píng)論0 收藏0
手把手教你如何用Crawlab構(gòu)建技術(shù)文章聚合平臺(tái)(二)

摘要：上一篇文章手把手教你如何用構(gòu)建技術(shù)文章聚合平臺(tái)一介紹了如何使用搭建的運(yùn)行環(huán)境，并且將與集成，對(duì)掘金進(jìn)行技術(shù)文章的抓取，最后可以查看抓取結(jié)果。本篇文章將繼續(xù)講解如何利用編寫(xiě)一個(gè)精簡(jiǎn)的聚合平臺(tái)，將抓取好的文章內(nèi)容展示出來(lái)。上一篇文章《手把手教你如何用Crawlab構(gòu)建技術(shù)文章聚合平臺(tái)(一)》介紹了如何使用搭建Crawlab的運(yùn)行環(huán)境，并且將Puppeteer與Crawlab集成，對(duì)掘金、...

zhunjiee 2019-07-31 10:11 評(píng)論0 收藏0
2017年3月份前端資源分享

平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進(jìn)擊的 Promise Effective JavaScript leeheys blog -...

ermaoL 2019-06-27 16:30 評(píng)論0 收藏0
2017年3月份前端資源分享

平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進(jìn)擊的 Promise Effective JavaScript leeheys blog -...

kamushin233 2019-08-29 12:34 評(píng)論0 收藏0