Question

已经24小时仍然无法弄清楚，当我在浏览器中浏览127.0.0.1:8000或localhost：8000时，模板未呈现。我用react js作为前端配置了这个，请看图片中的路径。我正在视图中进行打印，并在终端上显示它，但是在浏览器中时，看不到模板，只有空白页。

我的路径：

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'),
]

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 **

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']
  }
}

Answer 1

正如您所说的，您遵循了Django-React-Boilerplate。我可以看到您的React应用程序的入口点是index.js。如果您可以在第7行看到它，则硬编码为您的react前端的根元素是带有id=react-app的元素。但是，您在base.html中给出了id=main-content。因此，当调用上述index.js时，它正在搜索ID为react-app的元素，但是您没有任何此类元素，原因是它无法呈现任何内容。

请按照以下说明更改您的 base.html

<body>
  {% csrf_token %}
  <div id="main-content"></div>
   {% render_bundle 'main' %}
</body>

这应该可以正常工作。

Answer 2

就我而言，这是因为我使用的是浏览器历史记录，而不是哈希历史记录。浏览器历史记录不适用于静态页面。

Django＆ReactJS没有呈现模板

2 个答案: