如何在Apache服务器上将Reactjs前端与php codeigniter应用程序集成? [英] How to integrate Reactjs frontend with php codeigniter application on apache server?
问题描述
CodeIgniter应用程序的开发要早得多，当时还没有计划集成ReactJS的计划.添加了更高的要求，以将另一个ReactJS项目与此后端集成并替换当前的前端(视图).
The CodeIgniter application was developed much earlier without plans to integrate ReactJS at that time. A later requirement was added to integrate another ReactJS project with this backend and replace the current frontend (views).
CodeIgniter应用程序未作为RESTful API完成.由于服务器是Apache，因此.php视图文件无法替换为reactjs应用程序的.js文件.运行nodejs服务器不会呈现CodeIgniter视图.
The CodeIgniter application is not done as a RESTful API. The .php view files could not be replaced with .js files of the reactjs app as the server is Apache. Running a nodejs server would not render the CodeIgniter views.
引导程序，jquery和简单的javascript可以包含在CodeIgniter应用程序的视图内.但是可以用JavaScript文件替换CodeIgniter中的PHP视图文件吗?
Bootstrap, jquery, and simple javascript can be included within the view of the CodeIgniter application. But is it possible to replace the PHP view files in CodeIgniter with javascript files?
推荐答案
PHP视图文件不需要替换为js文件.可以使用< script> 标签将JavaScript轻松添加到PHP文件中.以下是在CodeIgniter应用程序中的在一分钟内添加React 演示.
The PHP view files do not need to be replaced with js files. JavaScript can easily be added to PHP files using <script> tags. Below is the Add React in One Minute demo in a CodeIgniter app.
要将React演示集成到CodeIgniter中，首先需要一个简单的控制器- React.php
To integrate the React demo into CodeIgniter start with a simple controller - React.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class React extends CI_Controller
{
public function index()
{
$this->load->view('react_view');
}
}
视图"文件直接来自React演示，但放在.php文件而不是.html中.
The "view" file is straight from the React demo but it's put in a .php file instead of .html.
对演示代码所做的唯一更改是在页面底部的script标签中.我的 assets 文件夹与CodeIgniter的/application 文件夹处于同一级别. assets 中的子文件夹包含css，js和图像.
The only change made to the demo code is in the script tag at the bottom of the page. My assets folder is on the same level as CodeIgniter's /application folder. There are subfolders in assets for css, js, and images.
/public_html
/application
/system
/assets
/js
/css
/img
因此，我更改了加载 like_button.js 的标签的 src 以与我的文件布局配合使用.
So I've changed the src for the tag that loads like_button.js to work with my file layout.
视图"文件 react_view.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<p>
This is the first comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="1"></div>
</p>
<p>
This is the second comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="2"></div>
</p>
<p>
This is the third comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="3"></div>
</p>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="assets/js/like_button.js"></script>
</body>
</html>
/assets/js/like_button.js
/assets/js/like_button.js
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked comment number ' + this.props.commentID;
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
// Find all DOM containers, and render Like buttons into them.
document.querySelectorAll('.like_button_container')
.forEach(domContainer => {
// Read the comment ID from a data-* attribute.
const commentID = parseInt(domContainer.dataset.commentid, 10);
ReactDOM.render(
e(LikeButton, { commentID: commentID }),
domContainer
);
});
这篇关于如何在Apache服务器上将Reactjs前端与php codeigniter应用程序集成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
