user

components/PostList.vue

@@ -2,7 +2,7 @@
 .post-list
   ul(v-if="data.length")
     li(v-for="item in data", :key="item._id")
-      .avatar
+      NuxtLink.avatar(:to="`/user/${item.user._id}`")
       .content
         .title {{ item.user.name }}
         .info

components/ThreadList.vue

@@ -2,14 +2,12 @@
 .thread-list
   ul(v-if="data.length")
     li(v-for="item in data", :key="item._id")
-      NuxtLink(:to="'/thread/' + item._id")
+      NuxtLink.avatar(:to="'/user/' + item.user._id")
-        .avatar
+      NuxtLink.content(:to="'/thread/' + item._id")
-        .content
+        .title {{ item.title }}
-          .title {{ item.title }}
+        .info
-          .info
+          span {{ item.user.name }}
-            span {{ item.user.name }}
+          span {{ rwdate(item.createdAt) }}
-            span {{ item.createdAt }}
-            span {{ item.updatedAt }}
   .thread-none(v-else) 没有内容~
 </template>
 
@@ -26,14 +24,13 @@
     list-style: none
     padding: 0
     margin: 0
-    li a
+    li
       display: flex
       align-items: center
       border-radius: .5rem
       height: 48px
       margin: 0
       padding: 8px 0
-      color: #222222
       .avatar
         width: 48px
         height: 48px
@@ -41,18 +38,25 @@
         border-radius: 50%
         overflow: hidden
       .content
+        flex: 1
         .title
           font-size: 1.1rem
           font-weight: 600
         .info
           span
             margin-right: .5rem
-    li a:hover
+    li:hover
       background: rgba(0, 0, 0, .025)
 </style>
 
 <script>
 export default {
   props: ["data"],
+  methods: {
+    rwdate(utc) {
+      let t = new Date(utc);
+      return t.getMonth() + 1 + "月 " + t.getDate() + ", " + t.getFullYear();
+    },
+  },
 };
 </script>

layouts/default.vue

@@ -6,7 +6,7 @@
       NuxtLink.navbar-item(to="/") 主页
       .expnone
       .navbar-user(v-if="account.online")
-        span {{ account.name }}
+        NuxtLink.username(to="/account") {{ account.name }}
       .navbar-sign(v-else)
         NuxtLink.button(to="/account/signin") Signin
         NuxtLink.button(to="/account/create") Login
@@ -84,12 +84,21 @@ header.header
       color: #fff
     .expnone
       flex: 1
+    .username
+      color: #ffffff
+      font-weight: 600
 footer.footer
   text-align: center
   margin: 4rem
 
 a
   text-decoration: none
+a:link  // 未访问的
+  color: #222222
+a:visited
+  color: #223388
+a:active // 点击时
+  color: #2233cc
 a.button
   border: none
   border-radius: .25rem

pages/account/index.vue

@@ -0,0 +1,72 @@
+<template lang="pug">
+.account
+  .main-width
+    img.avatar(:src="account.avatar")
+    span.name {{ account.name }}
+    //input.upload(type="file", name="photos", multiple, @change="setAvatar()")
+    .banner_item.add
+      label.img_add(for="img_add") +
+      input#img_add(
+        type="file",
+        accept="image/*",
+        multiple="multiple",
+        @change="upload($event)"
+      )
+  p account
+  NuxtLink.button(to="/account/setting") 账户设置
+</template>
+
+<script>
+export default {
+  computed: {
+    account() {
+      return this.$store.state.account;
+    },
+  },
+  methods: {
+    upload(event) {
+      let data = new FormData();
+      data.append("img", event.target.files[0]);
+      this.$axios
+        .post("/api/account", data, {
+          headers: { "Content-Type": "multipart/form-data" },
+        })
+        .then((res) => {
+          console.log(res.data);
+          //res.data.forEach((item) => this.list.push(item));
+        });
+    },
+    //setAvatar() {
+    //  let myForm = new FormData();
+    //  let files = document.querySelector("[type=file]").files;
+    //  for (var i = 0; i < files.length; i++) {
+    //    myForm.append("photos", files[i]);
+    //  }
+    //  //this.$axios.post("/api/account", myForm).then((res) => {
+    //  //  console.log(res.data);
+    //  //});
+    //  console.log(myForm);
+    //  fetch("/api/account", {
+    //    method: "POST",
+    //    //headers: { "Content-Type": "multipart/form-data" },
+    //    body: myForm,
+    //  })
+    //    .then((Response) => Response.json())
+    //    .then((data) => {
+    //      console.log(data);
+    //    });
+    //},
+  },
+};
+</script>
+
+<style lang="sass">
+.account
+  .avatar
+    height: 64px
+    width: 64px
+    border: none
+    border-radius: 50%
+    background: #ff1414
+    overflow: hidden
+</style>

pages/account/message.vue

@@ -0,0 +1,4 @@
+<template lang="pug">
+.account-message
+  p 消息盒子
+</template>

pages/account/setting.vue

@@ -0,0 +1,8 @@
+<template lang="pug">
+.account-setting
+  p setting
+  p 1. 消息设置
+  p 2. 订阅设置
+  p 3. 通信设置
+  p 4. 数据管理
+</template>

pages/index.vue

@@ -13,7 +13,6 @@
         .expnone
         nuxt-link.thread-create(to="/thread/create") 发新帖
       .content
-        p {{ data }}
         ThreadList(:data="data")
   aside
     .card

pages/thread/_id.vue

@@ -4,8 +4,8 @@
     h1.title {{ thread.title }}
     .info
       span.user {{ thread.user.name }}
-      span.date 2021-01-01
+      span.date {{ rwdate(thread.createdAt) }}
-      span.view 1933
+      span.view {{ thread.views }}
     .tags
       span.tag test
       span.tag demo
@@ -40,6 +40,10 @@ export default {
     },
   },
   methods: {
+    rwdate(utc) {
+      let t = new Date(utc);
+      return t.getMonth() + 1 + "月 " + t.getDate() + ", " + t.getFullYear();
+    },
     loadpostlist() {
       this.$axios
         .get(`/api/post?attach=thread&aid=${this.post.aid}`)

pages/user/_id.vue

@@ -0,0 +1,39 @@
+<template lang="pug">
+.user
+  .header
+    img.avatar(:src="user.avatar")
+    h1
+      span.name {{ user.name }}
+      span.admin(v-if="user.gid === 1") Admin
+  .content
+    p USER
+    p {{ user }}
+</template>
+
+<script>
+export default {
+  asyncData({ $axios, params }) {
+    return $axios.get(`/api/user/${params.id}`).then((res) => {
+      return { user: res.data };
+    });
+  },
+};
+</script>
+
+<style lang="sass">
+.user
+  >.header
+    background: rgba(0, 0, 0, .5)
+    height: 200px
+    margin: 0
+    padding: 4rem
+    text-align: center
+    .avatar
+      height: 64px
+      width: 64px
+      border-radius: 50%
+      background-color: #ffffff
+      overflow: hidden
+    .name
+      color: #ffffff
+</style>