vue-node-blog-ui/src/views/Article.vue

<template>
  <el-row>
    <el-col :span="14" :offset="5">
      <el-container>
        <el-header style="font-size: 35px">
          {{ article.article_title }}
        </el-header>
        <el-main style="text-align: left">
          <el-container>
            <el-header>
              <div id="avatar">
                <el-avatar :size="40" :src="circleUrl"></el-avatar>
                <div id="author_name">{{ authorName }}</div>
              </div>
            </el-header>
            <el-main v-html="content"></el-main>
          </el-container>
        </el-main>
        <el-footer></el-footer>
      </el-container>
    </el-col>
  </el-row>
</template>

<script>

export default {
  components: [],
  data() {
    return {
      article: {},
      articleID: 0,
      content: "",
      authorName: "",
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  mounted() {
    this.articleID = this.$route.params.id;
    this.getArticle(this.articleID);
  },
  methods: {
    getArticle(id) {
      this.$axios.get(`/articles/${id}`).then((response) => {
        const result = response.data[0];
        this.article = result;
        this.content = result.content;
        this.getAuthor(result.author_id);
      });
    },
    getAuthor(id) {
      this.$axios.get(`/users/info/${id}`).then((response) => {
        console.log(response);
        this.authorName = response.data[0].user_name;
      });
    },
  },
};
</script>
<style>
#avatar {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  position: relative;
}
#author_name {
  display: inline;
  font-size: 15px;
  position: absolute;
  top: 21%;
  margin-left: 10px;
}
</style>