2017年11月23日 星期四

取出form表單的參數,用來放進ajax傳送

記一下...關於JQuery 的 serialize / serializeArray / parrm :
1. serialize()方法也是作用于一个JQuery对象,它能够将DOM元素内容序列化为字符串,serializeArray()方法不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据
2.在JQuery中还有一个与serialize()类似的方法--serializeArray(),该方法不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据。
3.$.param()方法是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化 https://stackoverflow.com/questions/9267072/jquery-serialize-an-object

http://blog.csdn.net/baidu_31333625/article/details/72628418

https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery

2017年11月22日 星期三

跨域的請求會請求兩次?

為什打開F12我的請求會有兩次,爾且第二次才有回應?


In 
CORS, a preflight request with the OPTIONS method is sent, so that the server can respond whether it is acceptable to send the request with these parameters

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS





原來是因為ajax異步的關係

https://forums.asp.net/t/2068723.aspx?AJAX+called+twice+and+success+event+runs+second+time+

2017年11月16日 星期四

我跳槽javascript的經過

說是跳槽也不算啦,因為老闆是同一個,只是做的東西不同。

事情是這樣的:
就在今年的3/6我在台北開始了我的第二份寫程式工作,工作內容跟我第一份非常相似,薪水也是我在中部可以領到的薪水,就在試用期兩個月的時候,說要提早轉正,這樣我有端午禮金,但是試用期過後我薪水沒有漲.....因為面試時我填的預期薪水就是試用薪水,我心裡想你早說我就不會來這家了........
人事問我說:你怎麼轉正看起來沒有開心的感覺
我怎可能開心得起來QQ
原本預計的薪水試用期過後會多三千,結果沒有!!!
基於繳完房租繳完押金我怕找工作時間會活不下去,我就跟人事說,滿半年後我會再提加薪一次(心裡想說,在不加就走人)

所以差不多在8月份的時候我跟同事聊到想加薪,因緣際會之下老闆知道我想加薪.....,
跟我說
"他知道我來台北是想要學東西,前半年讓我在這間是磨練,如果要加薪的話,可能要到他另一家公司,因為這間是他和別人合夥的,不能說加就加"
於是我當然好,雖然目前這家很爽,雖然過去特休要重計,雖然過去比較責任制,雖然過去每天上班40分下班40分的車程,雖然過去要交通費,但是這邊薪水真的太少(沒辦法我有租房又要給家用),爾且終於跟面試的時候講得比較像了   "想學東西跟我學就好"  面試時老闆霸氣拋下這句話,我至今沒有忘...。


於是8/11號就到了現在這一家

終於要碰新東西了,我在這間變成純前端,當然偶爾還是要還是要幫忙PHP專案,但是就不用像之前這樣兩邊都碰都不精了,現在薪水扣掉交通費還有1000多,希望試用期過後有加薪喔(不然就要哭回中部了)

之後再來寫這3個月在新公司的歷程.....

依賴管理工具


PHP有composer
javascript 有npm

兩種東西大同小異,只是語言不同
另外有個東西叫做yarn因為npm不好用而出現的,
你可以用npm下載yarn之後拿它來取代npm  XD


阿然後
javascript因為有分前後端,前端有些專案也很多包
前端所以有了
bower
之後因為JS進步速度實在太快,又是時代的眼淚
bower沒人用了改用Browserify  或Webpack

是不是覺得js煩
是說npm也一直在進步,之後當然是以npm能夠包全部為主,就有點像CSS和SCSS的感覺,有可能學這麼多,進步趨緩之后,只剩下npm??



JS更新太快,改來學python好了??


從零開始: 使用NPM套件
https://medium.com/html-test/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B-%E4%BD%BF%E7%94%A8npm%E5%A5%97%E4%BB%B6-317beefdf182



javascript 依賴管理  講的歷史脈絡清楚
http://bearcatjs.org/%E5%8D%9A%E5%AE%A2/index.html


http://cyj.me/why-seajs/requirejs/

datatable的thead 會跑掉

在建立dataTable時,發現如果設定
scrollY:'420px',
爾且又將table包進
boostrap 的 tab-pane裡面時
thead 會跑掉
相關文章
https://datatables.net/forums/discussion/14342/column-header-not-aligned-with-column-data-with-horizontal-scrolling/p2
thead縮成一塊
https://datatables.net/forums/discussion/2148/header-width-issue

我是將
scrollY:'420px'刪掉即解決

Column width issues with Bootstrap tabs
https://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/

用composer 裝東西

composer require 套件名:版本號
composer  global require 套件名

上面兩個命令不同的地方在於

第一個是加入composer資料夾到當前路徑,像是twig這種模板引擎,生成之後我們只要require autoload.php就行了

第二個是加入到composer主程式的目錄下,目的在於像是laravel 這種有出一個laravel.bat這種安裝程式的,這樣將C:\Users\stanley\AppData\Roaming\Composer\vendor\bin加到環境變數之後
在cmd 輸入 laravel new 專案名

