Laravel 5.4 + Vue.js 2 記事本範例


一、安裝Apache、MySQL、PHP環境

為了讓讀者能快速的撰寫程式,作者在Github上已經整理出一個適合開發Laravel的XAMPP環境。我們進到 https://github.com/superlevin/xamppforlaravel 點選 Clone or Download 後按 Download ZIP。

xamppforlaravel01

下載後,解壓縮到d:\xampp就可以運作了。執行 xampp-control 後,開啟相關服務即可。

xamppforlaravel02 xamppforlaravel03二、安裝 composer,到 https://getcomposer.org/download/ 下載Composer-Setup.exe

xamppforlaravel04

 

安裝時,將PHP路徑指向D:\xampp\php.exe

xamppforlaravel05 xamppforlaravel06 xamppforlaravel07 xamppforlaravel08 xamppforlaravel09 xamppforlaravel10 xamppforlaravel11 xamppforlaravel12 xamppforlaravel13 xamppforlaravel14

 

三、進入終端機模式(開始→執行  cmd),然後設定php到系統變數

set PATH=%PATH%;d:\xampp\php

四、phpmyadmin建立資料庫

進入 http://localhost:8899/phpmyadmin 網頁

建立新資料庫 laravelvuenotes

五、透過composer 建立 laravel專案

dos指定切換 d:\xampp\htdocs\ 輸入

composer create-project laravel/laravel laravelvuenote

六、建立完成後,進入laravel專案修改.env設定

八、刪除migration中其他沒用的檔案(二個都刪除)

八、dos模式下建立 migration,切換至 d:\xampp\htdocs\laravelvuenote,輸入

php artisan make:migration create_notes_table

修改laravelvuenote/database/migrations/XXXXX(日期)_xxxx(流水號)_create_notes_table.php

於up函數中加入

Schema::create('notes', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->string('content');
$table->timestamps();
});

於down函數中加入

Schema::drop('notes');

九、建立資料庫

dos模式下

php artisan migrate

十、新增model
dos模式下

php artisan make:model Note

十一、修改app\Note.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Note extends Model
{
  //
  protected $table ='notes';
  public $fillable = ['title','content'];
}

十二、建立controller

php artisan make:controller NoteController --resource

十三、修改app\Http\Controllers\NoteController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Note;
use Validator;
use App\Http\Requests;
use Response;
use Illuminate\Support\Facades\Input;
class NoteController extends Controller
{
    public function api()
    {    
      return view('/api');       
    }
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $notes = Note::latest()->paginate(6);  //每頁為6
        $response = [
          'pagination' => [
            'total' => $notes->total(),
            'per_page' => $notes->perPage(),
            'current_page' => $notes->currentPage(),
            'last_page' => $notes->lastPage(),
            'from' => $notes->firstItem(),
            'to' => $notes->lastItem()
          ],
          'data' => $notes
        ];
        return response()->json($response);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validate($request,[
          'title' => 'required',
         'content' => 'required',
       ]);
     
        $create = Note::create($request->all());
        return response()->json($create);
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
      $this->validate($request,[
        'title' => 'required',
        'content' => 'required',
      ]);
      $edit = Note::find($id)->update($request->all());
      return response()->json($edit);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        Note::find($id)->delete();
        return response()->json(['done']);
    }
}

十四、修改routes\web.php

<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
//Route::get('/', function () {
//    return view('welcome');
//});
Route::get('/', 'NoteController@api');
Route::get('/api', 'NoteController@index');
Route::resource('vuenotes','NoteController');

十五、建立頁面
在這邊我們使用jQueryBootstraptoastrFont awesome以及Vue.js 2

在resources/views建立app.blade.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Laravel & Vue2 記事本</title>
    <!-- Laravel CSRF-token check -->
    <meta id="token" name="token" value="{{ csrf_token() }}">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>    
    <div class="container" id="manage-note">
      @yield('content')
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>       
    <!-- vue.js -->
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
    
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
    <!-- custom.js -->
    <script type="text/javascript" src="./js/note.js?v=zxcvxzcv"></script>
  </body>
</html>    

接著新增檔案 api.blade.php

