专栏首页胡哥有话说Larave-vue-crud-laravel-和vue-增删改查

Larave-vue-crud-laravel-和vue-增删改查

作者

本文由 张舫 童鞋投稿

同时也欢迎更多的小伙伴投稿

开发需求

PHP >= 7.0.0
OpenSSL PHP Extension
PDO PHP Extension
Mbstring PHP Extension
Tokenizer PHP Extension
XML PHP Extension
Apache/Nginx
MySQl
Composer
NodeJs with NPM

提示

.
.                代表代码省略
.

1创建laravel项目

 composer create-project laravel/laravel=5.5.* laravelvuecrud     #指定laravel版本为5.5.*如果需要最高版本可以去掉版本约束,指定项目名称

image

image

看到successfully代表laravel安装成功,如果没有成功请换淘宝镜像重写安装.

如果你composer下载速度过慢可以指定淘宝镜像

composer config -g repo.packagist composer https://packagist.phpcomposer.com

image

查看镜像是否替换成功

composer config -gl    #查看全局配置文件

image

2创建迁移文件

cd laravelvuecrud        #进入项项目目录
php artisan make:migration create_tasks_table --create=tasks     #创建数据迁移文件

image

打开迁移文件并且开始编辑\database\migrations\<time>_create_tasks_table.php

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateTasksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->unsignedInteger('user_id');
            $table->text('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('tasks');
    }
}

配置数据库连接打开/.env文件,找到这段根据自己的数据库自行配置

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravelvuecrud
DB_USERNAME=homestead
DB_PASSWORD=secret

执行数据迁移命令,

php artisan migrate

image

如果执行迁移文件报错SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 1000 bytes,说明数据库版本太低

打开\app\Providers\AppServiceProvider.php文件,修改内容

use Illuminate\Support\Facades\Schema;   //引入
.
.
.
public function boot()
{
    Schema::defaultStringLength(191); //设置长度
}
.
.
.

然后删除数据库里面的所有表文件,重新执行迁移命令就可以了.

3.自动生成登陆注册

php artisan make:auth

image

image

image

image

打开浏览器输入配置好的域名,可以看到有了登陆注册

4.创建模型和控制器

php artisan make:model Task -r

开始编辑模型\app\Task.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    /**设置可填写的字段
     * @var array
     */
    protected $fillable = [
        'name',
        'user_id',
        'description',
    ];
}

5创建路由设置权限

打开\routes\web.php文件在最后添加代码

Route::resource('/task', 'TaskController')      ->middleware('auth');     #资源路由指定必须登陆才能访问

6编写vue组件了

\resources\assets\js\components\里创建 Task.vue文件打开并且编辑

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">My Tasks</div>

                    <div class="panel-body">

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {

        }
    }
</script>

打开\resources\assets\js\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');                                                             //引入bootstrap

window.Vue = require('vue');                                                        //引入vue

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));       //这个组件是laravel自带,就是一个例子,没有用可以删除
Vue.component('task', require('./components/Task.vue'));                                //注册组件

const app = new Vue({
    el: '#app'                  //页面上已有的元素
});

7.安装npm依赖包

npm install

这个安装的过程比较漫长,建议使用npm淘宝镜像,或者使用yarn软件进行安装,安装的过程中如有报错,删除'/node_modules'这个文件多次尝试即可.

8.编译资源使用Task控制器

npm run dev       #编译资源

打开 \resources\views\home.blade.php 文件复制代码

@extends('layouts.app')

@section('content')
    {{--使用app.js文件中注册的组件--}}
    <task></task>
@endsection

打开浏览器输入http://自己设置的域名/home 就可以看见,之前编写\resources\assets\js\components\Task.vue的代码了

9.增

