Skip to content

Commit 396dab1

Browse files
justJokeejustJokee
committed
Merge branch 'dev'
2 parents 482e77e + 14db73e commit 396dab1

File tree

6 files changed

+176
-82
lines changed

6 files changed

+176
-82
lines changed

‎front/server/api/visitor.js‎

Lines changed: 90 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/**
2+
* @desc 访客信息处理
3+
*/
4+
15
const express = require('express')
26
const { Octokit } = require('@octokit/core')
37
const api = require('../http/server-api')
@@ -6,77 +10,107 @@ const db = require('../db/')
610
const secret = require('../db/secret')
711

812
// 存储访客信息
9-
router.post('/api/front/saveVisitor', async (req, res) => {
10-
if (req.body.type === '0') {
11-
const exist = await db.visitor.find({ name: req.body.name })
12-
if (exist.length) {
13-
res.json({ status: 100, info: '用户名已存在' })
14-
return
13+
router.post('/api/front/visitor/save', async (req, res) => {
14+
try {
15+
// 自定义用户
16+
if (req.body.type === '0') {
17+
const exist = await db.visitor.find({ name: req.body.name })
18+
if (exist.length) {
19+
res.json({ status: 100, info: '用户名已存在' })
20+
return
21+
}
1522
}
23+
24+
const doc = await new db.visitor(req.body).save()
25+
26+
res.json({
27+
status: 200,
28+
data: doc,
29+
info: '访客信息存储成功'
30+
})
31+
} catch (e) {
32+
res.status(500).end()
1633
}
17-
new db.visitor(req.body).save((err, doc) => {
18-
if (err) {
19-
res.status(500).end()
20-
} else {
21-
res.json({ status: 200, data: doc })
22-
}
23-
})
2434
})
2535

26-
//自定义用户名
27-
router.get('/api/searchVisitor', (req, res) => {
28-
db.vistor.find({ name: req.query.name }, (err, doc) => {
29-
if (doc.length) {
30-
res.json({ status: 200, exist: 1 })
31-
} else {
32-
res.json({ status: 200, exist: 0 })
36+
// 查看访客是否已经被存储
37+
router.post('/api/front/visitor/existed', async (req, res) => {
38+
try {
39+
// QQ用户
40+
if (req.body.type === '1') {
41+
const exist = await db.visitor.find({ qqOpenId: req.body.qqOpenId })
42+
if (exist.length) {
43+
// 仅更新昵称和头像
44+
await db.visitor.update(
45+
{ qqOpenId: req.body.qqOpenId },
46+
{ $set: { name: req.body.name, imgUrl: req.body.imgUrl } }
47+
)
48+
const doc = await db.visitor.find({ qqOpenId: req.body.qqOpenId })
49+
res.json({ status: 200, info: '访客信息已存在', data: { info: doc[0], _saved: 1 } })
50+
return
51+
}
3352
}
34-
})
53+
res.json({
54+
status: 200,
55+
data: {
56+
_saved: 0
57+
},
58+
info: '访客信息不存在'
59+
})
60+
} catch (e) {
61+
res.status(500).end()
62+
}
3563
})
3664

37-
//github登录
38-
router.get('/api/getGithub', (req, res) => {
39-
db.vistor.find({ githubID: req.query.id }, (err, doc) => {
40-
if (err) {
41-
res.status(500).end()
42-
} else {
43-
res.json(doc)
44-
}
45-
})
46-
})
65+
// github登录
66+
4767
router.get('/login/git', (req, res) => {
4868
//请替换为自己的client_id
4969
let path = `https://github.com/login/oauth/authorize?client_id=${secret.github_client_id}&scope=['user']&redirect_uri=http://localhost:6180/login_github`
5070
res.redirect(path)
5171
res.status(200).end()
5272
})
5373
router.get('/login_github', (req, res) => {
54-
console.log('已经指向到login-github：：', req.query)
55-
const params = {
56-
client_id: secret.github_client_id,
57-
client_secret: secret.github_client_secret,
58-
code: req.query.code,
59-
scope: ['user'],
60-
redirect_uri: 'http://localhost:6180/login_github'
74+
try {
75+
const params = {
76+
client_id: secret.github_client_id,
77+
client_secret: secret.github_client_secret,
78+
code: req.query.code,
79+
scope: ['user'],
80+
redirect_uri: 'http://localhost:6180/login_github'
81+
}
82+
api
83+
.post('https://github.com/login/oauth/access_token', JSON.parse(JSON.stringify(params)))
84+
.then(fullData => {
85+
const arr1 = fullData.split('&')
86+
const arr2 = arr1[0].split('=')
87+
const token = arr2[1]
88+
return token
89+
})
90+
.then(async token => {
91+
let userInfo = {}
92+
const octokit = new Octokit({ auth: `${token}` })
93+
const info = await octokit.request('GET /user')
94+
// 查看访客表是否已经存在此用户
95+
const visitor = await db.visitor.find({ githubId: info.data.id })
96+
// 存在此用户
97+
if (visitor.length) {
98+
await db.visitor.update(
99+
{ githubId: info.data.id },
100+
{ $set: { name: info.data.login, imgUrl: info.data.avatar_url } }
101+
)
102+
const doc = await db.visitor.find({ githubId: info.data.id })
103+
userInfo = {
104+
...doc[0].toObject(),
105+
// 前端判断存在的标识
106+
_saved: 1
107+
}
108+
}
109+
res.render('gc_back.html', { title: 'github登陆成功', userInfo: JSON.stringify(userInfo) })
110+
})
111+
} catch (e) {
112+
res.status(500).end()
61113
}
62-
api
63-
.post('https://github.com/login/oauth/access_token', params)
64-
.then(fullData => {
65-
const arr1 = fullData.split('&')
66-
const arr2 = arr1[0].split('=')
67-
const token = arr2[1]
68-
console.log('获取到token====>>>>>', token)
69-
return token
70-
})
71-
.then(async token => {
72-
const octokit = new Octokit({ auth: `${token}` })
73-
const info = await octokit.request('GET /user')
74-
console.log('返回用户信息====>>>>', info.data)
75-
res.render('gc_back.html', { title: 'github登陆成功', userInfo: JSON.stringify(info.data) })
76-
})
77-
.catch(err => {
78-
res.status(500).end()
79-
})
80114
})
81115

82116
module.exports = router

‎front/src/api/visitor.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@ import http from '@/http/'
77
export default {
88
// 存储访客信息
99
saveVisitor(payload) {
10-
return http.post('/api/front/saveVisitor', payload).then(data => {
10+
return http.post('/api/front/visitor/save', payload).then(data => {
11+
return data
12+
})
13+
},
14+
isExistedVisitor(payload) {
15+
return http.post('/api/front/visitor/existed', payload).then(data => {
1116
return data
1217
})
1318
}

‎front/src/views/components/submit.vue‎

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@ export default {
161161
methods: {
162162
...mapMutations(['setVisitor']),
163163
openGithub() {
164+
// TODO: 环境变量 BASE_URL
164165
window.open(
165166
'http://localhost:6180/login/git',
166167
'_blank',
@@ -235,31 +236,54 @@ export default {
235236
236237
QC.Login({}, (info, opts) => {
237238
// 获取opeId accessToken
238-
QC.Login.getMe((openId, accessToken) => {
239-
// 存储
240-
this.tempInfo = {
239+
QC.Login.getMe(async (openId, accessToken) => {
240+
// 查看QQ用户是否被存储了
241+
const res = await this.$api.isExistedVisitor({
241242
name: info.nickname,
242243
imgUrl: info.figureurl_2,
243-
type: 1,
244-
qqOpenId: openId
244+
qqOpenId: openId,
245+
type: 1
246+
})
247+
248+
if (res.status === 200) {
249+
if (res.data._saved) {
250+
this.setVisitorInfo(res.data.info)
251+
this.customVisible = false
252+
} else {
253+
// 存储
254+
this.tempInfo = {
255+
name: info.nickname,
256+
imgUrl: info.figureurl_2,
257+
type: 1,
258+
qqOpenId: openId
259+
}
260+
this.customVisible = false
261+
this.perfectVisible = true
262+
}
245263
}
246-
this.customVisible = false
247-
this.perfectVisible = true
248264
})
249265
})
250266
},
251267
handleGithubCb(e) {
252268
if (e.data.type === 'github') {
253-
console.log('github登陆成功=====>>>>', e.data.data)
254-
const info = e.data.data
255-
this.tempInfo = {
256-
name: info.login,
257-
imgUrl: info.avatar_url,
258-
type: 2,
259-
githubId: info.id
269+
console.log('github登陆成功=====>>>>', e.data.data, 'isSaved::::', e.data.data._saved)
270+
// 此用户已登陆过
271+
if (e.data.data._saved) {
272+
delete e.data.data._saved
273+
// 初始化访客信息
274+
this.setVisitorInfo(e.data.data)
275+
this.customVisible = false
276+
} else {
277+
const info = e.data.data
278+
this.tempInfo = {
279+
name: info.login,
280+
imgUrl: info.avatar_url,
281+
type: 2,
282+
githubId: info.id
283+
}
284+
this.customVisible = false
285+
this.perfectVisible = true
260286
}
261-
this.customVisible = false
262-
this.perfectVisible = true
263287
}
264288
},
265289
setVisitorInfo(info) {

‎front/src/views/layout/components/navbar/index.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
<i class="el-icon-chat-dot-round"></i>
6464
<span>留言板</span>
6565
</div>
66-
<div class="navbar-menu">
66+
<div class="navbar-menu" @click="friendLink">
6767
<i class="el-icon-ship"></i>
6868
<span>友链</span>
6969
</div>
@@ -126,6 +126,11 @@ export default {
126126
},
127127
closeSearch() {
128128
this.searchVisible = false
129+
},
130+
friendLink() {
131+
this.$message({
132+
message: '拼命开发中😭'
133+
})
129134
}
130135
}
131136
}

‎front/src/views/pannel/components/pannel-introduction.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ export default {
2222
@import '~@/views/pannel/style/mixins';
2323
2424
.pannel-introduction {
25+
transition: all ease 0.38s;
26+
margin-bottom: 16px;
2527
@include pannel-frame;
2628
}
2729
</style>

‎front/src/views/pannel/index.vue‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ export default {
5858
stickyOffsetTop: 0,
5959
pannelOffsetHeight: 0,
6060
stickyOffsetWidth: 'auto',
61-
stickyOffsetHeight: 0
61+
stickyOffsetHeight: 0,
62+
observer: null
6263
}
6364
},
6465
mounted() {
@@ -102,12 +103,12 @@ export default {
102103
window.addEventListener('resize', this.resizeHandler, false)
103104
const pannelNode = document.querySelector('.pannel')
104105
const stickNode = document.querySelector('.pannel__sticky')
105-
const observer = new ResizeObserver((mu, ob) => {
106-
console.log('dom观测触发===>>>>>>')
106+
this.observer = new ResizeObserver((mu, ob) => {
107107
this.pannelOffsetHeight = pannelNode.offsetHeight
108108
this.stickyOffsetHeight = stickNode.offsetHeight
109109
})
110-
observer.observe(pannelNode, { attributes: true, childList: false, subtree: false })
110+
this.observer.observe(pannelNode, { attributes: true, childList: false, subtree: false })
111+
this.observer.observe(stickNode, { attributes: true, childList: false, subtree: false })
111112
this.$nextTick(() => {
112113
this.stickyOffsetTop = getElementTop(stickNode)
113114
this.pannelOffsetTop = getElementTop(pannelNode)
@@ -120,6 +121,7 @@ export default {
120121
if (this.stickyOffsetTop + this.stickyOffsetHeight >= this.pannelOffsetTop + this.pannelOffsetHeight) return
121122
const scrollTop = getScrollTop()
122123
const distance = this.rollBack ? 70 : 20
124+
123125
if (this.stickyOffsetTop - scrollTop <= distance) {
124126
this.sticky = true
125127
this.stickyBottom = false
@@ -135,21 +137,34 @@ export default {
135137
this.sticky = false
136138
}
137139
},
138-
resizeHandler: debounce(e => {
139-
const stickNode = document.querySelector('.pannel__sticky')
140-
this.stickyOffsetWidth = stickNode.offsetWidth + 'px'
140+
resizeHandler: debounce(function(e) {
141+
console.log('resize触发====》》》》》')
142+
const pannelNode = document.querySelector('.pannel')
143+
const layoutBody = document.querySelector('.layout__body-content')
144+
this.stickyOffsetWidth = pannelNode.offsetWidth + 'px'
145+
const maxWidth = window.getComputedStyle(layoutBody)['max-width']
146+
// 切换至手机尺寸后，将sticky相关状态全部置空
147+
if (maxWidth === '768px') {
148+
this.sticky = false
149+
this.stickyBottom = false
150+
}
141151
}, 200)
152+
},
153+
destroyed() {
154+
this.observer.disconnect()
142155
}
143156
}
144157
</script>
145158
<style lang="scss">
159+
@import '~@/style/index.scss';
160+
146161
.pannel {
147162
position: relative;
148163
height: 100%;
149164
&__sticky {
150165
transition: all ease 0.38s;
151166
}
152-
&__item {
167+
&__item:not(:first-child) {
153168
margin-top: 16px;
154169
}
155170
}
@@ -164,4 +179,13 @@ export default {
164179
.pannel--sticky-rollback {
165180
top: 70px;
166181
}
182+
@include respond-to(xs) {
183+
.pannel {
184+
margin-top: 16px;
185+
}
186+
.pannel__sticky {
187+
position: relative !important;
188+
top: 0 !important;
189+
}
190+
}
167191
</style>

0 commit comments

Comments
 (0)