composer remove 套件名 (不用加版本號)
這樣就能完美移除不需要的套件

參考至:
https://henry255164.gitbooks.io/laravel_reviews/content/article1-1.html

關於那個被淘汰的iframe

IFRAME就像是新開了一個瀏覽器視窗,我遇到的困難有,它吃不到父頁的CSS,所以你IFRAME裡面也要有樣式,不然就只是HTAML的話會很醜

投機的方法:
iframe 怎么继承父页面的 css 和 js
https://zhidao.baidu.com/question/1431345202657576579.html?si=2&qbpn=1_2&tx=&wtp=wk&word=iframe+%E6%80%8E%E4%B9%88%E7%BB%A7%E6%89%BF%E7%88%B6%E9%A1%B5%E9%9D%A2%E7%9A%84+css+%E5%92%8C+js&fr=solved&from=qb&ssid=&uid=bd_1470676649_773&pu=sz%40224_240%2Cos%40&step=2&bd_page_type=1&init=middle

題外話?上面有人另外提到PJAX
那麼你聽過PJAX嗎?





詳述了IFRAME的強大應用
https://segmentfault.com/a/1190000004502619


理解簡單又強大的IFRAME之後
如何不用iframe做到隔离js和css?
不能。本来上个世纪早就可以了,但是大家都不肯使用IE5.0提出的Html Component。过了20年,别人终于把这个东西重新改了个名字要添加进标准了。题主再等几年吧。
https://www.zhihu.com/question/50482611

autocomplete失效


It appears that Chrome now ignores autocomplete="off" unless it is on the <form autocomplete="off"> tag since v34.

話不多說,附上連結:
https://stackoverflow.com/questions/31612867/autocomplete-off-not-working-in-chrome

寫CSS

 Sass, LESS, Stylus
這三種CSS的預處理器,可以讓我們輕鬆寫CSS,不必一直複製貼上
https://www.keycdn.com/blog/sass-vs-less/

寫完之後,懶惰的你如果不想用npm安裝東安裝西,這裡有個UI介面的軟體可以幫你編譯

歡迎無尾熊!!!!!!
https://www.minwt.com/webdesign-dev/html/12059.html

是說看看下面這篇!!!!!
SASS, LESS 退散,原生 CSS 可以使用變數啦!
時代的眼淚阿,WEB的進步飛速,我都想哭喔
http://muki.tw/tech/native-css-variables/

開發手機用網站

大概從高中畢業以後開始有了智慧型手機,大學3年級時,手機開始普及,身為原始人的我,則是到當完兵才開始用智慧型手機,總之大學畢業已經五年了,這段期間WEB方面又有了多少改變,想一想有點感傷QQ

手機有瀏覽器,手機用的網站一個網址,電腦用的網站一個網址,前端偵測完之後轉跳,兩個網站CODE也不同,但這樣維護起來超麻煩,


RWD
同個網站,依照視窗大小來呈現畫面,所以CSS幫了不少忙

AWD
我server判斷你是哪種用戶,吐出不同程式碼給你,蝦?不是改CSS就好嗎?幹嘛改後端的程式?


AWD還是有必要的,舉個例子來說,你的javascript要載jQuery,對手機來講負荷太大了,你想要換載jQuery Mobile ,總不是又兩個不同的網頁吧,後端判斷裝置再來改相對應的資源就好

像是大陸偏遠地區連到不同國家的網站,有些網速會特別慢,載那大的庫會哭出來喔..........


講到這個就要來講一下

『手机浏览器同时响应请求为4个请求』这个说法来自于哪里?

安卓浏览器为例,最大并发连接数是4,并不代表打开一个网站时,只能同时开4个连接,而是对同一个主机(主机名和域名相同)只能开4个连接。
參考至:
https://www.zhihu.com/question/47019814


跨域請求

基於安全性的考量,當你發出的請求跟你現在網站頁面的網域不一樣時,瀏覽器是不會允許的,是為了客端使用者的安全


如果你是開發人員,在本地端你可以這樣做:
chrome设置--disable-web-security解决跨域


但是你不能要求使用者也跟你這樣做:

所以你可以在server 上面做設定
https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Access_control_CORS


在不然身為開發人員的你,主機也不是你管的,但CODE是你管的:

可以用jsonp來做





https://segmentfault.com/a/1190000004682473

2017年11月15日 星期三

PUT/DELETE 被擋


新站點換新SERVER,此時有些路由被擋了,請網管關掉囉~~~


PUT/DELETE方法从语义上来讲,对资源是有破坏性的,PUT更改现有的资源,而DELETE摧毁一个资源,带有破坏性质的方法有时候会被防火墙或者IT管理人员特别关注


參考至:
http://www.bijishequ.com/detail/163617?p=56-50

PHP 匹配中文的正規表達式

php中utf-8编码下用正则表达式匹配汉字的最终正确表达式——/^[\x{4e00}-\x{9fa5}]+$/u

參考至:
http://www.thinkphp.cn/code/642.html

安裝多個XAMPP

http://webdevzoom.com/install-run-multiple-xampp-windows/