编辑\resources\assets\js\components\Task.vue 复制代码

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <button @click="initAddTask()" class="btn btn-primary btn-xs pull-right">
                            + Add New Task
                        </button>
                        My Tasks
                    </div>

                    <div class="panel-body">

                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="add_task_model">
            <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">&times;</span></button>
                        <h4 class="modal-title">Add New Task</h4>
                    </div>
                    <div class="modal-body">

                        <div class="alert alert-danger" v-if="errors.length > 0">
                            <ul>
                                <li v-for="error in errors">{{ error }}</li>
                            </ul>
                        </div>

                        <div class="form-group">
                            <label for="name">Name:</label>
                            <input type="text" name="name" id="name" placeholder="Task Name" class="form-control"
                                   v-model="task.name">
                        </div>
                        <div class="form-group">
                            <label for="description">Description:</label>
                            <textarea name="description" id="description" cols="30" rows="5" class="form-control"
                                      placeholder="Task Description" v-model="task.description"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" @click="createTask" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                task: {
                    name: '',
                    description: ''
                },
                errors: []
            }
        },
        methods: {
            initAddTask() {
                this.errors = [];
                $("#add_task_model").modal("show");
            },
            createTask() {
                axios.post('/task', {                   //这里使用axios作为ajax请求这个axios这个包是在\resources\assets\js\bootstrap.js 第22行引入的laravel官方自带,vue官方推荐使用
                    name: this.task.name,
                    description: this.task.description,
                })
                    .then(response => {
                        this.reset();
                        $("#add_task_model").modal("hide");
                    })
                    .catch(error => {
                        this.errors = [];
                        if (error.response.data.errors.name) {
                            this.errors.push(error.response.data.errors.name[0]);
                        }
                        if (error.response.data.errors.description) {
                            this.errors.push(error.response.data.errors.description[0]);
                        }
                    });
            },
            reset() {
                this.task.name = '';
                this.task.description = '';
            },
        }
    }
</script>

编辑\app\Http\Controllers\TaskController.php控制器

use Illuminate\Support\Facades\Auth;       #别忘了引入它
.
.
.
public function store(Request $request)
{
    $this->validate($request, ['name' => 'required|max:255', 'description' => 'required',]);                        #数据验证
    $task = Task::create(['name' => request('name'), 'description' => request('description'), 'user_id' => Auth::user()->id]);      #创建数据
    return response()->json(['task' => $task, 'message' => 'Success'], 200);            #返回消息

}
.
.
.

编译资源

npm run dev

打开浏览器查看结果

10 获取数据

编辑\resources\assets\js\components\Task.vue 复制代码

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <button @click="initAddTask()" class="btn btn-primary btn-xs pull-right">
                            + Add New Task
                        </button>
                        My Tasks
                    </div>

                    <div class="panel-body">
                        <table class="table table-bordered table-striped table-responsive" v-if="tasks.length > 0">
                            <tbody>
                            <tr>
                                <th>
                                    No.
                                </th>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Description
                                </th>
                                <th>
                                    Action
                                </th>
                            </tr>
                            <tr v-for="(task, index) in tasks">
                                <td>{{ index + 1 }}</td>
                                <td>
                                    {{ task.name }}
                                </td>
                                <td>
                                    {{ task.description }}
                                </td>
                                <td>
                                    <button class="btn btn-success btn-xs">Edit</button>
                                    <button class="btn btn-danger btn-xs">Delete</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="add_task_model">
            <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">&times;</span></button>
                        <h4 class="modal-title">Add New Task</h4>
                    </div>
                    <div class="modal-body">

                        <div class="alert alert-danger" v-if="errors.length > 0">
                            <ul>
                                <li v-for="error in errors">{{ error }}</li>
                            </ul>
                        </div>

                        <div class="form-group">
                            <label for="name">Name:</label>
                            <input type="text" name="name" id="name" placeholder="Task Name" class="form-control"
                                   v-model="task.name">
                        </div>
                        <div class="form-group">
                            <label for="description">Description:</label>
                            <textarea name="description" id="description" cols="30" rows="5" class="form-control"
                                      placeholder="Task Description" v-model="task.description"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" @click="createTask" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                task: {
                    name: '',
                    description: ''
                },
                errors: [],
                tasks: []
            }
        },
        mounted() {
            this.readTasks();
        },
        methods: {
            initAddTask() {
                $("#add_task_model").modal("show");
            },
            createTask() {
                axios.post('/task', {
                    name: this.task.name,
                    description: this.task.description,
                })
                    .then(response => {

                        this.reset();

                        this.tasks.push(response.data.task);

                        $("#add_task_model").modal("hide");

                    })
                    .catch(error => {
                        this.errors = [];
                        if (error.response.data.errors.name) {
                            this.errors.push(error.response.data.errors.name[0]);
                        }

                        if (error.response.data.errors.description) {
                            this.errors.push(error.response.data.errors.description[0]);
                        }
                    });
            },
            reset() {
                this.task.name = '';
                this.task.description = '';
            },
            readTasks() {
                axios.get('/task')
                    .then(response => {

                        this.tasks = response.data.tasks;

                    });
            }
        }
    }
