laravel 实现详情分页

  1. 选择合适的PHP框架及前端框架布局页面(10分)
  2. 首先展示出分类列表,每个分类下只显示3条信息,无需分页 (30分)
  3. 在列表页 点击文章标题进入详细页面,对应的文章点击量+1(30分)
  4. 在详细页面点击上一篇 下一篇显示对应的文章详情(30分)

 

博客参考:

https://blog.csdn.net/g5g5t9/article/details/73690186

路由:

复制代码
Route::group(['namespace'=>'day13'],function (){
//    首页展示
    Route::get('day13/index','ExamController@index')->name('day13.index');
//    详情展示
    Route::get('day13/edit','ExamController@edit')->name('day13.edit');
//    上一页
    Route::get('day13/up','ExamController@up')->name('day13.up');
//    下一页
    Route::get('day13/down','ExamController@down')->name('day13.down');


});
复制代码

控制器:

复制代码
<?php

namespace App\Http\Controllers\day13;

use App\Http\Controllers\Controller;
use App\Models\Day13;
use App\Models\Task\Type;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class ExamController extends Controller
{
    //列表
    public function index(Request $request)
    {
        $id = $request->get('id');
//        获取分类
        $cate = Type::get();
//        每页显示3条
        $data = Day13::where('type_id', '=', $id)->limit(3)->get();
        return view('day13.index', compact('data', 'cate'));
    }
//    详细页面
    public function edit(Request $request)
    {
        $id = $request->get('id');
//        开启事务
        DB::beginTransaction();
        try {
//            点击加一
            DB::table('day13s')->where('id', '=', $id)->increment('clik',1);
//            获取信息
            $data=DB::table('day13s')->where('id', '=', $id)->first();
            DB::commit();
        } catch (\Exception  $e) {
            DB::rollBack();
        }
        return view('day13.edit', compact('data'));
    }
//    上一篇
    public function up(Request $request){
        $id=$request->get('id');
        $data=Day13::where('id','<',$id)->orderBy('id','desc')->limit(1)->first();
        return view('day13.up', compact('data'));
    }
//    下一篇
    public function down(Request $request){
        $id=$request->get('id');
        $data=Day13::where('id','>',$id)->orderBy('id','desc')->limit(1)->first();
        return view('day13.down', compact('data'));
    }

}
复制代码

列表视图:

 
{{--{{-分类数据渲染---}}
    <ul>
        @foreach($cate as $k=>$v)
            <li  onclick="cate({{$v->id}})" id="type">{{$v->type}}</li>
        @endforeach
    </ul>
复制代码
 <table class="table table-border table-bordered table-hover table-bg table-sort">
            <thead>
            <tr class="text-c">
                <th width="25"><input type="checkbox" name="" value=""></th>
                <th width="80">ID</th>
                <th width="100">标题</th>
                <th width="100">内容</th>
            </tr>
            </thead>
            <tbody>
            @foreach($data as $item)
                <tr class="text-c">
                    <td><input type="checkbox" value="{{$item->id}}" name="id[]"></td>
                    <td>{{$item->id}}</td>
{{--                    点击标题--}}
                    <td onclick="edit({{$item->id}})">{{$item->title}}</td>
                    <td>{{$item->content}}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
复制代码
{{--点击分类触发事件--}}
   function cate(id) {
       window.location.href="http://www.yan.com/day13/index?id="+id;
   }
    //点击标题进入详情页面
   function edit(id) {
       window.location.href="http://www.yan.com/day13/edit?id="+id;
   }

 

 详情视图:

复制代码
 <div class="mt-20">
        <table class="table table-border table-bordered table-hover table-bg table-sort">
            <thead>
            <tr class="text-c">
                <th width="80">ID</th>
                <th width="100">标题</th>
                <th width="100">内容</th>
            </tr>
            </thead>
            <tbody>
                <tr class="text-c">
                    <td>{{$data->id}}</td>
                    <td >{{$data->title}}</td>
                    <td>{{$data->content}}</td>
                </tr>

            </tbody>
        </table>
        <span onclick="up({{$data->id}})">上一篇</span>
        <span onclick="down({{$data->id}})">下一篇</span>
    </div>
复制代码
function up(id) {
    window.location.href="http://www.yan.com/day13/up?id="+id;

}
function down(id) {
    window.location.href="http://www.yan.com/day13/down?id="+id;

}

 

posted @   王越666  阅读(66)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示