程式學習: 5月 2020

2020年5月28日星期四

vue and laravel

https://www.youtube.com/watch?v=DJ6PD_jBtU0
https://github.com/developerdino/example-articles-api 更複雜的laravel應用，有多個article

https://laravel.tw/docs/5.2/quickstart#database-migrations Laravel中文文檔案
https://laravel.com/docs/7.x/structure Laravel英文文檔案

Laravel Backend

# 'php' 不是內部或外部命令、可執行的程式或批次檔。

workaround: 把php的可執行的檔案或批次檔加入到環境變數。

COPY_PATH:
找到xampp中的php.exe (在C:\ni\xampp\php裡)，右鍵顯示其內容，複製其位置路徑(注意沒有含php.exe)
增加環境變數：
右鍵點選本機桌面圖示 →內容→左邊欗中的進階系統設定→環境變數→系統變數中的path→編輯→新增→貼上剛才的COPIED_PATH
重新開機

# virtual host

Path: C:\ni\xampp\apache\conf\extra\httpd-vhosts.conf
Code:

<VirtualHost *:80>

    DocumentRoot "C:/ni/xa/htdocs/new200529/laravel01/laravel01/public"

    ServerName laravel01.test

</VirtualHost>

and C:\Windows\System32\drivers\etc\hosts add the following code:
127.0.0.1 laravel01.test

# Composer (laravel的package管理器)

https://getcomposer.org/download/

先下載並安裝
執行cmd
如此在windows下就成功

# PSR-4 Autoloader

http://blog.tonycube.com/2016/09/php-psr-4-autoloader.html

#extension

已安裝

php cs fixer

配置：
"php-cs-fixer.onsave": true,　　//Ctrl + S 時格式化php程式碼
"php-cs-fixer.formatHtml": true　　//格式化.php檔案中的html程式碼（html、css、js）
phpcs (聽說是prettier)
依賴php_codesniffer，否則會報錯（phpcs: Request workspace/configuration failed with message: Unable to locate phpcs. Please add phpcs to your global path or use composer ...）。
detail: https://www.itread01.com/content/1542364576.html
Laravel 5 Snippets (台灣社群 Winnie Lin 的版本。讓 VS Code 支援 Laravel 程式碼片段)
Laravel Blade Snippets (一樣是台灣社群 Winnie Lin 的版本。這次是讓 VS Code 支援 Laravel Blade 的程式碼片段)
PHP IntelliSense
detail: https://www.itread01.com/content/1542364576.html
Laravel Artisan

more https://blog.pusher.com/vscode-extensions-laravel-development/

# paginate()

Laravel 強大的一點，pagination中有paginate()功能，能自動帶有meta和links裡面把分頁的資訊都寫好了，

Vue Frontend

# laravel-mix

1. https://github.com/JeffreyWay/laravel-mix

2. https://laravel.com/docs/7.x/mix#custom-webpack-configuration

--config=node_modules/laravel-mix/setup/webpack.config.js

If you choose to take this approach to customization, any future upstream updates to Mix's webpack.config.js must be manually merged into your customized file.

# csrf_token()

https://laravel.tw/docs/5.0/routing

# extension

已安裝：

Vue VSCode Snippets
Vue 2 Snippets
Vue 3 Snippets
在settings.json添加"editor.formatOnSave": true（這是vscode內定的機制）

# fetch

fetch 會使用 ES6 的 Promise 作回應
then 作為下一步
catch 作為錯誤回應 (404, 500…)
回傳的為 ReadableStream 物件，需要使用不同資料類型使用對應方法，才能正確取得資料物件。

fetch('https://randomuser.me/api/', {})
  .then((response) => {
    // 這裡會得到一個 ReadableStream 的物件
    console.log(response);
    // 可以透過 blob(), json(), text() 轉成可用的資訊
    return response.json(); 
  }).then((jsonData) => {
    console.log(jsonData);
  }).catch((err) => {
    console.log('錯誤:', err);
});

deploy

