将文档添加到 Django 应用程序 - 与 angular 冲突

Question

我已经使用 apidoc library 为我的 Django 应用程序创建了文档。它使用 angular 创建文档。应用在 Heroku 上运行。

当我打开 index.html 文件时，文档运行良好，但我无法通过 http://localhost:5000/docs.

打开它们

首先我得到这个错误：

"Variables and attributes may not begin with underscores: '__' " ，我可以通过将 {% verbatim %} 和 {% endverbatim %} 放入 index.html 文件来绕过它。（一开始我对此不是很满意，想用其他方式来做）。

然后页面卡在加载界面，但是当我在Chrome中打开它时出现以下错误：

"Uncaught SyntaxError: Unexpected token <" in polyfill.js:1 and require.min.js:1

还有 3 个警告：

"Resource interpreted as Stylesheet but transferred with MIME type text/html"

在 vendor/bootstrap.min.cs、vendor/prettify.css 和 css/style.css

我们也在其他项目中使用 apidocs 与 Node，它工作得很好，所以我认为这是 Django 的问题。由于文档是自动生成的，我更愿意将更改引入应用程序，而不是文档。我在 Chrome 和 Safari 上试过了。

我的问题 1.我该怎么做才能让它发挥作用？ 2. 如何在不将 {%verbatim%} 标签放入 index.html 的情况下使 Django 与 Angular 兼容？

这是我的控制器：

from django.shortcuts import render

def show_docs(request):
    return render(request, 'index.html')

和url_pattern:

from django.conf.urls import include, url
from django.contrib import admin
admin.autodiscover()
import my_app.controller
from django.views.decorators.csrf import csrf_exempt

urlpatterns = [
    url(r'^docs/', my_app.controller.show_docs),
]

index.html头：

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Loading...</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="vendor/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="vendor/prettify.css" rel="stylesheet" media="screen">
  <link href="css/style.css" rel="stylesheet" media="screen, print">
  <link href="img/favicon.ico" rel="icon" type="image/x-icon">
  <link href="css/apidoccustom.css" rel="stylesheet" media="screen, print">
  <script src="vendor/polyfill.js"></script>
</head>

编辑：感谢，我能够找到问题的根源。事实证明，Django 与 api 文档使用的 RequireJS 配合得不好。

我必须对生成的代码添加以下更改才能使其正常工作：第 1-4 点用于 index.html，第 5、6 点用于 main.js:

在标记上方添加此行：

{% load static %}

将“{% static”+“%}”标签添加到所有标签，使其看起来像这样：

<link href="{% static "vendor/bootstrap.min.css" %}" rel="stylesheet" media="screen">

将相同的静态标签添加到带有 polyfill.js 和 require.min.js 的标签中：

<script src="{% static "vendor/polyfill.js" %}"></script> <script data-main="{% static "main.js" %}" src="{% static "vendor/require.min.js" %}"></script>

在开头添加 {% verbatim %} 并在结尾添加 {% endverbatim %}，但在 require.min.js!
在 main.js 文件开头的路径中添加以下行：

apiProject: './api_project.js', apiData: './api_data.js',

换行：

'./api_project.js', './api_data.js',

至：

'api_project', 'api_data',

Answer 1

从这两个错误：

"Uncaught SyntaxError: Unexpected token <" in polyfill.js:1 and require.min.js:1
"Resource interpreted as Stylesheet but transferred with MIME type text/html"

我认为加载您的静态文件有问题。可能你有 404 或 500，然后 django 加载默认路由。检查静态文件的路由是否正确。

将文档添加到 Django 应用程序 - 与 angular 冲突

Adding documentation to django app - conflict with angular

python

django

requirejs

api-doc

angularjs