This commit is contained in:
satori 2022-01-30 13:34:10 +08:00
parent 5e514c821f
commit 3ecdb64351
14 changed files with 8832 additions and 1 deletions

5
.gitignore vendored
View File

@ -6,6 +6,11 @@ yarn-debug.log*
yarn-error.log* yarn-error.log*
lerna-debug.log* lerna-debug.log*
.nuxt
nuxt.d.ts
.output
# Diagnostic reports (https://nodejs.org/api/report.html) # Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

View File

@ -1,2 +1,28 @@
# kana-bbs # kana-bbs
kana 开发者社区 kana 开发者社区, 使用 Nuxt3 构建
## Setup
Make sure to install the dependencies
```bash
yarn install
```
## Development
Start the development server on http://localhost:3000
```bash
yarn dev
```
## Production
Build the application for production:
```bash
yarn build
yarn start
```

59
components/PostList.vue Normal file
View File

@ -0,0 +1,59 @@
<template lang="pug">
.post-list
ul(v-if="data.length")
li(v-for="item in data", :key="item._id")
.avatar
.content
.title {{ item.user.name }}
.info
span {{ rwdate(item.updatedAt) }}
p {{ item.data }}
.post-none(v-else) 没有评论~
</template>
<style lang="sass">
.post-none
display: flex
justify-content: center
align-items: center
justify-items: center
text-align: center
min-height: 24rem
.post-list
ul
list-style: none
padding: 0
margin: 0
li
display: flex
border-radius: .5rem
margin: 0
padding: 8px 0
color: #222222
.avatar
width: 48px
height: 48px
background: rgba(0, 0, 0, .05)
border-radius: 50%
overflow: hidden
.content
padding-left: 1rem
.title
font-size: 1.1rem
font-weight: 600
.info
span
margin-right: .5rem
</style>
<script>
export default {
props: ["data"],
methods: {
rwdate(utc) {
let t = new Date(utc);
return t.getMonth() + 1 + "月 " + t.getDate() + ", " + t.getFullYear();
},
},
};
</script>

58
components/ThreadList.vue Normal file
View File

@ -0,0 +1,58 @@
<template lang="pug">
.thread-list
ul(v-if="data.length")
li(v-for="item in data", :key="item._id")
NuxtLink(:to="'/thread/' + item._id")
.avatar
.content
.title {{ item.title }}
.info
span {{ item.user.name }}
span {{ item.createdAt }}
span {{ item.updatedAt }}
.thread-none(v-else) 没有内容~
</template>
<style lang="sass">
.thread-none
display: flex
justify-content: center
align-items: center
justify-items: center
text-align: center
min-height: 24rem
.thread-list
ul
list-style: none
padding: 0
margin: 0
li a
display: flex
align-items: center
border-radius: .5rem
height: 48px
margin: 0
padding: 8px 0
color: #222222
.avatar
width: 48px
height: 48px
background: rgba(0, 0, 0, .05)
border-radius: 50%
overflow: hidden
.content
.title
font-size: 1.1rem
font-weight: 600
.info
span
margin-right: .5rem
li a:hover
background: rgba(0, 0, 0, .025)
</style>
<script>
export default {
props: ["data"],
};
</script>

100
layouts/default.vue Normal file
View File

@ -0,0 +1,100 @@
<template lang="pug">
.main
header.header
nav.navbar.main-width
NuxtLink.navbar-logo(to="/") Kana
NuxtLink.navbar-item(to="/") 主页
.expnone
.navbar-user(v-if="account.online")
span {{ account.name }}
.navbar-sign(v-else)
NuxtLink.button(to="/account/signin") Signin
NuxtLink.button(to="/account/create") Login
Nuxt
footer.footer
b Kana
</template>
<script>
export default {
computed: {
account() {
return this.$store.state.account;
},
},
mounted() {
console.log(
"%c こめいじ さとり %c satori.love ",
"color: white; background: #e9546b; padding:5px 0;",
"padding:4px;border:1px solid #e9546b;"
);
this.$store.dispatch("account/profile");
},
};
</script>
<style lang="sass">
html, body
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
font-size: 16px
word-spacing: 1px
-ms-text-size-adjust: 100%
-webkit-text-size-adjust: 100%
-moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased
box-sizing: border-box
margin: 0
padding: 0
.main
min-height: 100vh
background-color: #dee2e6
@media (min-width: 480px)
.main-width
//max-width: 480px
margin: 0 2rem
//@media (min-width: 992px)
// .main-width
// max-width: 800px
// margin: auto
@media (min-width: 1280px)
.main-width
max-width: 1200px
margin: auto
header.header
background-color: rgba(0, 0, 0, .8)
nav.navbar
display: flex
align-items: center
.navbar-logo
color: #fff
margin: 0 1rem
font-size: 1.2rem
font-weight: 600
.navbar-item
color: #eee
padding: 1rem
font-size: 1.2rem
font-weight: 600
.navbar-item:hover
color: #fff
.expnone
flex: 1
footer.footer
text-align: center
margin: 4rem
a
text-decoration: none
a.button
border: none
border-radius: .25rem
padding: .5rem 1rem
margin: 1rem .5rem
background-color: #007bff
color: #ffffff
</style>