@extends('app')
@section('content')
 <div class="form-group row">
            <div class="col-md-12">
              <h1><a href="https://laravel.com/" target="_blank">Laravel</a> & <a href="https://vuejs.org/" target="_blank">Vue.js 2</a> 記事本</h1>
              <h2>其他使用: <a href="https://jquery.com/" target="_blank">jQuery</a>、<a href="http://getbootstrap.com/" target="_blank">Bootstrap</a>、<a href="http://codeseven.github.io/toastr/demo.html" target="_blank">toastr</a>、<a href="http://fontawesome.io/" target="_blank">Font awesome</a> </h2>
            </div>
            <div class="col-md-12">
              <button type="button" data-toggle="modal" data-target="#create-note" class="btn btn-primary">
                新增記事
              </button>
            </div>
          </div>
          <div class="row">
            <div class="table-responsive">
              <table class="table table-borderless">
                <tr>
                  <th>標題</th>
                  <th>內容</th>
                  <th>動作</th>
                </tr>
                <tr v-for="note in notes">
                  <td>@{{ note.title }}</td>
                  <td>@{{ note.content }}</td>
                  <td>
                    <button class="edit-modal btn btn-warning" @click.prevent="editnote(note)">
                      <span class="glyphicon glyphicon-edit"></span> 修改
                    </button>
                    <button class="edit-modal btn btn-danger" @click.prevent="deletenote(note)">
                      <span class="glyphicon glyphicon-trash"></span> 刪除
                    </button>
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <nav>
            <ul class="pagination">
              <li v-if="pagination.current_page > 1">
                <a href="#" aria-label="Previous" @click.prevent="changePage(pagination.current_page - 1)">
                  <span aria-hidden="true">«</span>
                </a>
              </li>
              <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active' : '']">
                <a href="#" @click.prevent="changePage(page)">
                  @{{ page }}
                </a>
              </li>
              <li v-if="pagination.current_page < pagination.last_page">
                <a href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)">
                  <span aria-hidden="true">»</span>
                </a>
              </li>
            </ul>
          </nav>
          <!-- 新增對話框 -->
          <div class="modal fade" id="create-note" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                  <h4 class="modal-title" id="myModalLabel">新增記事</h4>
                </div>
                <div class="modal-body">
                  <form method="post" enctype="multipart/form-data" v-on:submit.prevent="createnote">
                    <div class="form-group">
                      <label for="title">標題:</label>
                      <input type="text" name="title" class="form-control" v-model="newnote.title" />
                      <span v-if="formErrors['title']" class="error text-danger">
                        @{{ formErrors['title'] }}
                      </span>
                    </div>
                    <div class="form-group">
                      <label for="title">內容:</label>
                      <textarea name="content" class="form-control" v-model="newnote.content">
                      </textarea>
                      <span v-if="formErrors['content']" class="error text-danger">
                        @{{ formErrors['content'] }}
                      </span>
                    </div>
                    <div class="form-group">
                      <button type="submit" class="btn btn-success">儲存</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        <!-- 修改對話框 -->
        <div class="modal fade" id="edit-note" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改記事</h4>
              </div>
              <div class="modal-body">
                <form method="post" enctype="multipart/form-data" v-on:submit.prevent="updatenote(fillnote.id)">
                  <div class="form-group">
                    <label for="title">標題:</label>
                    <input type="text" name="title" class="form-control" v-model="fillnote.title" />
                    <span v-if="formErrorsUpdate['title']" class="error text-danger">
                      @{{ formErrorsUpdate['title'] }}
                    </span>
                  </div>
                  <div class="form-group">
                    <label for="title">內容:</label>
                    <textarea name="content" class="form-control" v-model="fillnote.content">
                    </textarea>
                    <span v-if="formErrorsUpdate['content']" class="error text-danger">
                      @{{ formErrorsUpdate['content'] }}
                    </span>
                  </div>
                  <div class="form-group">
                    <button type="submit" class="btn btn-success">儲存</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>           
@stop

最後在public/js/下新增note.js

Vue.http.headers.common['X-CSRF-TOKEN'] = $("#token").attr("value");
new Vue({
  el :'#manage-note',
  data :{
    notes: [],
    pagination: {
      total: 0,
      per_page: 2,
      from: 1,
      to: 0,
      current_page: 1
    },
    offset: 4,
    formErrors:{},
    formErrorsUpdate:{},
    newnote : {'title':'','content':''},
    fillnote : {'title':'','content':'','id':''}
  },
  computed: {
    isActived: function() {
      return this.pagination.current_page;
    },
    pagesNumber: function() {
      if (!this.pagination.to) {
        return [];
      }
      var from = this.pagination.current_page - this.offset;
      if (from < 1) {
        from = 1;
      }
      var to = from + (this.offset * 2);
      if (to >= this.pagination.last_page) {
        to = this.pagination.last_page;
      }
      var pagesArray = [];
      while (from <= to) {
        pagesArray.push(from);
        from++;
      }
      return pagesArray;
    }
  },

  
         mounted: function () {

             this.getVuenote(this.pagination.current_page);
         }, 
  methods: {
    getVuenote: function(page) {
      this.$http.get('/vuenotes?page='+page).then((response) => {

        this.$set(this,'notes', response.data.data.data);
        this.$set(this,'pagination', response.data.pagination);
      });
    },
    createnote: function() {
      var input = this.newnote;
      this.$http.post('/vuenotes',input).then((response) => {
        this.changePage(this.pagination.current_page);
        this.newnote = {'title':'','content':''};
        $("#create-note").modal('hide');
        toastr.success('新增成功', '成功訊息', {timeOut: 5000});
      }, (response) => {
        this.formErrors = response.data;
      });
    },
    deletenote: function(note) {
      this.$http.delete('/vuenotes/'+note.id).then((response) => {
        this.changePage(this.pagination.current_page);
        toastr.success('刪除成功', '成功訊息', {timeOut: 5000});
      });
    },
    editnote: function(note) {
      this.fillnote.title = note.title;
      this.fillnote.id = note.id;
      this.fillnote.content = note.content;
      $("#edit-note").modal('show');
    },
    updatenote: function(id) {
      var input = this.fillnote;
      this.$http.put('/vuenotes/'+id,input).then((response) => {
        this.changePage(this.pagination.current_page);
        this.newnote = {'title':'','content':'','id':''};
        $("#edit-note").modal('hide');
        toastr.success('更新成功', '成功訊息', {timeOut: 5000});
      }, (response) => {
        this.formErrors = response.data;
      });
    },
    changePage: function(page) {
      this.pagination.current_page = page;
      this.getVuenote(page);
    }
  }
});

十六、開啟主機

php artisan serve

十七、完工

作者: 林壽山

林壽山 目前任職於軟體公司研究開發部門主管,主要採用.net core/.net 5/6 開發,收銀機pos系統開發,第三方支付設計(綠界、馬來西亞epay/happypay、台新one碼),金流設計,行動支付設計(悠遊卡/一卡通),支付寶,微信,街口支付,信用卡機(聯合信用卡),擅長PHP網頁設計(CodeIgniter、Laravel)框架、Delphi程式設計、資料庫設計、C# WinForm/WebForm程式設計、ASP.net MVC、LINE串接、API串接設計