2020.02.19 Web開発 debonki

DjangoとMySQLを接続する

DjangoとMySQLを接続した時の備忘録です。 MySQLの設定を確認 Django側の設定で必要な項目は、データベース名ユーザー名（権限を持っている）ユーザーのパスワードホスト名ポート番号です。これらを実際に調べていきます。 MySQLサーバーへ入る

[vagrant@localhost ~]$ mysql -u Admin -pP@ssw0rd
　　　　　　　　　　　　　　　　　　　⬆️ユーザーのパスワード

1 2	[vagrant@localhost ~]$ mysql -u Admin -pP@ssw0rd 　　　　　　　　　　　　　　　　　　　⬆️ユーザーのパスワード

¥sでデータベースの情報を取得します。

mysql> \s
--------------
mysql  Ver 14.14 Distrib 5.7.29, for Linux (x86_64) using  EditLine wrapper

Connection id:      4
Current database:   
⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️使うのはこれ！！！
Current user:       Admin@localhost
SSL:            Not in use
Current pager:      stdout
Using outfile:      ''
Using delimiter:    ;
Server version:     5.7.29 MySQL Community Server (GPL)
Protocol version:   10
Connection:     Localhost via UNIX socket
Server characterset:    latin1
Db     characterset:    latin1
Client characterset:    utf8
Conn.  characterset:    utf8
UNIX socket:        /var/lib/mysql/mysql.sock
Uptime:         16 min 29 sec

Threads: 1  Questions: 24  Slow queries: 0  Opens: 113  Flush tables: 1  Open tables: 106  Queries per second avg: 0.024
--------------

mysql Ver 14.14 Distrib 5.7.29, for Linux (x86_64) using EditLine wrapper

Connection id: 4

Current database:

⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️使うのはこれ！！！

Current user: Admin@localhost

SSL: Not in use

Current pager: stdout

Using outfile: ''

Using delimiter: ;

Server version: 5.7.29 MySQL Community Server (GPL)

Protocol version: 10

Connection: Localhost via UNIX socket

Server characterset: latin1

Db characterset: latin1

Client characterset: utf8

Conn. characterset: utf8

UNIX socket: /var/lib/mysql/mysql.sock

Uptime: 16 min 29 sec

Threads: 1 Questions: 24 Slow queries: 0 Opens: 113 Flush tables: 1 Open tables: 106 Queries per second avg: 0.024

--------------

ユーザー名：Admin ホスト名：loaclhost になります。ユーザーの作成方法、権限を付与する方法などは、公式ドキュメントを参照してみてください。【MySQL】公式マニュアル作成したデータベース名は"DiaryApp"にしました。

mysql> create database DiaryApp;
Query OK, 1 row affected (0.00 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| DiaryApp           |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.00 sec)

mysql> create database DiaryApp;

Query OK, 1 row affected (0.00 sec)

mysql> show databases;

+--------------------+

| Database |

+--------------------+

| information_schema |

| DiaryApp |

| mysql |

| performance_schema |

| sys |

+--------------------+

5 rows in set (0.00 sec)

Django側の設定次は、Django側の設定です。 setting.pyに設定を足すのと、models.pyを作成します。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'DiaryApp',
        'USER': 'Admin',
        'PASSWORD': 'P@ssw0rd',
        'HOST': '',
        'PORT': '3306',
        'OPTIONS': {
        # 制約を厳しくチェック
        'sql_mode': 'traditional',
       },
    }
}

'ENGINE': 'django.db.backends.mysql',

'NAME': 'DiaryApp',

'USER': 'Admin',

'PASSWORD': 'P@ssw0rd',

'sql_mode': 'traditional',

},

}

# coding: utf-8
from django.db import models
from datetime import date

class Diary(models.Model):
    date = models.DateField(default=date.today, primary_key=True)
    title = models.CharField(max_length=128)
    body = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    publishing = models.BooleanField(default=True)

from django.db import models

from datetime import date

class Diary(models.Model):

date = models.DateField(default=date.today, primary_key=True)

title = models.CharField(max_length=128)

body = models.TextField()

created_at = models.DateTimeField(auto_now_add=True)

updated_at = models.DateTimeField(auto_now=True)

publishing = models.BooleanField(default=True)

マイグレーション models.pyに書いた「モデル」をデータベースに反映させます。

[vagrant@localhost diary_app]$ python manage.py makemigrations [app名]
[vagrant@localhost diary_app]$ python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying sessions.0001_initial... OK

[vagrant@localhost diary_app]$ python manage.py makemigrations [app名]

[vagrant@localhost diary_app]$ python manage.py migrate

Operations to perform:

