V1Study – SPA with Laravel-VueJS

       

       
   

Bước 7:

Từ thư mục routes bạn mở file web.php rồi sửa lệnh trong nó thành như sau:

Route::get(‘/’, function () {
    return view(‘index’);
});

Bước 8:

Quay lại localhost:8000 và refresh lại trang, ta được kết quả như sau:

Phần 3: Thiết lập cơ bản

Bước 1:

Dùng Sublime Text mở thư mục gốc vuespa ra, rồi vào resources >> js >> components tạo một component tên App.vue rồi đưa vào nội dung sau:

Bước 2:

Cũng trong thư mục resources >> js >> components bạn mở file app.js ra rồi đưa vào nội dung sau:  

import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
Vue.use(VueRouter);

import VueAxios from ‘vue-axios’;
import axios from ‘axios’;
Vue.use(VueAxios,axios);

import App from ‘. / components / App. vue ‘ ;

const routes = [
];

const router = new VueRouter ( { mode : ‘ history ‘, routes : routes } ) ;
new Vue ( Vue. util.extend ( { router }, App ) ). $ mount ( ‘ # app ‘ ) ;

Bước 3:

Vào phpmyadmin (thường sẽ là http://localhost/phpmyadmin) và tạo một database tên db_vuespa.

Bước 4:

Mở file. env và sửa một phần nội dung thành như sau :
[ … ]

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_vuespa
DB_USERNAME=root
DB_PASSWORD=

[ … ]

Phần 4: Tạo component Category.vue để hiển thị

Bước 1:

Mở một PowerShell mới và thực hiện lệnh php artisan make:model Category -m -r. Kết quả như sau:

Lệnh này sẽ tạo 3 thành phần: model có tên Category.php (trong thư mục app), migration (trong thư mục database >> migrations) có tên như ảnh trên, và controller có tên CategoryController.php (trong thư mục app >> Http >> Controllers).

Bước 2:

Vào app >> Providers và mở file AppServiceProvider.php rồi sửa nội dung thành như sau:

namespace App \ Providers ;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Schema:defaultStringLength(190);
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

Lệnh có màu đỏ ở trên sẽ có công dụng thiết lập size mặc định cho tài liệu kiểu string là 190 .

Bước 3:

Mở migration ra và sửa nội dung function up() thành như sau:

public function up()
{
    Schema::create('categories', function (Blueprint $table) {
        $table->increments('id');
        $table->string('categoryName',50);
        $table->integer('categoryRank');
        $table->tinyinteger('status')->default(1);
    });
}

Bước 4:

Quay lại PowerShell và thực hiện lệnh php artisan migrate như sau để tạo các bảng:

Kết quả là ta sẽ tạo được bảng categories.

Và cấu trúc của bảng như sau :

Bước 5:

Bây giờ ta sẽ mở bảng categories ra và thêm vào hai bản ghi:

Bước 6:

Mở model app >> Category.php và sửa nội dung thành như sau:

namespace App;

use Illuminate \ Database \ Eloquent \ Model ;

class Category extends Model
{
    protected $fillable=[‘categoryName’,’categoryRank’,’status’];
    public $timestamps=false;
}

Bước 7:

Mở controller app >> Http >> controllers >> CategoryController.php và sửa function index() thành như sau:

    public function index()
    {
        $categories=Category::orderBy(‘categoryRank’)->get();
        return response()->json($categories);
    }

Bước 8:

Mở route routes >> web.php và thêm vào route sau:

Route :: resource ( ‘ category ‘, ‘ CategoryController ‘ ) ;

Bước 9:

Tại resources >> js >> components ta tạo một thư mục có tên category, trong thư mục này ta tạo một component tên Category.vue và thêm nội dung sau vào:

Bước 10:

Sửa file resources >> js >> app.js thành như sau:

import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
Vue.use(VueRouter);

import VueAxios from ‘vue-axios’;
import axios from ‘axios’;
Vue.use(VueAxios,axios);

import App from ‘./components/App.vue’;
import Category from ‘./components/category/Category.vue’;

const routes = [
    {
        path:’/’,
        name:’Category’,
        component:Category
    }
];

const router = new VueRouter ( { mode : ‘ history ‘, routes : routes } ) ;
new Vue ( Vue. util.extend ( { router }, App ) ). $ mount ( ‘ # app ‘ ) ;
Những dòng màu đỏ là được thêm mới vào .

Bước 11:

Quay lại localhost:8000 và refresh, kết quả sẽ như sau:

Trong trường hợp bạn không chạy được và có biểu lộ ra lỗi thế này :
Access denied for user ‘ homestead ‘ @ ‘ localhost ‘ ( using password : YES ) …
, thì bạn triển khai lệnh sau để xóa configuration cache cũ :
php artisan config : clear

, rồi bạn quay lại PowerShell nơi thực hiện lệnh php artisan serve để thực hiện lệnh ngắt server bằng cách nhấn tổ hợp phím Ctrl + C rồi thực hiện lại lệnh php artisan serve.

Bước 12: Xóa bản ghi của bảng categories

– Vào controller CategoryController.php và sửa function destroy() thành như sau:

public function destroy(Category $category)
{
    $category->delete();
    $categories=Category::orderBy(‘categoryRank’)->get();
    return response()->json([‘categories’=>$categories,’alert’=>”Deleted successfully”]);
}

– Refresh lại website và triển khai xóa, tác dụng như sau :

Phần 5: Tạo component StoreCategory.vue để thêm bản ghi

Bước 1:

Từ thư mục resources >> js >> components >> category bạn tạo một component có tên StoreCategory.vue và thêm vào nội dung sau:

Bước 2:

Vào file app.js và thêm vào nội dung màu đỏ như sau:

[ … ]

import App from ‘./components/App.vue’;
import Category from ‘./components/category/Category.vue’;
import StoreCategory from ‘./components/category/StoreCategory.vue’;

const routes = [
    {
        path:’/storecategory’,
        name:’StoreCategory’,
        component:StoreCategory
    },
    {
        path:’/’,
        name:’Category’,
        component:Category
    }
[…]

Bước 3:

Quay lại trang web và refresh, nhấn nút Add category ta sẽ được kết quả như sau:

Bước 4:

Mở controller CategoryController.php và sửa function store() thành như sau:

public function store(Request $request)
{
    $category=new Category([
        ‘categoryName’=>$request->get(‘categoryName’),
        ‘categoryRank’=>$request->get(‘categoryRank’)
    ]);
    $category->save();
    return response()->json(‘Added successfully’);
}

Bước 5:

Quay về trang chủ (/) và refresh trang web rồi nhấn nút Add category để thêm một vài bản ghi. Kết quả:

Phần 6: Tạo component UpdateCategory.vue để sửa bản ghi

Bước 1:

Từ resources >> js >> components >> category tạo một component UpdateCategory.vue và đưa vào nội dung sau:

Bước 2:

Vào file app.js và thêm vào nội dung màu đỏ như sau:

[ … ]

import App from ‘./components/App.vue’;
import Category from ‘./components/category/Category.vue’;
import StoreCategory from ‘./components/category/StoreCategory.vue’;
import UpdateCategory from ‘./components/category/UpdateCategory.vue’;

const routes = [
    {
        path:’/updatecategory/:id’,
        name:’UpdateCategory’,
        component:UpdateCategory
    },
    {
        path:’/storecategory’,
        name:’StoreCategory’,
        component:StoreCategory
    },
    {
        path:’/’,
        name:’Category’,
        component:Category
    }
[…]

Bước 3:

Mở controller CategoryController.php và sửa function edit() thành như sau:

    public function edit(Category $category)
    {
        return response()->json($category);
    }

Bước 4:

Quay về trang chủ (/) và refresh trang web rồi nhấn nút Edit trên một bản ghi bất kỳ để sửa bản ghi. Kết quả:

Bạn thử biến hóa Rank thành 234 rồi nhấn nút Update để sửa, tác dụng là bạn sẽ không sửa được. Ta triển khai bước sau để update .

Bước 5:

Sửa function update() trong CategoryController.php thành như sau:

public function update(Request $request, Category $category)
{
    $category->update($request->all());
    return response()->json();
}

Bước 6:

Refresh lại trang rồi thực hiện lại việc edit bằng cách nhấn vào nút Edit, sửa rank thành 234 và nhấn nút Update. Kết quả:

Phần 7: Tạo component ShowCategory.vue để xem bản ghi

Bước 1:

Từ resources >> js >> components >> category tạo một component ShowCategory.vue và đưa vào nội dung sau:

Bước 2:

Vào file app.js và thêm vào nội dung màu đỏ như sau:

[ … ]

import App from ‘./components/App.vue’;
import Category from ‘./components/category/Category.vue’;
import StoreCategory from ‘./components/category/StoreCategory.vue’;
import UpdateCategory from ‘./components/category/UpdateCategory.vue’;
import ShowCategory from ‘./components/category/ShowCategory.vue’;

const routes = [
    {
        path:’/showcategory/:id’,
        name:’ShowCategory’,
        component:ShowCategory
    },
    {
        path:’/updatecategory/:id’,
        name:’UpdateCategory’,
        component:UpdateCategory
    },
    {
        path:’/storecategory’,
        name:’StoreCategory’,
        component:StoreCategory
    },
    {
        path:’/’,
        name:’Category’,
        component:Category
    }
];
[…]

Bước 3:

Mở controller CategoryController.php và sửa function show() thành như sau:

public function show(Category $category)
{
    return response()->json($category);
}

Bước 4:

Quay về trang chủ (/) và refresh trang web rồi nhấn vào tên của category (Công nghệ chẳng hạn), ta được kết quả:

Link thưởng thức : Chính v1study.com

Kết thúc.