利用angular4和nodejs-express构建一个简单的网站(六)—用户模块和路由分析

news/2024/4/28 13:43:04/文章来源:https://blog.csdn.net/weixin_34258078/article/details/88902707

上一节解决了用户注册和登录数据部分的内容。这一节开始分析用户模块、用户路由。## 用户管理模块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数组中,CommonModule:是构建子组件必须引入的模块。用户登录控件(LoginComponent)使用了模板驱动表单,需要导入FormsModule,用户注册组件(RegistComponent)使用了响应式表单,需要导入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{}

当进入主页(localhost)时,因为AppRoutingModule中直接重定向到users,所以直接进入到了users的路由,进入users路由后,直接加载了users模块的UsersRoutingModule,当路由为''时,加载UsersComponent组件,UsersComponent组件只有一个路由插座标签:

<router-outlet></router-outlet>

所有users模块的组件都要在这对标签中呈现。他的子路由包括

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

所以,最终的初始页面为HomeComponent组件的模板内容:

<p class="lead"><a class="btn btn-primary btn-lg" name="login" triggers="manual" #login="ngbPopover" placement="left" (mouseenter)="showPopver($event)"(mouseleave)="closePopover($event)" [routerLink]="['login']" ngbPopover="Please login first" role="Login">Login</a><a class="btn btn-warning btn-lg" #regist="ngbPopover" placement="right" (mouseenter)="showPopver($event)" (mouseleave)="closePopover($event)"[routerLink]="['regist']" name="regist" data-toggle="tooltip" ngbPopover="Please regist a user"  role="regist">Regist</a></p>

在这个模板中的两个链接标签中,分别提供了导航到登录和注册路由的routerLink:

  • [routerLink]="['login']
  • [routerLink]="['regist']"

当点击Login标签时,根据路由定义直接跳转到LoginComponent组件,进行用户的登录操作。
当点击Regist标签时,根据路由定义直接跳转到RegistComponent组件,进行用户的注册操作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_706469.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用Certbot工具快速给网站部署Let's Encrypt免费SSL证书

使用https证书的话,强制使用域名 很多商家也都提供免费证书&#xff0c;比如腾讯云提供免费一年GeoTrust DV SSL证书、Lets Encrypt永久免费但需要90天激活一次续约&#xff0c;当然如果要购买证书也不是很贵&#xff0c;有的甚至几十元一年都可以买到。 对于一般的网站&…

Python解答力扣网站题库简单版----第三讲

1041. 困于环中的机器人 题库链接: 1041. 困于环中的机器人. 题干 在无限的平面上&#xff0c;机器人最初位于 (0, 0) 处&#xff0c;面朝北方。机器人可以接受下列三条指令之一&#xff1a; "G"&#xff1a;直走 1 个单位"L"&#xff1a;左转 90 度"…

大型网站系统架构的演化

前言 一个成熟的大型网站&#xff08;如淘宝、京东等&#xff09;的系统架构并不是开始设计就具备完整的高性能、高可用、安全等特性&#xff0c;它总是随着用户量的增加&#xff0c;业务功能的扩展逐渐演变完善的&#xff0c;在这个过程中&#xff0c;开发模式、技术架构、设计…

大型高性能网站的十项规则

在我们公司ChinaNetCloud&#xff0c;见 过多种不同类型的网站和系统&#xff0c;有好也有差。其中有些系统拥有良好的服务器/网络架构&#xff0c;并且进行了合理的调整和监控 &#xff1b;然而一般的系统都会有安全和性能上的 问题&#xff0c;不能良好运行&#xff0c;也无法…

网站第三方评论对比

1.网站为什么需要评论系统 博客或cms系统&#xff0c;一般都是有内容和评论两部分组成。评论可以增加博主与用户之间的交流互动&#xff0c;也是博主一对多的传达自己想法和观点的交流平台。所以除了社区平台外&#xff0c;评论也成为一般博客和cms系统必备功能。 大型网站本身…

#17# SCCM管理 - 软件中心 VS 应用程序目录网站点

软件中心 VS 应用程序目录网站点 本篇文章主要讨论ConfigMgr软件中心(Software Center)及应用程序目录网站点(Application Catalog)的区别 软件程序&#xff08;包括应用程序、包&#xff09; 对于目的为“可用”的部署类型&#xff0c;有如下区分&#xff1a; 在SCCM 1511之前…

服务器搭建网站完整教程(宝塔面板+WORDPRESS)

服务器最大的用途&#xff0c;就是可以搭建网站&#xff0c;许多人都认为搭建网站是一件很难的事情&#xff0c;因为包含许多的比较专业东西&#xff0c;比如服务器、编程之类的&#xff0c;确实&#xff0c;在几年前是这样的&#xff0c;普通人想要自己做一个网站太难了 但是随…

如何防止网站因改版导致权重下降?

网站改版是一件网站发展的重大工作&#xff0c;网站改版能够赋予网站新的活力&#xff0c;但也伴随着许多“网站改版并发症”出现。这里所谓的“网站改版并发症”是指网站在改版过后出现的问题&#xff0c;比如网站排名下降、网站索引下降、网站权重下降等问题&#xff0c;这些…

