beta

.gitignore

@@ -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
 

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
+```

components/PostList.vue

@@ -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>

components/ThreadList.vue

@@ -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>

layouts/default.vue

@@ -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>

nuxt.config.js

@@ -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
+      }
+    }]
+  ]
+}

package.json

@@ -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"
+  }
+}

pages/account/signin.vue

@@ -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>

pages/index.vue

@@ -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>

pages/thread/_id.vue

@@ -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>

pages/thread/create.vue

@@ -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>

store/account.js

@@ -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)
+      })
+    }
+  }
+}

store/index.js

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