## [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):?>
? ?<!-- start list -->
? ?<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>
? ?<!-- end list -->
<?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")?>
~~~
- 前言
- 第一部分:課程介紹
- 第二部分:docker的快速入門
- docker的安裝
- docker的運行和配置
- docker操作過程中的常見問題
- Docker的常用命令
- 第三部分 Swoft的開發環境部署和工具的安裝
- 第四部分:Swoft的安裝和常見問題
- swoft的安裝
- swoft代碼同步
- Swoft的熱重載
- swoft安裝過程中的常見問題
- 第五部分:swoft的基礎知識快速入門
- 目錄結構
- 控制器
- 路由
- 配置
- 請求與響應
- 中間件
- 異常處理
- 視圖
- Bean
- 數據庫操作
- http-session
- 驗證器
- 第六部分:實戰
- Swoft的安裝(本地)
- Swoft的環境部署
- 調整項目目錄結構
- 前臺頁面部署
- 前臺首頁
- 引入前端資源
- 其它頁面的引入
- 后臺功能的實現
- 創建并連接數據庫
- 管理員登錄功能的實現
- 代碼優化-函數
- 代碼優化-全局異常處理
- 代碼結構分層
- 完善管理員的登錄功能
- 管理員密碼修改功能的實現
- 管理員登錄補充
- 站點配置功能的實現
- 后臺菜單處理
- 課程管理功能
- 創建數據表并創建實體
- 實現課程的添加功能
- 文件上傳
- 課程列表功能的實現
- 課程編輯功能的實現
- 課程的刪除功能
- 課程推薦功能的實現
- 前臺數據調用