2021/7/6 学习知识汇聚平台：前台页面修改

今天尝试进行了前台接口的测试连接，连接了博客列表页面的数据内容，但是发现原来的布局，会使博客的简介内容占用较大视觉区域，并且较为混乱

于是对于几个界面重新进行了修改：

<template>
<div>
  <Leftbar>
  </Leftbar>
<Headers_copy>
</Headers_copy>

  <div class="blog">
    <el-button  type="primary" plain icon="el-icon-edit" >
      新建博客</el-button>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="博客简介">
              <span>{{ props.row.summary }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          label="博客名称"
          prop="name">
        <el-button type="text">博客名称</el-button>
      </el-table-column>
      <el-table-column
          label="编辑时间"
          prop="time">
      </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 Headers_copy from "@/components/headers_copy";
import request from "../utils/request";
import axios from "axios";
export default {
  name:"Blog",
  components: {

    Headers_copy,
    Leftbar,
  },
  data() {
    return {
      tableData: [{
        name: '名称',
        time: '2021.07.01',
        address: '简介',
      }, {
        name: '名称',
        time: '2021.07.01',
        address: '简介',
      }, {
        name: '名称',
        time: '2021.07.01',
        address: '简介',
      }, {
        name: '名称',
        time: '2021.07.01',
        address: '简介',
      }]
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
}
function created() {
  const _this=this
  axios.get('http://localhost:8080/getSpecArticle').then(function (resp){
    _this.tableData=resp.data.data
    console.log(resp)
  })
}
</script>

<style scoped>
.blog{
  margin-left: 250px;
  margin-top: 15px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

最终的展示效果如下：

对于每条消息可以下拉展开具体简介内容

另外尝试完善了个人信息的修改功能图窗：

<el-button type="primary"  icon="el-icon-edit" circle @click="dialogVisible = true"></el-button>

            <el-dialog
                title="信息修改"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
              <span>
                昵称：
                <el-input
                    type="textarea"
                    autosize
                    placeholder="请输入内容"
                    v-model="textarea1">
                </el-input>
                <div style="margin: 20px 0;"></div>
                电子邮箱：
                <el-input
                    type="textarea"
                    autosize
                    placeholder="请输入内容"
                    v-model="textarea2">
                </el-input>
              </span>
              <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
           </el-dialog>

可展现如下弹窗：

现阶段仍有部分界面未整合，需要赶快进行接口的实现。