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

开始编写用户个人主页，实现基本功能

<template>
  <div>
    <div><headers_copy></headers_copy></div>
    <div class="head">
          <div  id="content" style="padding-top: 40px" >
           <span> <el-avatar :size="120"  src="image"  ><img :src="image"></el-avatar></span>
            <div id="username" style="padding-top: 10px">
              <span>{{username}} </span> </div>
            <div id="email" style="padding-top: 40px">
            <span>  <el-descriptions-item label="邮箱">{{mail}}</el-descriptions-item> </span>
            </div>
      </div>
    </div>
<div class="article">
  <el-divider content-position="left">
    <div style="width: 200px;padding-left: 30px;font-weight: bold;color: dodgerblue">全部文章</div>
  </el-divider>
</div>
<div class="resource">
  <div class="block">
        <el-timeline  >

          <el-timeline-item v-for="item in tabledata" :timestamp="item.editTime"  placement="top"  >
            <router-link :to="{name:'BlogDetail',query:{aid:item.aid}}" style="color: #333333;text-decoration: none" content="title" >
              <el-card >
                <h4>
                  {{item.title}}

                </h4>
                <p title="summary" content="summary">{{item.summary}}</p>

              </el-card>
            </router-link>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

  </div>
</template>

<script>
import headers_copy from "../components/headers_copy";
const axios = require('axios');
export default {
  name: "user",
  components: {
    headers_copy
  },
  data() {
    return {
      uid: this.$route.query.uid,
      mail: '',
      image: '',
      username: '',
      tabledata:[],
    }
    },


    created()
    {
      const _this = this;
      console.log('页面创建')
      axios.get('http://47.107.40.143:8080/head',{params:{uid:_this.uid}}).then(function (resp){
        console.log(resp)
        _this.username=resp.data.data[0].username
        _this.mail=resp.data.data[0].email
        _this.image=resp.data.data[0].iconurl
        console.log('user查的数据为'+_this.username)
      })
      axios.get('http://47.107.40.143:8080/getSpecArticle',{params:{uid:_this.uid,state:1}}).then(function (resp){
        console.log('数组的长度为'+resp.data.data.length)
        for(let i = 0;i < resp.data.data.length;i++){
          _this.tabledata.push({
            aid: resp.data.data[i].aid,
            title: resp.data.data[i].title,
            summary:resp.data.data[i].summary,
            editTime:resp.data.data[i].editTime,

          })
          console.log(resp.data.data[i].aid)
        }
        console.log(resp)
      })

    },

    methods: {




    }



}
</script>

<style scoped>
.head{position:relative;height: 230px}
#content{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);}
#email{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:transparent;}
#username{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-size:20px}
</style>