laravel 实现详情分页
- 选择合适的PHP框架及前端框架布局页面(10分)
- 首先展示出分类列表,每个分类下只显示3条信息,无需分页 (30分)
- 在列表页 点击文章标题进入详细页面,对应的文章点击量+1(30分)
- 在详细页面点击上一篇 下一篇显示对应的文章详情(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; }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现