2021/7/2 学习知识汇聚平台：前台界面搭建

在对vue完成基本的创建配置后，接下来进行页面的具体布局设计:

主要使用element的组件模块进行布局：

（很易上手，好用）

1、个人信息界面

<template>
<div>
  <Leftbar>
  </Leftbar>
  <header>
  </header>
    <div style="padding-left: 32px" class="hello">
      <h1>{{ msg }}</h1>
      <ul>
        <li><el-row :gutter="10">
          <el-col :span="1.5" offset="1" style="padding-top: 40px"><div class="grid-content bg-purple">
                <div class="block">
                  <el-avatar shape="square" :size="70" :src="squareUrl">
                </el-avatar>
                </div>
          </div></el-col>
          <el-col :span="2" offset="1" style="padding-top: 72px"><div class="grid-content bg-purple-light">
            <a
              href="https://twitter.com/vuejs"
              target="_blank" style="text-decoration: none"
            >学生
            </a></div></el-col>
          <el-col :span="3"offset="0" style="padding-top: 72px"><div class="grid-content bg-purple-light">
            <a
              href="https://twitter.com/vuejs"
              target="_blank" style="text-decoration: none"
            >昵称：Nuyoah</a>
          </div></el-col>
          <el-col :span="1.5" offset="1" style="padding-top: 60px"><div class="grid-content bg-purple">
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
          </div></el-col>
        </el-row>
        </li>
        <br>
        <li><el-row :gutter="10">
          <el-col :span="7" offset="1" style="padding-top: 32px"><div class="grid-content bg-purple">
            <a
              href="https://twitter.com/vuejs"
              target="_blank" style="text-decoration: none"
            >
              电子邮箱：15206931188@163.com
            </a></div></el-col>
          <el-col :span="1.5" offset="0" style="padding-top: 20px"><div class="grid-content bg-purple">
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
          </div></el-col>
        </el-row>
        </li>
        <br>
        <li><el-row :gutter="10">
          <el-col :span="7" offset="1" style="padding-top: 32px"><div class="grid-content bg-purple">
            <a
              href="https://twitter.com/vuejs"
              target="_blank" style="text-decoration: none"
            >

            </a></div></el-col>
        </el-row>
        </li>
        <br>

      </ul>
    </div>
</div>

</template>
<script>
import Leftbar from "../components/Leftbar";
import header from "../components/header";
export default {
  name:"DashBoard",
  components: {
    Leftbar,
    header
  },
  data () {
    return {
      squareUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      sizeList: ["medium"]
    }
  }
}
</script>
<style>
ul {
  list-style-type: none;
  padding: 0%;
  padding-left: 100px;
}

a {
  color: #606266;
}

.bg-purple {
  background: Transparent;
}
.bg-purple-light {
  background: Transparent;
}

.grid-content {
  border-radius: 0px;
  min-height: 0px;

}
.hello{
  margin-left: 130px;
  margin-top: 20px;
}
</style>

2、博客管理界面：草稿箱和博客管理

<template>
<div>
  <Leftbar>
  </Leftbar>
  <header>
  </header>
  <div class="blog">

    <el-button  type="primary" plain icon="el-icon-edit">新建博客</el-button>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="博客"
      width="450">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>博客名称: {{ scope.row.name }}</p>
          <p>摘要: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-button type="text">博客名称</el-button>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="编辑时间"
      width="220" >
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column  label="操作" >
      <template slot-scope="scope">
        <el-button-group>
          <el-button type="primary"plain icon="el-icon-edit"></el-button>
          <el-button type="primary"plain icon="el-icon-delete"></el-button>
        </el-button-group>
      </template>
    </el-table-column>
  </el-table>
  </div>
  </div>
</template>

<script>
import Leftbar from "../components/Leftbar";
import header from "../components/header";
export default {
  name:"Blog",
  components: {
    Leftbar,
    header
  },
  data() {
    return {
      tableData: [{
        date: '2021-7-01',
        name: '博客名称',
        address: '博客摘要'
      }, {
        date: '2021-7-01',
        name: '博客名称',
        address: '博客摘要'
      }, {
        date: '2021-7-01',
        name: '博客名称',
        address: '博客摘要'
      }, {
        date: '2021-7-01',
        name: '博客名称',
        address: '博客摘要'
      }]
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
}
</script>

<style scoped>

.blog{
  margin-left: 250px;
  margin-top: 15px;
}
</style>

博客管理界面设计代码如上：

草稿箱界面对博客管理界面进行了复用

对于专题、消息、收藏界面，也初始使用了表格布局，只是在一定程度上做了删改复用以符合功能需求：

在基本对教师个人主页进行布局后，尝试与平台主页面进行组合，最终可以实现整合，一开始尝试在本机进行整合，但运行错误很多，最后在平台前端整合完成，实现从主页面到个人中心的跳转，整合了平台前端的用户登录，平台主页与博客编辑页面

接下来将尝试与后端的整合数据库连接实现