</script>

编辑\app\Http\Controllers\TaskController.php控制器

.
.
.
public function index()
{
    $tasks = Task::where(['user_id' => Auth::user()->id])->get();
    return response()->json(['tasks' => $tasks,], 200);
}
.
.
.

资源编译

npm run dev

打开浏览器查看

11更新

编辑\resources\assets\js\components\Task.vue 复制代码

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <button @click="initAddTask()" class="btn btn-primary btn-xs pull-right">
                            + Add New Task
                        </button>
                        My Tasks
                    </div>

                    <div class="panel-body">
                        <table class="table table-bordered table-striped table-responsive" v-if="tasks.length > 0">
                            <tbody>
                            <tr>
                                <th>
                                    No.
                                </th>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Description
                                </th>
                                <th>
                                    Action
                                </th>
                            </tr>
                            <tr v-for="(task, index) in tasks">
                                <td>{{ index + 1 }}</td>
                                <td>
                                    {{ task.name }}
                                </td>
                                <td>
                                    {{ task.description }}
                                </td>
                                <td>
                                    <button @click="initUpdate(index)" class="btn btn-success btn-xs">Edit</button>
                                    <button class="btn btn-danger btn-xs">Delete</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="add_task_model">
            <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">&times;</span></button>
                        <h4 class="modal-title">Add New Task</h4>
                    </div>
                    <div class="modal-body">

                        <div class="alert alert-danger" v-if="errors.length > 0">
                            <ul>
                                <li v-for="error in errors">{{ error }}</li>
                            </ul>
                        </div>

                        <div class="form-group">
                            <label for="name">Name:</label>
                            <input type="text" name="name" id="name" placeholder="Task Name" class="form-control"
                                   v-model="task.name">
                        </div>
                        <div class="form-group">
                            <label for="description">Description:</label>
                            <textarea name="description" id="description" cols="30" rows="5" class="form-control"
                                      placeholder="Task Description" v-model="task.description"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" @click="createTask" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="update_task_model">
            <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">&times;</span></button>
                        <h4 class="modal-title">Update Task</h4>
                    </div>
                    <div class="modal-body">

                        <div class="alert alert-danger" v-if="errors.length > 0">
                            <ul>
                                <li v-for="error in errors">{{ error }}</li>
                            </ul>
                        </div>

                        <div class="form-group">
                            <label>Name:</label>
                            <input type="text" placeholder="Task Name" class="form-control"
                                   v-model="update_task.name">
                        </div>
                        <div class="form-group">
                            <label for="description">Description:</label>
                            <textarea cols="30" rows="5" class="form-control"
                                      placeholder="Task Description" v-model="update_task.description"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" @click="updateTask" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                task: {
                    name: '',
                    description: ''
                },
                errors: [],
                tasks: [],
                update_task: {}
            }
        },
        mounted() {
            this.readTasks();
        },
        methods: {
            initAddTask() {
                $("#add_task_model").modal("show");
            },
            createTask() {
                axios.post('/task', {
                    name: this.task.name,
                    description: this.task.description,
                })
                    .then(response => {

                        this.reset();

                        this.tasks.push(response.data.task);

                        $("#add_task_model").modal("hide");

                    })
                    .catch(error => {
                        this.errors = [];
                        if (error.response.data.errors.name) {
                            this.errors.push(error.response.data.errors.name[0]);
                        }

                        if (error.response.data.errors.description) {
                            this.errors.push(error.response.data.errors.description[0]);
                        }
                    });
            },
            reset() {
                this.task.name = '';
                this.task.description = '';
            },
            readTasks() {
                axios.get('/task')
                    .then(response => {

                        this.tasks = response.data.tasks;

                    });
            },
            initUpdate(index) {
                this.errors = [];
                $("#update_task_model").modal("show");
                this.update_task = this.tasks[index];
            },
            updateTask() {
                axios.patch('/task/' + this.update_task.id, {
                    name: this.update_task.name,
                    description: this.update_task.description,
                })
                    .then(response => {

                        $("#update_task_model").modal("hide");

                    })
                    .catch(error => {
                        this.errors = [];
                        if (error.response.data.errors.name) {
                            this.errors.push(error.response.data.errors.name[0]);
                        }

                        if (error.response.data.errors.description) {
                            this.errors.push(error.response.data.errors.description[0]);
                        }
                    });
            }
        }
    }
