欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flask-Vue前后端分離的全過程講解

 更新時間：2022年07月14日 11:24:24   作者：Python之簡  
這篇文章主要介紹了Flask-Vue前后端分離的全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

最近學(xué)習(xí)了一下前后端分離技術(shù)，前端用的是Vue，后段用的是Flask。

vue官網(wǎng)：開源的 Javascript 框架，vue是一套構(gòu)建用戶界面的漸進(jìn)式框架，Vue采用自底向上的增量開發(fā)設(shè)計。vue是輕量級的，有很多獨(dú)立的功能和庫。

vue.js滿足當(dāng)前webapp項(xiàng)目的開發(fā)需求，MVVM框架誕生，而Vue.js便是這樣一種js框架。兩大核心：數(shù)據(jù)驅(qū)動和組件化。

Flask：用Python實(shí)現(xiàn)，是一個web框架，屬于微框架。

1、主要依賴版本

  • Python : V3.6.4
  • Vue: V2.9.6
  • Vue-CLI: V2.9.6
  • node: v10.6.0
  • npm: V6.1.0
  • Flask: V1.0.2
  • Flask-Cors: V3.0.6
  • bootstrap: V4.0.0（最新版4.1.2不兼容）

以下項(xiàng)目的創(chuàng)建都是在Python虛擬環(huán)境和npm局部安裝的，只有Vue-CLI是全局安裝的。

npm ls -g --depth 0     查找npm全局安裝的包

2、構(gòu)建Python虛擬環(huán)境

防止依賴的混亂，首先創(chuàng)建虛擬環(huán)境。

Mac:code hubo$ mkdir flask-vue-crud
Mac:code hubo$ cd flask-vue-crud/
Mac:flask-vue-crud$ python -m venv venv
Mac:flask-vue-crud$ source venv/bin/activate
(venv) Mac:flask-vue-crud hubo$ ls
venv

第一行創(chuàng)建flask-vue-crud文件夾，第三行創(chuàng)建python虛擬環(huán)境python3.3版本可以通過venv模塊，python2版本可以使用virtualenv模塊。

第四行激活虛擬環(huán)境。

  • Windows：source venv/Scripts/activate.bat
  • Linux：source venv/bin/activate

3、創(chuàng)建Flask項(xiàng)目

首先安裝Flask和Flask-CORS擴(kuò)展。

Flask—CORS：

如果使用不同的協(xié)議，或者請求來自于其他的 IP 地址或域名或端口，就需要用到 Cross Origin Resource Sharing （CORS），這正是 Flask-CORS 擴(kuò)展幫我們做到的。實(shí)際環(huán)境中只配置來自前端應(yīng)用所在的域的請求。

(venv) Mac:flask-vue-crud hubo$ pip install Flask Flask-Cors

然后在根目錄下創(chuàng)建app.py文件：

from flask import Flask, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/', methods=['GET'])
def ping_pong():
    return jsonify('Hello World!')     #（jsonify返回一個json格式的數(shù)據(jù)）
if __name__ == '__main__':
    app.run()

然后執(zhí)行：

(venv) Mac:flask-vue-crud hubo$ python app.py

打開瀏覽器，輸入http://localhost:5000/ping，會看到輸出

Hello World！

目前Flask環(huán)境已經(jīng)配置好，并且已經(jīng)創(chuàng)建了一個Flask小Demo。

4、Vue Setup

Vue CLI：官方發(fā)布 vue.js 項(xiàng)目腳手架，使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目。

首先全局安裝vue Cli：npm install -g(全局安裝)，npm下載的國外的依賴，可以使用淘寶的cnpm。

下載淘寶的cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用npm或cnom下載vue cli

(venv) Mac:flask-vue-crud hubo$ npm insatll -g vue-cli

查看安裝成功

Mac:~ hubo$ vue -V
2.9.6

接下來通過webpack初始化一個新的Vue項(xiàng)目client：

Mac:flask-vue-crud hubo$ vue init webpack client

? Project name client
? Project description A Vue.js project
? Author hubo <1290259791@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

主要寫代碼的位置：/flask-vue-crud/client/src/，目錄結(jié)構(gòu)如下所示：

.
├── App.vue
├── assets
│   └── logo.png
├── components
│   ├── HelloWorld.vue
│   └── Ping.vue
├── main.js
└── router
    └── index.js

各個目錄的意思：

名字作用
main.jsapp 的入口，它會加載和初始化 Vue 和根組件
App.vue根組件 - 其他組件的入口
assets靜態(tài)文件如圖片和字體等都放在這里
componentsUI 組件放在這里
routerURL 同組件的映射關(guān)系在這里定義

