usinig Django urls in react,is_authenticated in react,在react

时间:2018-04-10 10:44:14

标签: django reactjs django-views react-router

所以,我有3个问题

  
      
  1. 如何在反应中使用Django的URL
  2.   

实施例

index.js(反应中)

<Router>
        <div>
                <nav className="navbar navbar-inverse bg-inverse">
                    <div className="container">
                        <Link to="/" className="navbar-brand">PetFinder</Link>
                        <Link to="/storage" className="navbar-brand">Storage </Link>
                        <a href="{% url 'signup' %}">Sign-Up</a>  <== like this
                    </div>
                </nav>
                  <Route exact path={"/"} component={PetRegistration} />
                  <Route path={"/storage"}  render={() => <Storage ids={checkingName} />} />
       </div>
</Router>

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    #path('api-auth/', include('rest_framework.urls', namespace="rest_framework")),
    path('api/animals/', include('petsite.urls', namespace='petsite')),
    path('api/user_info', core_views.UserInfo.as_view()),
    path('signup/', core_views.signup, name='signup'),
    path('', csrf_exempt(core_views.index), name='index'),
    path(r'^login/$', auth_views.login, name='login'),

]
  
      
  1. is_authenticated in react
  2.   

我是怎么做到的:

在index.html中

我写了这个******。我为此感到羞耻。不要评判我,好吧只是... ...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">


    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div class="signUpBlock">
      <a href="{% url 'signup' %}">Sign-Up</a>
    </div>
    <div id="root">
    </div>
    <span class="currentUser"     style="display: none">{{user.id}}</span>
    <span class="currentUserName" style="display: none">{{user.username}}</span>
    <span id="DJANGO_USER"        style="display: none"></span>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script type="text/javascript">
    var WHETHER_DJANGO_USER_IS_AUTH = "{{user.is_authenticated|yesno:"true,false"}}";
   document.getElementById("DJANGO_USER").innerHTML = WHETHER_DJANGO_USER_IS_AUTH;
  </script>
  </body>
</html>

请检查以下代码:

<script type="text/javascript">
    var WHETHER_DJANGO_USER_IS_AUTH = "{{user.is_authenticated|yesno:"true,false"}}";
   document.getElementById("DJANGO_USER").innerHTML = WHETHER_DJANGO_USER_IS_AUTH;
</script>

<span id="DJANGO_USER"        style="display: none"></span>

然后在index.js中我这样做

let boolButString = $('#DJANGO_USER').text()
var StringToBool = (boolButString === 'true');

如果StringToBool = true我会做smth(表示用户已登录)

else StringToBool!= true我做smth(意味着用户没有登录)

if (StringToBool) {
 do smth
} else {
 make some tea for him
}

我认为我没有以正确的方式做到这一点你能建议我吗?

检查用户是否为auth是否真实。或不?

  
      
  1. 如何在react中显示Django上下文。
  2.   

你可能已经看过我在index.html中的表现 像往常一样,我写道:

 def index(request):

    return render(request, 'index.html', {

        "user"     : request.user,

})

结束

    <span class="currentUser"     style="display: none">{{user.id}}</span>

通过jquery获取数据并将其显示在react app中。

你能给我什么建议? 如何正确显示上下文?

啜饮杯子。

0 个答案:

没有答案