重庆分公司
重庆分公司
Angular+NG-ZORRO怎么开发一个后台系统
今天小编给大家分享一下Angular+NG-ZORRO怎么开发一个后台系统的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、网站制作、工布江达网络推广、重庆小程序开发、工布江达网络营销、工布江达企业策划、工布江达品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供工布江达建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com
系统功能包括下面的内容：
所有的 service 使用模拟的数据。
说干咱就干。
结合 ng-zorro
angular 比较流行的 ui 框架有：
Ant Design 相信做前端开发的人儿都比较熟悉了。所以这里我们结合 NG-ZORRO 这个框架来做。如果熟悉 Vue 或者 React 版本的 Ant Design，相信你可以无缝链接啊～
我们重新使用 angular-cli 生成一个项目 ng-zorro。
添加 ng-zorro 是很简单的事情：进入 ng-zorro 根目录，执行 ng add ng-zorro-antd 即可。
当然你也可以执行 npm install ng-zorro-antd 添加，不推荐。
结合 ng-zorro 完成之后，我们运行项目起来 npm run start，你会在 http://localhost:4200 的页面看到下图内容。
Not Bad, Bro.
配置路由
我们改成 hash 路由，并添加用户路由，脚手架都帮我们完事了，我们只要做点小修改。
思路：
先添加页面 user 用户的列表页面，使用 ng-zorro 中 table 组件
用户的新增和更改页面可以共用同一个页面，使用 ng-zorro 中 form 组件
页面删除功能直接使用弹窗提示，使用 ng-zorro 中 modal 组件
对 ng-zorro 组件按需引入
调整路由文件
按照思路，我们得在 ng-zorro 引入：
// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzInputModule } from 'ng-zorro-antd/input';
// ...
imports: [ // 是在 imports 中添加，而不是 declarations 中声明
NzTableModule,
NzModalModule,
NzButtonModule,
NzFormModule,
ReactiveFormsModule,
NzInputModule
],简单易理解原则，我们这里不使用 children 进行路由的嵌套：
// app.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { WelcomeComponent } from './pages/welcome/welcome.component';
import { UserComponent } from './pages/user/user.component';
import { UserInfoComponent } from './pages/user/user-info/user-info.component';
// 相关的路由
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: '/welcome'
},
{
path: 'welcome',
component: WelcomeComponent
},
{
path: 'user',
component: UserComponent
},
{
path: 'user/add',
component: UserInfoComponent
},
{
path: 'user/edit/:uuid',
component: UserInfoComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(
routes,
{
useHash: true,// 使用 hash 模式
preloadingStrategy: PreloadAllModules
}
)],
exports: [RouterModule]
})
export class AppRoutingModule { }更改菜单
使用脚手架生成的菜单与我们需要开发的功能不符合，我们来调整下。
// app.component.html
Ng-Zorro
菜单展示，如果我们需要做权限管理的话，是需要后端配合进行传值的，然后我们再把相关的权限菜单渲染到页面
替换成上面的代码后，得到的基本骨架如下：
完成用户列表
接下来完成用户列表的骨架，因为使用了 UI 框架，我么写起来异常的方便：
获取用户列表
// user.component.html
| Name |
Position |
Action |
{{data.name}} |
{{data.position}} |
Delete
|
我们模拟了些数据在 assets 文件夹中 user.json:
{
"users": [
{
"uuid": 1,
"name": "Jimmy",
"position": "Frontend"
},
{
"uuid": 2,
"name": "Jim",
"position": "Backend"
}
],
"environment": "development"
}编写好服务之后，我们调用获取用户的数据：
// user.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from 'src/app/services/user.service';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {
public list: any = []
constructor(
private readonly userService: UserService
) { }
ngOnInit(): void {
if(localStorage.getItem('users')) {
let obj = localStorage.getItem('users') || '{}'
this.list = JSON.parse(obj)
} else {
this.getList()
}
}
// 获取用户列表
getList() {
this.userService.getUserList().subscribe({
next: (data: any) => {
localStorage.setItem('users', JSON.stringify(data.users))
this.list = data.users
},
error: (error: any) => {
console.log(error)
}
})
}
}因为没有引入后端服务，这里我们采用 localstorage 的方式记录状态。
上面完成后，我们得到列表信息如下：
新增用户和编辑用户
我们简单建立个表单，里面含有的字段就两个，分别是 name 和 position。这两个功能是公用一个表单的～
我们在 html 中添加:
// user-info.component.html
确认
页面长这样子：
然后就是逻辑的判断，进行添加或者是修改。如果是连接带上 uuid 的标识，就表示是编辑，show you the codes。
// user-info.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, ParamMap } from '@angular/router';
@Component({
selector: 'app-user-info',
templateUrl: './user-info.component.html',
styleUrls: ['./user-info.component.scss']
})
export class UserInfoComponent implements OnInit {
public isAdd: boolean = true;
public userInfo: any = []
public uuid: number = 0;
validateForm!: FormGroup;
constructor(
private fb: FormBuilder,
private route: ActivatedRoute,
) { }
ngOnInit(): void {
this.userInfo = JSON.parse(localStorage.getItem('users') || '[]')
this.route.paramMap.subscribe((params: ParamMap)=>{
this.uuid = parseInt(params.get('uuid') || '0')
})
// 是编辑状态，设置标志符
if(this.uuid) {
this.isAdd = false
}
if(this.isAdd) {
this.validateForm = this.fb.group({
username: [null, [Validators.required]],
position: [null, [Validators.required]]
});
} else {
let current = (this.userInfo.filter((item: any) => item.uuid === this.uuid))[0] || {}
// 信息回填
this.validateForm = this.fb.group({
username: [current.name, [Validators.required]],
position: [current.position, [Validators.required]]
})
}
}
submitForm() {
// 如果不符合提交，则报错
if(!this.validateForm.valid) {
Object.values(this.validateForm.controls).forEach((control: any) => {
if(control?.invalid) {
control?.markAsDirty();
control?.updateValueAndValidity({ onlySelf: true });
}
})
return
}
// 获取到表单的数据
const data = this.validateForm.value
// 新增用户
if(this.isAdd) {
let lastOne = (this.userInfo.length > 0 ? this.userInfo[this.userInfo.length-1] : {});
this.userInfo.push({
uuid: (lastOne.uuid ? (lastOne.uuid + 1) : 1),
name: data.username,
position: data.position
})
localStorage.setItem('users', JSON.stringify(this.userInfo))
} else { // 编辑用户，更新信息
let mapList = this.userInfo.map((item: any) => {
if(item.uuid === this.uuid) {
return {
uuid: this.uuid,
name: data.username,
position: data.position
}
}
return item
})
localStorage.setItem('users', JSON.stringify(mapList))
}
}
}我们先设定一个标志符 isAdd，默认是新建用户；当 uuid 存在的时候，将其设置为 false 值，表示是编辑的状态，对内容进行表单的回填。提交表单的操作也是按照该标志符进行判断。我们直接对 localStorage 的信息进行变更，以保证同步列表信息。
删除功能
我们引入模态对话框进行询问是否删除。
// user.component.ts
// 删除
delete(data: any) {
this.modal.confirm({
nzTitle: '你想删除该用户?',
nzOnOk: () => {
let users = JSON.parse(localStorage.getItem('users') || '[]');
let filterList = users.filter((item: any) => item.uuid !== data.uuid);
localStorage.setItem('users', JSON.stringify(filterList));
this.list = filterList
}
});
}
我们找到删除的数据，将其剔除，重新缓存新的用户数据，并更新 table 的用户列表数据。
以上就是“Angular+NG-ZORRO怎么开发一个后台系统”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。
当前题目：Angular+NG-ZORRO怎么开发一个后台系统
URL链接：http://cxhlcq.com/article/gisdsc.html
-
在线咨询
微信咨询
电话咨询
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回顶部