Apply all migrations: admin, auth, contenttypes, sessions

Running migrations:

Applying contenttypes.0001_initial... OK

Applying auth.0001_initial... OK

Applying admin.0001_initial... OK

Applying admin.0002_logentry_remove_auto_add... OK

Applying admin.0003_logentry_add_action_flag_choices... OK

Applying contenttypes.0002_remove_content_type_name... OK

Applying auth.0002_alter_permission_name_max_length... OK

Applying auth.0003_alter_user_email_max_length... OK

Applying auth.0004_alter_user_username_opts... OK

Applying auth.0005_alter_user_last_login_null... OK

Applying auth.0006_require_contenttypes_0002... OK

Applying auth.0007_alter_validators_add_error_messages... OK

Applying auth.0008_alter_user_username_max_length... OK

Applying auth.0009_alter_user_last_name_max_length... OK

Applying auth.0010_alter_group_name_max_length... OK

Applying auth.0011_update_proxy_permissions... OK

Applying sessions.0001_initial... OK

MySQLに入って、正しくテーブルが作られているか確認してみます。

mysql> use DiaryApp
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed

mysql> show tables;
+----------------------------+
| Tables_in_DiaryApp         |
+----------------------------+
| auth_group                 |
| auth_group_permissions     |
| auth_permission            |
| auth_user                  |
| auth_user_groups           |
| auth_user_user_permissions |
| diary_app_diary            |
| django_admin_log           |
| django_content_type        |
| django_migrations          |
| django_session             |
+----------------------------+
11 rows in set (0.00 sec)

Reading table information for completion of table and column names

You can turn off this feature to get a quicker startup with -A

Database changed

mysql> show tables;

+----------------------------+

| Tables_in_DiaryApp |

+----------------------------+

| auth_group |

| auth_group_permissions |

| auth_permission |

| auth_user |

| auth_user_groups |

| auth_user_user_permissions |

| diary_app_diary |

| django_admin_log |

| django_content_type |

| django_migrations |

| django_session |

+----------------------------+

11 rows in set (0.00 sec)

2020.02.02 Python debonki

Djangoで新規にモデルを作成したのにmigration時に「No changes detected」となった時の対処法

Djangoプロジェクトを作成し、新しくモデルを作成して、migrationを書けた時に、「No changes detected」と表示されてしまう。モデルを変えたのになぜ？？？と思ってググルと

python manage.py makemigrations <project名>

1	python manage.py makemigrations <project名>

とmigrationするときに、プロジェクト名を指定しないといけないらしい。 python manage.py makemigrationsだけでも、上手くいっている人も、いるため、謎は深まるが、変更が反映されないときは、プロジェクト名を指定してあげると確実

>>> 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

>>> 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

 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

│ ├── __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

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

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

2020.01.09 Web開発 debonki

Vue Routerを使ってみる

今日は、Vue cliを使って、お手軽にVueのRouting機能を試していきます。参考：Getting Started(公式) 公式ドキュメントではVue cliを使った解説はされていないので、この記事では、Vue cliを使いながらRouting機能を試していきたいと思います。

vue create <project name>
cd <project name>
npm install vue-router

1

2

3

vue create <project name>

cd <project name>

npm install vue-router

で準備を整えたら、必要な設定をしていきます。

└── src
    ├── App.vue ⭐️
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js⭐️
    ├── router.js⭕️
    └── views
        ├── Bar.vue⭕️
        └── Foo.vue⭕️

コードを書く必要があるのは、星マークのファイル、⭕️は新しらないといけないファイル。 route.js このファイルで、コンポーネントとURLのマッピングを行っていきます。コードはこんな感じ

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}
    ]
});

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をプラグインとして登録します。

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')

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が動くようになります。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<router-view></router-view>

</div>

</template>

2020.01.07 Web開発 debonki

子コンポーネントから親コンポーネントへのデータの受け渡し〜$emitを使って〜

Vueでは、コンポーネント間の関係はした図のように、ツリー状になっており、上から下へのデータの受け渡しは、propを使って行っていました。ツリーの下から上にデータを渡すときは、少し大変なようで、親コンポーネントが子コンポーネントのイベントを購読することによって実現するようです。「購読」って何だ。って公式ドキュメントを読みながらした僕の理解はこんな感じ。＄emit（）でカスタムイベントを定義できると行っておきながら、何の処理もしていないじゃないかといったツッコミどころは多いですが、とりあえずの理解のために概念図を書いてみました。パワポとか使ってもっと綺麗な図にできたら良かったのですが、そこまでの気力はありませんでした。ソースコードカスタムイベントを作って遊ぶために使ったソースコードです。親コンポーネント（App.vue）

<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,
  },
};

