来到src/app文件夹，并使用以下能力初始化登录组件： ``` panjiedeMac-Pro:web-app panjie$ cd src/app/ panjiedeMac-Pro:app panjie$ ng g c login CREATE src/app/login/login.component.sass (0 bytes) CREATE src/app/login/login.component.html (20 bytes) CREATE src/app/login/login.component.spec.ts (621 bytes) CREATE src/app/login/login.component.ts (266 bytes) UPDATE src/app/app.module.ts (1194 bytes) ``` bootstrap4提供的表单示例便是一个适用的登录界面： src/app/login/login.component.html ```html <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> ``` 接下来在使用格珊将其居中显示： ```html <div class="row justify-content-center"> <div class="col-4"> <form> ... </form> </div> </div> ``` 最后启用单元测试来查看最终的效果： src/app/login/login.component.spec.ts ```javascript fit('should create', () => { expect(component).toBeTruthy(); }); ```  基本的样式有了，继续修正V层的显示内容，把一些模板的文字改成适用于当前系统的： src/app/login/login.component.html ```html <div class="row justify-content-center"> <div class="col-4"> <form> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" aria-describedby="usernameHelp" placeholder="用户名"> <small id="usernameHelp" class="form-text text-muted">系统对您提交的用户信息严格保密</small> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password" placeholder="密码"> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> </div> ``` 最终效果：  # 参考文档 | 名称 | 链接 | 预计学习时长(分） | | --- | --- | --- | | 源码地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.1.1](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.1.1) | - | | form表单 | [https://getbootstrap.net/docs/components/forms/](https://getbootstrap.net/docs/components/forms/) | 1 |