前端布局

CasinosManager/angular.json

@@ -23,7 +23,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
             "scripts": []
           },
@@ -72,7 +73,8 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
             "scripts": [],
             "assets": [

CasinosManager/package-lock.json

@@ -1540,6 +1540,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
+      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

CasinosManager/package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^6.1.0",
     "@angular/platform-browser-dynamic": "^6.1.0",
     "@angular/router": "^6.1.0",
+    "bootstrap": "^4.3.1",
     "core-js": "^2.5.4",
     "rxjs": "^6.0.0",
     "zone.js": "~0.8.26"

CasinosManager/src/app/content/content.component.css

@@ -0,0 +1,31 @@
+.fixed-top{
+ height: 48px !important;
+}
+
+.nav-top{
+line-height: inherit;
+}
+
+.nav-top .nav-item
+{
+    float:left !important; /* 向左漂移，将竖排变为横排 */
+}
+
+.sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+    padding: 48px 0 0;
+    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+}
+
+.sidebar .nav-item
+{
+    padding-left: 25px;
+}
+
+.main{
+    padding-top: 48px;
+}

CasinosManager/src/app/content/content.component.html

@@ -1 +1,54 @@
-<router-outlet></router-outlet>
+<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
+    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">CasinosManager</a>
+    <ul class="nav-top px-3">
+        <li class="nav-item text-nowrap">
+            <a class="nav-link" href="#">loginName</a>
+        </li>
+        <li class="nav-item text-nowrap">
+            <a class="nav-link" href="#">Sign out</a>
+        </li>
+    </ul>
+</nav>
+
+<div class="container-fluid">
+    <div class="row">
+        <<nav class="col-md-2 d-none d-md-block bg-light sidebar">
+            <div class="sidebar-sticky">
+                <ul class="nav flex-column">
+                    <li class="nav-item">
+                        <a class="nav-link" routerLink="/content/student">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                                class="feather feather-users">
+                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                                <circle cx="9" cy="7" r="4"></circle>
+                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+                            </svg>
+                            学生
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" routerLink="/content/course">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                                class="feather feather-bar-chart-2">
+                                <line x1="18" y1="20" x2="18" y2="10"></line>
+                                <line x1="12" y1="20" x2="12" y2="4"></line>
+                                <line x1="6" y1="20" x2="6" y2="14"></line>
+                            </svg>
+                            课程
+                        </a>
+                    </li>
+
+                </ul>
+            </div>
+            </nav>>
+
+            <main class="col-md-9 ml-sm-auto col-lg-10 px-4 main">
+                <div class="d-flex flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+                    <router-outlet></router-outlet>
+                </div>
+            </main>
+    </div>
+</div>

CasinosManager/src/app/content/content.module.ts

@@ -6,6 +6,8 @@ import { ContentRoutingModule } from './/content-routing.module';
 
 import { StudentComponent } from './student/student.component';
 import { CourseComponent } from './course/course.component';
+import { TopbarComponent } from './layout/topbar.component';
+import { SidebarComponent } from './layout/sidebar.component';
 
 
 @NgModule({
@@ -16,7 +18,9 @@ import { CourseComponent } from './course/course.component';
   ],
   declarations:[
     StudentComponent,
-    CourseComponent
+    CourseComponent,
+    TopbarComponent,
+    SidebarComponent
   ]
 })
 export class ContentModule { }

CasinosManager/src/app/content/layout/sidebar.component.html

@@ -0,0 +1,32 @@
+<nav class="col-md-2 d-none d-md-block bg-light sidebar">
+    <div class="sidebar-sticky">
+        <ul class="nav flex-column">
+            <li class="nav-item">
+                <a class="nav-link" href="#">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="feather feather-users">
+                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                        <circle cx="9" cy="7" r="4"></circle>
+                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+                    </svg>
+                    Customers
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="feather feather-bar-chart-2">
+                        <line x1="18" y1="20" x2="18" y2="10"></line>
+                        <line x1="12" y1="20" x2="12" y2="4"></line>
+                        <line x1="6" y1="20" x2="6" y2="14"></line>
+                    </svg>
+                    Reports
+                </a>
+            </li>
+
+        </ul>
+    </div>
+</nav>

CasinosManager/src/app/content/layout/sidebar.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.css']
+})
+export class SidebarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

CasinosManager/src/app/content/layout/topbar.component.html

@@ -0,0 +1,3 @@
+<p>
+  topbar works!
+</p>

CasinosManager/src/app/content/layout/topbar.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-topbar',
+  templateUrl: './topbar.component.html',
+  styleUrls: ['./topbar.component.css']
+})
+export class TopbarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

CasinosManager/src/app/content/student/student.component.html

@@ -1,3 +1,28 @@
-<p>
-  student works!
-</p>
+<h1 class="h2">学生列表</h1>
+<div class="content-toolbar mb-2 mb-md-0">
+    <div class="btn-group mr-2">
+      <button type="button" class="btn btn-sm btn-outline-secondary">新建</button>
+      <button type="button" class="btn btn-sm btn-outline-secondary">导出</button>
+    </div>
+  </div>
+
+<div class="table-responsive">
+  <table  class="table table-bordered table-striped">
+      <thead>
+          <tr>
+            <th style="width:50px"> # </th>
+            <th> 姓名 </th>
+            <th> 年龄 </th>
+            <th> 性别 </th>
+          </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let student of students; let i = index">
+              <td>{{start + i + 1}}</td>
+              <td>{{student.name}}</td>
+              <td>{{student.age}}</td>
+              <td>{{student.sex}}</td>
+            </tr>
+          </tbody>
+  </table>
+</div>

CasinosManager/src/app/content/student/student.component.ts

@@ -6,6 +6,8 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./student.component.css']
 })
 export class StudentComponent implements OnInit {
+  
+  students: [] = [];
 
   constructor() { }
 

CasinosManager/src/index.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>CasinosManager</title>
@@ -8,7 +9,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
+
 <body>
-  <app-root></app-root>
+    <app-root></app-root>
 </body>
-</html>
+
+</html>

CasinosManager/src/styles.css

@@ -1 +1,17 @@
 /* You can add global styles to this file, and also import other style files */
+
+.content-toolbar {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+}
+
+.table-responsive {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}