發表文章

目前顯示的是 六月, 2017的文章

webpack的學習(7) ------- css-loader, style-loader的使用。

圖片
通常我們撰寫網頁一定會用上css來做美化的效果,但是在webpack中它本身只認的懂javascript files !那css要怎麼辦呢?-----這就要仰賴我們loader來幫我們處理 css, jpg .....等這些其他的靜態檔案囉!

CSS-Loader: 首先這邊我們會先介紹 webpack 上最多人用的 css-loader!他本身目的就是幫我們把css file透過@import 或是url()的方式載入到 Javascript 內,這樣webpack就可以認得css。其更多的詳細設定可以參考 css-loader的手冊。


Style-Loader: 當我們用了css-loader之後其實在browser那邊並不認得,所以需要一個可以將載入到Javascript內的css內容轉成browser看得懂的css 語法!這個任務就是Style-Loader在做的事情,否則只用css-loader 會發現頁面其實沒有真的去執行 css 裡面的設定。更多有關Style-loader的設定可以參考style-loader的手冊。


安裝CSS-Loader 與Style-Loader 當然首先我們要先安裝這兩個loader啦!透過npm 就可以很簡單的把這兩個loader裝起來啦!

~/mywebpack $  npm install--save-devcss-loader   style-loader

這邊因為這兩個loader只是開發的時候會用到,所以用 --save-dev的參數。


建立css 檔案: 接著我們在app這個資料夾下面建立一個名為 ' index.css' 的檔案來撰寫css內容。所以我們的專案結構就變成如下所示:

mywebpack/
|------------- app/
|                     |--------- index.css
|                     |--------- index.js
|
|-------------- node_modules/
|
|-------------- index.html
|-------------- package.json
|-------------- webpack.config.js

接著我們在index.css 內寫入下面的css 內容。
body{ …

Django auth 採用自己的 models 做使用者登入在check時的問題。

圖片
起因: Django原生有提供一套讓使用者做註冊與登入的方法跟架構(django.contrib.auth.models內),但是有些時候我們會改用自己的models來做使用者登入與註冊的流程~例如:django 是用user name當作使用者帳號,但是我想用email當作使用者帳號就沒辦法用django原生的架構

系統: Ubunut 16.04
Django 1.11
python3


架構: MyProject
|--------MyUser
|                |-------models.py
|                |------- .........
|
|--------myproject
|                |-------settings.py
|                |------- .........
|
|--------manage.py

簡單的說就是先用django-admin 生 MyProject然後再到目錄下用python manage 生 app(MyUser)然後我的使用者Database架構會寫在MyUser下的models.py內(記得settings.py內的INSTALLED_APPS要加入MyUser)。

以下是我的部份 User model code :
class User(AbstractBaseUser, PermissionsMixin): email = models.EmailField( _('email'), max_length=254, unique=True, help_text=_( 'Required ! 254 or fewer, Letter ,digits and @/./-/_ only.' )) # end of email setting biotrump_id = models.CharField( default=uuid.uuid4, editable=False, max_length=254, db_index=True) na…