如何使用流量精灵刷网站流量

1 一定要设置访问时间在什么时候是高峰&#xff0c;比如除非是黄色网站&#xff0c;否则不可能高峰时间总是在凌晨1-3点这种时间段&#xff0c;同样&#xff0c;不同类型的网站需要模拟真实的流量曲线图&#xff0c;不要和真实情况相差太多&#xff0c;尤其是对于那些流量曲线是…

怎么样把网站内链优化与网站外链建设做好呢?

大家都知道&#xff0c;做网站seo优化&#xff0c;首先最为重要的就是要把网站内部链接优化做好&#xff0c;也就是我们俗称的“网站内链”、“站内链接”。做好网站链接是做好网站seo优化的第一步&#xff0c;也是做网站外链建设的基础。关于网站内链优化的一些要点&#xff1…

六:在线工具网站,让你PC上要装的软件少一半!

记住这几个在线工具网站&#xff0c;让你PC上要装的软件少一半&#xff01; 一、uzer.me——丰富的云端应用聚合 这个云平台将我们常用的Office系列软件、Adobe家族的系列软件……乃至CAD制图都整合在了云端&#xff0c;随时都可以通过浏览器调用&#xff1b;而且还支持多人合作…

Django购物网站使用说明

自己在私有云(1C1G配置)部署&#xff0c;因配置较差&#xff0c;资源极其有限&#xff0c;请勿压力测试 &#xff03;&#xff0d;&#xff0d;&#xff0d;&#xff0d;&#xff0d;&#xff0d;&#xff0d;&#xff0d;&#xff0d;&#xff0d;&#xff0d;&#xff0d;&a…

在Win2003、Win7、XP中配置IIS搭建ASP.NET Web网站或应用程序(1)

在各系统中配置IIS 1、Xp系统中iis5.1的配置 Xp系统中自带的是IIS5.1&#xff0c;而IIS5.1中只能建立一个网站——即默认网站&#xff0c;如果要在上面部署多个web应用程序&#xff0c;我们可以使用新建虚拟目录的形式。具体操作如下&#xff1a; a、 开始——控制面板——管理…

用图片做网站输入验证的构想

我们现在使用的验证手段都是以验证码为主&#xff0c;让用户根据图片输入验证字符&#xff0c;这种方法的安全度尚可&#xff0c;但会给用户带来一些不便和困扰&#xff0c;比如这个雅虎的验证码&#xff1a; 这个安全度很高&#xff0c;机器和人都无法正确识别了。 其实要让人…

c# 联合halcon 基于相关性 模板匹配_宣城seo公司_有效利用及时相关性解决关键词排名上不到首页的难题...

发布时间:2020-11-04 09:11:33当你写一条热门新闻时&#xff0c;百度总是能很快地收录和显示你。这就是即时新闻的魅力所在&#xff0c;考虑到全站的权重不算太多。它完全基于即时新闻和页面相关性&#xff0c;因此&#xff0c;如果你想快速获得搜索流量(如果你是新来的网站)&a…

代码内容变成图片_网站只剩25行代码,真有程序员“删库跑路”?

“可能我删了数据才会轻松吧可能我格了硬盘才会休息吧可能逃出了公司我就跑到天边可能我还没找到 那个BUG……”曾经&#xff0c;有一位程序员&#xff0c;在某个加班的深夜&#xff0c;一边听着《可能否》&#xff0c;一边打开Word填上程序员心声版歌词&#xff0c;也赢得了不…

路由器WIFI连接无法正常访问个别网站及发送图片

打开路由&#xff0c;路由默认MTU是1500&#xff0c;改成1472 就解决了 本文转自黄聪博客园博客&#xff0c;原文链接&#xff1a;http://www.cnblogs.com/huangcong/p/6127762.html&#xff0c;如需转载请自行联系原作者

如何在线把网站html生成xml文件_快速抓取网站信息工具

网络信息抓取如今广泛运用于社会生活的各个领域。在接触网络信息抓取之前&#xff0c;大多数人会觉得这需要编程基础&#xff0c;也因此对信息抓取望而却步&#xff0c;但是随着技术的发展&#xff0c;诞生出了许多工具&#xff0c;借助这些工具我们编程小白也可以获取大数据加…

hbase官方网站声称的兼容是否是100%兼容?

根据[1]中的兼容矩阵&#xff0c;如下: 我们采用 hadoop3.1.2 hbase2.2.4 进行测试 $HBASE_HOME/logs/hbase-appleyuchi-master-Desktop.log 报错: desired level of robustness and ensure the config value of hbase.wal.dir points to a FileSystem mount that can pr…

开发asp.net2.0手机用网站 点滴[xgluxv]

最近一段时间一直在做一个给手机浏览的网站基于asp.net2.0,现在第一期已经到尾声&#xff0c;说说开发的感想。客户要求只要支持wap2.0的手机都能浏览&#xff08;我刚开始想他们应该说得是属于智能手机级别的都能浏览&#xff0c;后来发现有点不对&#xff0c;他们的测试机很多…