import BaseCheckbox from "./components/BaseCheckbox";

子コンポーネント（Checkbox.vue）

<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>

v-on:click="$emit('CheckboxChanged', $event.target.checked)"

$emitを使ってみて処理自体はとても単純なのですが、定義しなければいけないプロパティ名、イベント名などが多く、親コンポーネントと子コンポーネントを行き来していると訳が分からなくなって、頭がこんがらがってしまうという印象でした。これは何度も使って慣れるしかないかも

2019.12.24 Web開発 debonki

子コンポーネントから親コンポーネントへ〜$emitを使って〜

子要素から親要素へのデータの受け渡し公式では、データの受け渡しではなく、「子コンポーネントのイベントを購読する」と行っています。要するに、親コンポーネントから子コンポーネントのイベントを発火させるという意味です。子コンポーネントから親コンポーネントにデータを受けわたすということは、実際のところ不可能であるため、親コンポーネントから、子コンポーネントのイベントを発火させることで、擬似的にこれらの処理を実現することになります。 $emit 使うのは$emitというメソッドです。

<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
    };
  },
})

<h1>{{ number }}</h1>

<sample-button

:totalNumber="number"

v-on:my-click="number += $event"

>

</sample-button>

</div>

Vue.component('sample-button', {

this.$emit("my-click", this.totalNumber += 1);

el: '#components-demo',

2019.12.23 Web開発 debonki

Vue.jsにQuasar Frameworkを入れてみる

はじめに Vue.jsの使い方の最低限の部分は分かったので、次は、CSSフレームワークを導入して、開発を始めてみようと思い、試しに Quasar Framework 入れてみました。なぜQuasarを選んだかは、公式ページが一番カッコ良かったから、です。導入方法やり方は二つ quasar cliを入れる vue cliにプラグインとしてquasarを入れる。元々、vue cliを入れていたので、既存のVueプロジェクトにQuasarをプラグインとして入れる方法を選択。まずは、Vueプロジェクトを作成していきます。すでにVue.jsの環境が整っていれば、

vue create <Project Name>

1	vue create <Project Name>

と打てば、<Project Name>プロジェクトが作成されます。このプロジェクトに、プラグインとして、quasarを導入します。 vue cliで作成したプロジェクトのディレクトリに移動し、vue addでQuasarを導入。

>>> 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

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 to select, to toggle all, 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:

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と同じ。

>>> 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.

> 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.

2019.12.22 Python debonki

Djangoの開発環境を作る

Djangoの開発環境を作成した時の備忘録。 2020年2月17日にコピペでCentOS７の初期設定、PythonインストールからMySQLサーバーにログインまでできることを確認。作成する環境 OS : CentOS7 Database : MySQL フレームワーク：Django 言語：Python3.7 使用ツール Vagrnat 仮想環境を管理するためのツールです。 Vagrantfileを用意すると、ファイルの内容に沿ったコマンドが自動で実行されるため、このファイルを共有するだけで、同じ環境を簡単に用意することができます。 Virtual Box 仮想化ソフトウェア・パッケージの一つ。仮想環境を用意するために必要なツールです。 Python環境は、Ubuntu仮想環境の上に構築します。仮想環境の構築現時点で、Cent OSのVagrant Boxファイルがインストールできているかを確認します。できていない場合は、各自でインストールをしてください。

>>> vagrant box list
centos/7           (virtualbox, 1905.1)

1 2	>>> vagrant box list centos/7 (virtualbox, 1905.1)

次に、以下のコマンドでVagrantfileを作成します。これが仮想マシーンの鋳型のような物になります。

vagrant init <マシーン名>

1	vagrant init <マシーン名>

出来上がった、Vagrantfileを開き、以下のような行を追加します。

config.vm.synced_folder "./workspace", "/home/vagrant/django_rest_framework"

1	config.vm.synced_folder "./workspace", "/home/vagrant/django_rest_framework"

これで、PCのVagrantfileと同じディレクトリのworkspaceフォルダと仮想マシーンのdjango＿rest_frameworkディレクトリが同期されます。この辺りは各自のセンスで命名しましょう。これで準備は全て整ったので、仮想マシーンを起動させていきます。

# ファイル共有のためのプラグイン
vagrant plugin install vagrant-vbguest
# 起動
vagrant up

vagrant plugin install vagrant-vbguest

# 起動

vagrant up

で仮想マシーンを起動させ

vagrant status

1	vagrant status

runnningになっていることを確認したら。

vagrant ssh

1	vagrant ssh

仮想環境に接続します。これで仮想環境の構築までは完了！基本設定

# 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

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を使うことにします。

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

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

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をインストールした時の備忘録…

2019.12.10 Web開発 debonki

Vueのプロパティとカスタムイベント〜他のコンポーネントへのデータの受け渡し方〜

Hello Vue.js!! 今日は、Vue.jsチュートリアルの、プロパティとカスタムイベントの章を読んでみました。コンポーネントという概念に触れるのは今回が初めてだったので、理解するのに結構苦労しました。プロパティ親コンポーネントから子コンポーネントへのデータの受けわたしは、プロパティを介して行うみたいです。実際の開発では、文字列単体よりも、配列で渡すことが多いと感じたので、配列の受け渡しを試してみました。例えば、子コンポーネント側に、PostTitleという名前のプロパティがあったとします。

<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>

v-for="(PostTitle, index) in PostTitles"

:key="index"

>{{ PostTitle }}</li>

</ul>

</div>

</template>

そんな時に、PostTitleへ親コンポーネントの配列を渡すコードはこんな感じ。 v-bindは省略記法を使っています。

<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>

親から子にデータを渡す時は、上から下に落ちていくイメージで直感的だと感じました。次は、若干複雑と言われがちなカスタムイベントのチュートリアルをやっていきます。ソースコードを実行するとこんな感じ

2019.12.08 Web開発 debonki

Vue.jsで快適な開発ライフを送りたい

VS Codeは、デフォルトで色々なショートカットキーがあったりして、特にプラグインなどを入れなくても、十分便利に使えるのですが、Udemyの講習やQiitaの記事ではプラグインが入っている前提で話が進んでいることが多いので、後から追加したプラグインや加えた設定を備忘録として残しておこうと思います。コード整形 Vue.jsでは、HTMLタグに属性を追加して、動的な処理を加えていくのですが、何の設定もしないと、以下のようなHTMLタグが出来上がってしまいます。このコードでは、属性が２つだけなので、何とか読めますが、これが３つ４つと増えてきたら読めた物ではありません。タグが見切れる前に早く何とかしましょう。参考にした記事はこちら↓ VSCodeでvueファイルのhtmlを自動フォーマットする方法必要な情報だけが載っていてノーストレスで解決できました。設定が終わったら、。.vueのコードを全選択して、Shift + option + Fで整形完了！（WindowsならCtrl + Alt + F）これならソースコードが右側に見切れることはありませんね

2019.12.05 Web開発 debonki

Vueコンポーネントの基本

今日は、Vue.js公式の「Vueコンポーネントの基本」を読んでみました。コンポーネントの基本コンポーネントの基本例えば、下図のTwitterのいいねボタン。大きさはとても小さいですが、このボタンには、色々な情報が詰め込まれています。パッと思いつく感じでも。カーソルが触れると赤くひかる押されると、カウントが１増えるもう一度押されるとカウントが１減るハートマークのアイコンマウスオーバーエフェクトが動作する。などです。これらの情報は、「最小単位のコンポーネントが持っておくべき。」というのが基本的な考え方です。参考：Atomic Design を分かったつもりになるボタンコンポーネントを作ってみる Vueにおいて、コンポーネントを作ることは簡単です。オブジェクト志向言語に馴染みがある人は、コンポーネントはクラスのような物だと言われるとピントくるかもしれません。

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

new Vue({el: '#components-demo'})

Vue.component('button-counter', {

new Vue({el: '#components-demo'})

data要素を関数にしないと、コンポーネントが独立した存在ではなくなってしまいます。上記のコードでは、button-counterという名前のコンポーネントを作成し、#components-demoにマウントしています。マウント先のHTMLはこんな感じ。

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

<button-counter></button-counter>

</div>

インスタンス化したコンポーネントは何度でも使い回すことができ、それぞれのコンポーネントは完全に独立しています。親要素から子要素への値の受け渡し以下の図のようにするとpropを使ったデータの受け渡しをすることができます。子コンポーネントに汎用性を持たせるために、具体的なデータを入れたくない場合は、上図のように、コンポーネントを分けると、コンポーネントの使い回しが容易になるかと思います。

CATEGORY Web開発

DjangoとMySQLを接続する

Djangoで新規にモデルを作成したのにmigration時に「No changes detected」となった時の対処法

Vue Routerを使ってみる

子コンポーネントから親コンポーネントへのデータの受け渡し〜$emitを使って〜

子コンポーネントから親コンポーネントへ〜$emitを使って〜

Vue.jsにQuasar Frameworkを入れてみる

Djangoの開発環境を作る

Vueのプロパティとカスタムイベント〜他のコンポーネントへのデータの受け渡し方〜

Vue.jsで快適な開発ライフを送りたい

Vueコンポーネントの基本

広告

Recent Posts