Skip to content

An example of a note application using django and vue.js (with vuex)

License

Notifications You must be signed in to change notification settings

tokibito/note-app-django-vuex

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ノートアプリケーション

Build Status

ノート

これは何ですか?

テキストを編集、保存できるシンプルなウェブアプリケーションです。

バックエンドとなるAPIサーバーにはDjangoフレームワーク(Python)、フロントエンドにはVue.js(JavaScript)を使っています。

DjangoフレームワークとJavaScriptでアプリケーションを作るサンプルコードとして作成しました。

note-app-django-vue-javascriptのVuex対応版になります。

よろしければGitHubでStarをつけてください!

以下の要素を含んでいます:

  • バックエンド
    • Python3
    • venv
      • プロジェクトで使うPython環境を作成します
    • Djangoフレームワーク
      • Django REST Framework
        • REST APIを作るのに便利な機能がたくさん含まれるモジュール
      • django-debug-toolbar
        • 各種デバッグ情報をサイドバーで表示します
  • フロントエンド
    • Babel
      • 最新の言語仕様の構文で書いたコードは、そのままだと古いブラウザなどで動かないので、Babelを使ってトランスパイルして動かせるようにします
    • webpack
      • JavaScriptコードやCSSなど、アプリケーションを構成するファイル群を配備用にまとめます
      • webpack.config.jsでビルドルールを設定します
        • loaderの仕組みによりいろいろな処理ができます(babelで変換したりとか)
    • Vue.js
      • データバインディングとコンポーネントの仕組みを提供するJavaScriptフレームワークです
    • Vuex
      • Vue.jsアプリケーションの状態管理の仕組みを提供するライブラリ(実質フレームワーク)です
    • Bootstrap
      • HTMLのUI部品(ナビゲーションやボタンなどいろいろ)を提供するUIフレームワークです
      • CSSと動きのある部分に必要なJavaScriptコードが提供されます
      • jQuery部分をVue.jsに置き換えたBootstrapVueと組み合わせて使っています
    • Font Awesome
      • Webフォント、CSSが提供されるので、HTMLでクラスを指定すれば使えます
    • axios
      • REST APIクライアントです
    • ユニットテスト
      • mocha
        • ユニットテストのフレームワークです(describe, itで記述)
      • power-assert
        • アサーション関数
      • Sinon.JS
        • モック
      • moxios
        • axiosに対応したモック(スタブ)

構成

  • note_server
    • バックエンド(Pythonで動作するAPIサーバー)
  • note_client
    • フロントエンド(webpackでビルドし、Djangoフレームワークのstaticfilesモジュールから配信される)
    • CSS(Sass)も含む

動かしてみる

  1. note_client をビルドする
  2. note_server を起動してブラウザでアクセスする

設計について

note-app-django-vue-javascriptとの差分のみ記載します。

アーキテクチャとモジュール構成に関して考えた点など:

  • Vuexを使う
    • Vueコンポーネント側の記述を減らせる
    • テストコードは書きやすくなる
      • テストしやすいが、冗長に感じることもある
    • Vuex自体はフレームワークのようなもので、学習コストがかかる点には注意が必要
    • アプリケーションの構造は Shopping Cart Example を参考にしました。
  • Vueコンポーネントのテストはがんばらない
    • Vuexを使うことで、VueコンポーネントのUI側のコードを減らせるので、ほとんどやらなくてもよい
    • 変更されやすい部分はがんばらない

Vagrant

開発にはVagrantを使用しています。VirtualBoxとVagrantをインストールしていれば、同様の環境を用意できます。

vagrant up
vagrant ssh

About

An example of a note application using django and vue.js (with vuex)

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published