2 |
6 |
7 |
9 |
10 |
12 |
14 |
15 | supervisor_account
16 | {{userData['nick_name']}}
17 |
18 |
19 |
20 | email
21 | {{userData['user_email']}}
22 |
23 |
24 |
25 | location_on
26 | {{userData['user_addr']}}
27 |
28 |
29 |
30 |
31 |
32 | 
36 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/src/app/aboutus/aboutus.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {BlogService} from '../service/blog.service';
3 | import {Router} from '@angular/router';
4 |
5 | @Component({
6 | selector: 'app-aboutus',
7 | templateUrl: './aboutus.component.html',
8 | styleUrls: ['./aboutus.component.css']
9 | })
10 | export class AboutusComponent implements OnInit {
11 | userData = null;
12 | userLinks = [];
13 |
14 | constructor(private bs: BlogService, private router: Router) {
15 | }
16 |
17 | ngOnInit() {
18 | if (this.bs.isInit()) {
19 | this.bs.getUserInfo(value => {
20 | this.userData = value['data'];
21 | });
22 | this.bs.getUserLinks(value => {
23 | this.userLinks = value['data'];
24 | });
25 | } else {
26 | this.router.navigate(['/']);
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/aboutus/aboutus.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {CommonModule} from '@angular/common';
3 | import {AboutusComponent} from './aboutus.component';
4 | import {AboutusRoutingModule} from '../routing/aboutus.routing.module';
5 | import {MatCardModule, MatDividerModule, MatIconModule, MatListModule} from '@angular/material';
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | AboutusRoutingModule,
11 | MatIconModule,
12 | MatListModule,
13 | MatDividerModule,
14 | MatCardModule,
15 | ],
16 | declarations: [AboutusComponent]
17 | })
18 | // 关于我
19 | export class AboutusModule {
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | /*顶部导航栏 容器*/
2 | app-nav-bar {
3 | position: fixed;
4 | top: 0;
5 | left: 0;
6 | right: 0;
7 | z-index: 2;
8 | }
9 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 | 关于我
4 |个人简介
8 |{{userData['user_desc']}}
11 |友情链接
33 |{{item['link_name']}}
37 | 38 |
2 |
20 |
24 |
25 |
--------------------------------------------------------------------------------
/src/app/artdetail/artdetail.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | AfterContentChecked,
3 | AfterViewChecked,
4 | AfterViewInit,
5 | ChangeDetectorRef,
6 | Component, DoCheck, Input, KeyValueDiffers,
7 | OnChanges,
8 | OnInit,
9 | SimpleChanges
10 | } from '@angular/core';
11 | import {BlogService} from '../service/blog.service';
12 | import {ActivatedRoute, Router} from '@angular/router';
13 | import * as $ from 'jquery';
14 | import {HighlightService} from '../service/highlight.service';
15 |
16 | @Component({
17 | selector: 'app-artdetail',
18 | templateUrl: './artdetail.component.html',
19 | styleUrls: ['./artdetail.component.css']
20 | })
21 | export class ArtdetailComponent implements OnInit {
22 | contentData = null;
23 | aid = -1;
24 |
25 | constructor(private route: ActivatedRoute, private bs: BlogService, private router: Router, private hs: HighlightService) {
26 | this.route.params.subscribe(data => {
27 | this.aid = data['id'];
28 |
29 | if (this.aid === undefined) {
30 | this.aid = parseInt(localStorage.getItem('hot_id'), 10);
31 | }
32 | if ((this.aid !== undefined || this.aid !== -1) && this.bs.isInit()) {
33 | this.bs.getArticleByAid(this.aid + '', value => {
34 | this.contentData = value['data'];
35 | this.hs.contentSub.next(this.contentData);
36 | });
37 | } else {
38 | setTimeout(() => {
39 | if (isNaN(this.aid)) {
40 | return;
41 | }
42 | this.bs.getArticleByAid(this.aid + '', value => {
43 | this.contentData = value['data'];
44 | this.hs.contentSub.next(this.contentData);
45 | });
46 | }, 300);
47 | }
48 | });
49 | }
50 |
51 | ngOnInit() {
52 | this.hs.contentSub.subscribe(data => {
53 | if (data != null) {
54 | setTimeout(() => {
55 | $('pre').each(function (i, block) {
56 | hljs.highlightBlock(block);
57 | });
58 | }, 100);
59 | }
60 | });
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/app/artdetail/artdetail.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {CommonModule} from '@angular/common';
3 | import {ArtdetailComponent} from './artdetail.component';
4 | import {MatButtonModule, MatIconModule} from '@angular/material';
5 | import {SafehtmlPipe} from '../pipe/safehtml.pipe';
6 | import {HighlightService} from '../service/highlight.service';
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | MatIconModule,
12 | MatButtonModule
13 | ],
14 | providers: [HighlightService],
15 | declarations: [ArtdetailComponent, SafehtmlPipe]
16 | })
17 | // 文章详情
18 | export class ArtdetailModule {
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/artlist/artlist.component.css:
--------------------------------------------------------------------------------
1 |
2 | .card-list-item {
3 | margin: 20px;
4 | vertical-align: top;
5 | padding: 10px;
6 | }
7 |
8 | .article-type {
9 | margin-right: 8px;
10 | margin-top: 0;
11 | vertical-align: 2px;
12 | display: inline-block;
13 | width: 26px;
14 | height: 26px;
15 | line-height: 26px;
16 | text-align: center;
17 | font-size: 12px;
18 | border-radius: 50%;
19 | }
20 |
21 | .article-title {
22 | color: black;
23 | font-size: 16px;
24 | font-weight: 500;
25 | }
26 |
27 | .article-subtitle {
28 | max-width: 83vw;
29 | margin: 0 !important;
30 | color: #999 !important;
31 | padding-top: 5px;
32 | font-size: 13px;
33 | line-height: 20px;
34 | overflow: hidden;
35 | text-overflow: ellipsis;
36 | display: -webkit-box;
37 | -webkit-line-clamp: 3;
38 | -webkit-box-orient: vertical;
39 | }
40 |
41 | .article-title:hover {
42 | color: red;
43 | }
44 |
45 | .type-2 {
46 | color: #86ca5e;
47 | border: 1px solid #e7f4df;
48 | }
49 |
50 | .type-1 {
51 | color: #ca0c16;
52 | border: 1px solid #f4ced0;
53 | }
54 |
55 | .card-list-item a {
56 | width: 54vw;
57 | display: inline-block;
58 | text-decoration: none;
59 | cursor: pointer;
60 | color: #333;
61 | box-sizing: inherit;
62 | word-break: break-all;
63 | overflow: hidden;
64 | text-overflow: ellipsis;
65 | white-space: nowrap;
66 | }
67 |
68 | .card-list-item-container {
69 | display: flex;
70 | flex-direction: row;
71 | }
72 |
73 | .card-list-item-container img {
74 | width: 125px;
75 | height: 100px;
76 | vertical-align: middle;
77 | margin: auto 0;
78 | }
79 |
80 | .card-list-item-container div {
81 | flex: 1;
82 | box-sizing: content-box;
83 | margin-left: 8px;
84 | }
85 |
86 | .article-bottom {
87 | margin: 0px !important;
88 | color: #b4b4b4;
89 | font-size: 13px;
90 | padding-top: 5px;
91 | }
92 |
93 | .article-bottom a {
94 | display: inline;
95 | color: #b4b4b4;
96 | cursor: pointer;
97 | }
98 |
99 | .article-bottom a:hover {
100 | transition: .1s ease-in;
101 | -webkit-transition: .1s ease-in;
102 | color: #666;
103 | }
104 |
105 | .views-count {
106 | margin-left: 10px;
107 | }
108 |
109 | .views-count mat-icon {
110 | vertical-align: middle;
111 | transform: scale(0.7);
112 | }
113 |
114 | .mb-3 {
115 | margin-bottom: 2px;
116 | }
117 |
118 | .sort_container {
119 | background: #fff;
120 | margin: 20px;
121 | font-size: 14px;
122 | padding-left: 10px;
123 | }
124 |
125 | .sort-normal, mat-form-field {
126 | color: #333333;
127 | }
128 |
129 | .sort-selected {
130 | color: red;
131 | }
132 |
133 | .sort_container a:hover {
134 | color: red;
135 | }
136 |
137 | .search-btn {
138 | float: right;
139 | }
140 |
141 | .sort_container-center {
142 | text-align: center;
143 | box-sizing: border-box;
144 | }
145 |
146 | @media (max-width: 720px) {
147 | .card-list-item-container img {
148 | display: none;
149 | }
150 |
151 | .card-list-item-container div {
152 | margin-left: 0px;
153 | }
154 |
155 | .card-list-item a {
156 | width: 83vw;
157 | }
158 | .sort_container .mat-button{
159 | min-width: 44px ;
160 | padding: 0 8px ;
161 | }
162 | .search-btn {
163 | min-width: 24px;
164 | padding: 0px !important;
165 | }
166 | }
167 |
168 |
--------------------------------------------------------------------------------
/src/app/artlist/artlist.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 | {{contentData['origin'] == 1?"原":"转"}}
6 | {{contentData['title']}}
7 |
19 |
8 | 发表时间: {{contentData['create_time'] | date: 'yyyy-MM-dd HH:mm:ss'}}
9 |
10 |
11 |
20 |
21 |
22 |
23 |
3 |
4 |
5 |
6 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
45 |
46 |
60 |
--------------------------------------------------------------------------------
/src/app/artlist/artlist.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, NgZone, OnInit} from '@angular/core';
2 | import {ActivatedRoute, Router} from '@angular/router';
3 | import {BlogService} from '../service/blog.service';
4 |
5 | @Component({
6 | selector: 'app-artlist',
7 | templateUrl: './artlist.component.html',
8 | styleUrls: ['./artlist.component.css']
9 | })
10 | // 文章列表
11 | export class ArtlistComponent implements OnInit {
12 | userArticles = [];
13 | cid = -1;
14 | ds = true;
15 | cs = false;
16 | vs = false;
17 | totalCount = -1;
18 | pageIndex = 0;
19 | defaultS = '';
20 |
21 | constructor(private router: Router, private route: ActivatedRoute, private bs: BlogService) {
22 | this.route.params.subscribe(data => {
23 | this.cid = data['id'];
24 | if (bs.isInit()) {
25 | this.getArticlesByCid();
26 | } else {
27 | setTimeout(() => {
28 | this.getArticlesByCid();
29 | }, 300);
30 | }
31 | });
32 | }
33 |
34 | ngOnInit() {
35 | }
36 |
37 | getArticlesByCid() {
38 | if (this.cid === undefined) {
39 | // 获取全部
40 | this.bs.getAllArticles(this.pageIndex + '', this.defaultS, value => {
41 | this.userArticles = value['data']['articles'];
42 | this.totalCount = value['data']['count'];
43 | this.ds = true;
44 | this.cs = false;
45 | this.vs = false;
46 | });
47 | } else {
48 | this.bs.getAllArticlesByCid(this.cid + '', this.pageIndex + '', this.defaultS, value => {
49 | this.userArticles = value['data']['articles'];
50 | this.totalCount = value['data']['count'];
51 | this.ds = true;
52 | this.cs = false;
53 | this.vs = false;
54 | });
55 | }
56 | }
57 |
58 | defaultSort() {
59 | if (this.defaultS === '') {
60 | return;
61 | }
62 | this.defaultS = '';
63 | if (this.cid === undefined) {
64 | // 获取全部
65 | this.bs.getAllArticles(this.pageIndex + '', this.defaultS, value => {
66 | this.userArticles = value['data']['articles'];
67 | this.ds = true;
68 | this.cs = false;
69 | this.vs = false;
70 | });
71 | } else {
72 | this.bs.getAllArticlesByCid(this.cid + '', this.pageIndex + '', this.defaultS, value => {
73 | this.userArticles = value['data']['articles'];
74 | this.ds = true;
75 | this.cs = false;
76 | this.vs = false;
77 | });
78 | }
79 | }
80 |
81 | sortByCreate_time() {
82 | if (this.defaultS === 'create_time,desc') {
83 | return;
84 | }
85 | this.defaultS = 'create_time,desc';
86 | if (this.cid === undefined) {
87 | this.bs.getAllArticles(this.pageIndex + '', this.defaultS, value => {
88 | this.userArticles = value['data']['articles'];
89 | this.ds = false;
90 | this.cs = true;
91 | this.vs = false;
92 | });
93 | } else {
94 | this.bs.getAllArticlesByCid(this.cid + '', this.pageIndex + '', this.defaultS, value => {
95 | this.userArticles = value['data']['articles'];
96 | this.ds = false;
97 | this.cs = true;
98 | this.vs = false;
99 | });
100 | }
101 | }
102 |
103 | sortByViews() {
104 | if (this.defaultS === 'views,desc') {
105 | return;
106 | }
107 | this.defaultS = 'views,desc';
108 | if (this.cid === undefined) {
109 | this.bs.getAllArticles(this.pageIndex + '', this.defaultS, value => {
110 | this.userArticles = value['data']['articles'];
111 | this.ds = false;
112 | this.cs = false;
113 | this.vs = true;
114 | });
115 | } else {
116 | this.bs.getAllArticlesByCid(this.cid + '', this.pageIndex + '', this.defaultS, value => {
117 | this.userArticles = value['data']['articles'];
118 | this.ds = false;
119 | this.cs = false;
120 | this.vs = true;
121 | });
122 | }
123 | }
124 |
125 | change(e: any) {
126 | this.pageIndex = e['pageIndex'];
127 | if (this.ds) {
128 | this.defaultSort();
129 | } else if (this.cs) {
130 | this.sortByCreate_time();
131 | } else if (this.vs) {
132 | this.sortByViews();
133 | }
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/src/app/artlist/artlist.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {CommonModule} from '@angular/common';
3 | import {ArtlistComponent} from './artlist.component';
4 | import {MatButtonModule, MatCardModule, MatIconModule, MatInputModule, MatMenuModule, MatPaginatorModule} from '@angular/material';
5 | import {RouterModule} from '@angular/router';
6 | import {CustHtmlPipe} from '../pipe/html.pipe';
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | MatCardModule,
12 | MatIconModule,
13 | MatButtonModule,
14 | MatMenuModule,
15 | MatInputModule,
16 | RouterModule,
17 | MatPaginatorModule,
18 | ],
19 | declarations: [ArtlistComponent, CustHtmlPipe]
20 | })
21 | export class ArtlistModule {
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/nav-bar/nav-bar.component.css:
--------------------------------------------------------------------------------
1 |
2 | /*头部内容*/
3 | .app-navbar-header {
4 | display: flex;
5 | flex-wrap: wrap;
6 | align-items: center;
7 | padding: 8px 16px;
8 | }
9 |
10 | .app-navbar-link-small, app-navbar-link {
11 | display: none;
12 | }
13 |
14 | .app-navbar, .app-navbar-header, .app-navbar-link, .app-navbar-link-small {
15 | background: #3f51b5;
16 | }
17 |
18 | /*适配移动端*/
19 | @media (max-width: 720px) {
20 | .app-navbar-link {
21 | display: flex;
22 | }
23 | .app-navbar-link-small {
24 | display: block;
25 | display: flex;
26 | }
27 |
28 | .app-navbar-link-small-hide {
29 | display: none;
30 | }
31 |
32 | .app-navbar-git_label-hide {
33 | display: none;
34 | }
35 | .app-blog{
36 | top: 92px;
37 | }
38 | }
39 | /* 链接标签 样式 */
40 | .app-navbar-link a{
41 | color: white;
42 | flex: 1;
43 | -webkit-box-flex: 1;
44 | -ms-flex-positive: 1;
45 | flex-grow: 1;
46 | }
47 | /*头像 样式*/
48 | .app-navbar-avator {
49 | height: 40px;
50 | margin: 0 4px 3px 0;
51 | vertical-align: middle;
52 | border-radius: 40px;
53 | }
54 |
55 | .app-navbar-header a {
56 | color: white;
57 | }
58 |
59 | /*占位容器样式*/
60 | .flex-spacer {
61 | flex: 1;
62 | -webkit-box-flex: 1;
63 | -ms-flex-positive: 1;
64 | flex-grow: 1;
65 | }
66 | /*git 图标样式*/
67 | .app-navbar-git_icon {
68 | height: 26px;
69 | margin: 0 4px 3px 0;
70 | vertical-align: middle;
71 | }
72 |
--------------------------------------------------------------------------------
/src/app/nav-bar/nav-bar.component.html:
--------------------------------------------------------------------------------
1 |
26 |
38 |
--------------------------------------------------------------------------------
/src/app/nav-bar/nav-bar.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {BlogService} from '../service/blog.service';
3 | import {Title} from '@angular/platform-browser';
4 |
5 | @Component({
6 | selector: 'app-nav-bar',
7 | templateUrl: './nav-bar.component.html',
8 | styleUrls: ['./nav-bar.component.css'],
9 | })
10 | // 顶部导航栏
11 | export class NavBarComponent implements OnInit {
12 | title = '';
13 | avator = '';
14 |
15 | constructor(private bs: BlogService, private ts: Title) {
16 | bs.initBlog(value => {
17 | localStorage.setItem('user_id', value['data']['user_id']);
18 | localStorage.setItem('nick_name', value['data']['nick_name']);
19 | localStorage.setItem('user_avator', value['data']['user_avator']);
20 | this.ts.setTitle(value['data']['nick_name'] + '的博客');
21 | this.title = localStorage.getItem('nick_name') + '的博客';
22 | this.avator = localStorage.getItem('user_avator');
23 | });
24 | }
25 |
26 | ngOnInit() {
27 | }
28 |
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/nav-bar/nav-bar.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {CommonModule} from '@angular/common';
3 | import {MatButtonModule} from '@angular/material';
4 | import {NavBarComponent} from './nav-bar.component';
5 | import {RouterModule} from '@angular/router';
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | MatButtonModule,
11 | RouterModule
12 | ],
13 | declarations: [NavBarComponent],
14 | exports: [NavBarComponent]
15 | })
16 | export class NavBarModule {
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/pipe/html.pipe.ts:
--------------------------------------------------------------------------------
1 | import {Pipe, PipeTransform} from '@angular/core';
2 | import {escapeHtml} from '@angular/platform-browser/src/browser/transfer_state';
3 |
4 | @Pipe({
5 | name: 'cust_html'
6 | })
7 | // 格式化html 去掉标签, 用于显示文章详情 简易title
8 | export class CustHtmlPipe implements PipeTransform {
9 |
10 | transform(value: any, args?: any): any {
11 | return this.reformNoticeContent(value);
12 | }
13 |
14 | reformNoticeContent(content): string {
15 |
16 | content = content.split('');
17 | let tagBoolean = false;
18 | content.forEach((c, index) => {
19 | if ('<' === c) {
20 | tagBoolean = true;
21 | } else if ('>' === c) {
22 | content[index] = '';
23 | tagBoolean = false;
24 | // continue; 如果是JavaScript可以添加这句代码，angular4不行。
25 | }
26 | if (tagBoolean) {
27 | content[index] = '';
28 | }
29 | });
30 | content = content.join('');
31 | return content;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/pipe/safehtml.pipe.ts:
--------------------------------------------------------------------------------
1 | import {Pipe, PipeTransform} from '@angular/core';
2 | import {DomSanitizer} from '@angular/platform-browser';
3 |
4 | @Pipe({
5 | name: 'safehtml'
6 | })
7 | // 显示html 带样式
8 | export class SafehtmlPipe implements PipeTransform {
9 |
10 | constructor(private domSanitizer: DomSanitizer) {
11 |
12 | }
13 |
14 | transform(html: string, args: any[]): any {
15 | return this.domSanitizer.bypassSecurityTrustHtml(html);
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/recommend/recommend.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lyw1995/Angular5-Blog-Front/6a8a722a4895f317eeff698389c15b49e614fb5e/src/app/recommend/recommend.component.css
--------------------------------------------------------------------------------
/src/app/recommend/recommend.component.html:
--------------------------------------------------------------------------------
1 |
24 | 
25 |
44 |
25 |
26 |
28 | {{item.origin == 1?"原":"转"}}
29 | {{item.title}}
30 |
43 | 31 | {{item['content'] | cust_html}} 32 |
33 |
34 | {{item['create_time'] | date: 'yyyy-MM-dd HH:mm:ss'}}
35 |
36 |
47 |
59 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | 2 | recommend works!aaa 3 |
4 | -------------------------------------------------------------------------------- /src/app/recommend/recommend.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-recommend', 5 | templateUrl: './recommend.component.html', 6 | styleUrls: ['./recommend.component.css'] 7 | }) 8 | // 热文推荐 9 | export class RecommendComponent implements OnInit { 10 | 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/app/recommend/recommend.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RecommendComponent } from './recommend.component'; 4 | import {RecommendRoutingModule} from '../routing/recommend.routing.module'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | CommonModule, 9 | RecommendRoutingModule 10 | ], 11 | declarations: [RecommendComponent] 12 | }) 13 | export class RecommendModule { } 14 | -------------------------------------------------------------------------------- /src/app/routing/aboutus.routing.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {RouterModule, Routes} from '@angular/router'; 3 | import {AboutusComponent} from '../aboutus/aboutus.component'; 4 | 5 | const routes: Routes = [ 6 | { 7 | path: '', component: AboutusComponent 8 | } 9 | ]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | // 关于我 路由配置 16 | export class AboutusRoutingModule { 17 | } 18 | -------------------------------------------------------------------------------- /src/app/routing/app.routing.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {RouterModule, Routes} from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { 6 | path: '', 7 | redirectTo: '/article', 8 | pathMatch: 'full' 9 | }, 10 | { 11 | path: 'article', 12 | loadChildren: 'app/side-nav/side-nav.module#SideNavModule' 13 | }, 14 | { 15 | path: 'recommend', 16 | loadChildren: 'app/side-nav/side-nav.module#SideNavModule', 17 | }, 18 | { 19 | path: 'about', 20 | loadChildren: 'app/aboutus/aboutus.module#AboutusModule' 21 | }, { 22 | path: '**', 23 | redirectTo: '/article' 24 | } 25 | ]; 26 | 27 | @NgModule({ 28 | imports: [RouterModule.forRoot(routes)], 29 | exports: [RouterModule] 30 | }) 31 | // app 路由配置 32 | export class AppRoutingModule { 33 | } 34 | -------------------------------------------------------------------------------- /src/app/routing/nav.routing.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {RouterModule, Routes} from '@angular/router'; 3 | import {ArtlistComponent} from '../artlist/artlist.component'; 4 | import {ArtdetailComponent} from '../artdetail/artdetail.component'; 5 | import {SideNavComponent} from '../side-nav/side-nav.component'; 6 | 7 | const routes: Routes = [ 8 | { 9 | path: '', component: SideNavComponent, 10 | children: [ 11 | { 12 | path: '', 13 | component: ArtlistComponent 14 | }, 15 | { 16 | path: 'category/:id', 17 | component: ArtlistComponent 18 | }, 19 | { 20 | path: 'detail/:id', 21 | component: ArtdetailComponent 22 | }, 23 | { 24 | path: 'detail', 25 | component: ArtdetailComponent 26 | } 27 | ] 28 | } 29 | ]; 30 | 31 | @NgModule({ 32 | imports: [RouterModule.forChild(routes)], 33 | exports: [RouterModule] 34 | }) 35 | // 侧滑菜单路由配置 36 | export class NavRoutingModule { 37 | } 38 | -------------------------------------------------------------------------------- /src/app/routing/recommend.routing.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {RouterModule, Routes} from '@angular/router'; 3 | import {RecommendComponent} from '../recommend/recommend.component'; 4 | 5 | const routes: Routes = [ 6 | { 7 | path: '', component: RecommendComponent 8 | } 9 | ]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | // 热文推荐路由配置 16 | export class RecommendRoutingModule { 17 | } 18 | -------------------------------------------------------------------------------- /src/app/service/base.service.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from '@angular/core'; 2 | import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http'; 3 | 4 | // 基类服务, 接口sign. 统一get请求 5 | @Injectable() 6 | export class BaseService { 7 | constructor(protected http: HttpClient) { 8 | } 9 | 10 | // 签名sign 11 | sign(signValue: string): HttpHeaders { 12 | return new HttpHeaders({ 13 | 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8', 14 | 'Sign': signValue 15 | }); 16 | } 17 | 18 | // 统一Get 请求 响应返回 19 | get(url: string, singValue: string, body: { 20 | [param: string]: string | string[]; 21 | }, next?: (value: any) => void, error?: (error: any) => void, complete?: () => void) { 22 | const headers = this.sign(singValue); 23 | return this.http.get(url, { 24 | headers: headers, params: new HttpParams({ 25 | fromObject: body 26 | }), 27 | }).subscribe( 28 | next, error, complete 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/app/service/blog.service.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from '@angular/core'; 2 | import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http'; 3 | import {BaseService} from './base.service'; 4 | import {environment} from '../../environments/environment'; 5 | 6 | const baseUrl = environment.baseUrl; 7 | const v1 = '/api/v1'; 8 | const userUrl = v1 + '/users'; 9 | const categoryUrl = '/categorys'; 10 | const articleUrl = '/articles'; 11 | const linkUrl = '/links'; 12 | const secertKey = 'UQPdFMLjszp35gpj'; 13 | import {Md5} from 'ts-md5'; 14 | // blog 服务, 提供整个前端接口调用 15 | @Injectable() 16 | export class BlogService extends BaseService { 17 | initBlog(next?: (value: any) => void, error?: (error: any) => void) { 18 | const signValue: string = Md5.hashStr(userUrl + secertKey).toString(); 19 | this.get(baseUrl + userUrl, signValue, {}, next, error); 20 | } 21 | 22 | isInit(): Boolean { 23 | const user_id = localStorage.getItem('user_id'); 24 | if (user_id === null || user_id === undefined) { 25 | return false; 26 | } 27 | return true; 28 | } 29 | 30 | getUserInfo(next?: (value: any) => void, error?: (error: any) => void) { 31 | const url = userUrl + '/' + localStorage.getItem('user_id'); 32 | const signValue: string = Md5.hashStr(url + secertKey).toString(); 33 | this.get(baseUrl + url, signValue, {}, next, error); 34 | } 35 | 36 | getUserLinks(next?: (value: any) => void, error?: (error: any) => void) { 37 | const url = userUrl + '/' + localStorage.getItem('user_id') + linkUrl; 38 | const signValue: string = Md5.hashStr(url + secertKey).toString(); 39 | this.get(baseUrl + url, signValue, {}, next, error); 40 | } 41 | 42 | getCategoryByUserId(next?: (value: any) => void, error?: (error: any) => void) { 43 | const url = userUrl + '/' + localStorage.getItem('user_id') + categoryUrl; 44 | const signValue: string = Md5.hashStr(url + secertKey).toString(); 45 | this.get(baseUrl + url, signValue, {}, next, error); 46 | } 47 | 48 | getAllArticles(page: string, sort: string, next?: (value: any) => void, error?: (error: any) => void) { 49 | let url = userUrl + '/' + localStorage.getItem('user_id') + articleUrl; 50 | const signValue: string = Md5.hashStr(url + secertKey).toString(); 51 | url += '?page=' + page + '&published=true&sort=' + sort; 52 | this.get(baseUrl + url, signValue, {}, next, error); 53 | } 54 | 55 | getArticleByAid(aid: string, next?: (value: any) => void, error?: (error: any) => void) { 56 | const url = userUrl + '/' + localStorage.getItem('user_id') + articleUrl + '/' + aid; 57 | const signValue: string = Md5.hashStr(url + secertKey).toString(); 58 | this.get(baseUrl + url, signValue, {}, next, error); 59 | } 60 | 61 | getHotAndNewArticles(next?: (value: any) => void, error?: (error: any) => void) { 62 | const user_id = localStorage.getItem('user_id'); 63 | const url = userUrl + '/' + user_id + '/other'; 64 | const signValue: string = Md5.hashStr(url + secertKey).toString(); 65 | this.get(baseUrl + url, signValue, {}, next, error); 66 | } 67 | 68 | getAllArticlesByCid(cid: string, page: string, sort: string, next?: (value: any) => void, error?: (error: any) => void) { 69 | let url = userUrl + '/' + localStorage.getItem('user_id') + categoryUrl + '/' + cid + articleUrl; 70 | const signValue: string = Md5.hashStr(url + secertKey).toString(); 71 | url += '?page=' + page + '&sort=' + sort; 72 | this.get(baseUrl + url, signValue, {}, next, error); 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/app/service/highlight.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 3 | 4 | // 文章详情 代码高亮 5 | @Injectable() 6 | export class HighlightService { 7 | contentSub: BehaviorSubject
2 |
55 |
--------------------------------------------------------------------------------
/src/app/side-nav-drawer/side-nav-drawer.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, EventEmitter, OnInit, Output} from '@angular/core';
2 | import {ActivatedRoute, Router} from '@angular/router';
3 | import {SidenavService} from '../service/sidenav.service';
4 | import {BlogService} from '../service/blog.service';
5 |
6 | @Component({
7 | selector: 'app-side-nav-drawer',
8 | templateUrl: './side-nav-drawer.component.html',
9 | styleUrls: ['./side-nav-drawer.component.css'],
10 | })
11 | // 侧滑组件
12 | export class SideNavDrawerComponent implements OnInit {
13 | isShowProfile: Boolean;
14 | profileData = null;
15 | howAndNewArticles = null;
16 | @Output() titleEmitter = new EventEmitter
3 |
4 |
7 | 文章
8 | 阅读
9 | 访客
10 |
11 |
12 | {{profileData['articles_count']}}
13 | {{profileData['total_pv']}}
14 | {{profileData['total_ip_count']}}
15 |
16 |
17 |
18 |
25 |
26 |
27 |
34 |
35 |
36 |
44 |
45 |
53 |
54 | 个人资料
5 |{{profileData['user_desc']}}
6 |{{profileData['category_list'][0]['label']}}
19 |-
20 |
- 21 | {{item['cname']}}{{item['size']}}篇 22 | 23 |
{{profileData['category_list'][1]['label']}}
28 |-
29 |
- 30 | {{item['cname']}}{{item['size']}}篇 31 | 32 |
最新文章
37 |-
38 |
-
39 | {{item['title']}}
40 |
发表时间: {{item['create_time'] | date: 'yyyy-MM-dd HH:mm:ss'}}
41 |
42 |
热门文章
46 |-
47 |
-
48 | {{item['title']}}
49 |
阅读量: {{item['views']}}
50 |
51 |
11 |
24 |
12 |
15 |
17 | {{title}}
16 |
18 |
23 |
19 |
22 |