山东大学软件学院暑期项目实训记录（三）

一、页面布局调整

整合组内代码，初步实现布局共识

<template>
<div>
<el-container class="common-layout" style="height:800px" >
<el-aside width="250px" height="800px" class="aside">
<div class="aside-header">
<div>
<div class="demo-type">
<div style="padding-left: 5px;padding-top:10px;">
<el-avatar size="large" class="username" src="https://cube.elemecdn.com/
0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
lllll</div>
<el-divider></el-divider>
</div>
<div style="padding-left: 10px;padding-bottom: 10px">
<el-descriptions-item label="⽤户状态">学⽣</el-descriptions-item>
<el-divider direction="vertical"></el-divider>
<el-descriptions-item label="邮箱">1014701725@qq.com</el-descriptions-item>
</div>
</div>
</div>
<div class="aside-main">
<div class="aside-mian-header">
标签
<i class="el-icon-edit"></i><hr>
</div>
<div class="aside-mian-main" style="padding-top: 5px;padding-left: 5px">
<el-tag
:key="tag"
v-for="tag in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
</div>
</div>
<div class="aside-footer">
<div class="aside-footer-header" style="padding-left:10px;padding-top:5px;padding-bottom:5px;border:1px;">最新⽂
章推荐
<i class="el-icon-male"></i></div><hr>
<div class="aside-footer-main">
<el-link href="https://element.eleme.io" target="_blank" style="padding-left: 5px;padding-bottom: 5px">
<i class="el-icon-s-promotion"></i>
vue.js从⼊⻔到精通</el-link><br>
<el-link style="padding-left: 5px;padding-bottom: 5px">
<i class="el-icon-s-promotion"></i>
学了c++后，五⼀在寝室赚了第⼀桶⾦</el-link><br>
<el-link style="padding-left: 5px;padding-bottom: 5px">
<i class="el-icon-s-promotion"></i>
晚上不⽤加班了，推荐⼗款精选IntelliJIdea插件，效率提升N倍</el-link><br>
<el-link style="padding-left: 5px;padding-bottom: 5px">
<i class="el-icon-s-promotion"></i>
Java岗⼤⼚⾯试百⽇冲刺 - ⽇积⽉累，每⽇三题</el-link><br>
<el-link style="padding-left: 5px;padding-bottom: 5px">
<i class="el-icon-s-promotion"></i>
硬核！4.5万字⼿把⼿教你搭建MySQL海量数据存储架构！！</el-link><br>
<el-link style="padding-left: 5px;padding-bottom: 5px">
<i class="el-icon-s-promotion"></i>
⾜⾜ 24W 字！内卷把我逼成了“扫地僧”</el-link><br>
</div>
</div>
</el-aside>
<el-container class="container">
<el-header class="header">初识C语⾔之函数封装篇——带你嗅探万花从中的清⾹（上）</el-header>
<div style="padding-left: 20px;font-size: smaller;" align="center">
<span><i class="el-icon-date"></i>2021-07-01</span>
<el-divider direction="vertical"></el-divider>
<span><i class="el-icon-view"></i>浏览量（1256）</span>
<el-divider direction="vertical"></el-divider>
<span><i class="el-icon-star-off"></i>收藏量（111）</span>
</div>
<el-main class="main">Main</el-main>
<el-footer class="footer">Footer</el-footer>
</el-container>
</el-container>
</div>
</template>
<style>
body{margin:75px;position: relative;background-color: #ccc;border-radius: 30px;}
.common-layout{}
.aside-header{height:18% ;border-bottom:8px solid #ccc; border-right:8px solid #ccc;background-color:rgb(238, 241, 246)}
.aside-main{height:40% ;border-bottom:8px solid #ccc;border-right:8px solid #ccc;background-color:rgb(238, 241, 246)}
.aside-mian-header{height:10% ;border:2px;background-color:rgb(238, 241, 246);margin:0;padding-left:10px;padding-
top:5px;box-sizing: border-box;}
.aside-footer{height:40% ;border-right:8px solid #ccc;background-color:rgb(238, 241, 246)}
.container{height:750px;background-color:rgb(238, 241, 246)}
.aside{position:relative;background-color:rgb(238, 241, 246)}
.header{height:100px;border-radius: 30px;padding-left:20px;padding-top:10px;background-color:rgb(238, 241, 246);font-
size:xx-large;}
.main{height:800px;border:1px solid #ccc;background-color:rgb(238, 241, 246)}
.footer{height:300px;border:1px solid #ccc;border-radius: 30px;background-color:rgb(238, 241, 246)}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>
<script>
export default {
data () {
return {
dynamicTags: ['vue.js', 'java', 'springboot'],
inputVisible: false,
inputValue: ''
}
},
methods: {
handleClose (tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
},
showInput () {
this.inputVisible = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
handleInputConfirm () {
let inputValue = this.inputValue
if (inputValue) {
this.dynamicTags.push(inputValue)
}
this.inputVisible = false
this.inputValue = ''
}
}
}
</script>

二、评论区

继续分工完成页面其它部分，尝试实现评论区

下面是初步实现的comment.vue

<template>
  <div class="container">
    <div class="comment" v-for="item in comments">
      <div style="height: 50px">

        <div class="write-reply" style="height: 100%;position:absolute;top: 10px; right: 15px" v-if="item.reply.length > 0" @click="showCommentInput(item)">
          <i class="el-icon-edit"></i>
          <span class="add-comment">添加新评论</span>
        </div>
      </div>

  <transition name="fade">
    <div class="input-wrapper" v-if="showItemId === item.id">
      <el-input class="gray-bg-input"
                v-model="inputComment"
                type="textarea"
                :rows="3"
                autofocus
                placeholder="写下你的评论">
      </el-input>
      <div class="btn-control" style="padding:30px ">
        <span style="position:absolute;right: 175px;" class="cancel" @click="cancel">取消</span>
        <el-button style="position:absolute;right: 70px" class="btn" type="success" round @click="commitComment">确定</el-button>
      </div>
    </div>
  </transition>


      <div class="info">
        <img class="avatar" :src="item.fromAvatar" width="36" height="36"/>
        <div class="right">
          <div class="name">{{item.fromName}}</div>
          <div class="date">{{item.date}}</div>
        </div>
      </div>
      <div class="content">{{item.content}}</div>
      <div class="control">
        <span class="like" :class="{active: item.isLike}" @click="likeClick(item)">
          <i class="iconfont icon-like"></i>
          <span class="like-num">{{item.likeNum > 0 ? item.likeNum + '人赞' : '赞'}}</span>
        </span>
        <span class="comment-reply" @click="showCommentInput(item)">
          <i class="iconfont icon-comment"></i>
          <span>回复</span>
        </span>
      </div>
      <div class="reply">
        <div class="item" v-for="reply in item.reply">
          <div class="reply-content">
            <span class="from-name">{{reply.fromName}}</span><span>: </span>
            <span class="to-name">@{{reply.toName}}</span>
            <span>{{reply.content}}</span>
          </div>
          <div class="reply-bottom">
            <span>{{reply.date}}</span>
            <span class="reply-text" @click="showCommentInput(item, reply)">
              <i class="iconfont icon-comment"></i>
              <span>回复</span>
            </span>
          </div>
        </div>


      </div>
    </div>
  </div>
</template>

<script>

import Vue from 'vue'

export default {
  props: {
    comments: {
      type: Array,
      required: true
    }
  },
  components: {},
  data() {
    return {
      inputComment: '',
      showItemId: ''
    }
  },
  computed: {},
  methods: {
    /**
     * 点赞
     */
    likeClick(item) {
      if (item.isLike === null) {
        Vue.$set(item, "isLike", true);
        item.likeNum++
      } else {
        if (item.isLike) {
          item.likeNum--
        } else {
          item.likeNum++
        }
        item.isLike = !item.isLike;
      }
    },

    /**
     * 点击取消按钮
     */
    cancel() {
      this.showItemId = ''
    },

    /**
     * 提交评论
     */
    commitComment() {
      console.log(this.inputComment);
    },

    /**
     * 点击评论按钮显示输入框
     * item: 当前大评论
     * reply: 当前回复的评论
     */
    showCommentInput(item, reply) {
      if (reply) {
        this.inputComment = "@" + reply.fromName + " "
      } else {
        this.inputComment = ''
      }
      this.showItemId = item.id
    }
  },
  created() {
    console.log(this.comments)
  }
}
</script>

<style lang="scss"  scoped>

@import "test/src/assets/scss/index";

$color-main: #409EFF;
$color-success: #67C23A;
$color-warning: #E6A23C;
$color-danger: #F56C6C;
$color-info: #909399;

$text-main: #303133;
$text-normal: #606266;
$text-minor: #909399;  //次要文字
$text-placeholder: #C0C4CC;
$text-333: #333;

$border-first: #DCDFE6;
$border-second: #E4E7ED;
$border-third: #EBEEF5;
$border-fourth: #F2F6FC;

$content-bg-color: #fff;

.container {
  padding: 0 10px;
  box-sizing: border-box;
  .comment {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-bottom: 1px solid $border-fourth;
    .info {
      display: flex;
      align-items: center;
      .avatar {
        border-radius: 50%;
      }
      .right {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        .name {
          font-size: 16px;
          color: $text-main;
          margin-bottom: 5px;
          font-weight: 500;
        }
        .date {
          font-size: 12px;
          color: $text-minor;
        }
      }
    }
    .content {
      font-size: 16px;
      color: $text-main;
      line-height: 20px;
      padding: 10px 0;
    }
    .control {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: $text-minor;
      .like {
        display: flex;
        align-items: center;
        margin-right: 20px;
        cursor: pointer;
        &.active, &:hover {
         color: $color-main;
        }
        .iconfont {
          font-size: 14px;
          margin-right: 5px;
        }
      }
      .comment-reply {
        display: flex;
        align-items: center;
        cursor: pointer;
        &:hover {
          color: $text-333;
        }
        .iconfont {
          font-size: 16px;
          margin-right: 5px;
        }
      }

    }
    .reply {
      margin: 10px 0;
      border-left: 2px solid $border-first;
      .item {
        margin: 0 10px;
        padding: 10px 0;
        border-bottom: 1px dashed $border-third;
        .reply-content {
          display: flex;
          align-items: center;
          font-size: 14px;
         color: $text-main;
          .from-name {
            color: $color-main;
          }
          .to-name {
            color: $color-main;
            margin-left: 5px;
            margin-right: 5px;
          }
        }
        .reply-bottom {
          display: flex;
          align-items: center;
          margin-top: 6px;
          font-size: 12px;
          color: $text-minor;
          .reply-text {
            display: flex;
            align-items: center;
            margin-left: 10px;
            cursor: pointer;
            &:hover {
              color: $text-333;
            }
            .icon-comment {
              margin-right: 5px;
            }
          }
        }
      }

      .write-reply {
        height: 50px;
        display: flex;
        align-items: center;
        font-size: 14px;
       color: $text-minor;
        padding: 20px;

        cursor: pointer;
        &:hover {
         color: $text-main;
        }
        .el-icon-edit {
          margin-right: 5px;

        }
      }
      .fade-enter-active, fade-leave-active {
        transition: opacity 0.5s;
      }
      .fade-enter, .fade-leave-to {
        opacity: 0;
      }
      .input-wrapper {
        padding: 10px;
        .gray-bg-input, .el-input__inner {
          /*background-color: #67C23A;*/
        }
        .btn-control {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding-top: 10px;
          .cancel {
            font-size: 16px;
            color: $text-normal;
            margin-right: 20px;
            cursor: pointer;
            &:hover {
              color: $text-333;
            }
          }
          .confirm {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>

用了scss进行布局；

由于目前还没有连接数据库，写了mockdata.js文件模拟数据库信息

还不太清楚怎么设置接口，需要后续学习

三、看了markdown转换html没太懂，需要后续学习