2021/7/9 学习知识汇聚平台:博客删除、邮箱上传功能实现

今天主要实现了两个接口功能:博客删除以及对于用户信息中的邮箱的编辑修改。

首先对于用户个人信息界面,在此进行了页面的布局修改并增加了头像、邮箱修改弹窗,界面布局如下:

 

 

关于邮箱的修改功能实现代码如下:

methods:{
    open() {
      this.$prompt('请输入修改邮箱', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的邮箱是: ' + value,

        });

        console.log(value)

        axios.post("http://47.107.40.143:8080//updateEmail",QS.stringify(
            {
              uid:sessionStorage.getItem("uid"),
              email:value

            })).then(res=>{
          console.log(res)
          window.location.reload()
        })
      })

          .catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

 其次是博客删除功能

在草稿箱页面以及博客列表页面的删除按钮,之前只是进行了按钮布局,现在完成了博客的删除功能,

DeleteArticle(aid){
      axios.get("http://47.107.40.143:8080/deleteArticle",{params:{aid:aid}}).then(res=>{
        console.log(res)
        window.location.reload()
      })
    }

在功能实现过程中,主要遇到的问题是如何根据登录确定用户的uid,在反复尝试之后,使用了

sessionStorage

实现:

if (_this.ruleForm.username == resp1.data.data.uid) {
                  sessionStorage.setItem("uid", resp1.data.data.uid)
                  sessionStorage.setItem("username", resp1.data.data.username)
                  _this.$router.push({
                    name: "Blogs",
                  })

在登录界面获得用户信息并返回后,其他页面直接调用即可。

由此实现了对数据库相关数据的调用,关于博客列表页面相关代码如下:

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

    <div class="blog">
      <el-button type="primary" plain icon="el-icon-edit" >
        <el-link href="http://localhost:8081/#/blog/add"  style="color: #333333;text-decoration: none">新建博客</el-link>
      </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="博客名称">
          <template slot-scope="props">
            <el-button type="text"><span content="name">
            {{props.row.title}}
          </span></el-button>
          </template>
        </el-table-column>
        <el-table-column
            label="编辑时间"
        >
          <template slot-scope="props">
          <span content="time">
            {{props.row.editTime}}
          </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" @click="DeleteArticle(scope.row.aid)"></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";
const axios = require('axios');
export default {
  name:"Blog",
  components: {

    Headers_copy,
    Leftbar,
  },
  data() {
    return {
      uid: sessionStorage.getItem("uid"),
      tableData: [],

    }
  },
  created() {
    const _this=this
    axios.get("http://47.107.40.143:8080/getSpecArticle",{params:{uid:this.uid,state:1}}).then(res =>{
      _this.tableData=res.data.data


      console.log(res)
    })
  },
  methods: {

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    DeleteArticle(aid){
      axios.get("http://47.107.40.143:8080/deleteArticle",{params:{aid:aid}}).then(res=>{
        console.log(res)
        window.location.reload()
      })
    }


  }
}
</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>

界面内容如下:

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
任务2:远程桌面 实验时间、地点:1-1-5/6,NA-112 完成情况:可以通过远程桌面连接到目标计算机,进行文件输和应用程序操作。 关联知识点:远程桌面协议、网络连接配置 对实验的理解:通过配置目标计算机的远程桌面协议和网络连接,实现远程连接控制目标计算机的操作。 任务3:1P的计算 实验时间、地点:2-2-3/4,NA-112 完成情况:成功运行了1P的计算任务,并获取了正确的结果。 关联知识点:并行计算、高性能计算 对实验的理解:通过编写并行计算程序,利用高性能计算集群进行计算任务的加速。 任务4:子网划分及汇聚网络设计 实验时间、地点:3-1-1/2,NA-112 完成情况:完成了子网划分和汇聚网络的设计,并实现了网络设备的配置和连接。 关联知识点:IP地址规划、子网划分、网络设备配置 对实验的理解:通过对网络规划和IP地址进行划分,设计出合理的汇聚网络拓扑结构,配置和连接网络设备,实现网络的正常通信。 任务5:VLAN规划 实验时间、地点:3-2-1/2,NA-112 完成情况:完成了VLAN规划,并实现了网络设备的配置和连接。 关联知识点:VLAN技术、网络设备配置 对实验的理解:通过对网络进行VLAN划分,配置和连接网络设备,实现不同VLAN之间的隔离和通信。 任务7:二层通道的建立 实验时间、地点:4-1-1/2,NA-112 完成情况:成功建立了二层通道,并实现了网络设备的配置和连接,实现了数据的输。 关联知识点:二层通道技术、网络设备配置 对实验的理解:通过配置和连接网络设备,建立二层通道,实现数据的快速输。 任务8:子网的互连(路由实验) 实验时间、地点:4-2-1/2,NA-112 完成情况:完成了子网的互连实验,并实现了网络设备的配置和连接。 关联知识点:路由技术、网络设备配置 对实验的理解:通过配置和连接网络设备,实现不同子网之间的互连,实现数据的跨子网输。 任务9:远程管理和配置 实验时间、地点:5-1-1/2,NA-112 完成情况:通过远程管理和配置工具,成功对目标网络设备进行了管理和配置。 关联知识点:远程管理和配置、网络设备配置 对实验的理解:通过远程管理和配置工具,实现对网络设备的远程管理和配置,提高了设备管理效率。 任务10:Visio画图 实验时间、地点:5-2-1/2,NA-112 完成情况:使用Visio工具,完成了网络拓扑结构图的绘制。 关联知识点:网络拓扑结构、Visio工具 对实验的理解:通过Visio工具,绘制出网络的拓扑结构图,便于理解和管理网络。 任务11:Wireshark工具抓取ARP报文 实验时间、地点:6-1-1/2,NA-112 完成情况:使用Wireshark工具,成功抓取了ARP报文,并进行了分析。 关联知识点:网络协议分析、Wireshark工具 对实验的理解:通过Wireshark工具,抓取网络数据包,实现对网络协议的分析和理解。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值