Article.vue

/* eslint-disable vue/no-duplicate-attributes */
<template>
  <div class="article" style="text-align: left; with: 100%; height: 100%">
    <!-- 左侧 -->
    <div class="leftclass">
      <el-card
        shadow="always"
        cellpadding="1px"
        style="position: static; line-height: 20px"
      >
        <div class="article_box">
          <h1>{{ slogan }}</h1>
          <ul v-for="(item, index) in md_title" :key="item" class="ul_style">
            <div
              v-bind:class="[
                { li_active: index == article_loc },
                li_errorClass,
              ]"
            >
              <li @click="getArticles(index)">{{ item }}</li>
            </div>
          </ul>
        </div>
        <!-- 分页 -->
        <div class="block">
          <!-- <span class="demonstration">完整功能</span> -->
          <el-pagination
            :current-page="currentPage"
            :page-sizes="pageArray"
            :page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>

      <!-- 评论 -->
      <el-card
        cellpadding="1px"
        shadow="always"
        style="position: static; margin-top: 2%"
      >
        <h1>{{ commmentSlogan }}</h1>
        <ArticleComment
          v-bind:articleId="postcomment.articleId"
          ref="commentRef"
        >
        </ArticleComment>
      </el-card>

      <!-- 挑战榜 -->
      <el-card
        class="challenge_title1"
        cellpadding="1px"
        shadow="always"
        style="position: static; margin-top: 2%"
      >
        <h1>{{ day_challenge }}</h1>
        <ul
          v-for="(item, index) in challenge_data"
          :key="item"
          class="ul_style"
        >
          <div
            v-bind:class="[
              { li_active: index == challenge_loc },
              li_errorClass,
            ]"
          >
            <li @click="cssPage(index)">{{ item }}</li>
          </div>
        </ul>
      </el-card>

      <!-- 爬虫天气接口 -->
      <el-card
        class="weather_class1"
        cellpadding="1px"
        shadow="always"
        style="position: static; margin-top: 2%"
      >
        <div style="positon: relative; width: 100%; height: 100%">
          <EchartWeather> </EchartWeather>
        </div>
      </el-card>

      <!-- csdn头像 -->
      <el-card
        class="user_img1"
        style="
          position: static;
          margin: 2% auto auto auto;
          line-height: 10px;
          text-align: center;
        "
        ><a href="https://blog.csdn.net/qq_38870145">
          <img class="image" src="@/assets/img/csdn.jpg"
        /></a>
      </el-card>
    </div>
    <!-- 中间 markdown-->
    <div class="midclass">
      <a name="home" id="hometitle" style="transition: 1s"></a>
      <el-card shadow="hover" style="line-height: 10px">
        <div class="block" style="line-height: 20px">
          <h1>{{ the_title }}</h1>
          <div class="markdown-body" style="text-align: left">
            <VueMarkdown
              :source="md_data[index_page]"
              v-highlight
              style="width: 100%; text-align: left"
            ></VueMarkdown>
          </div>
        </div>
      </el-card>

      <div class="commitCard">
        <!--  -->
      </div>
      <!-- 挑战榜 -->
      <el-card
        class="challenge_title2"
        cellpadding="1px"
        shadow="always"
        style="position: static; margin-top: 2%"
      >
        <h1>{{ day_challenge }}</h1>
        <ul
          v-for="(item, index) in challenge_data"
          :key="item"
          class="ul_style"
        >
          <div
            v-bind:class="[
              { li_active: index == challenge_loc },
              li_errorClass,
            ]"
          >
            <li @click="cssPage(index)">{{ item }}</li>
          </div>
        </ul>
      </el-card>

      <!-- 爬虫天气接口 -->
      <!-- <el-card class="weather_class2"
          cellpadding="1px"
          shadow="always"
          style="position: myblog_static; margin-top: 2%"
        >

        </el-card> -->
      <!-- csdn头像 -->
      <el-card
        class="user_img2"
        style="
          position: static;
          margin: 2% auto auto auto;
          line-height: 10px;
          text-align: center;
        "
        ><a href="https://blog.csdn.net/qq_38870145">
          <img class="image" src="@/assets/img/csdn.jpg"
        /></a>
      </el-card>
    </div>
    <!-- 上滑滚动图标 -->
    <div class="rightclass">
      <div class="righticon">
        <el-card
          shadow="never"
          style="
            align-content: center;
            background-color: rgba(0, 0, 0, 0);
            border: rgba(0, 0, 0, 0);
          "
        >
          <div id="topiconid">
            <el-button
              @click="toTop"
              type="info"
              icon="el-icon-top"
              style="
                transition: 1s;
                background: rgb(255, 94, 0);
                border: none;
                color: #fff;
              "
              circle
            ></el-button>
          </div>
          <br /><br />
          <div>
            <el-button
              type="info"
              icon="el-icon-message"
              circle
              @click="open_message"
              style="background: rgb(255, 94, 0); border: none"
            >
            </el-button>
          </div>
          <br /><br />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import VueMarkdown from "vue-markdown";
