Angular+NG-ZORRO怎么开发一个后台系统

今天小编给大家分享一下Angular+NG-ZORRO怎么开发一个后台系统的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。系统功能包括下面的内容：欢迎页面用户列表用户新增用户修改用户删除所有的 service 使用模拟的数据。说干咱就干。结合 ng-zorroangular 比较流行的 ui 框架有：Angular Material 官方指定 UI 框架NG-ZORRO，又名 Ant Design of 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 引入：简单易理解原则，我们这里不使用 children 进行路由的嵌套：更改菜单使用脚手架生成的菜单与我们需要开发的功能不符合，我们来调整下。菜单展示，如果我们需要做权限管理的话，是需要后端配合进行传值的，然后我们再把相关的权限菜单渲染到页面替换成上面的代码后，得到的基本骨架如下：完成用户列表接下来完成用户列表的骨架，因为使用了 UI 框架，我么写起来异常的方便：获取用户列表我们模拟了些数据在 assets 文件夹中 user.json:编写好服务之后，我们调用获取用户的数据：因为没有引入后端服务，这里我们采用 localstorage 的方式记录状态。上面完成后，我们得到列表信息如下：新增用户和编辑用户我们简单建立个表单，里面含有的字段就两个，分别是 name 和 position。这两个功能是公用一个表单的～我们在 html 中添加:页面长这样子：然后就是逻辑的判断，进行添加或者是修改。如果是连接带上 uuid 的标识，就表示是编辑，show you the codes。我们先设定一个标志符 isAdd，默认是新建用户；当 uuid 存在的时候，将其设置为 false 值，表示是编辑的状态，对内容进行表单的回填。提交表单的操作也是按照该标志符进行判断。我们直接对 localStorage 的信息进行变更，以保证同步列表信息。删除功能我们引入模态对话框进行询问是否删除。我们找到删除的数据，将其剔除，重新缓存新的用户数据，并更新 table 的用户列表数据。以上就是“Angular+NG-ZORRO怎么开发一个后台系统”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注云技术行业资讯频道。

相关推荐: Vue子组件属性怎么赋值

这篇文章主要介绍了Vue子组件属性怎么赋值的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue子组件属性怎么赋值文章都会有所收获，下面我们一起来看看吧。 Vue 子组件Vue 应用由一个或多个组件构成。Vue 组件遵循一种层次结构…