Skip to content

Commit d3f318d

Browse files
fxss5201fxss5201
committed
添加首页、列表页、搜索页功能
1 parent 2bc5395 commit d3f318d

File tree

18 files changed

+1710
-199
lines changed

18 files changed

+1710
-199
lines changed

‎app.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html {{ HTML_ATTRS }}>
2+
<html {{ HTML_ATTRS }} style="font-size: 37.5px;">
33
<head {{ HEAD_ATTRS }}>
44
{{ HEAD }}
55
</head>

‎assets/css/common.scss

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
html {
2+
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
3+
Roboto, 'Helvetica Neue', Arial, sans-serif;
4+
font-size: 16px;
5+
color: #333;
6+
word-spacing: 1px;
7+
-ms-text-size-adjust: 100%;
8+
-webkit-text-size-adjust: 100%;
9+
-moz-osx-font-smoothing: grayscale;
10+
-webkit-font-smoothing: antialiased;
11+
box-sizing: border-box;
12+
background-color: #efefef;
13+
}
14+
15+
*,
16+
*:before,
17+
*:after {
18+
box-sizing: border-box;
19+
margin: 0;
20+
}
21+
22+
// 浮动
23+
.clearfix {
24+
25+
&:before,
26+
&:after {
27+
display: table;
28+
content: "";
29+
}
30+
31+
&:after {
32+
clear: both;
33+
}
34+
}
35+
36+
.fl {
37+
float: left;
38+
}
39+
40+
.fr {
41+
float: right
42+
}
43+
44+
.spacing-margin {
45+
margin: 15px 0;
46+
}
47+
.right-icon {
48+
font-size: 18px!important;
49+
margin-top: 3px;
50+
}
51+
52+
// 定位
53+
@mixin position-base {
54+
top: 0;
55+
right: 0;
56+
bottom: 0;
57+
left: 0;
58+
z-index: 10;
59+
}
60+
61+
.full-fixed {
62+
position: fixed;
63+
@include position-base;
64+
}
65+
66+
.full-absolute {
67+
position: absolute;
68+
@include position-base;
69+
}
70+
71+
// flex
72+
@mixin flex {
73+
display: flex;
74+
align-items: center;
75+
}
76+
77+
.flex-row {
78+
@include flex;
79+
flex-direction: row;
80+
}
81+
82+
.flex-column {
83+
@include flex;
84+
flex-direction: column;
85+
}
86+
87+
.flex {
88+
display: flex;
89+
align-items: center;
90+
.flex-auto {
91+
flex: auto;
92+
}
93+
}
94+
95+
.content {
96+
padding: 46px 0 50px;
97+
}
98+
99+
.theme-color {
100+
color: #1989fa;
101+
}

‎assets/images/logo.jpg

14.5 KB
Loading

‎assets/js/listMixins.js

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
export default {
2+
data() {
3+
return {
4+
toastLoading: '',
5+
currentPage: 1
6+
}
7+
},
8+
async asyncData({
9+
app,
10+
isDev,
11+
route,
12+
store,
13+
env,
14+
params,
15+
query,
16+
req,
17+
res,
18+
redirect,
19+
error
20+
}) {
21+
let getParams = {
22+
limit: 10,
23+
page: 1,
24+
justOriginal: false,
25+
order: 0,
26+
columnId: '',
27+
dateTime: '',
28+
author: ''
29+
}
30+
getParams = {
31+
...getParams,
32+
...query
33+
}
34+
const result = await app.$axios.$get('/api/vue-blog/articleList', {
35+
params: {
36+
...getParams
37+
}
38+
})
39+
return {
40+
queryData: getParams,
41+
...result.data
42+
}
43+
},
44+
created() {
45+
this.currentPage = this.$route.query.page
46+
},
47+
methods: {
48+
async getListResult(query) {
49+
this.toastLoading = this.$toast.loading({
50+
message: '加载中...',
51+
forbidClick: true
52+
})
53+
try {
54+
const result = await this.$axios.$get('/api/vue-blog/articleList', {
55+
params: {
56+
...query
57+
}
58+
})
59+
if (result.isok) {
60+
this.list = result.data.list
61+
this.total = result.data.total
62+
}
63+
} catch (error) {
64+
this.$toast.fail('获取信息失败')
65+
}
66+
this.toastLoading.clear()
67+
}
68+
},
69+
watch: {
70+
'$route.query': {
71+
handler(val, oldVal) {
72+
this.queryData = {
73+
...this.queryData,
74+
...val
75+
}
76+
this.$nextTick(() => {
77+
this.getListResult(this.queryData)
78+
})
79+
},
80+
deep: true
81+
}
82+
}
83+
}

