基于Angular5+ZORRO+隐式SSM的个人博客开发-登陆页面[1]

前言：

已经一年多没写博客了，Android那块已经很久没碰了，博友的回复也都没有及时回复。这里说一声抱歉哈~~.

 

正文：

开发框架

1、Angular5.2.10

2、倚天快速开发平台

3、oracleDB

4、ZORRO佐罗-（基于Ant Design，企业级中后台产品的交互语言和视觉风格）

话不多说，登陆页面如下，点击放大

Angular5项目新建

Microsoft Windows [版本 10.0.17134.472]
(c) 2018 Microsoft Corporation。保留所有权利。

C:\Users\53242>d:

D:\>cd work

D:\work>cd ws-workspace

D:\work\ws-workspace>ng new any-app
CREATE any-app/angular.json (3557 bytes)
CREATE any-app/package.json (1313 bytes)
CREATE any-app/README.md (1023 bytes)
CREATE any-app/tsconfig.json (408 bytes)
CREATE any-app/tslint.json (2837 bytes)
CREATE any-app/.editorconfig (245 bytes)
CREATE any-app/.gitignore (503 bytes)
CREATE any-app/src/favicon.ico (5430 bytes)
CREATE any-app/src/index.html (293 bytes)
CREATE any-app/src/main.ts (373 bytes)
CREATE any-app/src/polyfills.ts (3194 bytes)
CREATE any-app/src/test.ts (642 bytes)
CREATE any-app/src/styles.css (80 bytes)
CREATE any-app/src/browserslist (388 bytes)
CREATE any-app/src/karma.conf.js (964 bytes)
CREATE any-app/src/tsconfig.app.json (166 bytes)
CREATE any-app/src/tsconfig.spec.json (256 bytes)
CREATE any-app/src/tslint.json (314 bytes)
CREATE any-app/src/assets/.gitkeep (0 bytes)
CREATE any-app/src/environments/environment.prod.ts (51 bytes)
CREATE any-app/src/environments/environment.ts (662 bytes)
CREATE any-app/src/app/app.module.ts (314 bytes)
CREATE any-app/src/app/app.component.html (1141 bytes)
CREATE any-app/src/app/app.component.spec.ts (981 bytes)
CREATE any-app/src/app/app.component.ts (211 bytes)
CREATE any-app/src/app/app.component.css (0 bytes)
CREATE any-app/e2e/protractor.conf.js (752 bytes)
CREATE any-app/e2e/tsconfig.e2e.json (213 bytes)
CREATE any-app/e2e/src/app.e2e-spec.ts (303 bytes)
CREATE any-app/e2e/src/app.po.ts (208 bytes)
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.

> node-sass@4.11.0 install D:\work\ws-workspace\any-app\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-57_binding.node
Download complete  ] - :
Binary saved to D:\work\ws-workspace\any-app\node_modules\node-sass\vendor\win32-x64-57\binding.node
Caching binary to C:\Users\53242\AppData\Roaming\npm-cache\node-sass\4.11.0\win32-x64-57_binding.node

> node-sass@4.11.0 postinstall D:\work\ws-workspace\any-app\node_modules\node-sass
> node scripts/build.js

Binary found at D:\work\ws-workspace\any-app\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1089 packages in 45.24s
warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/protractor.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.po.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/tsconfig.e2e.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/browserslist.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/karma.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/polyfills.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/styles.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/test.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/tsconfig.app.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/tsconfig.spec.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/tslint.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tslint.json.
The file will have its original line endings in your working directory
    Successfully initialized git.

引入ZORRO

D:\work\ws-workspace\any-app>npm install ng-zorro-antd --save --unsafe-perm
npm WARN deprecated @ant-design/icons-angular@2.0.0-beta.1: Release official 2.0.0
npm WARN ng-zorro-antd@7.0.0-rc.3 requires a peer of @angular/animations@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng-zorro-antd@7.0.0-rc.3 requires a peer of @angular/common@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng-zorro-antd@7.0.0-rc.3 requires a peer of @angular/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng-zorro-antd@7.0.0-rc.3 requires a peer of @angular/forms@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng-zorro-antd@7.0.0-rc.3 requires a peer of typescript@~3.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@7.2.0 requires a peer of @angular/core@>=7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@7.2.0 requires a peer of @angular/common@>=7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ant-design/icons-angular@2.0.0-beta.1 requires a peer of @angular/common@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ant-design/icons-angular@2.0.0-beta.1 requires a peer of @angular/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ant-design/icons-angular@2.0.0-beta.1 requires a peer of typescript@~3.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ ng-zorro-antd@7.0.0-rc.3
added 7 packages in 10.312s

顶层app.module.ts引入ZORRO以及要使用的组件

启动项目，webstorm或者vscode

ng server --port 4444

然后通过localhost:4444访问