前言:迄今为止,我们讲解了Codeigniter 4 的几个常见概念。从这一将开始,我们以一个简单的博客(Blog)项目演示一下如何使用Codeigniter 4.
0.安装配置
安装wamp 64位的, 7.2+(略过)
下载Codeigniter 4包,解压到www/blog
创建一个虚拟主机,重启wamp的全部服务
浏览器输入blog.net
打开app/Config/App.php
public $baseURL = 'http://blog.net/';
public $indexPage = '';
为便于debug, 修改app/Config/Boot/production.php
ini_set('display_errors', '1');
修改app/Config/Routers.php
$routes->get('/', 'Pages::index');
$routes->get('(:any)', 'Pages::showme/$1');
这里的默认controller就是Pages,其余的路由由第二个对应。
1.创建Pages Controller
<?php namespace App\Controllers;
class Pages extends BaseController
{
public function index()
{
$this->showme();
}
public function showme(string $page = 'home')
{
if(! is_file(APPPATH.'/Views/pages/'.$page.'.php'))
{
throw new \CodeIgniter\Exceptions\PageNoutFoundException($page);
}
echo view('templates/header');
echo view('pages/'.$page);
echo view('templates/footer');
}
}
2.创建一些列View
app/Views/pages/about.php
<section>
<div class="container">
<h3>About us</h3>
<p>This is me</p>
<h2>Learn more</h2>
<p>This is me again</p>
</div>
</section>
app/Views/pages/home.php
<section>
<div class="container">
<div class="jumbotron">
<h1 class="display-4"> My Blog Project by CodeIgniter 4</h1>
<p class="lead">This is a simple CodeIgniter 4 Project project, for educational purpose</p>
<hr class="my-4">
<p>Welcome to my project</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</div>
</section>
app/Views/templates/footer.php
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
app/Views/templates/header.php
<!DOCTYPE html>
<html>
<head>
<title>CI4 Blog Tutorial</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">My Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About us</a>
</li>
</ul>
</div>
</div>
</nav>
测试:大家可以进入blog.net测试一下。基本上都能跑得起来,nav的部分指向也正常。