beta

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>