前端

angular 9打造用户系统 - 7使用ngrx router store管理路由

本篇要做什么 本系列最后一篇 本文将使用ngrx router store来绑定angular路由到ngrx,同事使用CustomRouteStateSerializer github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 原教程视频连接 https://www.youtube.com/watch?v=XHw4hYkGsHM&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=9 安装文档文档位置 https://github.com/ngrx/platform/tree/master/docs/router-store 安装 npm install @ngrx/router-store --save 新建src\app\shared\utils.ts, customer-route-state-serializer。这段代码是上面文档提供的 import { StoreModule, ActionReducerMap } from "@ngrx/store"; import { Params, RouterStateSnapshot} from '@angular/router'; import { RouterStateSeria...

angular 9打造用户系统 - 6使用ngrx entity完成CRUD操作

本篇要做什么 本文将使用effect entity来实现CRUD操作,需要用到ReactiveForm github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 原教程视频连接 https://www.youtube.com/watch?v=XHw4hYkGsHM&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=8 步骤 src/app/app.module.ts导入ReactiveFormsModule 不在给出全部代码,需要的话,参照前一篇文章。 // 导入ReactiveFormsModule import { ReactiveFormsModule } from '@angular/forms'; imports: [ BrowserModule, StoreModule.forRoot({}), StoreDevtoolsModule.instrument(), EffectsModule.forRoot([]), HttpClientModule, AppRoutingModule, ReactiveFormsModule, // 加入ReactiveFor...

angular 9打造用户系统 - 5使用ngrx entity

本篇要做什么 本文将使用effect entity库来管理数据集,减少CRUD操作代码量,通过id来查找user github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 安装ngrx entity npm install @ngrx/entity 原教程视频连接 https://www.youtube.com/watch?v=igc5rBN50wk&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=7 步骤 修改src\app\users\state\user.reducer.ts import * as userAction from './user.actions'; import {createFeatureSelector, createSelector, Store} from '@ngrx/store'; // 加入 import {EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity'; import * as fromRoot from '../../state/app-state'; import { User } from '...

angular 9打造用户系统 - 4使用ngrx effect从http api加载数据

本篇要做什么 本文将使用effect从http api加载数据来显示,user-list.component改用action对象发布事件 github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 原教程视频连接 https://www.youtube.com/watch?v=1dQVJ1DaFWU&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=6 步骤 新建src\app\app.models.ts 通用的抽象response接口 export interface Response<T> { code: number, msg: string, data: T } 实现UserService, src\app\users\user.service.ts import { Injectable } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { Observable } from "rxjs"; import { Response } from './../app.mode...

angular 9打造用户系统 - 3 使用ngrx action和devtools

本篇要做什么 本文将在上一篇基础上增加ngrx/store-devtools和actions github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 上一篇已经安装依赖 npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools @ngrx/router-store 原教程视频连接 https://www.youtube.com/watch?v=1dQVJ1DaFWU&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=5 步骤 浏览器安装redux devtools插件,我使用chrome浏览器 修改src\app\app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { StoreModule } from '@ngrx/store'; //加入这行,引用StoreDevtoolsModule impor...

angular 9打造用户系统 - 2使用ngrx store和reducer来加载用户列表

angular 9打造用户系统-2 本片使用ngrx store和ngrx reducer加载用户列表 github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 原教程视频连接 https://www.youtube.com/watch?v=ChiAZJiX3v0&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=4 步骤 安装ngrx依赖 npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools @ngrx/router-store 创建第一个action和reducer 创建src\app\users\user.model.ts import { Time } from '@angular/common' export interface User{ id?: number; username: string; cnname: string; enname: string; password?: string; role_id: number; email: string; t...

angular 9打造用户系统 - 1搭建一个用户管理界面

做什么 本文使用angular搭建一个客户管理页面,包含添加客户,修改客户信息,客户列表。本文内容只涵盖展示页面,没有业务逻辑。业务逻辑将在下一篇中实现,最终效果在页面底部 github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 感谢教程原作者 https://www.youtube.com/watch?v=QlzX_gKixa4&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=3 https://github.com/angulardeveloper-io/ngrx-store-app 步骤 创建项目,项目名user ng new user 加入bootstrap4的css,文件: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>User</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

使用adminlte的word-map

<!-- Map card --> <div class="card bg-gradient-primary"> <div class="card-header border-0"> <h3 class="card-title"> <i class="fas fa-map-marker-alt mr-1"></i> Visitors </h3> <!-- card tools --> <div class="card-tools"> <button type="button" class="btn btn-primary btn-sm daterange" data-toggle="tooltip" title="Date ra...

chrome console监控客服回复

背景 二半夜在某服务器网站提交了一个ticket,时间紧迫,我需要第一时间看到对方回复,但我又不想坐在电脑前面干等,如何破? 是不是可以写一个js脚本监控页面内容变动,然后通过某种方式叫醒我? 实现 chrome console里实现自动刷新页面 参考链接1里的方法可以做到了。 timeout=prompt("Set timeout (Second):"); count=0 current=location.href; // 获取当前的URL if(timeout>0) setTimeout('reload()',1000*timeout); else location.replace(current); // 时间间隔不大于0,仅刷新一次 function reload(){ setTimeout('reload()',1000*timeout); // timeout秒后执行reload函数,实现无限循环刷新 count++; console.log('每('+timeout+')秒自动刷新,刷新次数:'+count); fr4me='<frameset cols=\'*\'>\n<frame src=\''+current+'\'/>'; fr4me+='</fr...

js中带var定义变量和不带var的区别

面试时候被问到var a=1和a=1的区别没打上来,遗憾啊 测试 先来测试一波var a=1和a=1的区别吧 console.log(b) // 会报错 b = 1 VM249:1 Uncaught ReferenceError: b is not defined at <anonymous>:1:13 console.log(a) // 后续使用var定义变量,不会报错,没有初始化会显示undefined var a = 1 VM215:1 undefined undefined 分析 猜测js在启动的时候会首先扫描所有var定义的变量,定义出来,所以console.log时候不会报错
执行时间: 1713870066347.2 毫秒