改PORT就行囉

PHP實作websocket

http://zxaustin.blogspot.tw/2016/08/php-xampp-websocket.html

跟著上面做就成功啦,主要是因為前端要對接server走WEBsocket,server那邊是JAVA啦,但總覺得PHP有應該自己也要架一個來試試看

xdebug安裝

https://xdebug.org/wizard.php

之前要裝Xdebug都不知道要載哪一版,官網有提供分析工具,只要將phpinfo();的內容複製貼上,該頁面就會提供載點^^

PHP圖片上傳功能

來工作了那久,第一次有機會做到圖片(專案內容是證件照、銀行卡..)上傳功能,想想上傳功能要注意的點有哪些

1.權限(你的圖片不想給別人看)
2.安全性(用戶如果上傳病毒阿我要怎辦)



權限的部分:
系統管理者那些要看當初權限怎麼設計的,我們是資料庫、session、router相互配合。
不希望用戶登出的時候還能存取圖片,那這樣就要靠PHP來輸出圖片了。
https://blog.allenchou.cc/php-img/
判斷是否為圖片檔的三個方法
http://kuanghy.github.io/2015/11/25/php-isimg
圖片簡單壓縮
http://www.15jb.net/php%E5%AF%A6%E7%8F%BE%E5%9C%96%E7%89%87%E5%A3%93%E7%B8%AE%E7%9A%84%E5%85%A9%E5%89%87%E5%AF%A6%E4%BE%8B


儲存部分:
資料夾位置,盡量不要放在網站目錄下,因為萬一沒設定好,怕透過URL直接存取,像存取你首頁的圖片一樣簡單。
我會把用戶資料夾的"相對路徑"放到資料庫,讓用戶可以讀得到自己的圖片,相對路徑是因為資料夾可能會移位,不希望一動資料庫的欄位都要改

安全性的部分:
server端可以設定該目錄底下為"可讀"  "不可執行"
這樣如果上傳病毒SERVER也不用怕,客戶端就自求多福
https://technet.microsoft.com/zh-tw/dd632964.aspx
http://www.blueshop.com.tw/board/FUM20041006152627A9N/BRD20110515232653FL6.html

6個”檔案上傳”功能的資訊安全風險與防護
http://www.qa-knowhow.com/?p=1472

前端拖曳上傳功能,是說前端有套件可用喔..
http://code-beginner.logdown.com/posts/313821



因為若由 php 去讀取檔案內容並輸出 , 若流量大其實對系統也是個負擔
所以可以用一些 web server 特異功能
可以去Google 查一下 "lighttpd sendfile" 或 "apache sendfile"
可以用一串 header() 丟給 web server 去傳輸指定檔案 , 效能會快很多
https://twpug.net/discussion/5662/%E9%97%9C%E6%96%BC%E5%A6%82%E4%BD%95%E4%BF%9D%E8%AD%B7%E5%9C%96%E7%89%87%E8%88%87%E5%AD%98%E5%8F%96%E6%AC%8A%E9%99%90




以上為蒐集的資料~~~





怎麼傳JSON格式到后端PHP

會有這樣的想法是因為,jquery的ajax 用法裡面,可以直接傳JSON格式過去的,那就好奇到底要怎麼取這個JSON呢?



用這個啦
file_get_contents('php://input');

這就可以取出你傳來的所有INPUT囉
不用特別用
$_POST
$_GET
$_REQUEST
來取會取不到


參考至:
https://stackoverflow.com/questions/19004783/reading-json-post-using-php

php slim 框架設定的router沒作用

工作的時候用slim 來做RESTful專案,然後就因為更新的XAMPP之後設定的路由就失聯啦,


結果是因為.....
Apache 从2.2升级到 Apache2.4.x 后配置文件 httpd.conf 的设置方法有了大变化

我在自己的httpd-vhosts.conf改這樣就OK囉
AllowOverride All
Require all granted

參考至:

https://oceandlnu.github.io/2016/08/25/Apache2.4%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%9D%83%E9%99%90%E8%AE%BE%E7%BD%AE%E9%97%AE%E9%A2%98/


https://blog.longwin.com.tw/2014/03/apache-22-24-upgrade-conf-2014/


https://stackoverflow.com/questions/12343466/always-get-404-error-in-slim-framework-when-omitting-index-php-in-url






這篇主要是講加上meber.php/add/1像這樣路由就成功,實際上這樣加上附檔名我也成功但是不是原本路由功能阿....好醜
https://stackoverflow.com/questions/9747640/slim-framework-always-return-404-error

chrome 開發者模式滑鼠不見的情況

工作中常會遇到一些莫名其妙的事,導致工作時間的拉長.....


上網查可能是因為顯卡,一些雜七雜八的原因
解決方法


沒有根治,只是換個做法



















打勾以後,按F12滑鼠就不會不見囉



參考至:
https://www.zhihu.com/question/48587059

這篇說的嘗試失敗.....
https://www.mobile01.com/topicdetail.php?f=743&t=4462465