beta
This commit is contained in:
parent
5e514c821f
commit
3ecdb64351
5
.gitignore
vendored
5
.gitignore
vendored
@ -6,6 +6,11 @@ yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
.nuxt
|
||||
nuxt.d.ts
|
||||
.output
|
||||
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
|
||||
28
README.md
28
README.md
@ -1,2 +1,28 @@
|
||||
# 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
59
components/PostList.vue
Normal 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
58
components/ThreadList.vue
Normal 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
100
layouts/default.vue
Normal 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
21
nuxt.config.js
Normal 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
35
package.json
Normal 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
56
pages/account/signin.vue
Normal 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
73
pages/index.vue
Normal 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
111
pages/thread/_id.vue
Normal 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
38
pages/thread/create.vue
Normal 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
49
store/account.js
Normal 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
5
store/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
export const state = () => ({
|
||||
counter: 0
|
||||
})
|
||||
|
||||
export const mutations = {}
|
||||
Loading…
Reference in New Issue
Block a user