21
nuxt.config.js Normal file
View File

@ -0,0 +1,21 @@
export default {
components: true,
modules: ['@nuxtjs/axios', '@nuxtjs/proxy'],
axios: { proxy: true, proxyHeaders: true },
proxy: [
['/api', {
target: 'http://localhost:2333',
pathRewrite: {
'^/api': '/',
changeOrigin: true
}
}],
['/data', {
target: 'http://localhost:2333',
pathRewrite: {
'^/api': '/',
changeOrigin: true
}
}]
]
}

35
package.json Normal file
View File

@ -0,0 +1,35 @@
{
"name": "kana-bbs",
"version": "1.0.0",
"description": "Kana 开发者社区",
"main": "index.js",
"type": "module",
"scripts": {
"dev": "nuxt dev",
"build": "nuxt build",
"start": "nuxt start",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/InvisibleFuture/kana-bbs.git"
},
"author": "satori.love",
"license": "MIT",
"bugs": {
"url": "https://github.com/InvisibleFuture/kana-bbs/issues"
},
"homepage": "https://github.com/InvisibleFuture/kana-bbs#readme",
"devDependencies": {
"pug": "^3.0.2",
"sass": "^1.49.0",
"sass-loader": "^10.1.1",
"pug-plain-loader": "^1.0.0"
},
"dependencies": {
"nuxt": "2.15.8",
"@nuxtjs/axios": "^5.12.0",
"@nuxtjs/proxy": "^2.1.0",
"three": "^0.137.4"
}
}

56
pages/account/signin.vue Normal file
View File