import ArticleComment from "@/comment/ArticleComment";
import EchartWeather from "@/weather/EchartWeather";
import axios from "axios";
export default {
  components: {
    VueMarkdown, //显示markdown的组件
    ArticleComment, //子组件评论
    EchartWeather, //天气
  },
  name: "Article",
  data() {
    return {
      // baseurl: '/api/',
      baseurl: "/api/",
      // baseurl: "http://yongma16.xyz/",
      msg: "内容",
      commmentSlogan: "评论区",
      day_challenge: "训练营",
      challenge_data: [
        "css挑战",
        "websocket聊天",
        "echarts地图配置",
        "vue3测试平台",
        "更新中",
      ],
      md_data: [],
      md_title: [],
      the_title: "",
      sear_page: 0,
      index_page: 0,
      data: ["threejs加载模型"],
      slogan: "记忆碎片",
      tabPosition: "left",
      weather_title: [],
      weather_high: [],
      weather_low: [],
      toTopIsShow: false,
      article_loc: 0,
      challenge_loc: -1,
      topshow: false,
      userImg: "",
      username: "匿名",
      articleCommit: "评论区",
      // 分页实现 page1 page2 指向数组
      pageAnalys: {},
      currentPage: 1,
      splitLength: 6, //划分条数
      total: 0,
      pageSize: 4,
      pageArray: [6, 8, 10],
      postcomment: {
        articleId: undefined,
        articleCommit: null,
      },
      articleId: [], //文章的id
    };
  },
  watch: {
    topshow: function (newvalue, oldvalue) {
      if (newvalue === true) {
        document.getElementById("topiconid").style.display = "none";
      } else {
        document.getElementById("topiconid").style.display = "block";
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("onload", this.topvisible());
  },
  mounted() {
    this.initPageSpliteFun();
    window.addEventListener("onload", this.topvisible());
  },
  methods: {
    initPageSpliteFun() {
      this.splitLength = this.pageArray[0];
    },
    handleSizeChange(val) {
      // 转到第一页md_title
      let that = this;
      that.pageAnalysFun(that.pageAnalys.allTitle, val); //触发修改
    },
    handleCurrentChange(val) {
      let that = this;
      //触发md_title的修改
      that.currentPage = val;
      that.pageAnalysFun(that.pageAnalys.allTitle); //触发修改
    },
    pageAnalysFun(allTitleArray, selectListLength) {
      let that = this;
      that.total = allTitleArray.length; //总数
      let splitLength = that.splitLength;
      if (!selectListLength) {
        that.splitLength = that.splitLength;
      } else {
        this.currentPage = 1;
        that.splitLength = selectListLength; //划分长度
      }
      splitLength = that.splitLength;
      let splitNum = Math.ceil(that.total / splitLength); //向上取整
      that.pageAnalys.childNum = splitNum; //子数组个数
      that.pageAnalys.allTitle = allTitleArray; //所有标题
      that.pageAnalys.titleArray = new Array(); //子数组个数
      var locSplit = 0;
      var locLength = splitLength; //每一页的条数
      while (splitNum--) {
        // 循环获取子数组
        if (splitNum >= 1) {
          let childArray = [];
          for (
            let temp = locSplit;
            temp < locLength && temp < that.total;
            ++temp, ++locSplit
          ) {
            childArray.push(that.pageAnalys.allTitle[temp]);
          }
          that.pageAnalys.titleArray.push(childArray);
          locLength += splitLength; //分割数组长度后移
        } else {
          // 最后一个数组
          let childArray = [];
          for (let temp = locSplit; temp < that.total; ++temp) {
            childArray.push(that.pageAnalys.allTitle[temp]);
          }
          that.pageAnalys.titleArray.push(childArray);
          break;
        }
      }
      try {
        that.md_title = that.pageAnalys.titleArray[this.currentPage - 1];
      } catch (e) {
        throw Error(e);
      }
    },
    increment: function () {
      this.$store.commit("increment");
    },
    topvisible: function () {
      let dom = document.getElementById("hometitle");
      this.topshow = this.elementIsVisibleInViewport(dom);
      setTimeout(this.topvisible);
    },
    elementIsVisibleInViewport: function (el, partiallyVisible = false) {
      const { top, left, bottom, right } = el.getBoundingClientRect();

      return partiallyVisible
        ? ((top > 0 && top < innerHeight) ||
            (bottom > 0 && bottom < innerHeight)) &&
            ((left > 0 && left < innerWidth) ||
              (right > 0 && right < innerWidth))
        : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
    },
    li_errorClass: function () {},
    cssPage: function (index) {
      this.challenge_loc = index;
      let name = this.challenge_data[index];
      switch (name) {
        case "css挑战":
          this.$router
            .push({
              path: "/css",
            })
            .catch((error) => {
              throw Error(error);
            });
          break;
        case "echarts地图配置":
          this.$router
            .push({
              path: "/home",
            })
            .catch((error) => {
              throw Error(error);
            });
          break;
        case "websocket聊天":
          this.$router
            .push({
              path: "/onlinewebsocket",
            })
            .catch((error) => {
              throw Error(error);
            });
          break;
        case "vue3测试平台":
          window.open("http://yongma16.xyz/emoji_api/");
          break;
        default:
          break;
      }
    },
    open_message: function () {
      this.$notify({
        title: "欢迎合作",
        message: "邮箱：1432448610@qq.com",
        position: "bottom-right",
      });
    },
    toTop: function () {
      location.href = "#home"; // 定位
      document.getElementById("mainappid").scrollTop = 0;
    }, // 返回天气相当于返回顶部
    getCommentsFromArticle(id) {
      this.$refs.commentRef.getComments(id); //触发子组件的方法
    },
    getArticles: function (page) {
      let that = this; // this指向转化
      that.article_loc = page;
      // 查找文章id 从1开始
      that.postcomment.articleId =
        that.articleId[
          parseInt(page + (that.currentPage - 1) * that.splitLength)
        ];
      // 提交数据 page从0开始
      axios
        .post(that.baseurl + "article/index/", {
          value: page + (that.currentPage - 1) * that.splitLength,
          // 传入索引
        })
        .then((res) => {
          if (res.data.code === 1) {
            let respdata = res.data;
            let content = respdata.article;
            that.md_data = []; // 清空
            content.map((o) => {
              that.md_data.push(o); // 传入一个文章
            });
            that.the_title = respdata.the_title;
          } else if (res.data.code === 0) {
            // alter("失败！")
            that.$message.error("失败");
          }
        })
        .catch((error) => {
          throw Error(error);
        });
      that.getCommentsFromArticle(that.postcomment.articleId);
    },
  },
  created: function () {
    // 初始化
    let that = this;
    axios
      .get(that.baseurl + "article/index/")
      .then((res) => {
        let resdata = res.data;
        let content = resdata.article; // 传递过来的文章 进行处理
        let title = resdata.title;
        that.articleId = resdata.articleObjectId;
        that.postcomment.articleId = resdata.articleId;
        this.$refs.commentRef.getComments(that.postcomment.articleId); //触发子组件的方法
        content.map((o) => {
          that.md_data.push(o);
        });
        let titleAllArray = title.map((o) => {
          return o;
        });
        that.the_title = resdata.the_title;
        this.pageAnalysFun(titleAllArray); //分页
      })
      .catch((r) => {
        throw Error(r);
      }); // get log
  },
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
  background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #b0b3b6;
  background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
}

.text {
  /* align-content: center; */
  display: flex;
  margin: 0 auto;
  font-size: 14px;
}

.item {
  display: inline-block;
  /* margin: 0 auto; */
  width: 900px;
}

.box-card {
  align-self: center;
  align-content: center;
  display: inline-block;
  width: 80%;
  /* padding-left:25%; */
  margin: 0 auto;
  /* opacity: 0.95; */
  margin-top: 0px;
  background-color: #ffffff;
}

.box-cardtext {
  align-self: center;
  align-content: center;
  display: inline-block;
  width: 20%;
  /* padding-left:25%; */
  margin: 0 auto;
  opacity: 0.9;
  margin-top: 80px;
  background-color: #ffffff;
}

.article {
  opacity: 1;
  /* background-color: aliceblue; */
  align-content: inherit;
  display: flex;
  margin: 5px;
  padding: 5px;
}

/* 取消滚动并且隐藏 */
el-col::-webkit-scrollbar {
  display: none;
}

.leftclass {
  position: relative;
  width: 30%;
  height: 100%;
  overflow: auto;
  margin: 5px;
}

.leftclass::-webkit-scrollbar {
  display: none;
}

.midclass {
  position: relative;
  width: 65%;
  height: 100%;
  overflow: auto;
  margin: 5px;
  /* scrollbar-face-color: coral; */

  /* scrollbar-track-color: darkslategrey; */
}

.midclass::-webkit-scrollbar {
  width: 10px;
  /* height:5px; */
  /* display: none; */
}
.midclass::-webkit-scrollbar-track {
  background: rgba(226, 247, 255, 0.5);
  border-radius: 2px;
  /* display: none; */
}
.midclass::-webkit-scrollbar-track-piece {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  /* display: none; */
}
.midclass::-webkit-scrollbar-thumb {
  background: #ff995e;
  height: 2px;
  border-radius: 2px;
  /* display: none; */
}
/* 评论区 */
.commitCard {
  position: relative;
  width: 100%;
  height: 80px;
  margin-top: 10px;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: 0;
  margin-right: 0;
}

.rightclass {
  position: relative;
  width: 5%;
  height: 100%;
  overflow: hidden;
}

.rightclass::-webkit-scrollbar {
  display: none;
}

.righticon {
  position: relative;
  width: 100%;
  height: 100%;
  top: 70%;
}

.image {
  width: 100%;
  display: block;
}

.li_active li {
  color: rgb(255, 94, 0);
}

li:active {
  color: rgb(245, 182, 10);
}

li:link {
  color: rgb(255, 94, 0);
}

li:visited {
  color: gold;
}

li:hover {
  color: rgb(255, 72, 0);
  cursor: pointer;
}

h1 {
  color: rgb(255, 102, 0);
  text-align: center;
}

h1:hover {
  font-weight: bolder;
  color: rgb(255, 72, 0);
  /* color: gold; */
  cursor: pointer;
}

.article_box {
  position: relative;
  width: 100%;
  height: 100%;
}

.ul_style {
  position: relative;
  width: 100%;
  height: 100%;
}

.weather_class2 {
  display: none;
}

.user_img2 {
  display: none;
}

.challenge_title2 {
  display: none;
}

.weather_class1 {
  display: block;
}

.user_img1 {
  display: block;
}

.challenge_title1 {
  display: block;
}

@media screen and (max-width: 450px) {
  .article {
    display: inline-block;
    max-width: 350px;
  }

  .leftclass {
    width: 100%;
    height: 50%;
    max-width: 350px;
  }

  .midclass {
    width: 100%;
    max-width: 350px;
  }

  .rightclass {
    width: 80px;
    position: fixed;
    float: right;
    bottom: 20px;
    right: -10px;
  }

  .weather_class2 {
    display: block;
  }

  .user_img2 {
    display: block;
  }

  .challenge_title2 {
    display: block;
  }

  .weather_class1 {
    display: none;
  }

  .user_img1 {
    display: none;
  }

  .challenge_title1 {
    display: none;
  }
}
</style>