Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Django の {{ form }} をカスタマイズして使う

参考サイト https://docs.djangoproject.com/en/1.11/topics/forms/#rendering-fields-manually https://docs.djangoproject.com/en/1.11/topics/forms/#looping-over-the-form-s-fields 手動でformをレンダリングしてカスタマイズする。 {{ form }}でレンダ…

Bootstrap + Django で、themeをMaterial ぽくする。

大まかな流れ ベースになるbase.htmlページを作成する。 base.htmlを作成する urls.pyを設定して、テストしてみる。 css.htmlを作成する javascript.htmlを作成する base.htmlに読み込ませる bootstrapのthemeを変える チューニングされている bootstrapファ…

Vue.js + Django でVue.config.delimitersを使う

参考サイト https://jp.vuejs.org/v2/api/#delimiters Vueの設定を変更する。 {{}} -> [[]] に変更する。 new Vue({ delimiters: ['[[, ']]'] })

Vue.js 入門 vol.6 コンポーネント 後半

参考サイト https://jp.vuejs.org/v2/guide/components.html#動的コンポーネント 動的コンポーネント コンポーネントの切り替え: componentタグと、isによるcomponentの指定で実装可能。 var vm = new Vue({ el: '#example', data: { currentView: 'home' },…

Vue.js 入門 vol.6 コンポーネント 前半

参考サイト https://jp.vuejs.org/v2/guide/components.html コンポーネントの使用 登録 new Vue({ el: '#some-element', }) Vue.component('my-component',{ //オプション }) 一度登録すると、カスタム要素<my-component>を使えるようになる。親のinstanceのtemplate内で</my-component>…

Vue.js 入門 vol.5 フォーム入力バインディング

参考サイト https://jp.vuejs.org/v2/guide/forms.html フォーム入力バインディング formのinput要素と、textarea要素で、two-way binding を作成するには、v-modelを使うことができる。(初期値は無視する。) テキストの例 <input v-model="message" placeholder="edit me"> <p>Message is : {{ message }}</p> 複…

Vue.js 入門 vol.4 イベントハンドラ

参考サイト https://jp.vuejs.org/v2/guide/events.html イベントの購読(subscribe) v-on ディレクティブ <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) メソッド…

Vue.js 入門 vol.3

参考サイト https://jp.vuejs.org/v2/guide/class-and-style.html クラスとスタイルのバインディング <div v-bind:class="{ active: isActive }"></div> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> da…

Vue.js 入門 vol.2

参考サイト https://jp.vuejs.org/v2/guide/instance.html コンストラクタ vm (ViewModel の略) を Vue インスタンスの変数名としてよく使うらしい。 すべてのVue vmは、Vueコンストラクタ関数(new Vue)で、root Vue instance を作成することから始まる。roo…

Vue.js 入門 vol.1

参考サイト https://jp.vuejs.org/v2/guide/ Vue のチュートリアル vueの基本機能をみてみる。 <script src="https://unpkg.com/vue"></script> <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', // elで #app は、id=app で指定ができ…

Celery(redis) + Django

参照リンク https://www.codingforentrepreneurs.com/projects/time-tasks/ https://www.codingforentrepreneurs.com/blog/celery-redis-django/ https://redis.io/ http://docs.celeryproject.org/en/latest/userguide/periodic-tasks.html#crontab-schedul…

Angular4 + Bootstrap4をローカルでテスト

利用したテーマ http://rawgit.com/start-angular/SB-Admin-BS4-Angular-4/master/dist/dashboard Angular4 + Bootstrap4のthemeをデプロイ 以下のリンクからテーマをダウンロードする。 http://rawgit.com/start-angular/SB-Admin-BS4-Angular-4/master/dis…

Angular4 + Django1.11 vol.12

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ Fix Broken Images 以下の動画を元に、defaultのimagepathなどを、S3のurlに修正する。 https://www.codingforentrepreneurs.com/projects/angular-django/fix-broken-images/?…

Angular4 + Django1.11 vol.11

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ Backend Image Path heroku上のbackendのimageのpathを設定する。 Video modelにimage_pathを追記する。 class Video(models.Model): name = models.CharField(max_length=220)…

Angular4 + Django1.11 vol.10

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ Go Live with Heroku, Django, & Angular heroku へのdeployの準備をする。 settings.pyのコードの修正をする。 # settingsフォルダを作成して、その中に、settingsファイルを…

Angular4 + Django1.11 vol.9

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ Catch All 404 + 500 Server Page 404 error, 500 error のときのページの処理を、angularのrouterを使って実装する。 HomeComponentのrouterの設定をpathMatch fullに設定する…

Angular4 + Django1.11 vol.8

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ https://angular.io/docs/ts/latest/guide/server-communication.html http://qiita.com/kura07/items/c9fa858870ad56dfec12 Handle Angular Http Error angular公式チュートリ…

Angular4 + Django1.11 vol.7

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ http://qiita.com/kura07/items/c9fa858870ad56dfec12 Handling 404 with Object Lookups 指定したurlが無いときの、404 errorのページを設定する。 video-detail.component.ts…

Angular4 + Django1.11 vol.6

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ http://www.django-rest-framework.org/api-guide/generic-views/#listapiview http://qiita.com/kura07/items/c9fa858870ad56dfec12 Better Backend Queries featuredのquery…

Angular4 + Django1.11 vol.5

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ http://www.django-rest-framework.org/api-guide/generic-views/#listapiview http://qiita.com/kura07/items/c9fa858870ad56dfec12 Integrate Django API with Angular video…

Angular4 + Django1.11 vol.3

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ https://www.codingforentrepreneurs.com/blog/random-string-generator-in-python/ https://www.codingforentrepreneurs.com/blog/a-unique-slug-generator-for-django/ Video…

Angular4 + Django1.11 vol.2

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ ng build to Django Static $ ng build --prod で、production versionのbuildを実行する。(結果、bundle.jsが作成される) buildしたファイルの出力先をdjangoのstaciファイ…

Angular4 + Django1.11 vol.1

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ Getting Started Angular4+Django djangular4というフォルダを作成する。さらに、djangular4/client, djangular4/backend というサイトをそれぞれ作成する。 clientフォルダに…

Angular4入門_Vol.20

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ ngBuild and Deploy to Heroku packageが完成したら、$ ng build --prod で、deploy用に、bundle.jsを作成する。prodオプションは、minファイルにするためか。bundle.jsには、t…

Angular4入門_Vol.19

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html https://angular.io/docs/ts/latest/guide/router.html#!#basics-router-links Router Link &…

Angular4入門_Vol.18

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Video Item Model video classを作成するために、video.tsファイルを作成する。これはdjangoで言うと、modelsを使うようなものか。 export class VideoItem { slug: string; na…

Angular4入門_Vol.17

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Search Video List search methodを、videos.service.tsに追記する。methodの処理の方法は、get methodと似てるので、中身をコピペして再利用する。 search(query){ return thi…

Angular4入門_Vol.16

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Video Service app/videos フォルダを作成する $ ng g service videosで、serviceの雛形を作成する。 videos.service.tsと、videos.service.spec.tsを、app/videosフォルダに移…

Angular4入門_Vol.15

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Passing Data to Components search.component.ts にコードを追記する。 import { Component, OnInit, Input } from '@angular/core'; //Input をimportする。 import { Router…

Angular4入門_Vol.14

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Search Detail search.component.tsにrouterをつける。 import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; // import Router @C…