Skip to content

Commit 19dfc3d

Browse files
pycoder404pycoder404
committed
debug article style
1 parent 224f90c commit 19dfc3d

File tree

8 files changed

+196
-74
lines changed

8 files changed

+196
-74
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11-
"@element-plus/icons-vue": "^1.1.4",
11+
"@element-plus/icons-vue": "^2.0.6",
1212
"@highlightjs/vue-plugin": "^2.1.0",
1313
"axios": "^0.26.1",
1414
"core-js": "^3.8.3",

‎src/api/article.js

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import request from '@/utils/request'
22

3-
export function fetchArticleList(queryParams) {
3+
export function getArticleList(queryParams) {
44
return request({
55
url: '/article/list/',
66
method: 'get',
@@ -23,3 +23,29 @@ export function createArticle(data) {
2323
data: data
2424
})
2525
}
26+
27+
export function UpdateArticle(articleId, data) {
28+
return request({
29+
url: '/article/update/' + articleId + '/',
30+
method: 'put',
31+
data: data
32+
})
33+
}
34+
35+
36+
export function getTagList(queryParams) {
37+
return request({
38+
url: '/tag/',
39+
method: 'get',
40+
params: queryParams
41+
})
42+
}
43+
44+
export function getCategoryList(queryParams) {
45+
return request({
46+
url: '/category/',
47+
method: 'get',
48+
params: queryParams
49+
})
50+
}
51+

‎src/layout/components/MainFooter.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
22
<div class="main-footer">
3-
<p>foooter</p>
3+
<span>Copyright@pycoder404</span>
4+
<br>
5+
<span>powered by pycoder404</span>
46
</div>
57
</template>
68

@@ -13,10 +15,10 @@
1315
<style scoped>
1416
.main-footer {
1517
margin-bottom: 5px;
16-
height: 50px;
18+
height: 40px;
1719
overflow: hidden;
1820
display: block;
19-
background: #e9e5e5;
21+
background: #f7f4f4;
2022
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
2123
}
2224
</style>

‎src/layout/components/MainHeader.vue

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,22 @@
3333
<el-link href="/">HOME</el-link>
3434
</el-menu-item>
3535
<el-menu-item index="2">
36-
<el-link href="/article/list">LIST</el-link>
36+
<el-link href="/article/list">归档</el-link>
3737
</el-menu-item>
3838
<el-menu-item index="3">
39-
<el-link href="/article/create">NEW</el-link>
39+
<el-link href="/article/list">分类</el-link>
4040
</el-menu-item>
4141
<el-menu-item index="4">
42-
<el-link href="/article/detail">DETAIL</el-link>
42+
<el-link href="/article/list">标签</el-link>
43+
</el-menu-item>
44+
<el-menu-item index="5">
45+
<el-link href="/article/list">project</el-link>
46+
</el-menu-item>
47+
<el-menu-item index="6">
48+
<el-link href="/article/create">NEW</el-link>
4349
</el-menu-item>
44-
<el-menu-item class="right-menu" index="5">
45-
<el-link href="/">x</el-link>
50+
<el-menu-item index="7">
51+
<el-link href="/article/detail">aboutme</el-link>
4652
</el-menu-item>
4753
</el-menu>
4854
</el-col>

‎src/main.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ import hljsVuePlugin from '@highlightjs/vue-plugin'
99

1010
import ElementPlus from 'element-plus'
1111
import 'element-plus/dist/index.css'
12-
import { DeleteFilled } from '@element-plus/icons-vue'
12+
import {DeleteFilled, EditPen} from '@element-plus/icons-vue'
1313
import mavonEditor from 'mavon-editor'
1414
import 'mavon-editor/dist/css/index.css'
1515

1616

1717
const app = createApp(App)
1818
//
19-
app.directive('hlcode', function(el) {
19+
app.directive('hlcode', function (el) {
2020
const blocks = el.querySelectorAll('pre code')
2121
blocks.forEach((block) => {
2222
hljs.highlightBlock(block)
@@ -33,7 +33,9 @@ app.directive('hlcode', function(el) {
3333
// for (const name in ElIconModules){
3434
// app.component(name,(ElIconModules as any)[name])
3535
// }
36+
3637
app.component('DeleteFilled', DeleteFilled)
38+
app.component('EditPen', EditPen)
3739
app.use(router).use(hljsVuePlugin).use(ElementPlus).use(mavonEditor).mount('#app')
3840
// app.use(ElementPlus, { size: 'small', zIndex: 5000 })
3941
// app.mount('#app')

‎src/views/article/create.vue

Lines changed: 91 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -21,29 +21,38 @@
2121
<!-- <markdown-editor v-model="postForm.content" height="600px" />-->
2222
</el-form-item>
2323
</div>
24+
<el-form-item prop="category">
25+
<el-radio-group v-model="postForm.category">
26+
<el-radio-button
27+
v-for="category in articleCategory"
28+
:key="category['id']"
29+
:label="category['id']"
30+
>
31+
{{category['title']}}
32+
</el-radio-button>
33+
</el-radio-group>
34+
</el-form-item>
35+
<el-form-item prop="tags">
36+
<el-select
37+
v-model="postForm.tags"
38+
placeholder="Select Article Tag"
39+
:reserve-keyword="false"
40+
multiple
41+
filterable
42+
default-first-option
43+
allow-create
44+
size="small">
45+
<el-option
46+
v-for="tag in articleTags"
47+
:key="tag['text']"
48+
:label="tag['text']"
49+
:value="tag['text']"
50+
/>
51+
</el-select>
52+
</el-form-item>
53+
2454
</el-form>
25-
<el-radio-group v-model="postForm.category">
26-
<el-radio-button label="1">python</el-radio-button>
27-
<el-radio-button label="2">vue</el-radio-button>
28-
<el-radio-button label="3">django</el-radio-button>
29-
<el-radio-button label="4">linux</el-radio-button>
30-
</el-radio-group>
31-
<el-select
32-
v-model="postForm.tags"
33-
placeholder="Select"
34-
:reserve-keyword="false"
35-
multiple
36-
filterable
37-
default-first-option
38-
allow-create
39-
size="small">
40-
<el-option
41-
v-for="tagname in tags"
42-
:key="tagname"
43-
:label="tagname"
44-
:value="tagname"
45-
/>
46-
</el-select>
55+
4756
<sticky-nav
4857
:class-name="'sub-navbar '+postForm.status"
4958
style="padding: 0px 45px 15px 45px;"
@@ -60,7 +69,7 @@
6069
// import Upload from '@/components/UploadFile/index'
6170
import StickyNav from '@/components/StickyNav' // 粘性header组件
6271
// import { validURL } from '@/utils/validate'
63-
import {getArticleDetail, createArticle,} from '@/api/article'
72+
import {getArticleDetail, createArticle, UpdateArticle,getTagList,getCategoryList} from '@/api/article'
6473
6574
// import { searchUser } from '@/api/remote-search'
6675
// import Warning from './Warning'
@@ -117,8 +126,8 @@
117126
title: '', // 文章题目
118127
content: '', // 文章内容
119128
importance: 1,
120-
category:'',
121-
tags:[]
129+
category: '',
130+
tags: []
122131
123132
},
124133
html: '',
@@ -129,11 +138,12 @@
129138
userListOptions: [],
130139
rules: {
131140
title: [{validator: validateRequire}],
132-
content: [{validator: validateRequire}]
141+
content: [{validator: validateRequire}],
142+
category: [{validator: validateRequire}]
133143
},
134144
tempRoute: {},
135-
tags: ['python','vue','仓库'],
136-
selectedTags:[]
145+
articleTags: [],
146+
articleCategory: [],
137147
}
138148
},
139149
computed: {
@@ -151,6 +161,8 @@
151161
}
152162
},
153163
created() {
164+
this.fetchArticleTags()
165+
this.fetchArticleCategory()
154166
if (this.isEdit) {
155167
const articleId = this.$route.params && this.$route.params.id
156168
this.fetchData(articleId, {'isedit': this.isEdit})
@@ -162,20 +174,42 @@
162174
this.tempRoute = Object.assign({}, this.$route)
163175
},
164176
methods: {
165-
166177
fetchData(articleId, queryParam) {
167-
console.log(articleId, queryParam)
168178
getArticleDetail(articleId, queryParam).then(response => {
169-
console.log(response.data)
170179
this.postForm = response
171-
172180
// just for test
173181
// this.postForm.title += ` Article Id:${this.postForm.id}`
174182
// this.postForm.content_short += ` Article Id:${this.postForm.id}`
175-
176183
// set tagsview title
177184
this.setTagsViewTitle()
178-
185+
// set page title
186+
this.setPageTitle()
187+
}).catch(err => {
188+
console.log(err)
189+
})
190+
},
191+
fetchArticleTags(queryParam) {
192+
getTagList(queryParam).then(response => {
193+
this.articleTags = response.data
194+
// just for test
195+
// this.postForm.title += ` Article Id:${this.postForm.id}`
196+
// this.postForm.content_short += ` Article Id:${this.postForm.id}`
197+
// set tagsview title
198+
this.setTagsViewTitle()
199+
// set page title
200+
this.setPageTitle()
201+
}).catch(err => {
202+
console.log(err)
203+
})
204+
},
205+
fetchArticleCategory(queryParam) {
206+
getCategoryList(queryParam).then(response => {
207+
this.articleCategory = response.data
208+
// just for test
209+
// this.postForm.title += ` Article Id:${this.postForm.id}`
210+
// this.postForm.content_short += ` Article Id:${this.postForm.id}`
211+
// set tagsview title
212+
this.setTagsViewTitle()
179213
// set page title
180214
this.setPageTitle()
181215
}).catch(err => {
@@ -230,16 +264,30 @@
230264
this.$refs.postFormRef.validate(valid => {
231265
if (valid) {
232266
this.loading = true
233-
createArticle(this.postForm).then(() => {
234-
// this.list.unshift(this.temp)
235-
this.recordDialogVisible = false
236-
this.$notify({
237-
title: 'Success',
238-
message: 'Created Successfully',
239-
type: 'success',
240-
duration: 2000
267+
if (this.isEdit) {
268+
const articleId = this.$route.params && this.$route.params.id
269+
UpdateArticle(articleId, this.postForm).then(() => {
270+
// this.list.unshift(this.temp)
271+
this.recordDialogVisible = false
272+
this.$notify({
273+
title: 'Success',
274+
message: 'Update Successfully',
275+
type: 'success',
276+
duration: 2000
277+
})
278+
})
279+
} else {
280+
createArticle(this.postForm).then(() => {
281+
// this.list.unshift(this.temp)
282+
this.recordDialogVisible = false
283+
this.$notify({
284+
title: 'Success',
285+
message: 'Created Successfully',
286+
type: 'success',
287+
duration: 2000
288+
})
241289
})
242-
})
290+
}
243291
this.loading = false
244292
} else {
245293
console.log('error submit!!')

‎src/views/article/detail.vue

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,29 @@
88

99
<el-col :span="14">
1010
<div class="col-bg" style="background-color: white">
11-
<div class="content-margin-left">
12-
<h3>{{ articleDetail.title }}</h3>
13-
</div>
14-
<!-- <highlightjs language='python' code="import os\n print('hello world')" />-->
15-
<div v-hlcode v-html="articleDetail.content"></div>
11+
<div class="content-margin-left">
12+
<h3>{{ articleDetail.title }}</h3>
13+
</div>
14+
<div v-hlcode v-html="articleDetail.content"></div>
15+
<el-divider>END</el-divider>
16+
17+
<like-favorite></like-favorite>
18+
19+
20+
<div class="article-desc">
21+
<span>
22+
@{{articleDetail.created_time }} {{ articleDetail.author }}, views:{{articleDetail.views_count}} likes:{{articleDetail.likes_count}} comments:0
23+
<el-button icon="DeleteFilled" type="text"/>
24+
<router-link
25+
:to="'/article/edit/'+ articleDetail.id"
26+
><el-button
27+
icon="EditPen"
28+
type="text"/>
29+
</router-link>
30+
</span>
31+
32+
</div>
33+
<br>
1634
</div>
1735

1836
</el-col>
@@ -27,6 +45,7 @@
2745

2846
<script>
2947
import {getArticleDetail} from '@/api/article'
48+
import LikeFavorite from "@/views/article/components/LikeFavorite";
3049
//
3150
// const defaultForm = {
3251
// status: 'draft',
@@ -44,6 +63,7 @@
4463
// }
4564
export default {
4665
name: "ArticleDetail",
66+
components:{LikeFavorite},
4767
data() {
4868
return {
4969
articleDetail: {},
@@ -112,6 +132,14 @@
112132
.bg-purple-dark {
113133
background: #99a9bf;
114134
}
135+
.article-desc {
136+
font-size: 16px;
137+
color: #303030;
138+
margin: 5px 0;
139+
padding-right: 30px;
140+
text-align: right;
141+
}
142+
115143
116144
.col-bg {
117145
text-align: left;

0 commit comments

Comments
 (0)