前臺數據調用 · Swoft快入速門與實戰-`Http`服務

## [PHP交流群：494826865（點擊群號立即加群）](https://jq.qq.com/?_wv=1027&k=50Qy5h6) # 前臺數據調用 **首頁課程列表顯示** 后臺代碼的編寫：后臺代碼分層處理（控制器層-邏輯層-Dao層）控制器層（在前臺首頁對應的控制器及方法中獲取推薦課程數據并分配到視圖） Home/IndexController.php ~~~ /** ? ? * Get data list. access uri path: /index ? ? * @RequestMapping(route="/", method=RequestMethod::GET) ? ? * @return \Swoft\Http\Message\Response ? ? * @throws \Throwable ? ? */ ? ?public function index() ? { ? ? ? ?//獲取最新推薦課程 ? ? ? ?$data = BeanFactory::getBean(CourseLogic::class)->getNewsCourse(8); ? ? ? ?return view("home/index",['list'=>$data]); ? } ~~~ 邏輯層（不直接操作實體） Model/Logic/CourseLogic.php ~~~ /** ? ? * Get data list. access uri path: /index ? ? * @RequestMapping(route="/", method=RequestMethod::GET) ? ? * @return \Swoft\Http\Message\Response ? ? * @throws \Throwable ? ? */ ? ?public function index() ? { ? ? ? ?//獲取最新推薦課程 ? ? ? ?$data = BeanFactory::getBean(CourseLogic::class)->getNewsCourse(8); ? ? ? ?return view("home/index",['list'=>$data]); ? } ~~~ Dao層（直接操作實體） Model/Dao/CourseDao.php ~~~ ? ?//獲取最新推薦課程 ? ?public function getNewsCourse($num){ ? ? ? ?$data = Course::where("isshow",1)->orderByDesc("created_at")->take($num)->get(); ? ? ? ?return $data; ? } ~~~ 到這里數據就可以分配到`home/index.php`視圖將推薦課程通過循環在視圖中顯示 ~~~ <?foreach ($list as $l):?> ? ? ? ?<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4 item"> ? ? ? ?<div class="box"> ? ? ? ? ? ?<div class="img"><img src="<?=$l['pic']?>" class="img-fluid" alt="" srcset=""></div> ? ? ? ? ? ?<div class="mt-2 title"><?=$l['title']?></div> ? ? ? ? ? ?<div class="desc"> ? ? ? ? ? ? ? ?<?=$l['digest']?> ? ? ? ? ? ?</div> ? ? ? ?</div> ? ?</div> ? ? <?endforeach?> ~~~ **列表頁數據顯示** > 這一部分重點是，數據分頁！ > > 數據分頁的實現分兩部分，第一部分是后端的數據分頁的實現，第二部分是前臺的數據分頁的實現。后端主要是指數據的分頁查詢，前端主要是指分頁航的實現。后臺的處理比較簡單，一般的框架都提供的有便捷的查詢方法。在swoft中可以使用`forpage`來實現。 > > 前端的分頁導航的實現有多種方式，在這里使用異常分頁的方式來實現，這種方式與傳統的分頁形式像比，體驗較好，但是不利于SEO優化。在選擇使用時，要根據自己的實際需求來定。異步分頁接口的實現 > 異步分頁接口的核心，是返回JSON的數據格式，并且在前端要能夠獲取到總頁數。控制器層中添加分頁數據接口 Home/ListController.php ~~~ /** ? ? * @RequestMapping("/api/getcourses") ? ? * @param Request $request ? ? * @return \Swoft\Http\Message\Response ? ? * @throws HttpExecption ? ? */ ? ?public function getdata(Request $request){ ? ? ? ?if(!$request->isAjax()){ ? ? ? ? ? ?throw new HttpExecption("請求異常"); ? ? ? } ? ? ? ?$parms = $request->get(); ? ? ? ?$data = BeanFactory::getBean(CourseLogic::class)->getDatas($parms); ? ? ? ?return context()->getResponse()->withData($data); ? } ~~~ > 在這里邏輯層和Dao與后臺的課程分頁功能共用。列表視圖中分頁數據的展示： > 在這主要是通過JS來實現 ~~~ <script> ?function createItem(pic='',title='',desc=''){ ? ?//這里用到了Es6語方法，如果出現瀏覽器兼容性部題，請改成字符串拼接方式即可。 ? ?return `<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4 item"> ? ? ? ? ? ? ? ? ? ?<div class="box"> ? ? ? ? ? ? ? ? ? ? ? ?<div class="img"><img src="${pic}" class="img-fluid" alt="" srcset=""></div> ? ? ? ? ? ? ? ? ? ? ? ?<div class="mt-2 title">${title}</div> ? ? ? ? ? ? ? ? ? ? ? ?<div class="desc"> ? ? ? ? ? ? ? ? ? ? ? ? ?${desc} ? ? ? ? ? ? ? ? ? ? ? ?</div> ? ? ? ? ? ? ? ? ? ?</div> ? ? ? ? ? ? ? ?</div>`; } ?var page =0; ?var limit =10; ?var count =5; ?req(++page,limit); ?$("#loaddata").on('click',function(){ ? ?if(page > count-1){ ? ? ?alert("沒有數據了"); ? ? ?return; ? } ? ?req(++page,limit); }); ?function req(page,limit){ ? ?$.ajax({ ? ? ?url:'/api/getcourses', ? ? ?type:'get', ? ? ?data:{page:page,limit:limit}, ? ? ?success:function(res){ ? ? ? ?if(page==1){ ? ? ? ? ?count = Math.ceil(res.count/limit); ? ? ? } ? ? ? ?for(var i=0;res.data.length;i++){ ? ? ? ? ?str = createItem(res.data[i].pic,res.data[i].title,res.data[i].desc); ? ? ? ? ?$(".items").append(str); ? ? ? } ? ? } ? }) } </script> ~~~ 頁面中公共數據的獲取 > 在頁面的展示過程中，有些數據，可能是共用的，在這里前端視圖用到了模板包含所以，并且主視圖與子視圖的變量是不共用的，所以在調用時，需要單獨進行傳遞。在這里咱們換種思路來實現，就是通過自定義函數來解決這個問題。 > > 在這里以站點配置信息為例來介紹。由于配置信息每個頁面都會用的到，所以配置信息單獨定義一個自定義函數來實現。在helper/functions.php中定義函數`get_config`用來根據字段名來獲取對應的配置信息 ~~~ /** * 通過Key獲取配置信息 * @param $key * @return string */ function get_config($key){ ? ?$config = bean(\App\Model\Logic\ConfigLogic::class)->getData(); ? ?return $config[$key]??""; } ~~~ 在視圖可以通過如下方式調用： ~~~ <?=get_config("webtitle")?> ~~~