文章加密

;

2020年6月16日 星期二

小白也能看懂的Vuex 又 Vuex is different from store,使用带有 setter 的双向绑定计算属性應用到表單

https://zhuanlan.zhihu.com/p/80716895

Vuex is different from store:
應該說store是個變數,常用來存vuex整個寫好程式的,非vuex這個模組,而vuex本身其實不含那些我們添加的states, actions, ... 

https://juejin.im/post/5d1f0947f265da1b667bfb41  State, mapState, ...mapState

https://vuex.vuejs.org/zh/guide/modules.html vuex的modules概念, action的參數怎麼會變,第一個是state還是dispatch...看不懂

https://vuex.vuejs.org/zh/guide/forms.html
假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象,在用户输入时,v-model 会试图直接修改 obj.message。在严格模式中,由于这个修改不是在 mutation 函数中执行的, 这里会抛出一个错误。

較好的方法是使用带有 setter 的双向绑定计算属性,如下:

<input v-model="message">

//....
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }

}






2020年6月2日 星期二

deploy GitPage, add remote, change remote

https://cli.vuejs.org/guide/deployment.html#pwa (手動佈署)
手動佈署:

  1. 先在vue.config.js裡加上下列程式
  2. module.exports = {
  3.   publicPath: process.env.NODE_ENV === 'production'
  4.     ? '/my-project/'
  5.     : '/'
  6. }

  7. 執行build之後,把要呈現的檔案放上gh-pages分支


自動佈署:
  1. 建立gh-pages分支,把打包好的檔案放入
  2. If you are using Vue CLI along with a backend framework that handles static assets as part of its deployment, all you need to do is make sure Vue CLI generates the built files in the correct location, and then follow the deployment instruction of your backend framework.

    If you are developing your frontend app separately from your backend - i.e. your backend exposes an API for your frontend to talk to, then your frontend is essentially a purely static app. You can deploy the built content in the dist directory to any static file server, but make sure to set the correct publicPath.

    需要做幾個步驟,見下面網址
  3. https://cli.vuejs.org/guide/deployment.html#github-pages


$ git remote add origin https://github.com/user/repo.git
# Set a new remote
$ git remote set-url origin https://github.com/user/repo.git
# Set a change remote

Digitalocean vs AWS

https://www.guru99.com/digitalocean-vs-aws.html

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的可執行的檔案或批次檔加入到環境變數。


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

# 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/

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

# PSR-4 Autoloader

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

#extension

已安裝
  1. php cs fixer

    配置:
    "php-cs-fixer.onsave": true,  //Ctrl  + S 時格式化php程式碼
    "php-cs-fixer.formatHtml": true  //格式化.php檔案中的html程式碼(html、css、js)
  2. 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
  3. Laravel 5 Snippets (台灣社群 Winnie Lin 的版本。讓 VS Code 支援 Laravel 程式碼片段)
  4. Laravel Blade Snippets (一樣是台灣社群 Winnie Lin 的版本。這次是讓 VS Code 支援 Laravel Blade 的程式碼片段)
  5. PHP IntelliSense
    detail: https://www.itread01.com/content/1542364576.html
  6. 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

已安裝:

  1. Vue VSCode Snippets
  2. Vue 2 Snippets
  3. Vue 3 Snippets
  4. 在settings.json添加"editor.formatOnSave": true(這是vscode內定的機制)
# fetch

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

1
2
3
4
5
6
7
8
9
10
11
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

  1. 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'); });
  2. Open  /.env copy APP_KEY without 'base64:' letters
  3. Go to /config/app.php, find key and replace the line with following code:
    'key' => env('APP_KEY', base64_decode('%YOUR_COPIED_APP_KEY%'));
  4. 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裡就不用。
  5. 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:

<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

這兩句即可。