静态部分
新建项目文件夹
找到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进入到主界面
至此，静态部分网站已全部完成