javascript - Laravel 刀片模板更改为 vue 组件
问题描述
所以我最近只使用 laravel 框架完成了我的项目。现在我已经完成了它,我想通过刷新内容而不刷新布局页面来将 vue.js 添加到我的项目中。而且我想将我的刀片文件转换为 vue 组件。而且我不知道该怎么做,因为在我的项目的每个部分中,我都有 4 个刀片文件,如索引、编辑、创建、显示,我不知道如何在组件中制作它,而且很难我是因为我使用的是 laravel 集体形式,这就是为什么每次我在数据库中添加一些条目时它都会刷新。我也是 vuejs 的新手。有人可以帮我解决这个问题吗?非常感谢。
我的文件夹目录是这样的。
-roadmap
---index.blade.php
---show.blade.php
---edit.blade.php
---create.blade.php
这是我的一些代码。
路线图/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
路线图控制器.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');
}
}
网页.php
//CRUD COLLECTIVE ROADMAP
Route::resource('roadmap', 'RoadmapController');
解决方案
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>
csrf_token()
您必须在元标记和div
with中提及,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
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
希望这可以帮助。干杯。
npm run dev
PS:您必须通过或npm run watch
完成编码后继续编译vue-component
。代码可能不起作用或可能有错误。这只是为您提供开始的方向。
推荐阅读
- reactjs - 如何在 React Gatsby 和 React-Bodymoving 中使用“webpack.DefinePlugin”?
- c# - 计算用户输入
- python - 在带有主管的 Droplet 服务器上运行 Airflow 时出现问题
- kotlin - Kotlin:从末尾拆分字符串
- javascript - 如何更改 FormControl type="email" 的标准警报消息?
- amazon-web-services - AWS AppSync 订阅在网络状态更改期间未触发
- python - 尝试使用python连接到mongodb atlas时连接超时
- arrays - 如何跳过分隔字符串表数组中的隐藏行或列
- javascript - 如何在 javascript 中使用 html2pdf 从 div HTML 制作 PDF,但对于移动和 pc 视图相同
- c# - 在 Windows 10 上获取已连接的蓝牙设备列表