SpringBoot+SpringSecurity+Angular6简单的登录控制权限控制Demo（二）

SpringBoot+SpringSecurity+Angular6简单的登录控制权限控制Demo（二）

接上一篇 https://blog.csdn.net/cepto/article/details/85331386
有了后端服务器，接下来就是编写我们的angular6前端项目了

1.angularJS 与 angular 的区别

angularJS是初代 angular是2代以后的称呼，他们的区别可以用两个不同的框架来形容了，所以新手同学一定要注意区别，很多东西不能通用。
PS.编写angular项目老是搜到angularJS的资源真是很难受。

2.项目初始化

我的开发环境是先安装nvm再用nvm安装node9再用npm安装angular6
有了环境后开始创建项目。
这里我的样式单选用了scss可以简化css编写且样式结构更清晰。

[zz@zz-pc security-front]$ ng new security-front --style=scss

然后安装jq和bootstrap

[zz@zz-pc security-front]$ npm i jquery bootstrap

安装好后需要再angular.json中配置一下才能生效

			"styles": [
              "src/styles.scss",
              "./node_modules/bootstrap/dist/css/bootstrap.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js"
            ]

接下来把全局的样式重置一下

styles.scss

/* You can add global styles to this file, and also import other style files */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   
  display: block;
}
body {
   
  line-height: 1;
}
ol, ul {
   
  list-style: none;
}
blockquote, q {
   
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   
  content: '';
  content: none;
}
table {
   
  border-collapse: collapse;
  border-spacing: 0;
}

这样我们的项目初始化工作就做好了。

3.页面设计

对应路由关系

4.一级路由，登录和index组件

首先添加index和login两个组件

[zz@zz-pc security-front]$ ng g c page/login
[zz@zz-pc security-front]$ ng g c page/index

然后添加路由模块

[zz@zz-pc security-front]$ ng g m app-routing --flat --module=app

flat表示不为路由新建单独的文件夹，–module=app表示自动注册到根模块中

app-routing.module.ts

import {
   NgModule} from '@angular/core';
import {
   CommonModule} from '@angular/common';
import {
   LoginComponent} from './page/login/login.component';
import {
   IndexComponent} from './page/index/index.component';
import {
   RouterModule, Routes} from "@angular/router";

const appRoutes: Routes =
    [
        {
   
            path: '',
            component: IndexComponent,            
        },
        {
   
            path: 'login',
            component: LoginComponent
        },
    ];

@NgModule({
   
    imports: [
        CommonModule,
        RouterModule.forRoot(appRoutes)
    ],
    exports: [RouterModule],<