表現(xiàn)與業(yè)務(wù)邏輯分離
PHP和HTML混寫很亂，怎么解決？
一個(gè)頁(yè)面分成兩個(gè)文件即可，一個(gè)PHP做邏輯，一個(gè)HTML做模板，這叫做“表現(xiàn)與業(yè)務(wù)邏輯分離”。
比如“首頁(yè)”index.php分成：index.php和index.html。index.php代碼如下：
<?php
$articles = [];
$file = './articles.json';
if (file_exists($file)) {
$tmp = file_get_contents($file);
if (!empty($tmp)) {
$articles = json_decode($tmp, true);
}
}
$d = []; //d 表示 data，后面會(huì)用到
$d['articles'] = $articles;
require_once __DIR__ . '/index.html';
index.html代碼如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cmn-Hans" lang="cmn-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>在線閱讀</title>
</head>
<body>
<h1>在線閱讀</h1>
<div><a href="./create_article.html">寫文章</a></div>
<?php
if (!empty($d['articles'])) {
echo '<ul>';
foreach ($d['articles'] as $k=>$v) {
$id = $k + 1;
echo '<li><a href="./get_article.php?id=' . $id . '">' . $v['title'] . '</a>';
echo '<p>' . mb_substr($v['content'], 0, 100, 'UTF-8') . '……</p></li>';
}
echo '</ul>';
}
?>
</body>
</html>
作業(yè)：把show_article.php和store_article.php也拆分了，寫完之后對(duì)比本書提供的代碼：github.com/sinkcup/phbook/tree/0.3。
拆分之后誕生一個(gè)小問題：訪問http://localhost/時(shí)，其實(shí)訪問的是http://localhost/index.php還是http://localhost/index.html呢？
答：不一定，由配置決定?；仡^看《搭建開發(fā)環(huán)境服務(wù)器》最后的截圖，配置里面是這樣的：
DirectoryIndex index.php index.php3 index.html index.htm
按照先后順序，這個(gè)會(huì)優(yōu)先使用index.php做首頁(yè)，如果沒有的話，再用index.html。而有的配置是這樣的：
DirectoryIndex index.html index.php
這就會(huì)優(yōu)先使用index.html，不符合本節(jié)的要求，需要改一下，然后重啟Apache。Linux下重啟的命令是：
sudo service apache2 restart
發(fā)表文章之后，頁(yè)面怎么出現(xiàn)HTML錯(cuò)誤甚至亂碼了？
打開store_article.php的代碼看一下，只輸出了“發(fā)表成功”，這不是網(wǎng)頁(yè)。一個(gè)正常的網(wǎng)頁(yè)需要包含DOCTYPE、head、body等內(nèi)容，其中head里的charset聲明了編碼，瀏覽器才能正常顯示。所以添加一個(gè)notice.html模板，然后store_article.php里包含它即可。代碼如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cmn-Hans" lang="cmn-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>提示：<?=$d['notice']['msg']?></title>
</head>
<body>
<h1>提示：<?=$d['notice']['msg']?></h1>
<p><a href="/">回到首頁(yè)</a></p>
</body>
</html>
總結(jié)一下
我的技術(shù)水平
| HTML | 服務(wù)器部署 | PHP | 數(shù)據(jù)存儲(chǔ) | HTTP協(xié)議 |
|---|---|---|---|---|
| HTML標(biāo)準(zhǔn)和語(yǔ)義化 | 安裝WAMP/LAMP | 讓內(nèi)容動(dòng)起來 | json文件存數(shù)據(jù) | GET、POST |
| charset | 表現(xiàn)與業(yè)務(wù)分離 |
作業(yè)
- 程序員的自我修養(yǎng)：“HTML 4”用的是“charset”，“XHTML 1.0”用的是“encoding”，哪個(gè)表意更準(zhǔn)確的？
- 擴(kuò)展閱讀：《百萬(wàn)年薪的人都是怎么過日子的？ - 知乎》
待解決的問題
-
查看
get_article.php的代碼，讀一篇文章，卻把所有文章取了出來，再取其中一篇，這樣浪費(fèi)性能啊，如果文章有成千上萬(wàn)篇，那怎么辦？且聽下回分解。
