AngularJS6+SpringBoot1.5.15前后端分离SPA博客系统实战《四》

最新推荐文章于 2021-12-11 10:57:48 发布

南山脚下小书虫

最新推荐文章于 2021-12-11 10:57:48 发布

阅读量674

点赞数 1

本文链接：https://blog.csdn.net/u012459871/article/details/86690319

版权

1.前后端交互实现后台管理员登录系统。

（1）.前端AngularJS6环境搭建。

参照第一篇博客的前端环境搭建部分，传送门。

（2）.前端项目结构整理，公用配置文件添加。

打开cmd，dos切换指定本前端项目硬盘目录（例如本次实例地址为：E:\AngularWorkspace\20181113\blog-web），切换到blog-web目录,在src/environments目录下的environment.ts文件配置公共的访问后端地址，配置如下：

依次使用ng generate module admin、ng generate module home命令添加admin及home模块，见名知意，admin模块用作处理管理员操作界面，home模块用作处理游客及注册用户有权限浏览界面；使用ng generate component admin/admin-login、ng generate component admin/admin-index分别添加管理员登录及管理员首页组件。依次使用ng generate service service/common、ng generate service service/admin添加公共service及管理员service（注：此处service类似于后端SSH项目分层结构的service层——业务逻辑层）。

在与service同及目录新建vmodel层，用作存储前端实体对象——对应后端VO实体。新建response.ts文件，用作接收后端自行封装的统一Json格式数据返回，response.ts文件内容如下、：

export class Response{
    code: string;
    msg: string;
    data: {};
}

admin.ts如下（同理adv.ts、article.ts、channel.ts、comment.ts、links.ts、user.ts就不一一赘述）：

export class Admin{
    id: number;
    username: string;
    nickName: string;
    password: string;
    loginNum: number;
    lastLoginIp: string;
    status: string;
    isDel: number;
    descritption: string;
}

在与service同及目录新建mock层，mock-menu.ts用作存储生成后端管理列表的菜单树，mock-select.ts用于生成后端条件查询下拉菜单数据。

import { AdminMenu } from '../vmodel/admin-menu';
export const ADMIN_MENUS: AdminMenu[] = [
    {"id": 11,"menuName": "控制台","opt":"index","url":"/admin/index","icon":"dashboard","sort":1,"module":"index","children":[
    {"id": 111,"menuName": "控制台","opt":"index","url":"/admin/index","icon":"dashboard","sort":1,"module":"index","children":[]},
    {"id": 112,"menuName": "用户管理","opt":"user","url":"/admin/user/list","icon":"user","sort":2,"module":"index","children":[]},
    {"id": 113,"menuName": "操作员管理","opt":"admin","url":"/admin/admin/list","icon":"smile","sort":3,"module":"index","children":[]},
    {"id": 114,"menuName": "分类管理","opt":"channel","url":"/admin/channel/list","icon":"bars","sort":4,"module":"index","children":[]},
    {"id": 115,"menuName": "广告管理","opt":"adv","url":"/admin/adv/list","icon":"notification","sort":5,"module":"index","children":[]},
    {"id": 115,"menuName": "友情链接管理","opt":"links","url":"/admin/links/list","icon":"link","sort":6,"module":"index","children":[]}
	]},{"id": 21,"menuName": "文章","opt":"article","url":"/admin/article/list","icon":"file","sort":2,"module":"article","children":[
    {"id": 211,"menuName": "文章管理","opt":"article","url":"/admin/article/list","icon":"file","sort":1,"module":"article","children":[]},
    {"id": 212,"menuName": "评论管理","opt":"comment","url":"/admin/comment/list","icon":"message","sort":2,"module":"article","children":[]}
	]},{"id": 31,"menuName": "报表","opt":"chart","url":"/admin/chart/list","icon":"area-chart","sort":3,"module":"chart","children":[
    {"id": 311,"menuName": "报表统计","opt":"chart","url":"/admin/chart/list","icon":"area-chart","sort":1,"module":"chart","children":[]}]}
];

export class Select{
    key: string;
    value: string;
}

export const ADV_TYPES: Select[] = [
    {key:'1',value:'PC端'},
    {key:'2',value:'APP端'}
];

export const ADV_POSITIONS: Select[] = [
    {key:'1',value:'首页大轮播'},
    {key:'2',value:'微信公众号'},
    {key:'3',value:'腰带轮播'},
    {key:'4',value:'安卓APP下载'},
    {key:'5',value:'苹果APP下载'}
];

export const STATUS_LIST: Select[] = [
    {key:'0',value:'禁用'},
    {key:'1',value:'启用'}
];

export const IS_BLANK_LIST: Select[] = [
    {key:'0',value:'当前窗口'},
    {key:'1',value:'新窗口'}
];

