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  教程  
    相关文章