Angular实战项目记录(一)------登录(传递参数,获取返回值,加密密码,路由守卫,localStorage)_登录按钮同时请求key并传参登录-程序员宅基地

技术标签: angular项目实战  

需求:angular登录(传递参数,获取返回值,加密密码,local路由守卫,localStorage)

需要的模块

  • home.routing.ts
  • login.component.html
  • login.component.ts
  • login.service.ts
  • login.guard.ts
  • storage.service.ts

步骤:

一,双向绑定input框的账号和密码

login.html

          <input type="text"  name="username"  placeholder="用户名" autocomplete="off" [(ngModel)]="username" >
          <input type="password"  name="password"  placeholder="密码" [(ngModel)]="password">
     	   <span class="redalert" >  {
  
   {loginErrorInfo}}</span>
            <button type="submit" (click)="login()" >{
  
   {denglu}}</button>
       

login.ts

 public denglu:string = '登录'
  public username:any ='';
  private password:any ='';

二,将账号和密码(加密)进行处理,向api接口发送请求,传递参数

2.1请求数据
2.1.1在app.module.ts中引入HttpClientModule类注入
app.module.ts (其他的组件没有写,仅写了添加)

//引入组件
import { HttpClientModule } from '@angular/common/http';//通过HTTP协议实现前端应用和后端服务器的通讯

  imports: [  //引入当前模块运行依赖的其他模块
    HttpClient
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_46684624/article/details/112344926

智能推荐

直线与球体的交点lisp_晓东CAD家园-论坛-A/VLISP-[LISP函数]:计算直线与曲线交点-:5 如何用Lisp程序计算支线Line与曲线(二次样条或PLINE拟合曲线)三交点,请诸位高手提...-程序员宅基地

文章浏览阅读389次。[font=courier new]86. xdrx_getinters功能:1.求两个AcDbCurve(曲线)实体的交点.2.求一个AcDbCurve(曲线)实体和一个选择集中所有AcDbCurve(曲线)的交点。3.求一个选择集中所有AcDbCurve(曲线)实体的交点.4.求一个选择集SS1中的所有AcDbCurve实体和另个选择集SS2所有AcDbCurve实体的交点。调用格式: 1. ..._lisp inters

HDU 1198 - Farm Irrigation-程序员宅基地

文章浏览阅读44次。Problem DescriptionBenny has a spacious farm land to irrigate. The farm land is a rectangle, and is divided into a lot of samll squares. Water pipes are placed in these squares. Different square has...

JAVA功能代码《3》----获取Java现在正调用的方法名-程序员宅基地

文章浏览阅读45次。3.获取Java现在正调用的方法名String methodName = Thread.currentThread().getStackTrace()[1] .getMethodName();_java string methodname = thread.currentthread().getstacktrace()[3].getmethod

js给KindEditor的textarea框赋值_js textarea kindeditor值-程序员宅基地

文章浏览阅读1.1k次。js给KindEditor的textarea框赋值转载自csdn论坛的一个问答创建富文本编辑器//富文本编辑器doc.editor = KindEditor.create(’#editor’,{uploadJson : ‘/***/upload.bs’});————————————————————————使用时,在js方法里面doc.editor.html(“要修改的内容”);..._js textarea kindeditor值

Android-版本说明-安全隐私-1.5~4.1_android 隐私说明大全-程序员宅基地

文章浏览阅读528次。Android 1.5 至 4.1 中的安全增强功能 | Android 开源项目 | Android Open Source Project_android 隐私说明大全

springboot多模块下无法导包的问题_there are circular dependencies between: 1. 'crm_6-程序员宅基地

文章浏览阅读442次。[ERROR] Some problems were encountered while processing the POMs:_there are circular dependencies between: 1. 'crm_6x_core' module, 'busiframe

随便推点

堆栈与队列的方法区分、优先队列的应用_判断是栈还是队列还是优先队列-程序员宅基地

文章浏览阅读123次。堆栈与队列具体的方法区分_判断是栈还是队列还是优先队列

上海计算机学会2021年7月月赛C++丙组T1布置会场-程序员宅基地

文章浏览阅读352次,点赞8次,收藏8次。小爱老师可以购买两份双拼花束后,将他重新组合成一束百合花+一束郁金香。已知布置会场需要用到x束百合花与y束郁金香,请问小爱老师购买花朵最少花费需多少元?输出共一行,一个正整数,表示小爱老师购买花朵最少花费需多少元。直接购买8束百合+6束郁金香,共计8*8+6*10=124元。内存限制: 256 Mb时间限制: 1000 ms。先购买12束双拼花朵,花费12*8=96元,第一行:两个正整数表示需要的花束数量x,y。第二行:三个正整数表示花束费用a,b,c。再购买2束百合花,花费2*8=16元,

python实现ping某一ip_使用Python测试Ping主机IP和某端口是否开放的实例-程序员宅基地

文章浏览阅读518次。使用Python方法比用各种命令方便,可以设置超时时间,到底通不通,端口是否开放一眼能看出来。命令和返回完整权限,可以ping通,端口开放,结果如下:无root权限(省略了ping),端口开放,结果如下:完整权限,可以ping通,远端端口关闭,结果如下:完整权限,可以ping通,本地端口关闭,结果如下:完整权限,不能ping通(端口自然也无法访问),结果如下:pnp.py代码#!/usr/bin/..._python ping ip无管理员权限

zplane函数怎么用m文件调用_matlab中cla用法-程序员宅基地

文章浏览阅读738次。零极点与系统稳定性的关系 4.状态方程含义 5.使用 zplane 函数 [实验原理] 该实验用 MATLAB 中库函数,如 tf2zp(b,a),ss2zp(A,B,C,D),zplane(z,p),......MATLAB 中相关命令 aa abs 绝对值、模、字符的 ascii 码值 a...零极点与系统稳定性的关系 4.状态方程含义 5.使用 zplane 函数 [实验原理] 该实验用 M..._matlabcla。m文件

【康复训练】【51nod】1463 找朋友_c++:题目描述 小t喜欢和自己同龄的人交朋友,现在他排在了一个n行m列的队伍中。请-程序员宅基地

文章浏览阅读197次。Description给定: 两个长度为n的数列A 、B 一个有m个元素的集合K 询问Q次 每次询问[l,r],输出区间内满足|Bi-Bj|∈K 的最大Ai+Aj数据约定: n,Q&lt;=100000 m &lt;= 10 0&lt;=A[i]&lt;=1000000000 1&lt;=B[i]&lt;=n 1&lt;=K[i]&lt;=n 保证B[i]互不相等 I..._c++:题目描述 小t喜欢和自己同龄的人交朋友,现在他排在了一个n行m列的队伍中。请

Algs4-1.5.3使用加权quick-union算法完成练习1.5.1-程序员宅基地

文章浏览阅读346次。1.5.3使用加权quick-union算法(请见算法1.5)完成练习1.5.1。 转载于:https://www.cnblogs.com/longjin2018/p/..._用quick union完成练习1.5.1