はじめに
FlaskとVue.jsでSPA Webアプリ開発
上記を参考に作成し、調べた内容について書く。
用語の意味
- FlaskはPythonでWebアプリを開発するためのフレームワーク
- Vue.jsはJavaScriptで開発するためのフレームワーク
- SPAはSingle Page Applicationの略でページの遷移をしないでコンテンツを切り替えるもの
- RESTful APIはフロントエンドとバックエンドを繋げるためのもので、RESTのルールに基づいたAPI
RESTはRepresentational State Transferの略であるが、意味が曖昧でよく分からなかったので具体的な例を調べた。
- GET,POST,PUT,DELETEの4つのHTTPメソッドに対して/GetUSer, /DelteUser,...とURLを複数作るのでなく、/UserのURLにそれぞれのHTTPメソッドを紐づけする
- Web APIには他にもSOAPやRPCがある。
プロジェクトの作成
FlaskとVue.jsでSPA Webアプリ開発をもとに作成。
詰まったところについて書いた。
vue create frontend
- BabelはjavascriptをES6からES5に書き換えてくれる
モダンフロントエンド開発環境からVue.js環境までひと通り作ってみた - RouterはSPAを作るために必要なもの
- 設定は以下のようにした
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: NPM
pipenv install flask
- flaskのインストール後に
backend/main.pyでImport “flask” could not be resolved from source Pylance (reportMissingModuleSource)のエラーメッセージが表示されることがあった。
色々触っていたら解決してしまったのでよく分からない。pip installで良い？
vue add element
-
elementはvue2.x用なので初めにvue3.xにすると出来ない。
-
element-plusがvue3.xに使えるが今回は使わなかった。
終わりに
今回初めてSPAを開発したが、難しい概念も多く、取り敢えず手を動かすという状況が多かった。
少しずつ理解が出来たらいいと思う。