laravel+vue实现展示+删除（带vue图片展示和数据回收站）

什么是vue:

Vue是一款流行的前端 JavaScript 框架，它专注于构建用户界面。Vue提供了一套响应式的组件化架构，可以帮助开发者更快地构建交互式界面。Vue的核心思想是组件化，可以将界面拆分成多个组件，每个组件都独立维护自己的状态和行为，最终组合起来形成完整的用户界面。

什么是laravel

Laravel则是一款流行的后端 PHP 框架，它提供了一套完整的解决方案，包括路由、模板引擎、ORM（对象关系映射）、缓存、验证、队列等功能。Laravel的核心思想是简单、优雅、实用，通过提供一系列方便的工具、包和命令，让开发者可以更快地构建符合预期的应用程序。

一个简单的案列:

laravel作为后端提供API接口，vue接收接口数据展示。vue的写法与微信小程序的写法较为相似。

首先是laravel作为提供数据的一方对接数据库，将所需要的数据提取出来:

 

我将数据转化成数组的形势方便我前端使用。

然后是vue

首先是接收接口的数据，在这之间需要在vue.config.js当中修改一下路由地址，把他设置成你自己的路由地址就行。

 然后在src/api下创建一个js文件。同时也要在src/view创建.vue文件

这段代码定义了一个名为 shopShow 的函数，函数返回一个发送 HTTP GET 请求到 index.php/api/listStore 地址的 Promise 对象，使用的是 axios 库的 request 函数。请求成功时会返回一个响应对象，包含服务器返回的数据。

页面的搭建和数据展示+删除

代码:

<template>

    <div>

    <div style="margin-top: 20px;">

      <el-card>

        <div slot="header" class="clearfix">

          <span>门店列表展示</span>

        </div>

        <!--条件搜索-->

          <el-input v-model="searchText" style="width: 500px;" placeholder="请输入关键字"></el-input>

          <el-button type="primary" @click="search">搜索</el-button>

        <br>

        <!--新增-->

        <el-button size="mini" type="success" @click="shopAdd">新增门店信息</el-button>

        <!--回收站-->

        <el-button size="mini" type="success" @click="shopRecovery">门店回收站</el-button>

        <el-table :data="tableData" style="width: 100%" >

          <el-table-column type="selection" width="55" />

          <el-table-column label="门店编号" prop="id" width="130" />

          <el-table-column label="门店名称" prop="name" width="130" />

          <el-table-column label="门店面积" prop="area" width="130" />

          <el-table-column label="门店图片" prop="logo" width="130">

            <template slot-scope="scope">

                <img :src="scope.row.logo" width="120" height="80" />

            </template>

          </el-table-column>

          <el-table-column label="门店每平价格" prop="area_price" width="120" />

          <el-table-column label="门店手机号" prop="phone" width="100" />

          <el-table-column label="门店联系人" prop="contacts" width="120" />

          <el-table-column label="门店状态" prop="status" width="80" />

          <el-table-column label="操作" >

            <template slot-scope="scope">

              <el-button size="mini" type="danger" @click="shopDel(scope.row)">删除</el-button>

              <el-button size="mini" type="warning" @click="shopFirst(scope.row)">修改</el-button>

            </template>

          </el-table-column>

        </el-table>

      </el-card>

    </div>

  </div>

</template>

<script>

import { MessageBox } from 'element-ui';

import {

    shopShow,shopDel,shopAdd,shopRecovery,shopFirst

}from '../../api/shop'

import data from '../pdf/content';

export default{

    name:"activity",

    data(){

        return {

            tableData:[],

            searchText:''

        }

    },

    //数据展示

    created(){

        shopShow().then((res)=>{

            console.log(res)

            if(res.code == 20000){

                this.tableData = res.data

            }

        })

    },

    //删除

    methods:{

        shopDel(row) {

            let id=row.id;

            MessageBox.confirm(`确认删除 ${row.name} 吗？`, '提示', {

                confirmButtonText: '确定',

                cancelButtonText: '取消',

                type: 'warning'

            }).then(() => {

                shopDel(id).then((res)=>{

                    if(res.code == 20000){

                        this.$message({

                            showClose:true,

                            message:'删除成功',

                            type:'success',

                            duration:'3000'

                        });

                        shopShow().then((res) => {

                            if(res.code == 20000){

                            console.log(res.data)

                            this.tableData = res.data

                            }

                        })

                    }

                })

            }).catch(() => {

                console.log('取消删除')

            });

        },

        shopAdd() {

        this.$router.push({

          path: '/shop/configuration',

        })

      },

      shopRecovery() {

        this.$router.push({

          path: '/shop/order',

        })

      },

      shopFirst(){

        this.$router.push({

          path:'/shop/goods'

        })

      },

      search() {

        shopShow({keyword:this.searchText}).then((res)=>{

          if(res.code == 20000){

            this.tableData = res.data

          }

        })

      }

    }

   

}

</script>

<style>

</style>

实现的效果:

页面的数据展示

删除功能