@ -0,0 +1,56 @@
<template lang="pug">
.page-signin
.contenter
Card
template(#header)
.column
input(v-model="account.name", type="text", placeholder="请输入账号")
input(v-model="account.password", type="password", placeholder="请输入密码")
button(@click="signin") signin
template(#footer)
p
span 还没有账号?
NuxtLink(to="/account/create") 注册一个
</template>
<script>
export default {
data: () => ({
account: {
name: "",
password: "",
},
}),
methods: {
signin() {
if (!this.account.name) return console.log("未填写用户名");
if (!this.account.password) return console.log("未填写密码");
this.$axios.post("/api/session", this.account).then((res) => {
this.$store.commit("account/init", res.data);
console.log(res.data);
if (res.status === 200) {
this.$router.push("/");
}
});
},
},
};
</script>
<style lang="sass">
.page-signin
.contenter
.column
display: flex
flex-direction: column
background: #f5f5f5
padding: 6rem 0
input, button
width: 16rem
height: 3rem
line-height: 3rem
border: 1px solid #ccc
border-radius: .5rem
padding: 0 1rem
margin: .5rem auto
</style>

73
pages/index.vue Normal file
View File

@ -0,0 +1,73 @@
<template lang="pug">
.index.main-width
article
.card
.content
p 下载 Kana: 400 行代码实现服务端
p 下载 Kana-bbs: 基于 kana 后端使用 Nuxt3 构建的社区论坛程序
p 文档补全计划: 标记任何你感到疑惑的或是不符合直觉之处, 以及你需要却感觉无法轻松实现的功能
.card
.header
span 最新
span 精华
.expnone
nuxt-link.thread-create(to="/thread/create") 发新帖
.content
p {{ data }}
ThreadList(:data="data")
aside
.card
.content
.bbs-title Kana 开发者论坛
p 基于 node 实现的小型服务端
</template>
<script>
export default {
asyncData({ $axios }) {
return $axios.get("/api/thread").then((res) => {
return { data: res.data };
});
},
};
</script>
<style lang="sass">
//
.index
display: flex
article
flex: 75
.card .header
display: flex
.expnone
flex: 1
aside
flex: 25
.card
margin: 1rem .5rem
border-radius: .5rem
overflow: hidden
background-color: #ffffff
box-shadow: 0 6px 22px 0 rgba(0,0,0,.08)
.header
padding: 1rem
border-bottom: 1px solid #ccc
.content
padding: 1rem
.thread-create
border: none
border-radius: .25rem
padding: .5rem 1rem
background-color: #007bff
color: #ffffff
display: block
.bbs-title
font-size: 1.2rem
font-weight: 600
</style>

111
pages/thread/_id.vue Normal file
View File

@ -0,0 +1,111 @@
<template lang="pug">
.thread
.header
h1.title {{ thread.title }}
.info
span.user {{ thread.user.name }}
span.date 2021-01-01
span.view 1933
.tags
span.tag test
span.tag demo
.content.main-width
p {{ thread.data }}
PostList(:data="postlist")
.post-create(v-if="account.online")
.avatar
.content
textarea(v-model="post.data", rows="12")
button.submit(@click="createpost") 发表
</template>
<script>
export default {
asyncData({ $axios, params }) {
return $axios.get(`/api/thread/${params.id}`).then((res) => {
return {
thread: res.data,
postlist: [],
post: {
data: "",
attach: "thread",
aid: params.id,
},
};
});
},
computed: {
account() {
return this.$store.state.account;
},
},
methods: {
loadpostlist() {
this.$axios
.get(`/api/post?attach=thread&aid=${this.post.aid}`)
.then((res) => {
this.postlist = res.data;
});
},
createpost() {
console.log(this.post);
this.$axios.post("/api/post", this.post).then((res) => {
console.log(res.data);
});
},
},
mounted() {
this.loadpostlist();
},
};
</script>
<style lang="sass">
.thread
>.header
height: 240px
background-color: rgba(0, 0, 0, .5)
margin: 0
padding: 4rem
text-align: center
color: #ffffff
span
margin: 0 .5rem
>.content
background: #ffffff
min-height: 800px
padding: 1rem 2rem
position: relative
top: -5rem
border-radius: .5rem
box-sizing: border-box
.post-create
display: flex
//background: #c8d22d
>.avatar
width: 48px
height: 48px
border-radius: 50%
background: rgba(0, 0, 0, .5)
>.content
flex: 1
padding-left: 1rem
textarea
display: block
width: 100%
max-width: 64rem
border: 1px solid #e5e5e5
border-radius: .5rem
padding: 1rem
box-sizing: border-box
button
border: none
border-radius: .25rem
padding: .5rem 1rem
margin: 1rem 0
color: #ffffff
background-color: #cc1414
font-weight: 600
min-width: 6rem
</style>

38
pages/thread/create.vue Normal file
View File

@ -0,0 +1,38 @@
<template lang="pug">
.thread-create
.header
.background
.content.main-width
input.title(v-model="thread.title")
textarea.data(v-model="thread.data")
button.submit(@click="submit") 发表x
</template>
<script>
export default {
data: () => ({
thread: {
title: "",
data: "",
},
}),
methods: {
submit() {
if (this.thread.title === "" || this.thread.data === "") {
return console.log("尚无内容");
}
this.$axios.post("/api/thread", this.thread).then((res) => {
console.log(res.data);
});
},
},
};
</script>
<style lang="sass">
.thread-create
.title
display: block
.data
display: block
</style>

49
store/account.js Normal file
View File

@ -0,0 +1,49 @@
export default {
state: () => ({
_id: '0',
gid: 0,
name: '游客',
avatar: '',
online: false,
email: '', // signin
password: '', // signin
messages: [], // 消息盒子
chats: new Map(), // 关注的频道
}),
mutations: {
init(state, { _id, gid, name, avatar, online }) {
state._id = _id
state.gid = gid
state.name = name
state.avatar = avatar
state.online = online
},
exit(state) {
state._id = ''
state.gid = ''
state.name = ''
state.avatar = ''
state.online = false
},
},
actions: {
signin({ commit }, account) {
return this.$axios.post('/api/session', account).then(res => {
commit('init', res.data)
return res
})
},
signout({ commit }) {
return this.$axios.delete('/api/session').then(res => {
console.log(res.data)
commit('exit')
})
},
profile({ commit }) {
return this.$axios.get('/api/account').then(res => {
console.log(res.data)
commit('init', res.data)
})
}
}
}

5
store/index.js Normal file
View File

@ -0,0 +1,5 @@
export const state = () => ({
counter: 0
})
export const mutations = {}

8195
yarn.lock Normal file

File diff suppressed because it is too large Load Diff