使用.net core ABP和Angular模板构建博客管理系统（创建前端菜单及页面）

2018-08-21 15:27:45 浏览数 (1)

​

上一篇写到 使用.net core ABP和Angular模板构建博客管理系统（实现博客列表页面）：http://www.jianshu.com/p/24c5f23007d0

新建两个模块

代码语言：javascript复制
ng g component blog/note
ng g component blog/note-book

修改路由

打开app-routing.module.ts 文件添加如下路由

代码语言：javascript复制
import {NoteComponent} from '@app/blog/note/note.component';
import {NoteBookComponent} from '@app/blog/note-book/note-book.component';


        RouterModule.forChild([
            {
                path: '',
                component: AppComponent,
                children: [
                    { path: 'home', component: HomeComponent,  canActivate: [AppRouteGuard] },
                    { path: 'users', component: UsersComponent, data: { permission: 'Pages.Users' }, canActivate: [AppRouteGuard] },
                    { path: 'roles', component: RolesComponent, data: { permission: 'Pages.Roles' }, canActivate: [AppRouteGuard] },
                    { path: 'tenants', component: TenantsComponent, data: { permission: 'Pages.Tenants' }, canActivate: [AppRouteGuard] },
                    { path: 'about', component: AboutComponent },
                    { path: 'note', component: NoteComponent },
                    { path: 'notebook', component: NoteBookComponent }
                ]
            }
        ])

修改菜单

ABP这个使用的图表库是：https://materialdesignicons.com/ 打开applayoutsidebar-nav.component.ts 文件修改菜单如下：

代码语言：javascript复制
    menuItems: MenuItem[] = [
        new MenuItem(this.l("HomePage"), "", "home", "/app/home"),

        new MenuItem(this.l("System"), "", "apps", "", [
            new MenuItem(this.l("Tenants"), "Pages.Tenants", "business", "/app/tenants"),
            new MenuItem(this.l("Users"), "Pages.Users", "people", "/app/users"),
            new MenuItem(this.l("Roles"), "Pages.Roles", "local_offer", "/app/roles"),
            new MenuItem(this.l("About"), "", "info", "/app/about"),
        ]),
        new MenuItem(this.l("博客"), "", "book", "", [
            new MenuItem(this.l("文章管理"), "", "book", "/app/note"),
            new MenuItem(this.l("文集管理"), "", "book", "/app/notebook"),
        ]),

        new MenuItem(this.l("MultiLevelMenu"), "", "menu", "", [
            new MenuItem("ASP.NET Boilerplate", "", "", "", [
                new MenuItem("Home", "", "", "https://aspnetboilerplate.com/?ref=abptmpl"),
                new MenuItem("Templates", "", "", "https://aspnetboilerplate.com/Templates?ref=abptmpl"),
                new MenuItem("Samples", "", "", "https://aspnetboilerplate.com/Samples?ref=abptmpl"),
                new MenuItem("Documents", "", "", "https://aspnetboilerplate.com/Pages/Documents?ref=abptmpl")
            ]),
            new MenuItem("ASP.NET Zero", "", "", "", [
                new MenuItem("Home", "", "", "https://aspnetzero.com?ref=abptmpl"),
                new MenuItem("Description", "", "", "https://aspnetzero.com/?ref=abptmpl#description"),
                new MenuItem("Features", "", "", "https://aspnetzero.com/?ref=abptmpl#features"),
                new MenuItem("Pricing", "", "", "https://aspnetzero.com/?ref=abptmpl#pricing"),
                new MenuItem("Faq", "", "", "https://aspnetzero.com/Faq?ref=abptmpl"),
                new MenuItem("Documents", "", "", "https://aspnetzero.com/Documents?ref=abptmpl")
            ])
        ])
    ];

运行后效果如下

angularjs

0 人点赞