修改style.css统一如下：

/**
 * @Author: JustFresh
 * @Time: 2018-12-08 15:16
 * @Version: 1.0.0
 * @Desc: 整个AngularJS公共使用样式提取
 */
body{overflow-x: hidden;}
input,textarea,select{outline:none;}
.jf-container{width: 1180px;margin: 0 auto;}
.pull-left{float: left;}
.pull-right{float: right;}
.clearfix{clear: both;}
.jf-table{font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #e3e3e3; border-collapse: collapse;}
.jf-table th{border-width: 1px;padding: 8px;border-style: solid;border-color: #e3e3e3;background-color: #fafafa;}
.jf-table td{border-width: 1px; padding: 8px; border-style: solid; border-color: #e3e3e3; background-color: #ffffff;}
nz-content.body{padding:0 50px;}
nz-breadcrumb{margin:15px 0;}
.ant-layout-sider{background-color: #fff !important;}
.main{padding:24px 0; background: #fff;}
.main > .content{padding: 0 24px; min-height: 450px;}
.main .left-nav{width: 200px}
.main > .content .conditions form.horizontal .form-group{float: left;margin-right: 15px;}
.main .content .conditions form.horizontal .form-group .form-ipt,.main .content .conditions form.horizontal .form-group .form-select{height: 34px;font-size: 14px;color: rgba(0,0,0,.65);background-color: #fff;border: 1px solid #d9d9d9;border-radius: 4px;transition: all .3s;padding-left: 10px;}
.main .content .conditions form.horizontal .form-group a.btn{border-radius: 4px;background-color: #3b9bd8;border: 1px solid #3b9bd8;display: inline-block;padding: 0px 20px;height: 34px;text-align: center;line-height: 34px;color: #fff;}
.main .content .conditions form.horizontal .form-group a.btn:hover{background-color: #236a97;border: 1px solid #236a97;}
.main .content .datagrid{margin-top: 20px;}
.ant-table-bordered thead tr th{font-weight: bold;}
.main .content .datagrid .title{background-color: #f0f2f5;border: 1px solid #e8e8e8;padding: 15px;}
.main .content .datagrid .title h4{font-size: 20px;font-weight: bold;}
.main .content .datagrid .title .opts button{margin-right: 10px;}
.main .content .datagrid .title .opts button:last-child{margin-right: 0px;}
.main .content .datagrid tbody td button{margin-right: 8px;line-height: 1.499; display: inline-block; font-weight: 400; text-align: center; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px dashed #d9d9d9; white-space: nowrap; padding: 0 15px; font-size: 14px; border-radius: 4px; height: 32px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all .3s cubic-bezier(.645,.045,.355,1); position: relative; box-shadow: 0 2px 0 rgba(0,0,0,.015); color: rgba(0,0,0,.65); background-color: #fff;}
.main .content .datagrid tbody td button:last-child{margin-right: 0px;}
.main .content .datagrid tbody td button:hover{background-color: #666;border: 1px solid #666;color: #fff;}
.main .content .datagrid tbody td button.primary{border: 1px dashed #337ab7;color: #337ab7;}
.main .content .datagrid tbody td button.primary:hover{background-color: #2e6da4;border: 1px solid #2e6da4;color: #fff;}
.main .content .datagrid tbody td button.danger{border: 1px dashed #ac2925;color: #ac2925;}
.main .content .datagrid tbody td button.danger:hover{background-color: #ac2925;border: 1px solid #ac2925;color: #fff;}
.main .content .datagrid tbody td button.success{border: 1px dashed #5cb85c;color: #5cb85c;}
.main .content .datagrid tbody td button.success:hover{background-color: #4cae4c;border: 1px solid #4cae4c;color: #fff;}
.main .content .datagrid tbody td button.info{border: 1px dashed #5bc0de;color: #5bc0de;}
.main .content .datagrid tbody td button.info:hover{background-color: #46b8da;border: 1px solid #46b8da;color: #fff;}
.main .content .datagrid tbody td button.warning{border: 1px dashed #f0ad4e;color: #f0ad4e;}
.main .content .datagrid tbody td button.warning:hover{background-color: #eea236;border: 1px solid #eea236;color: #fff;}
.admin-form{}
.admin-form .form-group{margin-bottom: 15px;}
.admin-form .form-group .form-ipt{padding: 5px 10px;border: 1px solid #e3e3e3;height: 36px;line-height: 36px;}
.admin-form .form-group label{font-weight: 600;width: 85px;text-align: right;margin-right: 5px;display: inline-block;}
.admin-form .form-group .form-select{padding: 5px 10px;width: 200px;border: 1px solid #e3e3e3;height: 36px;line-height: 36px;}
.admin-form .form-group .form-textarea{padding: 10px;border: 1px solid #e3e3e3;}
.admin-form .form-group button{margin-right: 10px;}
.article-detail .body img{max-width: 1180px;}

执行ng add ng-zorro-antd命令引入NG-ZORRO插件，执行完毕后在app.module.ts文件中分别引入AppRoutingModule模块、HomeModule和AdminModule

（3）.管理员模块登录组件及首页组件添加。

在src/app目录下新建app-routing.module.ts文件，用作整个SPA项目的路由配置，配置如下：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminLoginComponent } from './admin/admin-login/admin-login.component';
import { AdminIndexComponent } from './admin/admin-index/admin-index.component';
const routes: Routes = [
    /**
     * 添加路由URL及对应组件配置
     */
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'admin',redirectTo: '/admin/login', pathMatch: 'full' },
    { path: 'admin/login', component: AdminLoginComponent },
    { path: 'admin/index', component: AdminIndexComponent },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

修改src/app/app.component.html内容为<router-outlet></router-outlet>，用作是首页加载路由操作生效。dos下执行ng serve --open启动项目浏览器分别输入http://localhost:4200/admin/login、http://localhost:4200/admin/index，若出现下面截图效果，则代表管理员登录组件和管理员首页组件配置成功。

分别修改admin-login.component.css、admin-login.component.html、admin-login.component.ts如下：

.login-bg{width: 100%;height: 100%;background:url(../../../assets/images/bg.jpg) no-repeat center center;width:100%;position: relative;}
.login-bg .login-block{position: absolute;z-index: 2;width: 300px;height: 240px;background-color: #fff;
top: 50%;left: 50%;margin-top: -120px;margin-left: -150px;box-shadow: 0px 0px 20px #333;
border-radius: 3px 3px 0px 0px;}
.login-bg .login-block h4{font-size: 16px;color: #666;text-align: center;height: 44px;line-height: 44px;border-bottom: 1px solid #f0f0f0;}
.login-bg .login-block  .login-form{padding: 20px 30px;}
.login-bg .login-block .form-group{margin-bottom: 15px;}
.login-bg .login-block .form-group label{display: inline-block;width: 32px;
height: 32px;background-color: #3b9bd8;line-height: 32px;text-align: center;}
.login-bg .login-block .form-group label i{color: #fff;}
.login-bg .login-block .form-group input{border: 1px solid #f0f0f0;height: 30px;width: 200px;
padding-left: 8px;line-height: 30px;}
.login-bg .login-block .form-group .login-form-button{width: 232px !important;}

<section class="login-bg">
    <div class="login-block">
        <h4><i nz-icon type="user"></i> 管理员登录</h4>
        <form class="login-form">
            <div class="form-group">
                <label><i nz-icon type="user"></i></label>
                <input type="text" name="username" [(ngModel)]="admin.username" placeholder="请输入登录用户名" />
            </div>
            <div class="form-group">
                <label><i nz-icon type="lock"></i></label>
                <input type="password" name="password" [(ngModel)]="admin.password" placeholder="请输入登录密码" />
            </div>
            <div class="form-btns">
                <button nz-button nzBlock [nzType]="'primary'" (click)="login(admin)">登 录</button>
            </div>
        </form>
    </div>
</section>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute,Router } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { NzModalService } from 'ng-zorro-antd';
import { AdminService } from '../../service/admin.service';
@Component({
  selector: 'app-admin-login',
  templateUrl: './admin-login.component.html',
  styleUrls: ['./admin-login.component.css']
})
export class AdminLoginComponent implements OnInit {

    admin = {username: "",password: ""};

    constructor(private router: Router,
        private modalService: NzModalService,
        private adminService: AdminService,
        private titleService: Title) { }

    ngOnInit() {
        this.titleService.setTitle('管理员登录-秀逗啊');
    }
	
    /**
     * 登录
     */
    login(admin: any){
        if(admin == null){
            this.modalService.error({nzTitle: '请输入登录用户名！'});
            return;
        }
        if(admin.username == null || admin.username == ""){
            this.modalService.error({nzTitle: '请输入登录用户名！'});
            return;
        }
        if(admin.password == null || admin.password == ""){
            this.modalService.error({nzTitle: '请输入登录密码！'});
            return;
        }
        this.adminService.login(admin.username,admin.password).subscribe(response => {
            if(response != null && JSON.stringify(response) != "{}"){
                if(response.code == "200"){
                    //处理成功
                    sessionStorage.setItem('loginAdmin',response.data);
                    //模拟登录成功，跳转到首页
                    this.router.navigateByUrl('admin/index?module=index');
                }else{
                    this.modalService.error({nzTitle: response.msg});
                }
            }else{
                this.modalService.error({nzTitle: '登录失败，请输入正确的用户名和密码！'});
            }
        });
    }
}