Django& ReactJS没有渲染模板 [英] Django & ReactJS no template being rendered
本文介绍了Django& ReactJS没有渲染模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
已经24小时仍无法弄清，当我在浏览器中浏览127.0.0.1:8000或localhost：8000时，模板未呈现。我用react js作为前端配置了这个，请看图片中的路径。我正在视图中进行打印，并在终端上显示它，但是在浏览器中时，看不到我的模板，只能看到空白页。
Already 24 hours and still can't figure out, template not being rendered whenI browse 127.0.0.1:8000 or localhost:8000 in my browser. I configured this with react js as my frontend please see my path in the picture. I am printing in my views and it shows in my terminal, but when in the browser, I can't see my template, only blank page.
我路径：
settings.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app',
'webpack_loader',
]
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [ os.path.join(BASE_DIR, "templates") ],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'bundles/', # end with slash
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-local.json'),
'POLL_INTERVAL': 0.1,
'TIMEOUT': None,
}
}
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'app/static'),
]
django.conf中的
urls.py
urls.py
from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^', include('app.urls')),
]
** urls.py **在应用程序文件夹中
**urls.py ** inside app folder
from django.conf.urls import url, include
from .views import *
urlpatterns = [
url(r'^$', homePage, name = 'home_page'),
]
views.py
from django.shortcuts import render
def homePage(request): # landing page
context = {}
template = 'base.html'
print('testing terminal') #this line in termninal is printing when I am opening 127.0.0.1:8000 / localhost:8000
return render( request, template, context )
base.html
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
{% load staticfiles %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Reactjs with MobX</title>
<link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'iconmoon/style.css' %}">
<!-- <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"> -->
<!-- <link rel="stylesheet" href="{% static 'muicss/mui.css' %}"> -->
</head>
<body>
{% csrf_token %}
<div id="main-content"></div>
{% render_bundle 'main' %}
</body>
</div>
</html>
webpack.base.config.js
var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
// new WebpackDevServer(webpack(config), {
module.exports = {
context: __dirname,
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./app/modules/common/index'
],
// 'webpack-dev-server/client?http://localhost:3000',
// 'webpack/hot/only-dev-server',
// './app/modules/common/index',
output: {
path: path.resolve('./app/static/bundles/'),
filename: '[name]-[hash].js',
publicPath: 'http://localhost:3000/app/static/bundles/',
// Tell django to use this URL to load packages and not use STATIC_URL + bundle_name
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(), // don't reload if there is an error
new BundleTracker({filename: './webpack-stats.json'}),
// new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
],
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=public/icons/[name].[ext]"},
// working her
// {
// test: /\.(js|jsx)$/,
// loader: 'babel-loader',
// exclude: /node_modules/,
// query: {
// presets: [
// '@babel/env',
// '@babel/react',
// ],
// }
// },
{ test: /\.(js|jsx)$/, exclude: /node_modules/,
loaders: ['react-hot-loader/webpack', 'babel?' + JSON.stringify(
{
presets: ['react', 'es2015','stage-0'],
plugins: ["transform-decorators-legacy"]
})]
},
],
},
resolve: {
modulesDirectories: ['node_modules', 'bower_components'],
extensions: ['', '.js', '.jsx']
}
}
推荐答案
在我的情况下，这是因为我使用的是浏览器历史记录，而不是哈希历史记录。浏览器历史记录不适用于静态页面。
In my case, this was because I was using browser history and not hash history. Browser history is not available for static pages.
这篇关于Django& ReactJS没有渲染模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
