IT技术 - Django 和 ReactJS 没有呈现模板 - 吾爱随笔录

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

我自己的路：

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

网址.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 ** 在 app 文件夹内

from django.conf.urls import url, include
from .views import *
urlpatterns = [
  url(r'^$', homePage, name = 'home_page'),
]

视图.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 )

基本文件

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