{"id":49988,"date":"2023-05-18T05:34:57","date_gmt":"2023-05-22T05:35:34","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/"},"modified":"2024-04-30T04:44:34","modified_gmt":"2024-04-29T20:44:34","slug":"%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/","title":{"rendered":"\u4f7f\u7528Angular\u548cDRF\u5f00\u53d1\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f"},"content":{"rendered":"

\u5b8c\u6210\u50cf<\/h1>\n
    \n
  1. \n
      \u4eceAPI\u4e2d\u83b7\u53d6\u6587\u7ae0<\/ol>\n<\/li>\n<\/ol>\n

       <\/p>\n

        \n
      1. \n
          \u4ee5\u5217\u8868\u5f62\u5f0f\u663e\u793a\u6587\u7ae0\u6807\u9898<\/ol>\n<\/li>\n<\/ol>\n

           <\/p>\n

            \u70b9\u51fb\u6587\u7ae0\u6807\u9898\u540e\uff0c\u663e\u793a\u5185\u5bb9<\/ol>\n

            Django\u7684\u4e00\u90e8\u5206<\/h1>\n

            \u521b\u5efa\u4e00\u4e2aDjango\u9879\u76ee<\/h2>\n

            Django\u3001restframework\u3001corsheaders\u5df2\u7ecf\u5b89\u88c5\u3002<\/p>\n

            $<\/span> django-admin startproject django_blog\r\n$<\/span> cd<\/span> $_<\/span>\r\n$<\/span> python manage.py startapp blog\r\n$<\/span> cd <\/span>blog\r\n$<\/span> touch <\/span>urls.py\r\n$<\/span> touch <\/span>serializer.py\r\n<\/code><\/pre>\n
            \u521b\u5efa\u7528\u6237\u7684\u7ba1\u7406\u754c\u9762<\/h2>\n
            $<\/span> python manage.py createsuperuser\r\n<\/code><\/pre>\n
            \u5728\u8bbe\u7f6e\u4e2d\u6dfb\u52a0\u5907\u6ce8<\/h2>\n
            INSTALLED_APPS<\/span> =<\/span> [<\/span>\r\n    'django.contrib.admin'<\/span>,<\/span>\r\n    'django.contrib.auth'<\/span>,<\/span>\r\n    'django.contrib.contenttypes'<\/span>,<\/span>\r\n    'django.contrib.sessions'<\/span>,<\/span>\r\n    'django.contrib.messages'<\/span>,<\/span>\r\n    'django.contrib.staticfiles'<\/span>,<\/span>\r\n    'blog'<\/span>,<\/span>#\u8ffd\u52a0\r\n<\/span>    'rest_framework'<\/span>,<\/span>#\u8ffd\u52a0\r\n<\/span>    'corsheaders'<\/span>,<\/span>#\u8ffd\u52a0\r\n<\/span>]<\/span>\r\n\r\nMIDDLEWARE<\/span> =<\/span> [<\/span>\r\n    'django.middleware.security.SecurityMiddleware'<\/span>,<\/span>\r\n    'django.contrib.sessions.middleware.SessionMiddleware'<\/span>,<\/span>\r\n    'corsheaders.middleware.CorsMiddleware'<\/span>,<\/span>#\u8ffd\u52a0(\u5834\u6240\u306f\u7d76\u5bfe\u3053\u3053)\r\n<\/span>    'django.middleware.common.CommonMiddleware'<\/span>,<\/span>\r\n    'django.middleware.csrf.CsrfViewMiddleware'<\/span>,<\/span>\r\n    'django.contrib.auth.middleware.AuthenticationMiddleware'<\/span>,<\/span>\r\n    'django.contrib.messages.middleware.MessageMiddleware'<\/span>,<\/span>\r\n    'django.middleware.clickjacking.XFrameOptionsMiddleware'<\/span>,<\/span>\r\n]<\/span>\r\n\r\n#\u672b\u5c3e\u306b\u8ffd\u52a0\r\n<\/span>CORS_ALLOW_CREDENTIALS<\/span> =<\/span> True<\/span>\r\nCORS_ORIGIN_ALLOW_ALL<\/span> =<\/span> True<\/span>\r\n<\/code><\/pre>\n
            \u5b9a\u4e49models<\/h2>\n
            from<\/span> django.db<\/span> import<\/span> models<\/span>\r\n\r\n# Create your models here.\r\n<\/span>class<\/span> Blog<\/span>(<\/span>models<\/span>.<\/span>Model<\/span>):<\/span>\r\n    title<\/span> =<\/span> models<\/span>.<\/span>CharField<\/span>(<\/span>max_length<\/span>=<\/span>140<\/span>,<\/span> blank<\/span>=<\/span>False<\/span>)<\/span>\r\n    text<\/span> =<\/span> models<\/span>.<\/span>CharField<\/span>(<\/span>max_length<\/span>=<\/span>1000<\/span>,<\/span> blank<\/span>=<\/span>False<\/span>)<\/span>\r\n    created_at<\/span> =<\/span> models<\/span>.<\/span>DateTimeField<\/span>(<\/span>auto_now_add<\/span>=<\/span>True<\/span>)<\/span>\r\n\r\n    def<\/span> __str__<\/span>(<\/span>self<\/span>):<\/span>\r\n        return<\/span> self<\/span>.<\/span>title<\/span>\r\n<\/code><\/pre>\n
            $<\/span> python manage.py makemigrations\r\n$<\/span> python manage.py migrate\r\n<\/code><\/pre>\n
            from<\/span> django.contrib<\/span> import<\/span> admin<\/span>\r\nfrom<\/span> .models<\/span> import<\/span> Blog<\/span>\r\n\r\n# Register your models here.\r\n<\/span>@<\/span>admin<\/span>.<\/span>register<\/span>(<\/span>Blog<\/span>)<\/span>\r\nclass<\/span> Blog<\/span>(<\/span>admin<\/span>.<\/span>ModelAdmin<\/span>):<\/span>\r\n    pass<\/span>\r\n<\/code><\/pre>\n
            \u521b\u5efa\u5e8f\u5217\u5316\u7a0b\u5e8f<\/h2>\n
            from<\/span> rest_framework<\/span> import<\/span> serializers<\/span>\r\nfrom<\/span> .models<\/span> import<\/span> Blog<\/span>\r\n\r\nclass<\/span> BlogSerializer<\/span>(<\/span>serializers<\/span>.<\/span>ModelSerializer<\/span>):<\/span>\r\n    class<\/span> Meta<\/span>:<\/span>\r\n        model<\/span> =<\/span> Blog<\/span>\r\n        fields<\/span> =<\/span> (<\/span>'id'<\/span>,<\/span> 'title'<\/span>,<\/span> 'text'<\/span>,<\/span> 'created_at'<\/span>)<\/span>\r\n<\/code><\/pre>\n
            \u521b\u5efa\u89c6\u56fe<\/h2>\n
            from<\/span> django.shortcuts<\/span> import<\/span> render<\/span>\r\nfrom<\/span> rest_framework<\/span> import<\/span> viewsets<\/span>\r\n\r\nfrom<\/span> .models<\/span> import<\/span> Blog<\/span>\r\nfrom<\/span> .serializer<\/span> import<\/span> BlogSerializer<\/span>\r\n\r\n# Create your views here.\r\n<\/span>class<\/span> BlogViewSet<\/span>(<\/span>viewsets<\/span>.<\/span>ModelViewSet<\/span>):<\/span>\r\n    queryset<\/span> =<\/span> Blog<\/span>.<\/span>objects<\/span>.<\/span>all<\/span>()<\/span>\r\n    serializer_class<\/span> =<\/span> BlogSerializer<\/span>\r\n<\/code><\/pre>\n
            \u521b\u5efaURLs<\/h2>\n
            from<\/span> rest_framework<\/span> import<\/span> routers<\/span>\r\nfrom<\/span> .views<\/span> import<\/span> BlogViewSet<\/span>\r\n\r\nrouter<\/span> =<\/span> routers<\/span>.<\/span>DefaultRouter<\/span>()<\/span>\r\nrouter<\/span>.<\/span>register<\/span>(<\/span>r<\/span>'blog'<\/span>,<\/span> BlogViewSet<\/span>)<\/span>\r\n<\/code><\/pre>\n
            from<\/span> django.contrib<\/span> import<\/span> admin<\/span>\r\nfrom<\/span> django.urls<\/span> import<\/span> path<\/span>,<\/span> include<\/span>\r\n\r\nfrom<\/span> blog.urls<\/span> import<\/span> router<\/span> as<\/span> blog_api_router<\/span>\r\n\r\nurlpatterns<\/span> =<\/span> [<\/span>\r\n    path<\/span>(<\/span>'admin\/'<\/span>,<\/span> admin<\/span>.<\/span>site<\/span>.<\/span>urls<\/span>),<\/span>\r\n    path<\/span>(<\/span>'api\/'<\/span>,<\/span> include<\/span>(<\/span>blog_api_router<\/span>.<\/span>urls<\/span>)),<\/span>\r\n]<\/span>\r\n<\/code><\/pre>\n
            \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
            \u540e\u7aef\u5b8c\u6210\u3002<\/p>\n
            \u89d2\u90e8\u5206<\/h1>\n
            \u521b\u5efaAngular\u9879\u76ee<\/h2>\n
            $<\/span> ng new angular-blog\r\n<\/code><\/pre>\n
            \u5220\u9664\u6b22\u8fce\u9875\u9762<\/h2>\n
            <h1><\/span>BLOG<\/h1><\/span>\r\n<router-outlet><\/router-outlet><\/span>\r\n<\/code><\/pre>\n
            \u521b\u5efa\u7ec4\u4ef6\u548c\u670d\u52a1<\/h2>\n
            $<\/span> cd <\/span>src\/app\r\n$<\/span> mkdir <\/span>components\r\n$<\/span> cd<\/span> $_<\/span>\r\n$<\/span> ng g c list\r\n$<\/span> ng g c detail\r\n$<\/span> cd<\/span> ..\r\n$<\/span> mkdir <\/span>services\r\n$<\/span> cd<\/span> $_<\/span>\r\n$<\/span> ng g s blog\r\n<\/code><\/pre>\n
            \u521b\u5efa\u8def\u7531<\/h2>\n
            import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Routes<\/span>,<\/span> RouterModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/router<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ListComponent<\/span> }<\/span> from<\/span> '<\/span>.\/components\/list\/list.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> DetailComponent<\/span> }<\/span> from<\/span> '<\/span>.\/components\/detail\/detail.component<\/span>'<\/span>;<\/span>\r\n\r\n\r\nconst<\/span> routes<\/span>:<\/span> Routes<\/span> =<\/span> [<\/span>\r\n  {<\/span>path<\/span>:<\/span> ''<\/span>,<\/span> component<\/span>:<\/span> ListComponent<\/span>},<\/span>\r\n  {<\/span>path<\/span>:<\/span> '<\/span>detail\/:id<\/span>'<\/span>,<\/span> component<\/span>:<\/span> DetailComponent<\/span>}<\/span>\r\n];<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  imports<\/span>:<\/span> [<\/span>RouterModule<\/span>.<\/span>forRoot<\/span>(<\/span>routes<\/span>)],<\/span>\r\n  exports<\/span>:<\/span> [<\/span>RouterModule<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppRoutingModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
            \u6a21\u5757\u5b89\u88c5<\/h2>\n
            import<\/span> {<\/span> BrowserModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> FormsModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/forms<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> HttpClientModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/common\/http<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> AppRoutingModule<\/span> }<\/span> from<\/span> '<\/span>.\/app-routing.module<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> AppComponent<\/span> }<\/span> from<\/span> '<\/span>.\/app.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ListComponent<\/span> }<\/span> from<\/span> '<\/span>.\/components\/list\/list.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> DetailComponent<\/span> }<\/span> from<\/span> '<\/span>.\/components\/detail\/detail.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> BlogService<\/span> }<\/span> from<\/span> '<\/span>.\/services\/blog.service<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  declarations<\/span>:<\/span> [<\/span>\r\n    AppComponent<\/span>,<\/span>\r\n    ListComponent<\/span>,<\/span>\r\n    DetailComponent<\/span>\r\n  ],<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    BrowserModule<\/span>,<\/span>\r\n    AppRoutingModule<\/span>,<\/span>\r\n    FormsModule<\/span>,<\/span>\r\n    HttpClientModule<\/span>\r\n  ],<\/span>\r\n  providers<\/span>:<\/span> [<\/span>BlogService<\/span>],<\/span>\r\n  bootstrap<\/span>:<\/span> [<\/span>AppComponent<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
            \u521b\u5efa\u754c\u9762<\/h2>\n
            $<\/span> mkdir <\/span>interfaces\r\n$<\/span> cd<\/span> $_<\/span>\r\n$<\/span> ng g i blog\r\n<\/code><\/pre>\n
            export<\/span> interface<\/span> Blog<\/span> {<\/span>\r\n    id<\/span>:<\/span> number<\/span>;<\/span>\r\n    title<\/span>:<\/span> string<\/span>;<\/span>\r\n    text<\/span>:<\/span> string<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u521b\u5efa\u670d\u52a1<\/h2>\n
            import<\/span> {<\/span> Blog<\/span> }<\/span> from<\/span> '<\/span>.\/..\/interfaces\/blog<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Injectable<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> HttpHeaders<\/span>,<\/span> HttpClient<\/span> }<\/span> from<\/span> '<\/span>@angular\/common\/http<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Observable<\/span> }<\/span> from<\/span> '<\/span>rxjs<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Injectable<\/span>(<\/span>\r\n)<\/span>\r\nexport<\/span> class<\/span> BlogService<\/span> {<\/span>\r\n  blog<\/span>:<\/span> Blog<\/span>[]<\/span> =<\/span> [];<\/span>\r\n  private<\/span> Url<\/span> =<\/span> '<\/span>http:\/\/localhost:8000\/api\/blog\/<\/span>'<\/span>;<\/span>\r\n  private<\/span> headers<\/span> =<\/span> new<\/span> HttpHeaders<\/span>({<\/span>\r\n    '<\/span>Content-Type<\/span>'<\/span>:<\/span> '<\/span>application\/json<\/span>'<\/span>\r\n  });<\/span>\r\n\r\n  constructor<\/span>(<\/span>\r\n    private<\/span> http<\/span>:<\/span> HttpClient<\/span>\r\n  )<\/span> {<\/span> }<\/span>\r\n\r\n  getAllBlog<\/span>():<\/span> Observable<\/span><<\/span>any<\/span>><\/span>{<\/span>\r\n    return<\/span> this<\/span>.<\/span>http<\/span>.<\/span>get<\/span>(<\/span>this<\/span>.<\/span>Url<\/span>,<\/span> {<\/span>headers<\/span>:<\/span> this<\/span>.<\/span>headers<\/span>});<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u521b\u5efa\u5217\u8868\u7ec4\u4ef6<\/h2>\n
            <div<\/span> class=<\/span>\"container\"<\/span>><\/span>\r\n<h1><\/span>List<\/h1><\/span>\r\n    <ul<\/span> class=<\/span>\"\"<\/span>><\/span>\r\n        <li<\/span> *ngFor=<\/span>\"let blog of blogs\"<\/span> class=<\/span>\"\"<\/span>><\/span>\r\n            <a<\/span> routerLink=<\/span>\"detail\/{{blog.id}}\"<\/span>><\/span>\r\n                <span<\/span> from=<\/span>\"name\"<\/span>><\/span>{{blog.title}}<\/span><\/span>\r\n            <\/a><\/span>\r\n        <\/li><\/span>\r\n    <\/ul><\/span>\r\n<\/div><\/span>\r\n<\/code><\/pre>\n
            import<\/span> {<\/span> BlogService<\/span> }<\/span> from<\/span> '<\/span>.\/..\/..\/services\/blog.service<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Blog<\/span> }<\/span> from<\/span> '<\/span>.\/..\/..\/interfaces\/blog<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Component<\/span>,<\/span> OnInit<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-list<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/list.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/list.component.css<\/span>'<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ListComponent<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n\r\n  blogs<\/span>:<\/span> Blog<\/span>[]<\/span> =<\/span> [];<\/span>\r\n\r\n  constructor<\/span>(<\/span>\r\n    private<\/span> blogService<\/span>:<\/span> BlogService<\/span>\r\n  )<\/span> {<\/span> }<\/span>\r\n\r\n  ngOnInit<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>blogService<\/span>.<\/span>getAllBlog<\/span>().<\/span>subscribe<\/span>(<\/span>\r\n      blogs<\/span> =><\/span> this<\/span>.<\/span>blogs<\/span> =<\/span> blogs<\/span>\r\n    );<\/span>\r\n  }<\/span>\r\n\r\n}<\/span>\r\n<\/code><\/pre>\n
            \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
            \u6211\u6210\u529f\u5730\u4f7f\u7528 Angular \u5c06\u4ece API \u4e2d\u83b7\u53d6\u7684\u5e16\u5b50\u663e\u793a\u51fa\u6765\u4e86\u3002<\/p>\n
            \u521b\u5efa\u8be6\u7ec6\u7ec4\u4ef6<\/h2>\n
              getBlog<\/span>(<\/span>id<\/span>:<\/span> number<\/span>):<\/span> Observable<\/span><<\/span>Blog<\/span>><\/span>{<\/span>\r\n    const<\/span> url<\/span> =<\/span> `<\/span>${<\/span>this<\/span>.<\/span>Url<\/span>}${<\/span>id<\/span>}<\/span>`<\/span>;<\/span>\r\n    return<\/span> this<\/span>.<\/span>http<\/span>.<\/span>get<\/span><<\/span>Blog<\/span>><\/span>(<\/span>url<\/span>);<\/span>\r\n  }<\/span>\r\n<\/code><\/pre>\n
            <h1><\/span>Detail<\/h1><\/span>\r\n<div<\/span> *ngIf=<\/span>\"blog\"<\/span>><\/span>\r\n    <h2><\/span>{{blog.title}}<\/h2><\/span>\r\n    <p><\/span>{{blog.text}}<\/p><\/span>\r\n<\/div><\/span>\r\n<button<\/span> [routerLink]=<\/span>\"['']\"<\/span> routerLinkActive=<\/span>\"router-link-active\"<\/span> ><\/span>\r\n    \u623b\u308b\r\n<\/button><\/span>\r\n<\/code><\/pre>\n
            import<\/span> {<\/span> Blog<\/span> }<\/span> from<\/span> '<\/span>.\/..\/..\/interfaces\/blog<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> BlogService<\/span> }<\/span> from<\/span> '<\/span>.\/..\/..\/services\/blog.service<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Component<\/span>,<\/span> OnInit<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ActivatedRoute<\/span> }<\/span> from<\/span> '<\/span>@angular\/router<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-detail<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/detail.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/detail.component.css<\/span>'<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> DetailComponent<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n\r\n  blog<\/span>:<\/span> Blog<\/span>;<\/span>\r\n\r\n  constructor<\/span>(<\/span>\r\n    private<\/span> route<\/span>:<\/span> ActivatedRoute<\/span>,<\/span>\r\n    private<\/span> blogService<\/span>:<\/span> BlogService<\/span>\r\n  )<\/span> {<\/span> }<\/span>\r\n\r\n  ngOnInit<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>getBlog<\/span>();<\/span>\r\n  }<\/span>\r\n\r\n  getBlog<\/span>():<\/span> void<\/span>{<\/span>\r\n    const<\/span> id<\/span> =<\/span> +<\/span>this<\/span>.<\/span>route<\/span>.<\/span>snapshot<\/span>.<\/span>paramMap<\/span>.<\/span>get<\/span>(<\/span>'<\/span>id<\/span>'<\/span>);<\/span>\r\n    this<\/span>.<\/span>blogService<\/span>.<\/span>getBlog<\/span>(<\/span>id<\/span>).<\/span>subscribe<\/span>(<\/span>\r\n      blog<\/span> =><\/span> this<\/span>.<\/span>blog<\/span> =<\/span> blog<\/span>\r\n      );<\/span>\r\n  }<\/span>\r\n\r\n}<\/span>\r\n<\/code><\/pre>\n
            \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
            \u901a\u8fc7URL\u7684id\u67e5\u627eAPI\u6570\u636e\u5e76\u80fd\u591f\u663e\u793a\u8be6\u7ec6\u4fe1\u606f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
            \u5b8c\u6210\u50cf \u4eceAPI\u4e2d\u83b7\u53d6\u6587\u7ae0   \u4ee5\u5217\u8868\u5f62\u5f0f\u663e\u793a\u6587\u7ae0\u6807\u9898   \u70b9\u51fb\u6587\u7ae0\u6807\u9898\u540e\uff0c\u663e\u793a\u5185\u5bb9 Dj […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-49988","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u4f7f\u7528Angular\u548cDRF\u5f00\u53d1\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular\u548cdrf\u5f00\u53d1\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4f7f\u7528Angular\u548cDRF\u5f00\u53d1\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f\" \/>\n<meta property=\"og:description\" content=\"\u5b8c\u6210\u50cf \u4eceAPI\u4e2d\u83b7\u53d6\u6587\u7ae0   \u4ee5\u5217\u8868\u5f62\u5f0f\u663e\u793a\u6587\u7ae0\u6807\u9898   \u70b9\u51fb\u6587\u7ae0\u6807\u9898\u540e\uff0c\u663e\u793a\u5185\u5bb9 Dj […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular\u548cdrf\u5f00\u53d1\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-22T05:35:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T20:44:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8eca913a08637a6d7016\/21-0.png\" \/>\n<meta name=\"author\" content=\"\u6587, \u7fd4\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6587, \u7fd4\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/\",\"name\":\"\u4f7f\u7528Angular\u548cDRF\u5f00\u53d1\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-05-22T05:35:34+00:00\",\"dateModified\":\"2024-04-29T20:44:34+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4f7f\u7528Angular\u548cDRF\u5f00\u53d1\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\",\"name\":\"\u6587, \u7fd4\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"caption\":\"\u6587, \u7fd4\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4f7f\u7528Angular\u548cDRF\u5f00\u53d1\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular\u548cdrf\u5f00\u53d1\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4f7f\u7528Angular\u548cDRF\u5f00\u53d1\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f","og_description":"\u5b8c\u6210\u50cf \u4eceAPI\u4e2d\u83b7\u53d6\u6587\u7ae0   \u4ee5\u5217\u8868\u5f62\u5f0f\u663e\u793a\u6587\u7ae0\u6807\u9898   \u70b9\u51fb\u6587\u7ae0\u6807\u9898\u540e\uff0c\u663e\u793a\u5185\u5bb9 Dj […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular\u548cdrf\u5f00\u53d1\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-05-22T05:35:34+00:00","article_modified_time":"2024-04-29T20:44:34+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8eca913a08637a6d7016\/21-0.png"}],"author":"\u6587, \u7fd4","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6587, \u7fd4","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/","name":"\u4f7f\u7528Angular\u548cDRF\u5f00\u53d1\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-05-22T05:35:34+00:00","dateModified":"2024-04-29T20:44:34+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4f7f\u7528Angular\u548cDRF\u5f00\u53d1\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c","name":"\u6587, \u7fd4","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","caption":"\u6587, \u7fd4"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular%e5%92%8cdrf%e5%bc%80%e5%8f%91%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/49988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=49988"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/49988\/revisions"}],"predecessor-version":[{"id":89764,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/49988\/revisions\/89764"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=49988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=49988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=49988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}