文档编辑模式

pages/docs.vue

@@ -0,0 +1,63 @@
+<template lang="pug">
+.docs-index
+  .docs.circumscription
+    .outline
+      ul
+        li 下载安装
+        li 接口使用
+        li 插件制作
+        li 基础开发
+        li(v-for="item in list", :key="item._id")
+          NuxtLink(:to="`/docs/${item._id}`") {{ item.name }}
+      .create-doc
+        button(@click="createin = !createin") Create
+    .content
+      Nuxt
+</template>
+
+<script>
+export default {
+  asyncData({ $axios }) {
+    return $axios.get("/api/docs").then((res) => {
+      return {
+        list: res.data,
+        doc: { name: "未命名文档", data: "输入内容" },
+        createin: false,
+      };
+    });
+  },
+  methods: {
+    submit() {
+      this.$axios.post("/api/docs", this.doc).then((res) => {
+        console.log(res.data);
+      });
+    },
+  },
+};
+</script>
+
+<style lang="sass">
+.docs-index
+  margin: 8rem 4rem
+  .docs
+    display: flex
+    width: 100%
+    .outline
+      width: 12rem
+      padding: 2rem
+      background: #ccefef
+    .content
+      padding: 2rem
+      background: #ffefef
+      flex: 1
+
+input.title, textarea.data
+  width: 100%
+  background: none
+  border: none
+  padding: 1rem 2rem
+  box-sizing: border-box
+  font-size: 1rem
+input.title
+  font-size: 1.5rem
+</style>

pages/docs/_id.vue

@@ -0,0 +1,68 @@
+<template lang="pug">
+.docs-item
+  button.editor(@click="editor()") {{ edit ? '取消编辑' : '编辑模式' }}
+  button.submit(@click="submit()", v-if="edit") 保存修改
+  .contenter(v-if="!edit")
+    h1.title {{ data.name }}
+    p {{ data.data }}
+  .contenter(v-else)
+    input.title(v-model="doc.name")
+    textarea.data(v-model="doc.data", rows="32")
+</template>
+
+<script>
+export default {
+  asyncData({ $axios, params }) {
+    return $axios.get(`/api/docs/${params.id}`).then((res) => {
+      return { data: res.data, edit: false, doc: { data: "", name: "" } };
+    });
+  },
+  methods: {
+    editor() {
+      if (!this.eidt) {
+        this.doc.name = this.data.name;
+        this.doc.data = this.data.data;
+      }
+      this.edit = !this.edit;
+    },
+    submit() {
+      this.$axios.patch(`/api/docs/${this.data._id}`, this.doc).then((res) => {
+        if (res.status === 200) {
+          this.data.name = this.doc.name;
+          this.data.data = this.doc.data;
+          this.edit = false;
+        }
+        console.log(res.data);
+      });
+    },
+  },
+};
+</script>
+
+<style lang="sass">
+.docs-item
+  position: relative
+  .editor
+    position: absolute
+    top: 0
+    right: 0
+  .submit
+    position: absolute
+    top: 0
+    right: 6rem
+    background: #14cc14
+  h1
+    margin-top: 0
+input.title, textarea.data
+  width: 100%
+  background: none
+  border: none
+  padding: 1rem 2rem
+  box-sizing: border-box
+  font-size: 1rem
+input.title
+  font-size: 1.5rem
+
+input:focus, textarea:focus
+  border: none
+</style>

pages/docs/index.vue

@@ -1,48 +0,0 @@
-<template lang="pug">
-.docs-index
-  .docs.circumscription
-    .outline
-      ul
-        li 下载安装
-        li 接口使用
-        li 插件制作
-        li 基础开发
-    .content
-      p 其构建目的是使实现所需越简单越好,, 避免仅为实现一个简单功能而牵涉到一堆较深层级的知识体系
-      p SDK
-      p 由于实现前端功能为直接目标, 为避免牵涉到其它知识体系, 此处将基于cookie的登录与权限判定逻辑均装入js库以直接调用
-      p 
-      div
-        p import kana from 'kana-sdk'
-        p
-        p const ctx = new Kana() // 创建实例, 它将在内部自动完成与服务端的通信, 因而不必自己手动处理网络问题
-        p console.log(ctx.title) // 站点名字
-        p console.log(ctx.info) // 站点信息
-        p console.log(ctx.list) // 所有对象类型的列表, 是一个 Map() 对象
-        p 
-        p const threadlist = ctx.list.get("thread") // 获得 thread 对象类型的实例
-        p console.log(threadlist) // 打印主题列表
-        p console.log(threadlist[1].posts) // 打印这个对象的评论列表
-        p console.log(threadlist[1].posts[1].data) // 打印第二条评论的内容
-        p console.log(threadlist[1].posts[1].user.name) // 打印第二条评论的作者名
-        p
-        p 维度是可变的
-        p ctx.list.get("post")
-        p 按照某一条件检索获得post列表
-</template>
-
-<style lang="sass">
-.docs-index
-  margin: 8rem 4rem
-  .docs
-    display: flex
-    width: 100%
-    .outline
-      width: 12rem
-      padding: 2rem
-      background: #ccefef
-    .content
-      padding: 2rem
-      background: #ffefef
-      flex: 1
-</style>