30分钟上手CodeIgniter SPA开发：从路由配置到前后端无缝集成
项目地址: https://gitcode.com/gh_mirrors/co/CodeIgniter 你是否遇到过传统Web应用页面跳转时的卡顿问题？用户体验大打折扣，开发效率也因多页面管理而降低。本文将带你用CodeIgniter框架快速实现单页应用（SPA），通过前端路由与后端API的高效集成，彻底解决这些痛点。读完本文，你将掌握：配置无刷新路由、构建RESTful API、实现前端状态管理，以及解决跨域和CSRF等关键问题。
准备工作：环境配置与项目结构
在开始SPA开发前，需确保基础配置正确。首先设置base_url，打开application/config/config.php文件，修改第26行：
$config['base_url'] = 'http://localhost/CodeIgniter/'; // 替换为你的项目URL
CodeIgniter的MVC架构非常适合构建SPA，典型项目结构如下：
application/
├── controllers/ # 后端API控制器
├── models/ # 数据模型
├── views/ # 前端SPA视图
└── config/ # 路由和配置文件
system/ # 框架核心
index.php # 入口文件
后端路由配置：实现API与SPA页面分离
修改application/config/routes.php，添加API路由和SPA入口路由：
// API路由
$route['api/users'] = 'api/users';
$route['api/users/(:num)'] = 'api/users/id/$1';
// SPA入口路由（放在最后）
$route['(:any)'] = 'welcome/index';
这样配置后，所有以/api/开头的请求会被路由到API控制器，其他请求则由Welcome控制器处理并返回SPA页面。
构建API控制器：处理数据交互
创建API控制器文件application/controllers/Api.php：
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Api extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->model('User_model');
$this->output->set_content_type('application/json');
}
public function users() {
$users = $this->User_model->get_all();
echo json_encode($users);
}
public function user($id) {
$user = $this->User_model->get_by_id($id);
echo json_encode($user);
}
}
前端SPA实现：使用Vue.js构建单页应用
修改application/views/welcome_message.php，集成Vue.js和前端路由：
<!DOCTYPE html>
<html>
<head>
<title>CodeIgniter SPA</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script>
// 定义组件
const Home = { template: '<div>首页</div>' };
const UserList = {
template: `
<div>
<h2>用户列表</h2>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>
`,
data() {
return { users: [] };
},
mounted() {
fetch('/CodeIgniter/api/users')
.then(res => res.json())
.then(data => this.users = data);
}
};
// 配置路由
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/users', component: UserList }
]
});
// 创建Vue实例
new Vue({
el: '#app',
router
});
</script>
</body>
</html>
解决跨域与CSRF问题：确保安全通信
为防止跨站请求伪造攻击，打开application/config/config.php，启用CSRF保护：
$config['csrf_protection'] = TRUE;
$config['csrf_exclude_uris'] = array('api/.*'); // 排除API路由
对于前端请求，需要在AJAX请求头中添加CSRF令牌。修改Vue组件中的fetch请求：
mounted() {
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
fetch('/CodeIgniter/api/users', {
headers: {
'X-CSRF-Token': csrfToken
}
})
.then(res => res.json())
.then(data => this.users = data);
}
部署与优化：提升性能体验
- 启用CodeIgniter的输出缓存：
// 在控制器方法中添加
$this->output->cache(60); // 缓存60分钟
- 使用CodeIgniter的压缩输出功能：
// application/config/config.php
$config['compress_output'] = TRUE;
- 前端资源优化：
- 将Vue.js等库下载到本地，使用国内CDN
- 合并压缩CSS和JavaScript文件
总结
通过本文介绍的方法，你已经成功构建了一个基于CodeIgniter的SPA应用。这种架构结合了后端MVC的强大功能和前端SPA的流畅体验，非常适合构建现代Web应用。关键要点包括：
- 合理配置路由，分离API和SPA页面
- 使用RESTful API设计原则
- 前端路由与后端路由协同工作
- 注意安全问题，启用CSRF保护
下一步可以考虑添加用户认证、状态管理和更复杂的前端组件，进一步完善你的SPA应用。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