# 需打包的檔案如何佈署

其實看到的前端就用打包出來的結果檔案(public裡面，純js, css, ...)

後端我則把vendor放上去才ok(類似前端的node_modules)

https://www.youtube.com/watch?v=6g8G3YQtQt4

# How to Deploy Laravel Project in 000webhost site

Go to /app/Providers/AppServiceProvider.php at register method and appand the following code inside it:
$this->app->bind('path.public',function(){return base_path('public_html'); });
Open /.env copy APP_KEY without 'base64:' letters
Go to /config/app.php, find key and replace the line with following code:
'key' => env('APP_KEY', base64_decode('%YOUR_COPIED_APP_KEY%'));
Updata the data credentials from /config/database.php and .env. Lookup for MySQL vector and update the host, database, username, password properly. /// config/database.php裡如果遇到\需要用\\，而.env裡就不用。
Clear old Laravel Cache: delete all files from /bootstrap/cache except .gitignore

By: https://www.youtube.com/watch?v=Q4tclByPD2g

# RESTful API doesn't work in 000webhost site ( 放棄 )

A man do this, but it's still not a workaround way:

After reading Why does my web server software disallow PUT and DELETE requests? I added

<Limit GET POST PUT DELETE>
  Allow from all
</Limit>

to .htaccess now PUT is working fine but DELETE request fails

form: https://stackoverflow.com/questions/21797474/why-put-and-delete-requests-not-working-on-remote-server-and-how-to-solve-it

# cPanel

cPanel 是一套在網頁寄存業中最享負盛名的商業軟體，其基於 Linux 和 BSD 系統及以 PHP 開發且性質為閉源軟體；提供了足夠強大和相當完整的主機管理功能，諸如：Webmail 及多種電郵協議、網頁化 FTP 管理、SSH 連線、資料庫管理系統、DNS 管理等遠端網頁式主機管理軟體功能。

FOR YOUR CUSTOMERS

Create websites and domains in a few clicks
Launch and manage email networks
Manage and store web files

# 在cmd中輸入ls命令出現“ls不是內部或外部命令解決

在C:/windows目錄下新建一個檔案命名為 ls.bat

開啟編輯這個檔案輸入:

@echo off
dir

這兩句即可。

2020年5月27日星期三

[CSS] box-sizing: border-box; & grid & [attribute*=value] Selector & flex

[ box-sizing: border-box; ]
The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;).

* {
box-sizing: border-box;}

[ grid ]
簡單說明含意，grid是一列(row)由12 column組成，因為column是float的，row要clear the flow，最後在加工美化一下，得出：

https://www.w3schools.com/css/css_rwd_grid.asp 裡面有詳細的code

實際使用
.grid-container {
display: grid | inline-grid;
grid-gap: 50px 100px; // shorthand of  grid-row-gap and grid-column-gap
  grid-template-columns: auto auto 70px 120px; // Make a grid with 4 columns
  grid-template-rows: 80px 200px;  // Make a grid with 2 rows
grid-template-columns: 3fr 1fr;  // 新的 fr 單位之格線。fr 單位就是為了格線布局而生，代表格線容器內，可用空間的分塊（fraction）。

grid-template-rows: repeat(3,auto); // 即為  grid-template-rows: auto auto auto;
justify-content: space-evenly | space-around | space-between | center | start | end; // The grid's total width has to be less than the container's width
align-content: space-evenly | space-around | space-between | center | start | end;  // The grid's total height has to be less than the container's height
}

.item1 {
grid-column: 1 / 5; // shorthand of grid-column-start and grid-column-end
  grid-column: 1 / span 3; // grid-column-start 跨三個跨度
grid-row: 1 / 4;
grid-row: 1 / span 2;
  grid-area: 1 / 2 / 5 / 6; // 上左下右, 記憶點：畢竟start應該先，所以非上右下左
  grid-area: 2 / 1 / span 2 / span 3;
  }

[CSS [attribute*=value] Selector]

