国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

利用angular4和nodejs-express構(gòu)建一個(gè)簡(jiǎn)單的網(wǎng)站(六)—用戶模塊和路由分析

cfanr / 2656人閱讀

摘要:上一節(jié)解決了用戶注冊(cè)和登錄數(shù)據(jù)部分的內(nèi)容。這一節(jié)開(kāi)始分析用戶模塊用戶路由。用戶管理模塊分析主要代碼如下數(shù)組中,是構(gòu)建子組件必須引入的模塊。當(dāng)點(diǎn)擊標(biāo)簽時(shí),根據(jù)路由定義直接跳轉(zhuǎn)到組件,進(jìn)行用戶的注冊(cè)操作。

上一節(jié)解決了用戶注冊(cè)和登錄數(shù)據(jù)部分的內(nèi)容。這一節(jié)開(kāi)始分析用戶模塊、用戶路由。## 用戶管理模塊UserModule分析 ##
UserModule主要代碼如下:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { LoginComponent } from "./login/login.component";
import { UsersComponent } from "./users/users.component";
import { UsersRoutingModule } from "./users-routing.module";
import { HomeComponent } from "./home/home.component";
import { RegistComponent } from "./regist/regist.component";
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    UsersRoutingModule,
  ],
  declarations: [
    UsersComponent,
    LoginComponent,
    HomeComponent,
    RegistComponent,]
})
export class UsersModule { }

import數(shù)組中,CommonModule:是構(gòu)建子組件必須引入的模塊。用戶登錄控件(LoginComponent)使用了模板驅(qū)動(dòng)表單,需要導(dǎo)入FormsModule,用戶注冊(cè)組件(RegistComponent)使用了響應(yīng)式表單,需要導(dǎo)入ReactiveFormsModule,用戶路由模塊UsersRoutingModule主要代碼如下:

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";

import { LoginComponent } from "./login/login.component";
import { UsersComponent } from "./users/users.component";
import { HomeComponent } from "./home/home.component";
import { RegistComponent } from "./regist/regist.component";
const usersRoutes: Routes = [
    {
        path:"",
        component:UsersComponent,
        children:[
            {path:"", component:HomeComponent},
            {path: "login", component: LoginComponent},
            {path:"regist",component:RegistComponent}
        ]
    },
    
];
@NgModule({
    imports:[
        RouterModule.forChild(usersRoutes)
    ],
    exports:[
        RouterModule
    ]
})
export class UsersRoutingModule{}

當(dāng)進(jìn)入主頁(yè)(localhost)時(shí),因?yàn)锳ppRoutingModule中直接重定向到users,所以直接進(jìn)入到了users的路由,進(jìn)入users路由后,直接加載了users模塊的UsersRoutingModule,當(dāng)路由為""時(shí),加載UsersComponent組件,UsersComponent組件只有一個(gè)路由插座標(biāo)簽:

所有users模塊的組件都要在這對(duì)標(biāo)簽中呈現(xiàn)。他的子路由包括

 {path:"", component:HomeComponent},
 {path: "login", component: LoginComponent},
 {path:"regist",component:RegistComponent}

所以,最終的初始頁(yè)面為HomeComponent組件的模板內(nèi)容:

Login Regist

在這個(gè)模板中的兩個(gè)鏈接標(biāo)簽中,分別提供了導(dǎo)航到登錄和注冊(cè)路由的routerLink:

[routerLink]="["login"]

[routerLink]="["regist"]"

當(dāng)點(diǎn)擊Login標(biāo)簽時(shí),根據(jù)路由定義直接跳轉(zhuǎn)到LoginComponent組件,進(jìn)行用戶的登錄操作。
當(dāng)點(diǎn)擊Regist標(biāo)簽時(shí),根據(jù)路由定義直接跳轉(zhuǎn)到RegistComponent組件,進(jìn)行用戶的注冊(cè)操作。

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/93144.html

相關(guān)文章

  • 利用angular4nodejs-express構(gòu)建一個(gè)簡(jiǎn)單網(wǎng)站(十)—好友模塊

    摘要:我們從這一章開(kāi)始分析這個(gè)好友模塊。在中提供了和一個(gè)請(qǐng)求攔截器,分別用于提供數(shù)據(jù)服務(wù)路由守衛(wèi)服務(wù)和攔截服務(wù)。在這個(gè)模塊下共有三個(gè)組件。路由路由模塊負(fù)責(zé)整個(gè)模塊的全部路由。和,對(duì)應(yīng)同一個(gè)組件,當(dāng)導(dǎo)航到路徑時(shí),,的為具體的。 上一章講解了用戶登錄的相關(guān)代碼。用戶登錄成功后,就會(huì)進(jìn)入好友模塊,在好友模塊中會(huì)根據(jù)不同的用戶ID顯示相應(yīng)的好友列表,點(diǎn)擊好友列表中的單個(gè)好友就會(huì)進(jìn)入編輯單個(gè)好友頁(yè)面,...

    BicycleWarrior 評(píng)論0 收藏0
  • 利用angular4nodejs-express構(gòu)建一個(gè)簡(jiǎn)單網(wǎng)站(四)—angular路由初步

    摘要:為了做到這一點(diǎn),我創(chuàng)建了一個(gè)服務(wù)提供商,通過(guò)的消息推送來(lái)實(shí)現(xiàn)。最后聲明一個(gè)來(lái)發(fā)送修改過(guò)的對(duì)象。根組件,創(chuàng)建它并插入宿主頁(yè)面。路由的作用是在找不到任何路由時(shí),訪問(wèn)組件。定義路由數(shù)組后,用裝飾器導(dǎo)入,并將路由數(shù)組傳遞給的數(shù)組。 上一篇文章對(duì)用戶發(fā)來(lái)的注冊(cè)和登錄信息進(jìn)行了處理,并實(shí)現(xiàn)了將注冊(cè)用戶信息插入到mysql數(shù)據(jù)庫(kù)的數(shù)據(jù)表和從mysql數(shù)據(jù)庫(kù)的數(shù)據(jù)表中查詢到用戶的登錄信息并返回用戶認(rèn)證...

    Zhuxy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<