一、根据E-R图确定接口需求

博客浏览页
博客头部，返回用户头像，用户名，邮箱，用户标识
点击博客编辑，查询文章id，返回文章标题，文章摘要，文章内容
热门文章，返回热门文章标题
博主最新文章，返回该博主最新发布的三篇文章标题
文章，返回文章标题，创建时间，标签，（浏览量待定），文章内容
返回点赞数，收藏数
点赞，查询文章id，点赞数+1
收藏，查询用户id，文章id，收藏数+1
评价，用户给文章打分，评价记录+1
评论，查询文章id，返回评论用户头像，用户名，评论内容，评论时间
用户在文章下评论，评论记录+1
 

二、学习Vue以及Element的使用

https://www.bilibili.com/video/BV14y4y1M7Nc?p=1&share_medium=iphone&share_plat=ios&share_source=QQ&share_tag=s_i&timestamp=1625032827&unique_k=Fsjfcv

根据视频快速学习vue，尝试搭建页面

Element是一个网站快速成型工具，它提供了很多组件，可以直接使用。

三、开始编写文章浏览页面代码

App.vue 代码

<template>
  <div>
  <el-container class="common-layout" style="height:800px" >
    <el-aside width="250px" height="800px" class="aside">
        <div  class="aside-header">
          <div>
            <el-row class="demo-avatar demo-basic">
              <el-col :span="12">
                <div class="demo-basic--circle">
                  <div class="block"><el-avatar :size="80" :src="circleUrl"></el-avatar></div>
                  <div class="block" v-for="size in sizeList" :key="size">
                    <el-avatar :size="size" :src="circleUrl"></el-avatar>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div  class="aside-main">main</div>
        <div  class="aside-footer">Footer</div>
</el-aside>
    <el-container class="container">
      <el-header class="header">Header</el-header>
      <el-main class="main">Main</el-main>
      <el-footer class="footer">Footer</el-footer>
    </el-container>
  </el-container>
  </div>
</template>

<script>
import Header from "./components/Header";
export default {
  name: 'App',
  data () {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      sizeList: ["large"]
    }
  }
}
</script>

<style>
body{margin:75px;position: relative;background-color: #ccc}
.common-layout{background-color:rgb(238, 241, 246)}
.aside-header{height:18% ;border-bottom:8px solid #ccc; border-right:8px solid #ccc}
.aside-main{height:40% ;border-bottom:8px solid #ccc;border-right:8px solid #ccc}
.aside-footer{height:40% ;border-right:8px solid #ccc }
.container{height:750px}
.aside{position:relative}
.header{height:100px;}
.main{height:800px;border:1px solid #ccc}
.footer{height:300px;border:1px solid #ccc}
</style>
<script>

export default{
  name:"Layout",

}
</script>

大致实现了一个框架，预计后面会参照https://blog.csdn.net/li3455277925?type=blog，添加内容。