Laravel8 三级联动以及WebUploader上传图片

首先就是控制器以及模型的创建

            // 主键ID
            $table->bigIncrements('id');
            $table->string('fang_name',100)->default('')->comment('名称');
            $table->unsignedInteger('province')->default(0)->comment('省');
            $table->unsignedInteger('city')->default(0)->comment('市');
            $table->unsignedInteger('region')->default(0)->comment('区');
            $table->string('addr',200)->default('')->comment('房源地址');
            $table->enum('is_recommend',['0','1'])->default('0')->comment('是否推荐:0否,1是');
            $table->decimal('latitude',10,6)->default(0)->comment('纬度');
            $table->decimal('longitude',10,6)->default(0)->comment('经度');
            $table->timestamps();
            // 软删除
            $table->softDeletes();

创建资源控制器(记得创建城市表)

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $data = House::all();


        return  view('house.index',compact('data'));
    }

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;


class House extends Model
{
    //软删除
    use SoftDeletes;
    protected $dates = ['deleted_at'];

    public static function getFangAttr()
    {

        //获取所有的城市(省)
        $cityData = City::where('pid', '=', '0')->get();
        $data = [
            'city_data'=>$cityData,
        ];
        return $data;
    }
}

这里的模板使用的Hui的模板

建立了三个公功模板

         

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/static/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/static/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/css/style.css" />
    <title>用户管理</title>
    @yield('css')
</head>
<body>

@yield('cnt')

<script type="text/javascript" src="/static/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/static/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/static/static/h-ui.admin/js/H-ui.admin.js"></script>

<script type="text/javascript" src="/static/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/static/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/static/lib/laypage/1.2/laypage.js"></script>
@yield('js')
</body>
</html>

第二个

@if(session()->has('success'))
    <div class="Huialert Huialert-success"><i class="Hui-iconfont">&#xe6a6;</i>

        {{ session('success') }}
    </div>
@endif

第三个

@if($errors->any())
    <div class="Huialert Huialert-error"><i class="Hui-iconfont">&#xe6a6;</i>
        @foreach($errors->all() as $error)
            <li>{{$error}}</li>
        @endforeach
    </div>
@endif

 

 

@extends('common.main')


@section('cnt')

    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 中心
        <span class="c-gray en">&gt;</span> 列表
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>

    <form action="" method="get">
        <div class="text-c">
            <input type="text" class="input-text" style="width:250px" placeholder="输入名称" id="" name="fang_name">
            <button type="submit" class="btn btn-success radius" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 搜
            </button>
        </div>
    </form>
    <span class="l">
             <a href="{{ route('house.create') }}" class="btn btn-primary radius"><i
                     class="Hui-iconfont">&#xe600;</i> 添加</a>

        <span class="btn btn-danger radius" onclick="deleteAll()"><i class="Hui-iconfont">&#xe600;</i>批量删除</span>

    <div class="mt-20">
        @include('common.validate')
        <table class="table table-border table-bordered table-hover table-bg table-sort">
            <thead>
            <tr class="text-c">
                <th width="30"><input type="checkbox" name="" value=""></th>
                <th width="50">ID</th>
                <th width="150">名称</th>
                <th width="150">名称</th>
                <th width="100">地址</th>
                <th width="100">使用面积</th>
                <th width="100">操作</th>
            </tr>
            </thead>
            <tbody>
            @foreach($data as $val)

                <tr class="text-c">
                    <td>
                         <input type="checkbox" value="" name="id[]">
                    </td>
                    <td>{{ $val->id }}</td>
                    <td>{{$val->name}} </td>
                    <td>{{$val-> city}}</td>
                    <td>{{$val->pic}}</td>
                    <td></td>
                    <td></td>
                    <td>
                        @if($val['is_recommend'] == 0)
                            <span fang_status="{{$val['is_recommend']}}" onclick="changeStatus(this,{{$val['id']}})"
                                  class="label label-defalut radius">未出租</span>
                        @else
                            <span fang_status="{{$val['is_recommend']}}" onclick="changeStatus(this,{{$val['id']}})"
                                  class="label label-success radius">已出租</span>
                        @endif
                    </td>
                    <td class="td-manage">
                        <a href=""
                           class="badge badge-success radius">编辑</a>
                                <a href=""
                                   class="badge badge-danger radius restorebtn">删除</a>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
@endsection
        @section('js')
            <script>
    function changeStatus(obj, fang_id) {
        var url = "";
        //获取状态
        let fang_status = $(obj).attr('fang_status');
        if (fang_status ==0) {
            fang_status =1;
        }else{
            fang_status =0;
        }
        $.get(url, {
            fang_id,fang_status
        }).then(ret => {

            if (fang_status == 0) {
                $(obj).removeClass('label-success').addClass('label-defalut').html('未租');
            } else {
                $(obj).removeClass('label-defalut').addClass('label-success').html('已出租');
            }
            $(obj).attr('fang_status',fang_status);
        })

    }
</script>
@endsection

然后就是添加页面

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悄悄顽皮的猴头

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值