client/src/components/HelloWord.vue是自動生成的單文件組件，有三部分組成：

  • template: 組件的 HTML 內(nèi)容
  • script: 組件的邏輯代碼（Javascript）
  • style: 組件的樣式（CSS）

運(yùn)行該程序：

(venv) Mac:flask-vue-crud hubo$ cd client/
(venv) Mac:client hubo$ ls
README.md		index.html		package.json
build			node_modules		src
config			package-lock.json	static
(venv) Mac:client hubo$ npm run dev     啟動dev

訪問http://localhost:8080 能看到前端頁面

5、添加一個新組件

創(chuàng)建client/src/components/Ping.vue:

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>
<script>
export default {
  name: 'Ping',
  data() {
    return {
      msg: 'Hello!',
    };
  },
};
</script>

更新client/src/router/index.js，映射/ping到Ping組件：

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import Ping from '@/components/Ping';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
    {
      path: '/ping',
      name: 'Ping',
      component: Ping,
    },
  ],
  mode: 'history',
});

上面的mode: 'history’是為了讓 URL 變成http://localhost：8080/ping的形式。如果，不加該設(shè)置，默認(rèn)的 URL 為http://localhost:8080/#/ping的形式。

訪問http://localhost:8080/ping 能看到Hello!

6、連接前后段

通過axios發(fā)送AJAX請求，安裝axios：

(venv) Mac:client hubo$ cnpm install axios --save
? Installed 1 packages
? Linked 4 latest versions
? Run 0 scripts
? All packages installed (5 packages installed from npm registry, used 1s, speed 12.01kB/s, json 5(12.96kB), tarball 0B)

更新Ping.vue組件，代碼如下。

<template>
  <div class="container">
    <button type="button" class="btn btn-primary">{{ msg }}</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Ping',
  data() {
    return {
      msg: 'Hello World!',
    };
  },
  methods: {
    getMessage() {
      const path = 'http://localhost:5000/ping';
      axios.get(path)
        .then((res) => {
          this.msg = res.data;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
    },
  },
  created() {
    this.getMessage();
  },
};
</script>

啟動后端 Flask 應(yīng)用，訪問http://localhost:8080/ping，會看到頁面會呈現(xiàn)后端返回的數(shù)據(jù)。

將后段的數(shù)據(jù)改為：{1:‘a’,2:‘b’,3:‘c’}

啟動Flask：

(venv) Mac:flask-vue-crud hubo$ python app.py 
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 239-628-485

啟動dec：

(venv) Mac:client hubo$ npm run dev

7、引入CSS框架bootstrap

引入 CSS 框架 bootstrap，通過如下命令安裝bootstrap：使用的是cnpm

下面的cnpm都是局部安裝。

(venv) Mac:client hubo$ cnpm install bootstrap@4.0.0 --save
? Installed 1 packages
? Linked 0 latest versions
? Run 0 scripts
peerDependencies WARNING bootstrap@4.0.0 requires a peer of jquery@1.9.1 - 3 but none was installed
peerDependencies WARNING bootstrap@4.0.0 requires a peer of popper.js@^1.12.9 but none was installed
? All packages installed (1 packages installed from npm registry, used 770ms, speed 6.85kB/s, json 1(5.27kB), tarball 0B)

我這里缺少兩個依賴，繼續(xù)下載依賴

(venv) Mac:client hubo$ cnpm install jquery@1.9.1 --save
? Installed 1 packages
? Linked 0 latest versions
? Run 0 scripts
? All packages installed (1 packages installed from npm registry, used 1s, speed 335.44kB/s, json 1(5.19kB), tarball 482.88kB)
(venv) Mac:client hubo$ cnpm install popper.js --save
? Installed 1 packages
? Linked 0 latest versions
? Run 0 scripts
? All packages installed (1 packages installed from npm registry, used 543ms, speed 16.56kB/s, json 1(8.99kB), tarball 0B)

再次下載bootstrap：

(venv) Mac:client hubo$ cnpm install bootstrap@4.0.0 --save
? Installed 1 packages
? Linked 0 latest versions
? Run 0 scripts
? All packages installed (used 647ms, speed 41.65kB/s, json 1(26.95kB), tarball 0B)

在 app 的入口文件client/src/main.js中導(dǎo)入 bootstrap：

import 'bootstrap/dist/css/bootstrap.css';
import Vue from 'vue';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
});

去掉根組件client/src/App.vue中多余的樣式：

<style>
#app {
  margin-top: 60px;
}
</style>

在Ping.vue組件中增加樣式：

