- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我用
部署我的 django 项目时python manage.py runserver
,以及我使用 npm start
的 React 应用程序,
我不知道哪个是我的“真正的项目”。我认为这个问题归结为客户端渲染与服务器端渲染,现在我想使用服务器端渲染,因为我对 django 比对 react 更熟悉。那意味着我必须使用 django/drf 正确设置 url 和 View ?如果是这样,我的问题如下......
每当我转到一个 url(例如,website.com/items)时,我如何“调用” react 。我想在一个格式良好的 html 文件中返回我所有项目的列表。我怀疑这与 path() 函数中的模板参数有关。
如何防止用户访问 api View (website.com/api/items),这是我用来处理 django-rest-framework 的 api 调用的 url,但我不希望人们访问看到这个但也想对“看到”这个使用react。
因为我正在进行服务器端渲染,除了对我的 api url 进行正确的 http 调用并使我的 html 模板看起来漂亮之外,我的 React 应用程序还需要做些什么吗?
项目网址:
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('App.urls')),
path('api/',include('App.api.urls'))
]
应用网址:
urlpatterns = [
path('', views.index, name='index'), #nothing much here yet
]
API 网址:
urlpatterns = [
path('item',views.ListItem.as_view())
]
我的基本 React App.js 只抓取所有项目并显示它们
class App extends Component {
state = {
items: []
};
async componentDidMount(){
try{
const res = await fetch('http://127.0.0.1:8000/api/item');
const items = await res.json();
this.setState({
items});
}
catch (e){
console.log(e);}
}
render(){
return(
<div>
{this.state.items.map(item =>(
<div key={item.id}>
<h1>{item.item}</h1>
<h1>{item.price}</h1>
<span>{item.description}</span>
</div>
))}
</div>
);
}
}
export default App;
最佳答案
如果您想在服务器端呈现您的 React 应用程序,您必须在 Django 应用程序的模板 View 中设置您的 JavaScript。现在您正在不同的服务器上运行您的 React 应用程序和 Django 应用程序,所以这就是为什么您没有为 React 应用程序获取服务器端渲染的原因。这将涉及使用 webpack 或 pacel 创建 react。
我要做的是将 React 应用程序捆绑在 Django View 中,这样就是服务器端渲染。
我希望这是有道理的。
关于html - 如何使用服务器端渲染将我的 React 服务器与 Django 服务器结合起来?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55766343/
我正在尝试执行 vagrant up 但一直遇到此错误: ==> default: IOError: [Errno 13] Permission denied: '/usr/local/lib/pyt
我在容器 div 中有一系列动态创建的不同高度的 div。 Varying text... Varying text... Varying text... Varying text.
通过 cygwin 运行 vagrant up 时遇到以下错误。 stderr: /bin/bash: /home/vagrant/.ansible/tmp/ansible-tmp-14872260
今天要向小伙伴们介绍的是一个能够快速地把数据制作成可视化、交互页面的 Python 框架:Streamlit,分分钟让你的数据动起来! 犹记得我在做机器学习和数据分析方面的毕设时,
我是 vagrant 的新手,正在尝试将第二个磁盘添加到我正在用 vagrant 制作的虚拟机中。 我想出了如何在第一次启动虚拟机时连接磁盘,但是当我关闭机器时 然后再次备份(使用 'vagrant
我是一名优秀的程序员,十分优秀!