python开发-Flask与Vue基础

本文记录了从零开始入门flask与vue开发。

后端接受API并返回数据。返回的数据可以从数据库中查询修改

前端构建和展示页面，一些交互通过ajax等库向后端发送API请求，然后对返回的结果进行处理

如果是vue，则通过axios从后端取需要的数据

产品基础

E-R图又称实体关系图

start

我主要是参考文章[1]进行环境准备。[1]应该是参考了英文文章[2]，两篇多看几遍的话，可以非常浅薄的入门。当然英文作者写了更多类似文章，可以多阅读几篇[3]。[0]也是非常基础的入门文章

代码：https://github.com/testdrivenio/flask-vue-crud

• 按照npm包的权限报错，记录在这里
• 准备过程中发现vscode高亮文本需要右下plain text修改为html
• 一些安装

npm install --save vue-router
npm install eslint-plugin-standard --save-dev

Vue基础

每一个vue都通过 Vue.createApp({}) 作为入口，例子中位于main.js。

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

也可以位于 index.html的中

<!-- Vue Code -->
<script type="text/javascript">
  const app = Vue.createApp({})
  const mountedApp = app.mount('#vue-app')
</script>

mount这句连接Vue instance和HTML code

先把这个跑通： https://github.com/oleg-agapov/flask-vue-spa

包管理

包可以通过yarn或者npm进行管理，设置几个json配置文件即可安装依赖

VUE进阶

进一步学习了[4]中的结构和学习

• assets 图片或字体
• components
• layouts 设置sidebar
• views

Flask基础

Flask进阶

• async

reference

• [0] https://codeburst.io/full-stack-single-page-application-with-vue-js-and-flask-b1e036315532?gi=dd0f9c94d622

• [1] https://www.cnblogs.com/dream-on-all-in/p/12630690.html

• [2] https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/

• [3] https://testdriven.io/blog/accepting-payments-with-stripe-vuejs-and-flask/

• [4] https://github.com/Yy2z/Smart-park-management-platform

• https://github.com/gtalarico/flask-vuejs-template

• https://github.com/nmgwap/vue-ManagementPlatform

• https://github.com/Oudanlu/vue3-Member-Management-Center

• https://learnku.com/python/t/24985

• https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/

• https://github.com/secrul/factory-manage

• https://github.com/mars-knowsnothing/travel-application-system

• https://cn.vuejs.org/