Djangoのmigrationをやり直したくなったけれど、色々試したら、
|
1 |
python manage.py migrate |
で psycopg2.errors.UndefinedColumn: column "<field名>" does not existといったエラーが出て、後戻りできなくなったりする。 僕みたいによく分かってない人は、一度全部消してからやり直したほうが絶対早い。 djangoでmigrateができない 下のコマンドは、同じSchemaのテーブルを全削除するコマンド。
|
1 2 |
drop schema public cascade; create schema public; |
これを実行してからマイグレーションすれば確実。
|
1 |
python manage.py migrate |
で、
|
1 |
you cannot alter to or from M2M fields, or add or remove through= on M2M fields |
のエラーで苦しめられたので備忘録。 "Django migration error :you cannot alter to or from M2M fields, or add or remove through= on M2M fields"(stack overflow) 要は、DBを作る時に、古いテーブルが邪魔をしてmigrationできないよ！ と言うことらしい。 上記リンクに飛ぶと、initial.pyでFieldを消す処理を加えると言う対応を紹介していたが、 面倒だったので、テーブルをいったん消去して、もう一度migrationをかけて解決した。
Djangoプロジェクトを作成し、新しくモデルを作成して、migrationを書けた時に、「No changes detected」と表示されてしまう。 モデルを変えたのになぜ？？？と思ってググルと
|
1 |
python manage.py makemigrations <project名> |
とmigrationするときに、プロジェクト名を指定しないといけないらしい。 python manage.py makemigrationsだけでも、上手くいっている人も、いるため、謎は深まるが、変更が反映されないときは、プロジェクト名を指定してあげると確実
|
1 2 3 4 5 6 7 |
>>> python manage.py makemigrations No changes detected >>> python manage.py makemigrations project Migrations for 'project': project/migrations/0001_initial.py - Create model Person - Create model Team |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
manage.py └── project ├── __init__.py ├── __pycache__ │ ├── __init__.cpython-37.pyc │ ├── models.cpython-37.pyc │ ├── settings.cpython-37.pyc │ ├── urls.cpython-37.pyc │ └── wsgi.cpython-37.pyc ├── asgi.py ├── migrations │ ├── 0001_initial.py │ ├── __init__.py │ └── __pycache__ │ └── __init__.cpython-37.pyc ├── models.py ├── settings.py ├── urls.py └── wsgi.py |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
from django.db import models class Person(models.Model): name = models.CharField("名前", max_length=100) age = models.IntegerField("年齢") def __str__(self): return self.name class Team(models.Model): name = models.CharField("チーム名", max_length=100) members = models.ManyToManyField("Person") def __str__(self): return self.name |
普段、何も考えずに〇〇 updateと打ち込んでしまっているため、その戒めとしての備忘録 ちゃんとバージョン管理ソフトは使いましょう。。。 今回ハマったエラーはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: [BABEL] /Users/kouki/Projects/vue-login-sample/src/main.js: Package exports for '/Users/kouki/Projects/vue-login-sample/node_modules/@babel/helper-compilation-targets' do not define a '.' subpath (While processing: "/Users/kouki/Projects/vue-login-sample/node_modules/@vue/cli-plugin-babel/preset.js") at applyExports (internal/modules/cjs/loader.js:485:15) at resolveExports (internal/modules/cjs/loader.js:508:12) at Function.Module._findPath (internal/modules/cjs/loader.js:577:20) at Function.Module._resolveFilename (internal/modules/cjs/loader.js:879:27) at Function.Module._load (internal/modules/cjs/loader.js:785:27) at Module.require (internal/modules/cjs/loader.js:956:19) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (/Users/kouki/Projects/vue-login-sample/node_modules/@babel/preset-env/lib/debug.js:8:33) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10) at Module.load (internal/modules/cjs/loader.js:914:32) at Function.Module._load (internal/modules/cjs/loader.js:822:14) at Module.require (internal/modules/cjs/loader.js:956:19) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (/Users/kouki/Projects/vue-login-sample/node_modules/@babel/preset-env/lib/index.js:11:14) at Module._compile (internal/modules/cjs/loader.js:1063:30) @ multi (webpack)-dev-server/client?http://192.168.3.3:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js |
vue create → npm run serveなので特にエラーを起こすような操作はしていません。 「babel」, 「webpack」と言った文字列が見えたのでおそらくnodeのバージョンの問題だろうと思って確認してみると、
|
1 2 |
>>> node -v v13.1.0 |
いや、もうほんとLTSとかちゃんと見とかないとダメですね 笑 何も考えずにパッケージのアップデートをしたのは誰なんでしょうか 笑 nパッケージを導入 これまで素のnodeを使っていたため、パッケージ管理ソフトを入れることにしました。 nodeのバージョン管理にはnパッケージと言うものがあるらしいのでこれをインストール
|
1 2 3 4 5 6 |
>>> npm install -g n /usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n + n@6.1.3 added 1 package from 4 contributors in 0.553s >>> n --stable 12.14.1 |
n現在の安定版を確認してみると、v１２だったため
|
1 2 3 4 |
>>> sudo n 12.14.1 installed : v12.14.1 (with npm 6.13.4) >>> node -v v12.14.1 |
として、nodeを安定版に変更すると、無事にnpm run serveを通すことができました。 めんどくさいけど、バージョン管理はするようにしよう。
今日は、Vue cliを使って、お手軽にVueのRouting機能を試していきます。 参考：Getting Started(公式) 公式ドキュメントではVue cliを使った解説はされていないので、この記事では、Vue cliを使いながらRouting機能を試していきたいと思います。
|
1 2 3 |
vue create <project name> cd <project name> npm install vue-router |
で準備を整えたら、必要な設定をしていきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
└── src ├── App.vue ⭐️ ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── main.js⭐️ ├── router.js⭕️ └── views ├── Bar.vue⭕️ └── Foo.vue⭕️ |
コードを書く必要があるのは、星マークのファイル、⭕️は新しらないといけないファイル。 route.js このファイルで、コンポーネントとURLのマッピングを行っていきます。コードはこんな感じ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import Vue from 'vue'; import Router from 'vue-router'; // 作成したコンポーネントを読み込む import Foo from './views/Foo' import Bar from './views/Bar' // Vue Routerというプラグインを導入 Vue.use(Router) // ここでURLとコンポーネントのマッピングを行う export default new Router({ routes: [ {path: '/foo', component: Foo}, {path: '/bar', component: Bar} ] }); |
main.js main.jsにてVue Routerをプラグインとして登録します。
|
1 2 3 4 5 6 7 8 9 10 11 |
import Vue from 'vue' import App from './App.vue' // routerをインポート import router from './router'; Vue.config.productionTip = false new Vue({ router: router, // routerを登録 render: h => h(App), }).$mount('#app') |
App.vue 最後にrouter-viewで読み込んで、Vue Routerが動くようになります。
|
1 2 3 4 5 |
<template> <div id="app"> <router-view></router-view> </div> </template> |
Vueでは、コンポーネント間の関係はした図のように、ツリー状になっており、上から下へのデータの受け渡しは、propを使って行っていました。 ツリーの下から上にデータを渡すときは、少し大変なようで、親コンポーネントが子コンポーネントのイベントを購読することによって実現するようです。「購読」って何だ。って公式ドキュメントを読みながらした僕の理解はこんな感じ。 ＄emit（）でカスタムイベントを定義できると行っておきながら、何の処理もしていないじゃないかといったツッコミどころは多いですが、とりあえずの理解のために概念図を書いてみました。 パワポとか使ってもっと綺麗な図にできたら良かったのですが、そこまでの気力はありませんでした。 ソースコード カスタムイベントを作って遊ぶために使ったソースコードです。 親コンポーネント（App.vue）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <div id="app"> <BaseCheckbox v-model="Checked" ></BaseCheckbox> <h1>{{Checked}}</h1> </div> </template> <script> import BaseCheckbox from "./components/BaseCheckbox"; export default { name: "app", props: { Checked: { type: Boolean, default: true } }, components: { BaseCheckbox, }, }; |
子コンポーネント（Checkbox.vue）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <div> <input type="checkbox" v-on:click="$emit('CheckboxChanged', $event.target.checked)" > <h1>{{checked}}</h1> </div> </template> <script> export default { model: { prop: "checked", event: "CheckboxChanged" }, props: { checked: Boolean, testText: String } }; </script> |
$emitを使ってみて 処理自体はとても単純なのですが、定義しなければいけないプロパティ名、イベント名などが多く、親コンポーネントと子コンポーネントを行き来していると訳が分からなくなって、頭がこんがらがってしまうという印象でした。 これは何度も使って慣れるしかないかも
子要素から親要素へのデータの受け渡し 公式では、データの受け渡しではなく、「子コンポーネントのイベントを購読する」と行っています。要するに、親コンポーネントから子コンポーネントのイベントを発火させるという意味です。 子コンポーネントから親コンポーネントにデータを受けわたすということは、実際のところ不可能であるため、親コンポーネントから、子コンポーネントのイベントを発火させることで、擬似的にこれらの処理を実現することになります。 $emit 使うのは$emitというメソッドです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div id="components-demo"> <h1>{{ number }}</h1> <sample-button :totalNumber="number" v-on:my-click="number += $event" > </sample-button> </div> Vue.component('sample-button', { props: { totalNumber: { Type: Number, } }, methods: { increment(){ this.$emit("my-click", this.totalNumber += 1); } }, template: '<button v-on:click="increment()">+1</button>' }) new Vue({ el: '#components-demo', data(){ return { number: 10 }; }, }) |
はじめに Vue.jsの使い方の最低限の部分は分かったので、次は、CSSフレームワークを導入して、開発を始めてみようと思い、試しに Quasar Framework 入れてみました。 なぜQuasarを選んだかは、公式ページが一番カッコ良かったから、です。 導入方法 やり方は二つ quasar cliを入れる vue cliにプラグインとしてquasarを入れる。 元々、vue cliを入れていたので、既存のVueプロジェクトにQuasarをプラグインとして入れる方法を選択。 まずは、Vueプロジェクトを作成していきます。すでにVue.jsの環境が整っていれば、
|
1 |
vue create <Project Name> |
と打てば、<Project Name>プロジェクトが作成されます。 このプロジェクトに、プラグインとして、quasarを導入します。 vue cliで作成したプロジェクトのディレクトリ に移動し、vue addでQuasarを導入。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
>>> vue add quasar WARN There are uncommited changes in the current repository, it's recommended to commit or stash them first. ? Still proceed? Yes 📦 Installing vue-cli-plugin-quasar... + vue-cli-plugin-quasar@2.0.0 added 1 package from 1 contributor and audited 24552 packages in 6.762s found 0 vulnerabilities ✔ Successfully installed plugin: vue-cli-plugin-quasar ? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? Yes ? Pick a Quasar components & directives import strategy: (can be changed later) Auto import (k ebab-case) ? Pick your favorite CSS preprocessor: Sass ? Choose Quasar Icon Set Material ? Default Quasar language pack - one from https://github.com/quasarframework/quasar/tree/dev/u i/lang en-us ? Use RTL support? Yes ? Select features: (Press <space> to select, <a> to toggle all, <i> to invert selection) 🚀 Invoking generator for vue-cli-plugin-quasar... 📦 Installing additional dependencies... > node-sass@4.13.0 install /Users/kouki/Projects/vue-lesson/node_modules/node-sass > node scripts/install.js Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.0/darwin-x64-79_binding.node Download complete ░⸩ ⠋ : Binary saved to /Users/kouki/Projects/vue-lesson/node_modules/node-sass/vendor/darwin-x64-79/binding.node Caching binary to /Users/kouki/.npm/node-sass/4.13.0/darwin-x64-79_binding.node > core-js@2.6.11 postinstall /Users/kouki/Projects/vue-lesson/node_modules/babel-runtime/node_modules/core-js > node -e "try{require('./postinstall')}catch(e){}" > node-sass@4.13.0 postinstall /Users/kouki/Projects/vue-lesson/node_modules/node-sass > node scripts/build.js Binary found at /Users/kouki/Projects/vue-lesson/node_modules/node-sass/vendor/darwin-x64-79/binding.node Testing binary Binary is fine added 107 packages from 74 contributors and audited 25143 packages in 12.707s found 0 vulnerabilities ⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-quasar The following files have been updated / added: .gitignore .postcssrc.js README.md babel.config.js package-lock.json package.json public/favicon.ico public/index.html src/App.vue src/assets/logo.png src/components/HelloWorld.vue src/main.js src/quasar.js src/styles/quasar.sass src/styles/quasar.variables.sass vue.config.js You should review these changes with git diff and commit them. INFO quasar Documentation can be found at: https://quasar.dev Quasar is relying on donations to evolve. We'd be very grateful if you can read our manifest on "Why donations are important": https://quasar.dev/why-donate Donation campaign: https://donate.quasar.dev Any amount is very welcomed. If invoices are required, please first contact razvan@quasar.dev Please give us a star on Github if you appreciate our work: https://github.com/quasarframework/quasar Enjoy! - Quasar Team |
実行する時のコマンドはvue cliと同じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
>>> npm run serve > vue-lesson@0.1.0 serve /Users/kouki/Projects/vue-lesson > vue-cli-service serve INFO Starting development server... 40% building 145/171 modules 26 active ...son/node_modules/core-js/modules/es.array.filter.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js. 98% after emitting SizeLimitsPlugin DONE Compiled successfully in 12350ms 22:09:36 App running at: - Local: http://localhost:8080/ - Network: http://192.168.11.4:8080/ Note that the development build is not optimized. To create a production build, run npm run build. |
Quasar拡張機能 Quasar – App Extension Quasarには色々な拡張機能が存在しています。QMarkdownを試してみたので、こちらの記事も是非👇 QuasarでMarkdownを表示する
Djangoの開発環境を作成した時の備忘録。 2020年2月17日にコピペでCentOS７の初期設定、PythonインストールからMySQLサーバーにログインまでできることを確認。 作成する環境 OS : CentOS7 Database : MySQL フレームワーク：Django 言語：Python3.7 使用ツール Vagrnat 仮想環境を管理するためのツールです。 Vagrantfileを用意すると、ファイルの内容に沿ったコマンドが自動で実行されるため、このファイルを共有するだけで、同じ環境を簡単に用意することができます。 Virtual Box 仮想化ソフトウェア・パッケージの一つ。仮想環境を用意するために必要なツールです。 Python環境は、Ubuntu仮想環境の上に構築します。 仮想環境の構築 現時点で、Cent OSのVagrant Boxファイルがインストールできているかを確認します。できていない場合は、各自でインストールをしてください。
|
1 2 |
>>> vagrant box list centos/7 (virtualbox, 1905.1) |
次に、以下のコマンドでVagrantfileを作成します。これが仮想マシーンの鋳型のような物になります。
|
1 |
vagrant init <マシーン名> |
出来上がった、Vagrantfileを開き、以下のような行を追加します。
|
1 |
config.vm.synced_folder "./workspace", "/home/vagrant/django_rest_framework" |
これで、PCのVagrantfileと同じディレクトリ のworkspace`フォルダと仮想マシーンの`django＿rest_frameworkディレクトリ が同期されます。この辺りは各自のセンスで命名しましょう。 これで準備は全て整ったので、仮想マシーンを起動させていきます。
|
1 2 3 4 |
# ファイル共有のためのプラグイン vagrant plugin install vagrant-vbguest # 起動 vagrant up |
で仮想マシーンを起動させ
|
1 |
vagrant status |
runnningになっていることを確認したら。
|
1 |
vagrant ssh |
仮想環境に接続します。 これで仮想環境の構築までは完了！ 基本設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
# yumをアップデート sudo yum update -y # gitをインストール sudo yum install git -y # 必要なライブラリを入れておく sudo yum install libffi-devel zlib-devel bzip2 bzip2-devel readline-devel openssl-devel python-devel mysql-devel gcc -y yum install wget # firewalldは切っておく systemctl stop firewalld # firewalld自動起動停止 systemctl disable firewalld # SELinixの確認 getenforce # もし Enforcingの場合は、 以下で編集しSELINUX=enforcingをSELINUX=disabledに書き換える。 sudo vi /etc/selinux/config # 設定を反映させるためにマシンを一旦シャットダウン sudo shutdown -r now # 僕の場合は、何故かDisableにならずにParmissiveになった getenforce |
パスワードを聞かれた場合はvagrantと入力します。 Python環境を整える 今回は、仮想マシーン上でpyenvを使うことにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
git clone https://github.com/yyuu/pyenv.git ~/.pyenv echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile echo 'eval "$(pyenv init -)"' >> ~/.bash_profile source ~/.bash_profile exec $SHELL -l pyenv -v pyenv install -l pyenv install 3.7.0 pyenv versions pyenv global 3.7.0 pyenv versions pip install django pip install djangorestframework pip install django-filter pip install djangorestframework-jwt pip install djoser # pip install PyMySQL # mysqlclient採用 pip install mysqlclient pip install uwsgi # MySQLをインストール sudo yum localinstall http://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm sudo yum info mysql-community-server sudo yum install -y mysql-community-server |
MySQLインストール参考 How to Install MySQL on CentOS 7 MySQL5.7の初期設定はこちら CentOS7にMySQLをインストールした時の備忘録…
Hello Vue.js!! 今日は、Vue.jsチュートリアルの、プロパティとカスタムイベントの章を読んでみました。 コンポーネントという概念に触れるのは今回が初めてだったので、理解するのに結構苦労しました。 プロパティ 親コンポーネントから子コンポーネントへのデータの受けわたしは、プロパティを介して行うみたいです。 実際の開発では、文字列単体よりも、配列で渡すことが多いと感じたので、配列の受け渡しを試してみました。 例えば、子コンポーネント側に、PostTitleという名前のプロパティがあったとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template> <div> <ul> <li v-for="(PostTitle, index) in PostTitles" :key="index" >{{ PostTitle }}</li> </ul> </div> </template> <script> export default { props: { // ここでプロパティの型を配列に指定 PostTitles: { Array, default: () => (["C", "C#", "Java"]) } // https://qiita.com/hogesuke_1/items/c74463de1a1eee802ca8 // factory関数にしないとWarning発生 } }; </script> |
そんな時に、PostTitleへ親コンポーネントの配列を渡すコードはこんな感じ。 v-bindは省略記法を使っています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <div id="app"> <!-- データの渡し口 --> <BlogPost :post-titles="PostTitles"></BlogPost> </div> </template> <script> import BlogPost from './components/BlogPost.vue' export default { name: 'app', components: { BlogPost, }, data: function() { return { PostTitles: ["Vue.js", "Angular", "React"] } }, } </script> |
親から子にデータを渡す時は、上から下に落ちていくイメージで直感的だと感じました。 次は、若干複雑と言われがちなカスタムイベントのチュートリアルをやっていきます。 ソースコードを実行するとこんな感じ
