序章
最近、人気のフロントエンド フレームワークである Vue.js について知りましたが、新しいスキルとして、練習して使用して初めて、より直感的な操作が可能になります。したがって、ハンズオンを練習するために小さなデモを作成することを検討してください。バックエンドは Flask を使用して、いくつかの Restfull スタイル API を提供します。フロントエンドは、通常の Flasky で一般的に使用される Jinja テンプレート エンジンを放棄し、柔軟な Vue.js フレームワークを採用し、フロントエンドを練習しますちなみに別居。
フロントエンドとバックエンドが分離されているため、開発環境では2つのプロジェクトを独立して作成する必要があります。以下、一つずつ紹介していきます。
フロントエンド
環境整備
開発はWindows10環境で行っております。
- Node.jsをインストールする
- node.js には npm が付属しているので、ソースを変更してください
npm install -g cnpm --registry=https://registry.npm.taobao.org
- vueをインストールする
cnpm install -g vue
- Webpackをインストールする
cnpm install -g webpack
- vue-cli をインストールする
cnpm install -g vue-cli
- プロジェクトを作成する
vue init webpack example
- プロジェクトの依存関係をインストールする
cnpm install
- プロジェクトを開始する
方法 1: コマンド開始
cnpm run dev
方法 2: pycharm でプロジェクトを開いて開始します。
プロジェクトが開始されると、localhost:8080 を入力するように求められ、ページはブラウザで通常どおり開くことができます。この時点で開発環境の準備が整い、以下のフロントエンド コードを開発できるようになります。
コード開発
プロジェクトのディレクトリ構造は次のとおりです。
Vue はコンポーネント単位の複雑なページに編成されています。コンポーネントの下の HelloWorld.vue に直接コードを調整して記述します。
テンプレート部分には主に select 要素が含まれており、値はバックエンド API に対応し、ボタンをトリガーすると選択したバックエンド API にリクエストが送信されます。
スクリプト部分のメソッド部分は、要素イベントへの応答を実装し、axios を介してバックエンド サーバーと通信し、それぞれ get メソッドと post メソッドを採用します。具体的なコードは次のとおりです。
<template>
<div class="hello">
<button @click="test">测试</button>
<select v-model="selected" name="url-option">
<option value="">选择一个Url</option>
<option value="/api/speech/event_extraction">思必驰警情信息抽取</option>
<option value="/api/speech/addr_fix">思必驰地址理解</option>
<option value="/api/gaode/get_poi">高德关键字搜索</option>
</select>
<input v-model="input_query" style="width: 400px">
<button @click="sendRequest">发送请求</button>
<br></br>
<textarea style="width: 600px; height: 300px">{
{ resp }}</textarea>
</div>
</template>
<script>
import axios from 'axios'
// 后端服务器地址
axios.defaults.baseURL = 'http://10.67.*.*:5000';
export default {
name: 'HelloWorld',
data () {
return {
selected: '',
input_query: '',
resp: ''
}
},
methods: {
test () {
axios
.get('/api/hello')
.then(response => {
console.log(response.data.name)
this.resp = response.data.name
})
.cache(error => {
console.error(error)
})
},
sendRequest () {
console.log(this.selected)
axios
.post(this.selected, {
query: this.input_query})
.then(response => {
console.log(response)
this.resp = response.data
}).catch(error => {
console.error(error)
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
以下に示すように、インターフェイスは非常にシンプルです。
後部
pycharm を開き、新しい flask プロジェクトを作成し、venv を構成します。Flask プロジェクトのディレクトリは次のとおりです。
app.py にいくつかの Restfull スタイルの API を記述して、フロントエンドのリクエストに応答します。
from flask import Flask, jsonify, request
from flask_cors import CORS
import requests
import json
app = Flask(__name__)
# 实现跨域访问
cors = CORS(app, resources={
r"*": {
"origins": "*"}})
# get请求
@app.route('/api/hello')
def hello_world():
content = {
"name": "网站",
"num": 3,
"sites": [{
"name": "Google", "info": ["Android", "Google 搜索", "Google 翻译"]},
{
"name": "Runoob", "info": ["菜鸟教程", "菜鸟工具", "菜鸟微信"]},
{
"name": "Taobao", "info": ["淘宝", "网购"]}],
}
return jsonify(content)
# post请求
@app.route('/api/gaode/get_poi', methods=['POST'])
def get_poi():
json_data = request.get_json()
url_prefix = "***"
url = url_prefix + '&keywords=' + json_data['query']
headers = {
"Content-Type": "application/json"}
resp = requests.get(url, headers=headers)
text = resp.json()
return text
# 其它接口此处可进行补充.............
if __name__ == '__main__':
app.run(
# TODO 设置无效，原因未知
# host='10.67.*.*',
# port='5000',
# debug=True
)
「実行」をクリックします。または、コマンド python -m flask run で開始します。
問題に遭遇する
1. 外部ネットワークアクセスをサポートするため、app.run のバックエンド設定ホストは有効になりません。pycharm で設定されていますが、実行時に有効になります。原因は不明です。
2. Flask クロスドメイン アクセス
from flask_cors import CORS
cors = CORS(app, resources={
r"*": {
"origins": "*"}})
まとめ
Flask は軽量な Web バックエンド フレームワークであり、Vue は動的応答性能が高く開発が容易なフロントエンド フレームワークであり、フロントエンドとバックエンドとして両方を使用することで、Web アプリケーションを迅速に構築できます。この記事は参考として使用できます。