Question

因此，我最近仅使用laravel框架完成了我的项目。现在，我已经完成了工作，我想通过刷新内容而不刷新布局页面来将vue.js添加到我的项目中。我也想将刀片文件转换为vue组件。而且我不知道该怎么做，因为在我项目的每个部分中，我都有4个刀片文件，如index，edit，create，show，而且我不知道如何在组件中做到这一点，因此很难我，因为我使用的是laravel集体形式，这就是为什么每次我在数据库中添加一些条目时都会刷新的原因。我也是vuejs的新手。有人可以帮我吗？非常感谢。

我的文件夹目录是这样的。

-roadmap
---index.blade.php
---show.blade.php
---edit.blade.php
---create.blade.php

这是我的一些代码。

roadmap / index.blade.php

@extends('layouts.admin')




@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- DATA TABLES -->
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet"href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">


<div><a class="btn btn-success" style="float:right" href="{{ route('roadmap.create') }}">Add Roadmap</a></div>

<table id="myTable" class="table table-hover">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Year Covered </th>
        <th scope="col">Description</th>
        <th scope="col">Date entered</th>



        <th width="280px">Action</th>
      </tr>
    </thead>
    <tbody>
        @foreach ($roadmap as $data)
        <tr>
           <td>{{ $data->id }}</td>
           <td>{{ $data->year}}</td>
           <td>{{ $data->body}}</td>
           <td>{{ $data->created_at}}</td>


        <td>

        <a href="/roadmap/{{$data->id}}/edit" class="btn btn-warning"><span class="glyphicon glyphicon-pencil"></span></a>

        <a href="/roadmap/{{$data->id}}" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></a>

        {!! Form::open(['method' => 'DELETE', 'route'=>['roadmap.destroy', $data->id], 'style'=> 'display:inline', 'onsubmit' => 'return confirm("Are you sure you want to delete?")']) !!}
        {!! Form::button('<i class="fa fa-trash"></i>',['type'=>'submit', 'class'=> 'btn btn-danger']) !!}
        {!! Form::close() !!}</td>


        </tr>
        @endforeach
    </tbody>
  </table>

  <script>
    $(document).ready(function() {
      $('#myTable').DataTable();

  } );
   </script>




@endsection

RoadmapController.php

<?php

namespace App\Http\Controllers;
use DB;
use Illuminate\Http\Request;
use App\Roadmap;
use Validator;
use Illuminate\Foundation\Validation\ValidatesRequests;

class RoadmapController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $roadmap = DB::table('roadmaps')->get();

        return view('roadmap.index', ['roadmap' => $roadmap]);

    }

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

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        request()->validate([
            'year' =>['required', 'string', 'max:255', 'unique:roadmaps'],
            'body' => ['required', 'string', 'max:255'],
          ]);

          Roadmap::create($request->all());
          return redirect()->route('roadmap.index')->with('success','Created successfully');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
        $roadmap = Roadmap::find($id);
        return view('roadmap.show', compact('roadmap'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
        $roadmap = Roadmap::find($id);
        return view('roadmap.edit', compact('roadmap'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
        request()->validate([
            'year' => 'required',
            'body' => 'required',
          ]);
          Roadmap::find($id)->update($request->all());
          return redirect()->route('roadmap.index')->with('success',' Updated successfully');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
        Roadmap::find($id)->delete();
        return redirect()->route('roadmap.index')->with('success','News deleted successfully');
    }

}

web.php

//CRUD COLLECTIVE ROADMAP
    Route::resource('roadmap', 'RoadmapController');

Answer 1

不知道它是否对您有帮助，但是我在分享我的想法。

在laravel webpack中添加js文件
在js文件中添加您的组件

在组件中添加您的代码对于@foreach，您可以在路线图中使用v-for =“数据”

<tr v-for="data in roadmap">
   <td> {{ data.id }}</td>
   <td> {{ data.year }}</td>
<td>
<a :href="'/roadmap/'+ data.id +'/edit'" class="btn btn-warning">
 <span class="glyphicon glyphicon-pencil"></span>
</a>
</td>
</tr>

用于控制器索引功能：

    if($request->ajax()){
        $roadmap = DB::table('roadmaps')->get();
        return response()->json($roadmap, 200);
    }

    return view('roadmap.index');

要提交表单，可以在单击按钮上添加方法。

让我知道他们是否缺乏理解。我将更新我的答案

Answer 2

在我们的vue components应用程序中有许多不同的方法可以使用laravel。基本思想是执行SPA（单页应用程序），我将告诉您如何执行。

Laravel为我们的vuejs应用程序提供了基本的入口点。您可以在webpack.mix.js文件中看到。对于路由，我使用vue-router和rest api进行CRUD操作。因此，您需要执行以下设置：

npm install
npm install vue-router --save

npm run dev // To compile app.js and store into public folder

在您的情况下，我将制作一个刀片文件，该文件将用作Vue应用程序的入口点。我会在路线web.php

中定义

Route::get('/{view?}', 'HomeController@landing')->where('view', '(.*)')->name('landing');

在HomeController中，我将简单地返回刀片视图

return view('landing')

现在进入将产生landing.blade.php：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>welcome.</title>
        <meta name="description" content="Login Page">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta name="csrf-token" content="{{ csrf_token() }}">

    </head>
    <body>

        <div id="website">
        </div>

        <script src="{{ mix('js/app.js') }}"></script>

    </body>
</html>

您必须在meta标记中提及csrf_token()，并在div中提及id，以便它可以在此处呈现vue-components。

现在，我将为router创建一个vuejs文件，这将在资源文件夹中创建router.js：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'history',
    routes:
        [
            {
                path: '/',
                component: Vue.component('welcome', () => import('./components/Welcome.vue')),
                name: 'welcome',
            },
            {
                path: '/roadmap',
                component: Vue.component('roadmap-index', () => import('./components/Roadmap/index.vue')),
                name: 'roadmap.index',
            },

        ],
    base: '/',
});

