發表文章

目前顯示的是有「JavaScript」標籤的文章

本站已搬家!

本站已搬家至https://blog.typeart.cc


歡迎舊雨新知指教!

後端用django 前端用框架開發過程的跨域問題

後端用django 前端用框架開發過程的跨域問題 若後端採用django,前端打算選用框架來開發,不必自己辛苦融合 在github上可以找到已經處理好的,只要下載就可以開始project 以我熟悉的vue為例,在github上試了幾個,最後找到 tmpbook/django-with-vuejs 比較符合個人的規畫,而且又有中文說明XD (詳見參考資料) 試著練習開發時發現一個問題:django執行時有一個port,vue開發時也有一個port。寫get時還無妨,寫到post時就遇上跨網域存取禁止的問題 一開始傻傻的,一直build成結果檔,在從django的服務上測試 每build一次就要十來秒啊!邊開發邊debug時,超級痛苦!時間都浪費在等待上了… 後來再回去看說明,才發現文章中間有寫到開發過程中的跨域存取問題。真的是要乖乖看完readme再開始作業的QQ 以下作業幾乎就是照抄原文了 我想同樣都是初學者但用其他框架應該也有可能遇到一樣的問題 所以還是把這一塊單獨拉出來寫成一篇了 至少讓其他跟我一樣剛入門的可以少走一些歪路 要安裝django的三方套件:django-cors-headers來解決 安裝套件 pip install django - cors - headers 在setting.py中的MIDDLEWARE片段引用(注意,列表有順序性) MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware' , 'django.contrib.sessions.middleware.SessionMiddleware' , 'corsheaders.middleware.CorsMiddleware' , 'django.middleware.common.CommonMiddleware' , 'django.middleware.csrf.CsrfViewMiddleware' , 'django.contrib.auth.middleware.AuthenticationMiddle...

JavaScript的substr, substring 比較

JavaScript中的截取字串,有2種寫法substr、substring,看起來很像,但用法卻完全不同! ECMAscript沒有將substr方法納入標準,較不建議使用。 substring longString.substring(起始位置,結束位置); "longString" .substring( 3 , 9 ); //"gStrin",共取了6碼 字串開頭由0算起 參數中若只輸入起始位置,由起始位置一路取到結束 實際取到的內容是結束位置前一位 要計算自己共取了多少長度的話,直接計算: 結束位置 - 起始位置 無法從字串後方開始算起 輸入負數則當成0,由0開始計算 結束位置小於起始位置,則自動將較小數字變成起始位置,較大數字變成結束位置 範例: "0123456789" //這串數字只是方便對應字串位置 "longString" .substring( 9 , 3 ); //"gStrin"。等同於 (3,9) "longString" .substring(- 2 , 3 ); //"lon"。等同於(0,3) "longString" .substring(- 2 ,- 4 ); //"",空字串。等同於(0,0) "longString" .substring( 3 ); //"gString"。從第3個取到結束 substr longString.substr(起始位置,長度); "longString" .substr( 3 , 4 ); //"gStr",共取了4碼 字串開頭由0算起 參數中若只輸入起始位置,由起始位置一路取到結束 若要從字尾算起,起始位置輸入-1就是最後一個,-2就是倒數第二,依序類推 長度若輸入負數,則當作0使用。即取0個值 範例: "0123456789" //這串數字只是方便對應字串位置 "longString" .s...

物件存在陣列裡的搜尋方法

JavaScript在一般的陣列中,可以直接使用filter、map來遍歷元素並搜尋或取得資料 但在object,就無法使用這些方便的函式了! 尤其當資料內容又是以物件型式儲存在陣列裡面 兩個東西結合在一起的時候真的是會寫到一團亂不知道自己在寫什麼東西XD 花了不少時間總算寫了個應該….還算是精簡的寫法QQ > DEMO < See the Pen object in array search demo by hsuanyi ( @windclara ) on CodePen . 要做到在表格內每一欄位的資料都可以搜尋並即時顯示出有相同內容之欄位資料 由於我來源資料是儲存在nedb裡面(註:nedb為一輕量化的單機版mongoDB,可視為nosql版的sqlite) nedb中每一筆資料是一個物件,查詢出來後的所有結果回傳成一組陣列 就會得到如下的資料結構: dbData = [ {id: 0001 ,name: '王小明' ,phone: 0912345678 }, {id: 0002 ,name: '劉得滑' ,phone: 0987654321 }, {id: 0003 ,name: '周潤花' ,phone: 0978123456 }, {id: 0004 ,name: '林志零' ,phone: 0955111222 }]; 搜尋功能的程式碼: function search (searchValue) { let searched = dbData.map (obj => { if ( Object .keys(obj).some ( property => obj[property].toString() . indexOf(searchValue) != - 1 ) ) return obj; }); return searched.filter (obj => obj != undefined ); } //demo網頁我使用vue,所以demo網頁裡的寫法會略有不同 //為方便您使用,本文中以fun...

計算含中英文字的字串長度

一般來說直接以str.length就可以直接取得 但字串中若有含中英文字,JavaScript 回傳的數值就不會是我們想要的了 比如 "中文abc" .length //return 5. 我們期望他回傳7 "abcdefg" .length //return 6. 因為中文字節等於2 bytes .length 回傳的數值卻會把中文字當1個字來計算 導致後續如substring、計算長度等作業造成錯誤 解決方法很簡單,只要將中文字取代成2個英文字後再來計算長度,就會得到我們想要的數值! 直接註冊原型函式,語法如下: String .prototype.len= function () { return this .replace( /[^\x00-\xff]/g , "xx" ).length; } "中文abc" .len(); // return 7 若不註冊,只想當一般function呼叫使用 function len (str) { return str.replace( /[^\x00-\xff]/g , "xx" ).length; } len( "中文abc" ); //return 7 參考資料

JavaScript30 個人筆記

首先得感謝wesbos製作的 JavaScript30 ,以簡單又有趣的例子引入,並可以快速了解JavaScript的特性及常用功能! 註冊後可免費觀看,且有英文字幕,就算真的都聽不懂英文,邊看影片邊暫停key程式碼,也可以知道在做什麼。對於想入門JavaScript的朋友們,不可錯過! 建議稍微有一些簡單基礎後再來觀看,不然可能會一頭霧水 所謂簡單基礎,指的是知道for、if等,也就是對於程式語言有基本的認識,就差不多足夠了! 至於一些JavaScript的特性,比如閉包、callback、暱名函數,就需要輔以其他參考資料了! 扣除這些比較複雜的特性之外,其他像是一些對於html的操作,籍由JavaScript30快速入門,會是一個很好的起始點! 關於JavaScript30的筆記,很多人也做了精彩的筆記可供參考 PJCHENder github/soyaine –中國人整理的筆記 順便附上個人當初學習時不熟悉所整理的筆記,也方便自己回來查詢 >>  筆記