Set a background color on all <div> elements that have a class attribute value containing "test":
div[class*="test"] {
background: #ffff00;}

Set a background color on all elements that have a class attribute value containing "test":
[class*="test"] {
background: #ffff00;}

[flex]
.flex-container {
display: flex;
flex-direction: column | column-reverse | row | row-reverse;
flex-wrap: wrap | nowrap | wrap-reverse; // The wrap value specifies that the flex items will wrap if necessary; The wrap-reverse value does the same but in reverse order:
  flex-flow: row wrap; // shorthand of flex-direction and flex-wrap
justify-content: center | flex-start | flex-end | space-around | space-between;
  align-items: center | flex-start | flex-end | stretch | baseline; // The stretch value stretches the flex items to fill the container (this is default)
//  Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:

align-content: space-between | space-around | center | flex-start | flex-end | stretch;
// align-content v.s. align-items : 前者是針對所有元素相對container的位置，後者是針對所有元素彼此間的位置
}

.item1{
order:1; // default value is 0. The bigger the value bigger, the more previous the order.
flex-grow:2; // Make the item grow 2 times faster than the other flex items, default value is 0.(這個item會是兩倍大於數字1的，但英文再w3c他就是那樣寫的~)
flex-shrink:0; // Make the third item shrink 2 times than the ones which are "flex-shrink:1", default value is 1.
flex-basis: 200px; // The flex-basis property specifies the initial length of a flex item.
flex: 0 0 200px; // shorthand of flex-grow, flex-shrink, and flex-basis. Make the item not growable (0), not shrinkable (0), and with an initial length of 200 pixels. And its default value is 0 1 auto.
flex: 25%;
// flex:25% sets the flex-basis property to 25%, and also sets the flex-grow and flex-shrink properties to 1.
align-self: center; // overrides the default alignment set by the container's align-items property. 功能和container's align-items一樣，不過是作用在單個item上
}

# example: the third one is flex-shrink:0; and others are default.
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

# div內的文字過多時默認不會換行，須加上
~~.container{~~
~~overflow:hidden;~~
~~word-wrap:break-word; //定義怎麼斷過長的文案。break-all:不管，直接斷。normal:找到單詞間的空白再斷。~~
~~word-break:break-all; // 不管，直接斷~~
}

錯錯錯!!!應該設basis !! (下面有例子)

[flex v.s. grid]
https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/

In flexbox layout, the size of a cell (flex-item) is defined inside the flex-item itself, and in the grid layout, the size of a cell (grid-item) is defined inside the grid-container.
Grid Has a “Gap” Property, Flexbox Doesn’t.
Flexbox is One Dimensional, Grid is Two Dimensional
Flexbox Wraps vs Grid Wraps
Will CSS Grid make Flexbox Obsolete in the Future? Absolutely not, they both are designed to solve a different set of problems.

<h2>Flexbox</h2>
<div class="row-flex">
    <div>1 2 3  4 5 6 7 8 9 0</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
 
<h2>Grid</h2>
<div class="row-grid">
    <div>1 2 3  4 5 6 7 8 9 0</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

/* Flexbox row styles */
.row-flex {
  margin: 40px auto;
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
}
.row-flex div {
  border: 1px dashed gray;
  flex: 1 1 100px;  // set the basis
  text-align: center;
  padding: 12px;
}
/* Grid row styles */
.row-grid {
  margin: 40px auto;
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); // set the basis

}
.row-grid div {
  border: 1px dashed gray;
  text-align: center;
  padding: 12px;
}

when a flex-item is wrapped and pushed in a new row, the Flexbox layout algorithm treats it as a part of a different flex-container. Hence the pushed item loses its context.

Flexbox and Grid layouts are built on concept of responsiveness and hence reduce the use of Media Queries.

This is an important difference. It shows that the flexbox layout is calculated after its content is loaded whereas the grid layout is calculated regardless of the content inside it. So, if possible, avoid using flexbox to build the overall layout of your website.

文章加密

2020年5月28日 星期四