about blog detail page look and author profile image url show

hichina-main-back/src/main/java/com/hichina/main/back/hichinamainback/controller/PublicBlogController.java

@@ -25,6 +25,25 @@ public class PublicBlogController {
     @Autowired
     private UserMapper userMapper;
 
+    @GetMapping("/blog-author-profile-image/{blogId}")
+    @EnableHichinaAutoLog(description = "Get blog author profile image url by blogId")
+    public HichinaResponse getBlogAuthorImageUrlByBlogId(@PathVariable("blogId") String blogId){
+        HichinaResponse ret = new HichinaResponse();
+
+        List<String> urls = blogMapper.findAuthorProfileImage(blogId);
+
+        if(urls.isEmpty()){
+          throw new RuntimeException("Cannot find user");
+        }
+        String url = urls.get(0);
+
+        ret.setData(url);
+        ret.setOk(true);
+        ret.setMessage("Succeed get author url for blog: "+ blogId);
+
+        return ret;
+    }
+
     @GetMapping("/{blogId}")
     @EnableHichinaAutoLog(description = "Get blog detail by id")
     public HichinaResponse getBlogDetailById(@PathVariable("blogId") String blogId){

hichina-main-back/src/main/java/com/hichina/main/back/hichinamainback/mapper/BlogMapper.java

@@ -14,6 +14,9 @@ public interface BlogMapper {
     @Select("select b.title,  u.username as authorName, b.created_time as createdTime, b.content  from blog b inner join user u on u.user_id = b.user_id where b.blog_id=#{blogId}")
     List<BlogDetailDTO> findBlogById(String blogId);
 
+    @Select("select u.profile_image_url  from blog b inner join user u on b.user_id = u.user_id where b.blog_id = #{blogId}")
+    List<String> findAuthorProfileImage(String blogId);
+
     @Select("select blog_id, created_time, title, head_image_url, content from blog where draft=0 order by created_time desc")
     List<BlogListItemDTO> findBlogSummaryList();
 

hichina-main-front/src/views/blog/detail.vue

@@ -2,24 +2,29 @@
   <div class="main">
     <p class="title">{{ title }}</p>
     <div class="flex-start mt-36">
-      <v-lazy-image class="logo" src="@/assets/images/banner-1.jpg" alt="" />
+      <v-lazy-image
+        class="logo"
+        :src="authorProfileImageUrl"
+        src-placeholder="https://photoprism.hichinatravel.com/api/v1/t/07dac61cc5dfec34dd9358f37bd70ce32de68488/32mcf2k4/fit_720"
+        alt=""
+      />
       <div class="name flex-item ml-24">
         <p>{{ username }}</p>
         <el-button class="follow mt-10">Follow</el-button>
       </div>
     </div>
     <div class="info flex-between mt-30">
-      <p>{{createdTime}}</p>
+      <p>{{ createdTime }}</p>
       <p class="flex-between">
         <el-icon size="24">
-          <svg-icon icon-class="eye-open" color="#2a82e4"/>
+          <svg-icon icon-class="eye-open" color="#2a82e4" />
         </el-icon>
         <span>110000</span>
       </p>
       <p class="flex-between">
         <span>Collect this</span>
         <el-icon size="30">
-          <svg-icon icon-class="book" color="#2a82e4"/>
+          <svg-icon icon-class="book" color="#2a82e4" />
         </el-icon>
       </p>
     </div>
@@ -50,139 +55,169 @@
 </template>
 
 <script setup>
-  import VLazyImage from "v-lazy-image";
-  import { useRouter } from 'vue-router';
-  import { useWindowScroll } from '@vueuse/core'
-  import {AXIOS} from '@/common/http-commons'
-  const {y: scrollY } = useWindowScroll()
-  console.log(scrollY.value)
-
-  const title = ref('')
-  const username = ref('')
-  const content = ref('')
-  const createdTime = ref('')
-
-  onMounted(() => {
-    console.log("on mounted")
-    const route = useRoute()
-    AXIOS.get('/api/public/blog/'+route.params.blogId).then(response=>{
-       console.log("blog detail: ")
-       console.log(response.data.data);
-       title.value = response.data.data.title;
-       username.value = response.data.data.authorName;
-       content.value = response.data.data.content;
-       createdTime.value = response.data.data.createdTime;
-    }).catch(e=>{
-      console.log("get blog detail err")
-      console.log(e)
+import VLazyImage from "v-lazy-image";
+import { useRouter } from "vue-router";
+import { useWindowScroll } from "@vueuse/core";
+import { AXIOS } from "@/common/http-commons";
+const { y: scrollY } = useWindowScroll();
+console.log(scrollY.value);
+
+const title = ref("");
+const username = ref("");
+const content = ref("");
+const createdTime = ref("");
+const authorInfo = ref({});
+const authorProfileImageUrl = ref("");
+
+const route = useRoute();
+
+function getAuthorPrincipal() {
+  AXIOS.get("/api/public/blog/blog-author-profile-image/" + route.params.blogId)
+    .then(function (response) {
+      console.log("blog author profile image");
+      console.log(response.data);
+      if (response.data.ok == true) {
+        authorProfileImageUrl.value = response.data.data;
+      } else {
+        ElNotification({
+          title: "Error",
+          message: response.data.message,
+          type: "error",
+        });
+      }
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+}
+
+function loadBlogDetail() {
+  AXIOS.get("/api/public/blog/" + route.params.blogId)
+    .then((response) => {
+      console.log("blog detail: ");
+      console.log(response.data.data);
+      title.value = response.data.data.title;
+      username.value = response.data.data.authorName;
+      content.value = response.data.data.content;
+      createdTime.value = response.data.data.createdTime;
     })
-  })
+    .catch((e) => {
+      console.log("get blog detail err");
+      console.log(e);
+    });
+}
+
+onMounted(() => {
+  console.log("on mounted");
+  getAuthorPrincipal();
+  loadBlogDetail();
+});
 </script>
 
 <style scoped lang="scss">
-  .content-main,
-  .main {
-    // min-width: 860px;
-    width: 80%;
-    padding-left: 100px;
-    margin: 0 auto;
-  }
-
-  .main {
-    padding-top: 105px;
+.content-main,
+.main {
+  min-width: 560px;
+  width: 70%;
+  padding-left: 100px;
+  margin: 0 auto;
+}
+
+.main {
+  padding-top: 105px;
+}
+
+.title {
+  color: rgba(80, 80, 80, 1);
+  font-size: 3em;
+  font-weight: bold;
+}
+
+.logo {
+  width: 104px;
+  height: 104px;
+  border-radius: 50%;
+}
+
+.name {
+  color: rgba(80, 80, 80, 1);
+  font-size: 26px;
+}
+
+.follow {
+  width: 157px;
+  height: 30px;
+  color: rgba(255, 255, 255, 1);
+  background-color: rgba(42, 130, 228, 1);
+  border-radius: 5px;
+  font-size: 19px;
+  line-height: 30px;
+  text-align: center;
+}
+
+.info {
+  color: rgba(80, 80, 80, 1);
+  font-size: 27px;
+}
+
+.content {
+  margin: 40px 17px 0;
+  border-top: 1px solid #e5e5e5;
+}
+
+.rich-text {
+  color: rgba(80, 80, 80, 1);
+  font-size: 22px;
+}
+
+.content-main {
+  padding-top: 28px;
+
+  img {
+    width: 100%;
   }
+}
 
-  .title {
-    color: rgba(80, 80, 80, 1);
-    font-size: 100px;
-  }
+.list {
+  position: fixed;
+  left: -251px;
+  bottom: 300px;
+  transition: 0.3s;
 
-  .logo {
-    width: 104px;
-    height: 104px;
-    border-radius: 50%;
+  &.show {
+    left: 20px;
   }
 
-  .name {
-     color: rgba(80, 80, 80, 1);
-     font-size: 26px;
-   }
-
-  .follow {
-    width: 157px;
-    height: 30px;
-    color: rgba(255, 255, 255, 1);
-    background-color: rgba(42, 130, 228, 1);
-    border-radius: 5px;
-    font-size: 19px;
-    line-height: 30px;
+  &-item {
+    margin-bottom: 33px;
+    color: rgba(42, 130, 228, 1);
+    font-size: 17px;
     text-align: center;
   }
 
-  .info {
-    color: rgba(80, 80, 80, 1);
-    font-size: 27px;
-  }
-
-  .content {
-    margin: 40px 17px 0;
-    border-top: 1px solid #e5e5e5;
-  }
-
-  .rich-text {
-    color: rgba(80, 80, 80, 1);
-    font-size: 22px;
-  }
-
-
-  .content-main {
-    padding-top: 28px;
+  .img {
+    position: relative;
+    width: 201px;
+    height: 155px;
 
     img {
       width: 100%;
-    }
-  }
-
-  .list {
-    position: fixed;
-    left: -251px;
-    bottom: 300px;
-    transition: .3s;
-
-    &.show {
-      left: 20px;
+      height: 100%;
     }
 
-    &-item {
-      margin-bottom: 33px;
-      color: rgba(42, 130, 228, 1);
-      font-size: 17px;
+    .tag {
+      position: absolute;
+      left: 0;
+      top: 25px;
+      width: 56px;
+      height: 30px;
+      color: rgba(255, 255, 255, 1);
+      background-color: rgba(42, 130, 228, 1);
+      border-radius: 4px;
+      font-size: 12px;
+      line-height: 30px;
       text-align: center;
     }
-
-    .img {
-      position: relative;
-      width: 201px;
-      height: 155px;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-
-      .tag {
-        position: absolute;
-        left: 0;
-        top: 25px;
-        width: 56px;
-        height: 30px;
-        color: rgba(255, 255, 255, 1);
-        background-color: rgba(42, 130, 228, 1);
-        border-radius: 4px;
-        font-size: 12px;
-        line-height: 30px;
-        text-align: center;
-      }
-    }
   }
+}
 </style>

hichina-main-front/src/views/userinfo/index.vue

@@ -190,7 +190,7 @@
       ElNotification({
       title: "Succeed",
       message: "上传成功",
-      type: "Succeed",
+      type: "success",
       });
       showImageUpload.value = false;
     }