</script>

编辑\app\Http\Controllers\TaskController.php控制器

$this->validate($request, ['name' => 'required|max:255', 'description' => 'required',]);
$task->name        = request('name');
$task->description = request('description');
$task->save();
return response()->json(['message' => 'Task updated successfully!'], 200);

编译资源

npm run dev

浏览器查看结果

12 删除

编辑\resources\assets\js\components\Task.vue修改代码

给删除按钮添加脚本

<button @click="deleteTask(index)" class="btn btn-danger btn-xs">Delete</button>

编写删除方法在methods里面添加

.
.
.
methods: {
.
.
.
    deleteTask(index)
    {
        let conf = confirm("Do you ready want to delete this task?");
        if (conf === true) {

            axios.delete('/task/' + this.tasks[index].id)
                .then(response => {

                    this.tasks.splice(index, 1);

                })
                .catch(error => {

                });
        }
    }
}
.
.
.

编辑\app\Http\Controllers\TaskController.php控制器

.
.
.
public function destroy(Task $task)
{
    $task->delete();
    return response()->json(['message' => 'Task deleted successfully!'], 200);
}
.
.
.

编译资源

npm run dev

打开浏览器查看

后记

再次感谢张舫童鞋给大家分享的内容,同时也欢迎小伙伴们多多投稿呦,喜欢的小伙伴记得收藏转发、点击右下角按钮在看,推荐给更多小伙伴呦,欢迎多多留言交流...

胡哥有话说,一个有技术,有情怀的胡哥!京东开放平台首席前端攻城狮。与你一起聊聊大前端,分享前端系统架构,框架实现原理,最新最高效的技术实践!

本文分享自微信公众号 - 胡哥有话说(hugeyouhuashuo)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一次CMS源码审计与漏洞发现

    最近一直在学习《[红日安全]代码审计》系列中关于php代码中存在的问题,从中受益匪浅。从中选取了一个DM企业建站的cms用作练习,在还原了练习中的漏洞后尝试对其...

    FB客服
  • JS控制Video播放器(快进、后退、播放、暂停、音量大小)

    比如:向上键对应的keyCode为38,向下键对应的keyCode为40,向左键对应的keyCode为37,向右键对应的keyCode为39,空格键对应的key...

    用户1518699
  • Jsoup+Htmlunit抓取图片遇到坑

    Jsoup是用于解析HTML,就类似XML解析器用于解析XML。 Jsoup它解析HTML成为真实世界的HTML。

    赵哥窟
  • 20190709

    今天在写Springboot项目时,连接MySql时出现个错误,控制台输出::The server time zone value '�й���׼ʱ��' is...

    用户1956326
  • 浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

    由于家中有事,文章没顾得上。在此说声抱歉,这是工具准备的最后一章。 接下来就是开始环境搭建了~尽情期待

    若羽
  • 网站安全漏洞检测详情与修复方案

    Metinfo CMS系统被爆出网站存在漏洞,可上传任意文件到网站根目录下,从而使攻击者可以轻易的获取网站的webshell权限,对网站进行篡改与攻击,目前该网...

    技术分享达人
  • 16、web爬虫讲解2—PhantomJS虚拟浏览器+selenium模块操作PhantomJS

    phantomjs 是一个基于js的webkit内核无头浏览器 也就是没有显示界面的浏览器,利用这个软件,可以获取到网址js加载的任何信息,也就是可以获取浏览器...

    天降攻城狮
  • 浅入深出Vue:路由

    路由的概念在计算机界中的历史大概可以追溯到OSI模型中的数据链路层与网络层中的定义。这里的定义大意是:在转发数据包时,根据数据包的目的地址进行寻址,从而将数据包...

    若羽
  • 【一起来烧脑】读懂HTTP知识体系

    读懂HTTP很重要,参加过面试的小伙伴都很清楚,无论是技术面试面试题出得怎样,都有机会让你讲解一下HTTP,大部分都会问一下。

    达达前端
  • Springboot项目之拦截器使用

    在Springboot项目中, 拦截器也是开发中常用手段,要来做登陆验证、性能检查、日志记录等。写个例子看看,一个拦截器、一个配置类、一个拦截器要拦截的类。

    用户1956326

扫码关注云+社区

领取腾讯云代金券