简介
flask是python在web开发上的一个比较轻量的开发框架,vue是前端视图库,是一个MVVM框架。flask+vue可以实现快速的现代web应用开发,这里我们以简单的读写配置文件为例,做一个示例。
项目用到的开发基座有:
- python 3.8.8
- flask 1.1.2
- flask-cors 3.0.10
- vue 2.6.12
- vue-cli 4.5.13
- element-ui 2.15.2
项目目录结构:
后端搭建
我们在目录server中,使用flask框架,来提供接口,一个用来读配置文件cc.cfg,一个用来写配置文件cc.cfg:
app.py
from flask import Flask, json, request
from flask_cors import CORS
import json
import configparser
import os
# configuration
DEBUG = True
# instance the app
app = Flask(__name__)
app.config.from_object(__name__)
# enable CORS
CORS(app, resource={r'/*': {'origins': '*'}})
# sanity check route
@app.route('/open', methods=['get'])
def get_info():
cp = configparser.ConfigParser()
cur_path = os.getcwd()
cp.read(cur_path + '/server/cc.cfg')
sections = cp.sections()
response = {
'code': 0,
'data': {}
}
if len(sections) == 0:
raise Exception('文件不存在或无内容')
for section in sections:
response['data'][section] = {}
for key in cp[section]:
response['data'][section][key] = cp.get(section, key)
return json.dumps(response, ensure_ascii=False)
@app.route('/open', methods=['post'])
def set_info():
req = json.loads(request.data)
cp = configparser.ConfigParser()
cur_path = os.getcwd()
with open(cur_path + '/server/cc.cfg', 'w', encoding='utf-8') as cfg_file:
for section in req:
cp.add_section(section)
for key in req[section]:
cp.set(section, key, req[section][key])
cp.write(cfg_file)
response = {
'code': 0,
'data': req
}
return json.dumps(response)
if __name__ == '__main__':
app.config['JSON_AS_ASCII'] = False
app.run()
开启服务:
python .\server\app.py
正常启动显示:
* Serving Flask app "app" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: on
* Restarting with windowsapi reloader
* Debugger is active!
* Debugger PIN: 136-969-898
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Detected change in 'C:\\Users\\Administrator\\anaconda3\\Scripts\\spyder-script.py', reloading
* Restarting with windowsapi reloader
* Debugger is active!
* Debugger PIN: 136-969-898
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
前端搭建
我们直接使用vue的脚手架vue-cli,在主项目目录控制台执行:
vue create client
然后添加相关webpack插件和组件库,完整的package.json如下:
{
"name": "client",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"element-ui": "^2.15.2",
"normalize.css": "^8.0.1",
"vue": "^2.6.12"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-standard": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.29.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-standard": "^5.0.0",
"eslint-plugin-vue": "^7.11.1",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"script-ext-html-webpack-plugin": "^2.1.5",
"svg-sprite-loader": "^5.0.0",
"vue-loader": "^15.9.2",
"vue-template-compiler": "^2.6.12"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
目录结构:
前端template:
<template>
<div class="container">
<template v-for="(section, index) in Object.keys(model)">
<div class="title" :key="section">{{ section }}</div>
<el-form :key="index" :model="model[section]">
<el-form-item
v-for="label in Object.keys(model[section])"
:key="label"
:label="label"
:rules="[{ required: true, message: '请输入内容' }]"
>
<el-input
:disabled="
label === 'make_label_json' || label === 'draw_wave_sepc'
"
v-model="model[section][label]"
></el-input>
</el-form-item>
</el-form>
</template>
<el-button type="primary" @click="handleGet">获取数据</el-button>
<el-button @click="handleSend">发送数据</el-button>
</div>
</template>
前端脚本:
<script>
import request from '@/utils/request'
export default {
name: 'MyForm',
data () {
return {
model: {}
}
},
methods: {
async getConfigInfo () {
const res = await request({
url: '/open',
method: 'get'
})
const { data } = res
for (const key of Object.keys(data)) {
this.$set(this.model, key, {})
for (const attribute of Object.keys(data[key])) {
this.$set(this.model[key], attribute, data[key][attribute])
}
}
},
handleGet () {
this.getConfigInfo()
},
async setConfigInfo (config) {
try {
const res = await request({
url: '/open',
method: 'post',
data: config
})
console.log(res)
this.$message({
type: 'success',
message: '数据发送成功'
})
} catch (e) {
console.log(e)
}
},
handleSend () {
this.setConfigInfo(this.model)
}
},
created () {
this.getConfigInfo()
}
}
</script>
启动前端nodejs:
npm run dev
最终效果:
通过“获取数据”按钮,可以读取配置文件cc.cfg,通过“发送数据”按钮,可以提交信息,修改配置文件cc.cfg
项目完整代码,可以见这里,欢迎star
^_^