您可以为Create，Update表单执行其他操作。现在，我们将配置资源文件夹中的app.js文件：

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

import VueRouter from 'vue-router';
import {router} from "./routes";
import welcome from './components/Welcome';

window.Vue = require('vue');

Vue.use(VueRouter);

const layoutOne = new Vue({
    el: '#website',
    router: router,
    render:h=>h(welcome)
});

然后，我将创建welcome组件，它将作为vue-router的入口点，将创建一个welcome.vue文件：

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "welcome",
    }
</script>

<style lang="scss">


</style>

现在，我将为CRUD操作制作API：

<?php

namespace App\Http\Controllers;
use DB;
use Illuminate\Http\Request;
use App\Roadmap;
use Validator;
use Illuminate\Foundation\Validation\ValidatesRequests;

class RoadmapController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $roadmap = DB::table('roadmaps')->get();

        return response()->json(['roadmap' => $roadmap], 200);

    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        request()->validate([
            'year' =>['required', 'string', 'max:255', 'unique:roadmaps'],
            'body' => ['required', 'string', 'max:255'],
          ]);

          Roadmap::create($request->all());
          return response()->json(['message' => 'Created successfully'], 200);
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
        $roadmap = Roadmap::find($id);
        return response()->json(['roadmap` => $roadmap],200);
    }


    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
        request()->validate([
            'year' => 'required',
            'body' => 'required',
          ]);
          Roadmap::find($id)->update($request->all());
          return response()->json(['message' => 'Updated successfully'], 200;;
    }

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

}

然后我将在api.php中制作api

Route::resource('roadmap', 'RoadmapController');

现在唯一剩下的就是在我们的组件文件中调用这些api并按照我们的要求执行。

<template>
    <table class="table table-hover">
        <thead class="demo">
        <tr>
            <th>Roadmap</th> //Whatever you have headers
            <th>Update</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in roadmaps">
            <td>{{ item.name }}</td>  // Whatever your data field is
            <td @click="update(item)">Update</td>
            <td @click="delete(item)"> Delete</td>
        </tr>
    </table>
</template>

<script>
    export default {
        data() {
            return: {
                roadmaps: [],
                errors: ''
            }
        },
        methods: {
            fetchData() {
                axios.get('api/roadmap).then(response => {
                    if(response.status === 200)
                    {
                        this.roadmaps = response.data
                    }
                }).catch((error) => {
                    this.errors = error.response.data
                })
            },
            update(item) {
                this.$router.push({ name: update, params: { id: item.id}})
            },
            delete(item) {
                axios.delete('api/roadmap/'+item.id).then(response => {
                    if(response.status === 200)
                    {
                        this.fetchData()  // to refresh table..
                    }
                }).catch((error) => {
                    this.errors = error.response.data
                })
            }
        }
        created() {
            this.fetchData()
        }
    }
</script>

我希望您有一个基本的想法可以自己执行事情。有很多教程可以找到：

https://laravel-news.com/using-vue-router-laravel

希望这会有所帮助。干杯。

PS：完成npm run dev编码后，必须继续通过npm run watch或vue-component进行编译。代码可能不起作用或存在错误。这只是给您指导的方向。

Laravel刀片模板更改为Vue组件

2 个答案: