Install node.js
VUE Components examples下載頁
A Simple Vue.js Slither Slider (vuejsexamples.com)
cd slideryarn installyarn run serve修改文件:
Documents\vuetest\slider\src\App.vue
0
Vue + Laravel 安裝
composer create-project --prefer-dist laravel/laravel vuetest
package.json
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"bootstrap-sass": "^3.4.1",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "7.*",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.11"
},
npm install
composer require laravel/ui
php artisan ui vue
npm install vue-router --save vuetest\resources\js
app.js
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
import router from './routes'
Vue.use(VueRouter)
new Vue({
el: '#app',
router
});
vuetest\resources\js
routes.js
routes.js
import VueRouter from 'vue-router'
let routes = [
{
path:'/',
component:require('./components/Home').default
},
{
path:'/about',
component:require('./components/About').default
}
]
export default new VueRouter(
{
mode:'history',
routes
}
)
vuetest\resources\js\components
Home.Vue
About.Vue
vuetest\resources\views\layouts
master.blade
vuetest\routes\
web.php
web.php
Route::any('{all}', function () {
return view('layouts.master');
})->where(['all' => '.*']);
npm run watch 0
5個開發人員必看網誌
1.techorange
2.smashingmagazine
3.簡書
4.Medlum
5.開發者頭條
0
顛覆亞洲價值的人生啟示錄 – techorange
在亞洲人（尤其長輩們）的觀念裡，讀書就要專心地讀、工作認真地做，不要東想西想、做一些有的沒的事情。如果像文章中的主角，大學念了外語系，卻還跑去發展法律和舞蹈，肯定會被罵不務正業。
但是在這個世代成為「通才」，也就是「多項潛能者」，其實是很重要的。人一定要有一個固定的天職嗎？明明人生有那麼多事能嘗試，為什麼要被單一職業限制住一個人的價值呢？
轉載自: TechOrange
1
Laravel Passport Authentication
Routes
// routes/api.php
Route::group(['middleware' => 'auth:api'], function() {
Route::get('articles', 'ArticleController@index');
Route::get('articles/{id}', 'ArticleController@show');
Route::post('articles', 'ArticleController@store');
Route::put('articles/{id}', 'ArticleController@update');
Route::delete('articles/{id}', 'ArticleController@delete');
});
Route::group([
'prefix' => 'auth'
], function () {
Route::post('login', 'AuthController@login');
Route::post('signup', 'AuthController@signup');
Route::group([
'middleware' => 'auth:api'
], function() {
Route::get('logout', 'AuthController@logout');
Route::get('user', 'AuthController@user');
});
});
Controllers
// app/Http/Controllers/Controller.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Article;
class ArticleController extends Controller
{
public function index()
{
return Article::all();
}
public function show($id)
{
return Article::find($id);
}
public function store(Request $request)
{
return Article::create($request->all());
}
public function update(Request $request, $id)
{
$article = Article::findOrFail($id);
$article->update($request->all());
return $article;
}
public function delete(Request $request, $id)
{
$article = Article::findOrFail($id);
$article->delete();
return 204;
}
}
Model
// app/model.php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
{
// DB Field Names
protected $fillable = ['title', 'body'];
}
0
人生時間軸
黃昏帶來的並不是黑暗 , 而是另一道光明的來臨
不經不覺，小弟已在社會工作12年，從17歲到現在，職場上有很多的機會，也有很多值得交心、值得學習的好上司、好同事 、 好老闆，但職場上最值得學習的，並不是做事，而是學習做人。
但小弟工作12年，轉工了近10份工作，但每次見工，我也會如實回答離開的原因，小時候，我會對自己能力質疑，也會希望能謙虛地跟同事學習，但現實並非如此，在職場上，就如一個大森林，每個同事都是扮演不同角色的動物，當然 ，每種動物也有自己的性格，如果小動物在森林一起生活，偶然也會性格不合 ，他們可能會打架、會吵架，但人類是靈長動物，我們的第一選擇 – 是忍耐，所以，我們在職場上要學會的，是人類才會做的事，但是為何小弟幾乎每年轉一份工作呢。
原因其實很簡單，小弟讀書不成，會一直覺得，20歲前有未完成的任務 ， 所以在20歲後，我一直在社會學習及實踐某學科的專業，但我的技術基礎並沒有做好，在事業上雖然得到上司的體諒，但有時候也會被主科同事排擠，可是我設計基礎很強，這就能為我工作能力互補，漂亮的介面配一堆不太專業的程式碼，最後任務尚算完成，但有時間我就會優化不太專業的程式碼，從而提升寫程式技巧。每份工作也會是我學習和實踐的舞台，為公司帶來實際效益是我首要考慮因素，可是這個舞台會因一些事情停頓下來 ，有可能是內部鬥爭，或是人為問題，當事情停頓一個月，很多人會選擇等待，公司財力雄厚，Hea一會沒關係，但歲月催人我就會選擇離開，直到30歲 ， 希望那是我的分水嶺。
30歲已過，設計和程式基礎開始打穩，小弟的職場生涯好像才剛剛開始，轉工步伐也開始加快，當找對了 ， 我就會全速前進，當然我不能決定命運，但我可以選擇自己的路，就算走錯了，也不會後悔，因為路是我自己選擇的 。
以前有一位長輩跟我說 :
轉職只是轉換了地獄，但知道上一個地獄不好的事，就不會帶到下一個地獄
況且職場小動物種類很多，用半生也未能學完，唯一我可以做的 ，是帶一個洗淨了的靈魂 ，與相同價值觀的同事與上司一同作戰 。
黃昏帶來的並不是黑暗 , 而是另一道光明的來臨
The dusk brings not the darkness, but another bright coming.
工作目的: 人生是為了學會做人, 帶走一個有重量的靈魂
Purpose: Life is to learn to be a human, take away a soul with weight.
個人主張: 目標為本和結果導向發展，期待一切友好合作模式
Advocate: Goal oriented and result driven. Looking forward to friendly cooperation mode.
個人原則: 我的感覺在你眼前
Principle: My feeling in your eyes.
2
大前端的技術原理和變遷史
一、前端技術發展軌跡
- 角色架構發展史
- 前端技術發展史
- ECMAScript語法發展史
- Ajax技術發展史
二、當前主流技術原理介紹
- SPA 單頁面應用原理
- Node.js 伺服器端JS運行原理
- SSR 伺服器端渲染原理
- Vue MVVM原理
- Webpack 打包原理
- Sass CSS編譯原理
三、一些新技術探索
- TypeScript
- PWA
- GraphQL
- Flutter
四、兩個流行的概念解答
- 什麼是大前端
- 什麼是前端工程化
連結
https://github.com/sunmaobin/sunmaobin.github.io/issues/56
https://www.twblogs.net/a/5d122671bd9eee1e5c822716
0
MVC
- 模型（Model） 用於封裝與應用程式的業務邏輯相關的資料以及對資料的處理方法。「 Model 」有對資料直接存取的權力，例如對資料庫的存取。「Model」不依賴「View」和「Controller」，也就是說， Model 不關心它會被如何顯示或是如何被操作。但是 Model 中資料的變化一般會通過一種重新整理機制被公布。為了實現這種機制，那些用於監視此 Model 的 View 必須事先在此 Model 上註冊，從而，View 可以了解在資料 Model 上發生的改變。（比如：觀察者模式（軟體設計模式））
- 視圖（View）能夠實現資料有目的的顯示（理論上，這不是必需的）。在 View 中一般沒有程式上的邏輯。為了實現 View 上的重新整理功能，View 需要存取它監視的資料模型（Model），因此應該事先在被它監視的資料那裡註冊。
- 控制器（Controller）起到不同層面間的組織作用，用於控制應用程式的流程。它處理事件並作出回應。「事件」包括用戶的行為和資料 Model 上的改變。
0
Laravel-Graphql
安裝 PHP Composer
1.安裝 Composer Link
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === 'c32408bcd017c577ce80605420e5987ce947a5609e8443dd72cd3867cc3a0cf442e5bf4edddbcbe72246a953a6c48e21') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
2.安裝好後，配置composer全局
mv composer.phar /usr/local/bin/composer
安裝 folklore/graphql 模組
composer require folklore/graphql
php artisan vendor:publish --provider="Folklore\GraphQL\ServiceProvider"
MYSQL
Previous
Next
Changes File
\graphql-test\app\Models\Job.php
\graphql-test\app\Models\User.php
更改/刪除
\graphql-test\app\GraphQL\Mutation\…php
取得資料
\graphql-test\app\GraphQL\Query\…php
顯示資料
\graphql-test\app\GraphQL\Type\…php
控制器設定
\graphql-test\config\
安裝測試工具
$ composer require "noh4ck/graphiql:@dev"打開 config/app.php 並添加以下代碼到 providers 中
Graphiql\GraphiqlServiceProvider::class發布這個包並生成 config/graphiql.php 配置文件
php artisan graphiql:publish
0
Laravel 基礎(三)
DB 建立與刪除
//php72 artisan migrate
//php72 artisan migrate:refresh
//web/laravel/database/migrations
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class Test extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('test1',function(Blueprint $table){
$table->increments('id');
$table->string('username')->nulllable()->default('abc');
$table->char('password', 100);
});
}
/**
* Reverse the migrations.
* DEL TABLE
* @return void
*/
public function down()
{
//
}
}
4