<template>
  <div class="container">
    <button type="button" class="btn btn-primary">{{ msg }}</button>
  </div>
</template>

再次訪問http://localhost:8080/ping查看效果。

8、遇到的問題

Newline required at end of file but not found

這種錯誤處理方法：

我的錯誤是在33行后面添加一個空白行就可以了。

bootstrap最新版的好像和vue不兼容，使用的是4.0.0版本。

有遇到其他的問題，可以留言板討論，目前除了bootstrap是4.0版本其他的應(yīng)該都是最新的版本。

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • python爬蟲實(shí)戰(zhàn)之制作屬于自己的一個IP代理模塊

    python爬蟲實(shí)戰(zhàn)之制作屬于自己的一個IP代理模塊

    Python爬蟲常常會面臨自己ip地址被封的情況,也許不懂的讀者就只能等ip解封之后再進(jìn)行接下來的操作了,為什么自己不做一個Python模塊專門用于處理這種情況呢？文中對于讀者開發(fā)Python爬蟲肯定有一定的幫助,希望讀者耐心看下去,需要的朋友可以參考下
    2021-06-06
  • pandas實(shí)現(xiàn)一行拆分成多行

    pandas實(shí)現(xiàn)一行拆分成多行

    這篇文章主要介紹了pandas實(shí)現(xiàn)一行拆分成多行方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-05-05
  • Python生成pdf文件的方法

    Python生成pdf文件的方法

    這篇文章主要介紹了Python生成pdf文件的方法,比較實(shí)用的功能,需要的朋友可以參考下
    2014-08-08
  • 經(jīng)驗(yàn)豐富程序員才知道的8種高級Python技巧

    經(jīng)驗(yàn)豐富程序員才知道的8種高級Python技巧

    這篇文章主要介紹了經(jīng)驗(yàn)豐富程序員才知道的8種高級Python技巧,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-07-07
  • PyQT實(shí)現(xiàn)菜單中的復(fù)制,全選和清空的功能的方法

    PyQT實(shí)現(xiàn)菜單中的復(fù)制,全選和清空的功能的方法

    今天小編就為大家分享一篇PyQT實(shí)現(xiàn)菜單中的復(fù)制,全選和清空的功能的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-06-06
  • NumPy實(shí)現(xiàn)ndarray多維數(shù)組操作

    NumPy實(shí)現(xiàn)ndarray多維數(shù)組操作

    NumPy一個非常重要的作用就是可以進(jìn)行多維數(shù)組的操作，這篇文章主要介紹了NumPy實(shí)現(xiàn)ndarray多維數(shù)組操作，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05
  • Python+OpenCV繪制灰度直方圖詳解

    Python+OpenCV繪制灰度直方圖詳解

    一幅圖像由不同灰度值的像素組成，圖像中灰度的分布情況是該圖像的一個重要特征。圖像的灰度直方圖就描述了圖像中灰度分布情況。本文將利用Python和OpenCV繪制灰度直方圖，需要的可以參考一下
    2022-03-03
  • 使用Python實(shí)現(xiàn)圖像標(biāo)記點(diǎn)的坐標(biāo)輸出功能

    使用Python實(shí)現(xiàn)圖像標(biāo)記點(diǎn)的坐標(biāo)輸出功能

    這篇文章主要介紹了使用Python實(shí)現(xiàn)圖像標(biāo)記點(diǎn)的坐標(biāo)輸出功能，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2019-08-08
  • python學(xué)習(xí)筆記之列表(list)與元組(tuple)詳解

    python學(xué)習(xí)筆記之列表(list)與元組(tuple)詳解

    List（列表）是Python中使用最頻繁的數(shù)據(jù)類型，而元組是另一個數(shù)據(jù)類型，類似于List（列表）。這篇文章主要給大家介紹了python學(xué)習(xí)筆記之列表(list)與元組(tuple)的相關(guān)資料，文中不僅詳細(xì)介紹了兩者的使用，還分享了list和tuple的相互轉(zhuǎn)換的方法，需要的朋友可以參考下
    2017-11-11
  • Python實(shí)現(xiàn)輕松防止屏幕截圖的技巧分享

    Python實(shí)現(xiàn)輕松防止屏幕截圖的技巧分享

    屏幕截圖是一種常見的用于記錄信息或者監(jiān)控用戶活動的方法,為了保護(hù)隱私和數(shù)據(jù)安全,可以通過使用Python編寫一些防護(hù)措施來防止他人截取我們的屏幕,下面我們就來學(xué)習(xí)一下有哪些具體操作吧
    2023-12-12

最新評論