‎components/AsideBlock.vue

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<div class="aside-block">
3+
<h2 class="block-title van-hairline--bottom">{{ info.title }}</h2>
4+
<ol class="block-list">
5+
<li
6+
v-for="(item, index) in info.info"
7+
:key="item.id"
8+
:class="{ 'van-hairline--top': index }"
9+
>
10+
<nuxt-link :to="lintTo(item)" class="list-item clearfix">
11+
<span class="item-num fr">{{ item.num }} {{ unit }}</span>
12+
<span class="item-title van-ellipsis">{{ item.title }}</span>
13+
</nuxt-link>
14+
</li>
15+
</ol>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
name: 'AsideBlock',
22+
props: {
23+
info: {
24+
type: Object,
25+
default() {
26+
return {}
27+
}
28+
}
29+
},
30+
computed: {
31+
unit() {
32+
let res
33+
if ([2, 4].includes(this.info.type)) {
34+
res = '篇'
35+
} else {
36+
res = 'views'
37+
}
38+
return res
39+
}
40+
},
41+
methods: {
42+
lintTo(item) {
43+
let res
44+
if (this.info.type === 2) {
45+
res = `/list?columnId=${item.id}`
46+
} else if (this.info.type === 4) {
47+
res = `/list?dateTime=${item.id}`
48+
} else {
49+
res = `/detail/${item.id}`
50+
}
51+
return res
52+
}
53+
}
54+
}
55+
</script>
56+
57+
<style lang="scss" scoped>
58+
.aside-block {
59+
margin: 15px 0;
60+
padding: 0 15px;
61+
background-color: #fff;
62+
.block-title {
63+
font-size: 16px;
64+
line-height: 40px;
65+
}
66+
.block-list {
67+
list-style: decimal;
68+
padding: 0 0 0 18px;
69+
margin: 0;
70+
font-size: 16px;
71+
line-height: 38px;
72+
.list-item {
73+
color: #333;
74+
.item-title {
75+
display: block;
76+
}
77+
.item-num {
78+
margin-left: 5px;
79+
}
80+
}
81+
}
82+
}
83+
</style>

‎components/ListItem.vue

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<router-link :to="`/detail/${info.articleId}`" class="list-item">
3+
<h2 class="item-title van-ellipsis">{{ info.articleTitle }}</h2>
4+
<div class="item-desc van-multi-ellipsis--l3">
5+
{{ info.articleSubTitle }}
6+
</div>
7+
<div class="item-foot flex">
8+
<div>{{ time }}</div>
9+
<div class="left-line van-hairline--left">
10+
views: <span class="theme-color">{{ info.articleView }}</span>
11+
</div>
12+
<div class="left-line van-hairline--left">
13+
stars: <span class="theme-color">{{ info.articleStart }}</span>
14+
</div>
15+
</div>
16+
</router-link>
17+
</template>
18+
19+
<script>
20+
import dayjs from 'dayjs'
21+
22+
export default {
23+
name: 'ListItem',
24+
props: {
25+
info: {
26+
type: Object,
27+
default() {
28+
return {}
29+
}
30+
}
31+
},
32+
computed: {
33+
time() {
34+
return dayjs(this.info.articleCreateTime).format('YYYY-MM-DD HH:mm:ss')
35+
}
36+
}
37+
}
38+
</script>
39+
40+
<style lang="scss" scoped>
41+
.list-item {
42+
display: block;
43+
padding: 15px;
44+
color: #333;
45+
background-color: #fff;
46+
.item-title {
47+
font-size: 16px;
48+
font-weight: 400;
49+
line-height: 24px;
50+
}
51+
.item-desc {
52+
padding: 5px 0;
53+
font-size: 14px;
54+
line-height: 20px;
55+
}
56+
.item-foot {
57+
font-size: 14px;
58+
.left-line {
59+
margin-left: 14px;
60+
padding-left: 14px;
61+
}
62+
}
63+
}
64+
</style>

‎components/Logo.vue

Lines changed: 0 additions & 40 deletions
This file was deleted.

0 commit comments

Comments
 (0)