angular 6|5教程：整合angular与Django

•分享于 

•

5分钟阅读

Angular

  •繁體
  • 结论

    • 安装Webpack Bundle Tracker

    webpack-bundle-tracker是一个Webpack插件，可生成一个统计文件，该文件包含有关由Webpack生成的前端应用程序资产的元数据信息。

    我们将首先安装webpack-bundle-tracker模块，然后更新Webpack配置文件以使用此插件。

    
npm install webpack-bundle-tracker --save

    从Angular 6 CLI弹出Webpack

    接下来，您需要使用以下命令从Angular 6 CLI弹出Webpack配置:

     
ng eject

    打开webpack.config.js并从webpack-bundle-tracker导入BundleTracker，然后找到plugins条目并添加以下代码

    
var BundleTracker = require('webpack-bundle-tracker');

/*...*/
module.exports = {
 /*...*/
 plugins:[
 /*...*/
 new BundleTracker({filename: '../webpack-stats.json'})
 ]
}

    下一步添加publicPath设置

    
"output": {
"path": path.join(process.cwd(),"dist"),
"filename":"[name].bundle.js",
"chunkFilename":"[id].chunk.js",
"crossOriginLoading": false,
"publicPath":"http://127.0.0.1:4200/"//1
},


    
"devServer": {
"historyApiFallback": true,
"publicPath":"http://127.0.0.1:4200/",//2
}

    如果您为应用程序提供服务，则您的父文件夹中将有一个../webpack-stats.json

    从Angular 6 CLI中弹出Webpack配置后，您将无法使用ng serve，而必须使用npm run start服务您的应用程序。

    接下来，安装django-webpack-loader包，它负责读取webpack-stats.json，并在Django模板中插入资产。

    回到终端运行以下命令：

    
pip install django-webpack-loader

    在settings.py文件中，将webpack_loader添加到已安装的应用程序列表中：

    
INSTALLED_APPS = [
 #...
 'webpack_loader',
 'core'
]

    然后添加此配置对象：

    
WEBPACK_LOADER = {
 'DEFAULT': {
 'BUNDLE_DIR_NAME': '',

 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
 }
}

    为Angular 6应用程序提供服务

    现在，创建视图来为Angular 6应用程序提供服务，打开core/views，并添加以下视图函数：

    
from django.shortcuts import render

def home(request):
 return render(request, 'core/home.html')

    接下来，你需要创建home.html模板，因此在核心应用程序内部创建一个templates/core文件夹，然后添加一个包含以下内容的home.html：

    

{% load render_bundle from webpack_loader %}

<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>A Simple CRM with Django and Angular 6</title>
</head>
<body>

<app-root></app-root>

{% render_bundle 'inline' %}
{% render_bundle 'polyfills' %}
{% render_bundle 'styles' %}
{% render_bundle 'vendor' %}
{% render_bundle 'main' %}

</body>
</html>

    现在你需要在urls.py中添加主页的URL：

    
from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from core import views as coreviews

urlpatterns =[

url(r'^$',coreviews.home),

path('admin/', admin.site.urls)
]

    您现在应该可以访问Django Web应用程序。

    修复热代码重新加载

    如果更改前端应用程序的源代码，则在从http://127.0.0.1:8000导航应用程序时，不会在不手动刷新页面的情况下重新加载更新热代码，这意味着HCR无法正常工作，因此只需打开webpack.config.js，并添加以下设置：

    
"devServer": {
"historyApiFallback": true,
"publicPath":"http://127.0.0.1:4200/",//2,
"headers": {
 'Access-Control-Allow-Origin': '*'//3
 }
}

    这是因为http://localhost:8000将请求发送到Webpack开发服务器(http://localhost:4200)以获取源代码更改，因此我们需要更新标头以允许来自所有来源的请求。

    结论

    在本教程中，我们已经集成了Angular 6前端和Django REST API后端。


    INT  angular  教程  
    相关文章