動態網站的簡單搭建(基於ThinkPHP5)
阿新 • • 發佈：2020-08-22
靜態部分
新建專案資料夾
找到wampserver的www網站執行的根目錄
新建專案資料夾，命名為Myproject（起一個自己喜歡的名字，純英文或拼音）
開啟PHPStorm
找到剛剛建立的資料夾並開啟
引入ThinkPHP開發框架
ThinkPHP5開源框架
配置Apache目錄對映檔案
找到"httpd-vhosts.conf"檔案
配置一個虛擬主機
複製程式碼到檔案末尾
MyProject -> 自己的專案檔名稱
<VirtualHost *:80> ServerName localhost ServerAlias localhost DocumentRoot "C:/wamp64/www/MyProject/public" <Directory "C:/wamp64/www/MyProject/public/> Options +Indexes +Includes +FollowSymLinks +MultiViews AllowOverride All Require local </Directory> </VirtualHost>
重啟wampserver
等待重啟
開啟瀏覽器，輸入localhost
專案初始化
開啟PHPstorm,開啟目錄：MyProject->application->index
建立view(檢視)資料夾 MyProject->application->index->New->Directory->view
建立model(模型)資料夾 MyProject->application->index->New->Directory->model
建立檢視模板(html)檔案主目錄 MyProject->application->index->view->New->Directory->index
建立檢視模板(html)主頁檔案 MyProject->application->index->view->index->New->HTML File
建立完成（index.html）
建立專案靜態資原始檔夾 MyProject->public->static
建立樣式表(CSS)資料夾 MyProject->public->static->New->Directory->CSS
建立圖片(Images)資料夾 MyProject->public->static->New->Directory->Images
建立JS(JavaScript)資料夾 MyProject->public->static->New->Directory->JavaScript
新增靜態資原始檔
新建CSS檔案(style.css) MyProject->public->static->CSS->New->Stylesheet->style.css
新建js檔案(index.js) MyProject->public->static->JavaScript->New->JavaScript File->index.js
新增一張圖片
編寫index.html檔案 MyProject->application->index->view->index->index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./static/css/style.css">
<title>主頁</title>
</head>
<body>
<div class="main">
<h1>MyProject</h1>
</div>
</body>
<script src="./static/JavaScript/index.js"></script>
</html>
編寫style.css檔案 MyProject->public->static->CSS->style.css
body{
background-image: repeating-linear-gradient(100deg, #afe191, #ed8e89);
}
.main{
width: 80%;
height: 3rem;
margin-left: 10%;
margin-top: 10%;
border-radius: 10px;
box-shadow: 1px 1px 20px #000000;
text-align: center;
}
h1{
color: #FFFFFF;
font-size: 30px;
}
編寫index.js檔案 MyProject->public->static->JavaScript->index.js
alert("專案初始化成功!");
編寫主控制器檔案(index.php) MyProject->application->index->controller->index.php
<?php
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
public function index()
{
return $this->fetch('index/index');
}
}
準備完畢,開啟瀏覽器輸入localhost進入到主介面
至此，靜態部分網站已全部完成