博客系统后台前端UI设计

news2024/11/26 4:41:50

效果展示

 

 

 

 

 

 

 

 

 

API编写

index.js

import axios from "./request"

const fastdfs = {
    delete: 'file/fastdfs/delete'
}
const permission = {
    search: "/sys/permission/search",
    add: "/sys/permission/add",
    update: "/sys/permission/update",
    delete: "/sys/permission/delete",
    findById: "/sys/permission/findById",
}
const blog_tag = {
    search: "/back/blogTag/search",
    add: "/back/blogTag/add",
    update: "/back/blogTag/update",
    delete: "/back/blogTag/delete",
    findById: "/back/blogTag/findById",
}

const blog_type = {
    search: "/back/blogType/search",
    add: "/back/blogType/add",
    update: "/back/blogType/update",
    delete: "/back/blogType/delete",
    findById: "/back/blogType/findById",
    findAll: "/back/blogType/findAll",
}

const blog_visibility = {
    search: "/back/blogVisibility/search",
    add: "/back/blogVisibility/add",
    update: "/back/blogVisibility/update",
    delete: "/back/blogVisibility/delete",
    findById: "/back/blogVisibility/findById",
    findAll: "/back/blogVisibility/findAll",
}

const blog = {
    search: "/back/blog/search",
    add: "/back/blog/add",
    update: "/back/blog/update",
    delete: "/back/blog/delete",
    findById: "/back/blog/findById",
    updateStatus:'/back/blog/updateStatus',
    addColumn:'/back/blog/addColumn',
    deleteColumn:'/back/blog/deleteColumn',
    findColumnByBlogId:'/back/blog/findColumnByBlogId',
    addTag:'/back/blog/addTag',
    deleteTag:'/back/blog/deleteTag',
    findTagByBlogId:'/back/blog/findTagByBlogId',
}

const user = {
    findAll: '/back/user/findAll'
}

const blog_column = {
    search: "/back/blogColumn/search",
    searchByUserId: "/back/blogColumn/searchByUserId",
    add: "/back/blogColumn/add",
    update: "/back/blogColumn/update",
    delete: "/back/blogColumn/delete",
    findById: "/back/blogColumn/findById",
}

const blog_comment = {
    search: "/back/blogComment/search",
    searchByBlogId: "/back/blogComment/searchByBlogId",
    add: "/back/blogComment/add",
    update: "/back/blogComment/update",
    delete: "/back/blogComment/delete",
    findById: "/back/blogComment/findById",
}

const api = {
    fastdfs_delete(params) {
        return axios.delete(fastdfs.delete, {params})
    },
    permission_add(params) {
        return axios.post(permission.add, params)
    },
    permission_update(params) {
        return axios.post(permission.update, params)
    },
    permission_delete(params) {
        return axios.delete(permission.delete, {params})
    },
    permission_findById(params) {
        return axios.get(permission.findById, {params})
    },
    permission_search(params) {
        return axios.get(permission.search, {params})
    },


    blog_tag_add(params) {
        return axios.post(blog_tag.add, params)
    },
    blog_tag_update(params) {
        return axios.post(blog_tag.update, params)
    },
    blog_tag_delete(params) {
        return axios.delete(blog_tag.delete, {params})
    },
    blog_tag_findById(params) {
        return axios.get(blog_tag.findById, {params})
    },
    blog_tag_search(params) {
        return axios.get(blog_tag.search, {params})
    },


    blog_type_add(params) {
        return axios.post(blog_type.add, params)
    },
    blog_type_update(params) {
        return axios.post(blog_type.update, params)
    },
    blog_type_delete(params) {
        return axios.delete(blog_type.delete, {params})
    },
    blog_type_findById(params) {
        return axios.get(blog_type.findById, {params})
    },
    blog_type_search(params) {
        return axios.get(blog_type.search, {params})
    },
    blog_type_findAll() {
        return axios.get(blog_type.findAll)
    },

    blog_visibility_add(params) {
        return axios.post(blog_visibility.add, params)
    },
    blog_visibility_update(params) {
        return axios.post(blog_visibility.update, params)
    },
    blog_visibility_delete(params) {
        return axios.delete(blog_visibility.delete, {params})
    },
    blog_visibility_findById(params) {
        return axios.get(blog_visibility.findById, {params})
    },
    blog_visibility_search(params) {
        return axios.get(blog_visibility.search, {params})
    },
    blog_visibility_findAll() {
        return axios.get(blog_visibility.findAll)
    },
    blog_add(params) {
        return axios.post(blog.add, params)
    },
    blog_update(params) {
        return axios.post(blog.update, params)
    },
    blog_updateStatus(params) {
        return axios.post(blog.updateStatus, params)
    },
    blog_delete(params) {
        return axios.delete(blog.delete, {params})
    },
    blog_findById(params) {
        return axios.get(blog.findById, {params})
    },
    blog_search(params) {
        return axios.get(blog.search, {params})
    },
    blog_addTag(params) {
        return axios.post(blog.addTag, params)
    },
    blog_deleteTag(params) {
        return axios.delete(blog.deleteTag, {params})
    },
    blog_findTagByBlogId(params) {
        return axios.get(blog.findTagByBlogId, {params})
    },
    blog_addColumn(params) {
        return axios.post(blog.addColumn, params)
    },
    blog_deleteColumn(params) {
        return axios.delete(blog.deleteColumn, {params})
    },
    blog_findColumnByBlogId(params) {
        return axios.get(blog.findColumnByBlogId, {params})
    },




    user_findAll() {
        return axios.get(user.findAll)
    },
    blog_column_add(params) {
        return axios.post(blog_column.add, params)
    },
    blog_column_update(params) {
        return axios.post(blog_column.update, params)
    },
    blog_column_delete(params) {
        return axios.delete(blog_column.delete, {params})
    },
    blog_column_findById(params) {
        return axios.get(blog_column.findById, {params})
    },
    blog_column_search(params) {
        return axios.get(blog_column.search, {params})
    },
    blog_column_searchByUserId(params) {
        return axios.get(blog_column.searchByUserId, {params})
    },

    blog_comment_add(params) {
        return axios.post(blog_comment.add, params)
    },
    blog_comment_update(params) {
        return axios.post(blog_comment.update, params)
    },
    blog_comment_delete(params) {
        return axios.delete(blog_comment.delete, {params})
    },
    blog_comment_findById(params) {
        return axios.get(blog_comment.findById, {params})
    },
    blog_comment_search(params) {
        return axios.get(blog_comment.search, {params})
    },
    blog_comment_searchByBlogId(params) {
        return axios.get(blog_comment.searchByBlogId, {params})
    },


}
export default api

Blog.vue

<template>
  <div class="data-container">
    <!--添加 start-->
    <div class="data-header">
      <el-input class="input" @keyup.enter="searchHandle" v-model="searchInfo" size="large"
                placeholder="请输入关键字"></el-input>
      <el-button @click="searchHandle" class="button" size="large" type="primary" plain>搜索</el-button>
      <el-button round @click="addHander" size="large" type="primary">
        <el-icon>
          <DocumentAdd/>
        </el-icon>
        <span>新增</span>
      </el-button>
    </div>
    <!--添加 end-->
    <!--表格数据展示 start-->
    <div class="data-table">
      <el-table :data="dataList.list" style="width: 1280px;">
        <el-table-column label="封面" prop="blogCoverImg" align="center" width="80">
          <template #default="scope">
            <img :src="scope.row.blogCoverImg" style="height:60px"/>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="标题" prop="blogTitle" align="center"
                         width="120"></el-table-column>
        <el-table-column align="center" :formatter="value => detaFormater(Number(value.blogCreateData))"
                         prop="blogCreateData" label="创作时间" width="100"/>
        <el-table-column label="状态" prop="blogStatus" align="center" width="80">
          <template #default="scope">
            <el-tag round :type="scope.row.blogStatus =='0' ? 'warning' : 'success'">
              {{ scope.row.blogStatus == '0' ? '正在审核' : '正常发布' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="作者" prop="user.nickname" align="center" width="80"></el-table-column>
        <el-table-column label="类型" prop="blogType.blogTypeName" align="center" width="80"></el-table-column>
        <el-table-column label="可见范围" prop="blogVisibility.blogVisibilityName" align="center"
                         width="80"></el-table-column>
        <el-table-column label="操作" align="center" width="400">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" round type="success" @click="handleComment(scope.$index, scope.row)">评论
            </el-button>
            <el-popover trigger="click" placement="top" :width="250" title="标签" offset="20">
              <template #reference>
                <el-button @click="handTags(scope.$index, scope.row)" size="small" round type="success">标签</el-button>
              </template>
              <el-tag round v-for="(item,index) in tagList.list" :key="index">
                {{ item.blogTagName }}
              </el-tag>
            </el-popover>
            <el-popover trigger="click" placement="top" :width="250" title="专栏" offset="20">
              <template #reference>
                <el-button @click="handColumns(scope.$index, scope.row)" size="small" round type="success">专栏
                </el-button>
              </template>
              <el-tag round type="success" v-for="(item,index) in columnList.list" :key="index">
                {{ item.blogColumnName }}
              </el-tag>
            </el-popover>
            <el-button size="small" type="primary" @click="handleStatus(scope.$index, scope.row)">修改状态</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="展现" prop="blogShow" align="center" width="60"></el-table-column>
        <el-table-column label="阅读" prop="blogRead" align="center" width="60"></el-table-column>
        <el-table-column label="点赞" prop="blogLike" align="center" width="60"></el-table-column>
        <el-table-column label="收藏" prop="blogFavorite" align="center" width="60"></el-table-column>
      </el-table>
      <!--分页 start-->
      <div class="page">
        <el-pagination background
                       layout="prev,pager,next,jumper"
                       :default-page-size="defaultPageSize"
                       :total="totalData"
                       @current-change="currentChangeHaddler"></el-pagination>
      </div>
      <!--分页 end-->
    </div>
    <!--表格数据展示 end-->
    <!--添加对话框 start-->
    <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="70%" center>
      <el-form inline :model="addFormInfo" label-width="150px">
        <el-form-item label="封面">
          <el-upload list-type="picture-card"
                     :action="uploadStore.fastdfsUploadUrl"
                     :on-success="onHeadImageAddSuccess"
                     :on-remove="onHeadImageAddRemove">
            <el-icon>

            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="addFormInfo.blogTitle"></el-input>
        </el-form-item>
        <el-form-item label="创作时间">
          <el-date-picker value-format="x" v-model="addFormInfo.blogCreateData" type="date"></el-date-picker>
        </el-form-item>
        <el-form-item label="作者">
          <el-select v-model="addFormInfo.userId" placeholder="请选择作者" size="large">
            <el-option v-for="item in userList.list" :key="item.userId"
                       :label="item.nickname"
                       :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="addFormInfo.blogTypeId" placeholder="请选择类型" size="large">
            <el-option v-for="item in typeList.list" :key="item.blogTypeId"
                       :label="item.blogTypeName"
                       :value="item.blogTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可见范围">
          <el-select v-model="addFormInfo.blogVisibilityId" placeholder="请选择可见范围" size="large">
            <el-option v-for="item in visibilityList.list" :key="item.blogVisibilityId"
                       :label="item.blogVisibilityName"
                       :value="item.blogVisibilityId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="摘要">
          <el-input type="textarea" rows="3" style="width: 800px" v-model="addFormInfo.blogSummary"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <TinymceEditor @onDataEvent="getAddDataHandler"/>
        </el-form-item>
        <el-form-item label="展现量">
          <el-input v-model="addFormInfo.blogShow"></el-input>
        </el-form-item>
        <el-form-item label="阅读量">
          <el-input v-model="addFormInfo.blogRead"></el-input>
        </el-form-item>
        <el-form-item label="点赞量">
          <el-input v-model="addFormInfo.blogLike"></el-input>
        </el-form-item>
        <el-form-item label="收藏量">
          <el-input v-model="addFormInfo.blogFavorite"></el-input>
        </el-form-item>


      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--添加对话框 end-->
    <!--编辑对话框 start-->
    <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
    <el-dialog
        draggable
        destroy-on-close
        v-model="dialogEditorVisible"
        title="编辑"
        width="70%"
        center>
      <el-form inline :model="editorFormInfo" label-width="150px">
        <el-form-item label="封面">
          <el-upload list-type="picture-card"
                     :action="uploadStore.fastdfsUploadUrl"
                     :on-success="onHeadImageEditSuccess"
          >
            <el-image :src="editorFormInfo.blogCoverImg"/>

          </el-upload>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="editorFormInfo.blogTitle"></el-input>
        </el-form-item>
        <el-form-item label="创作时间">
          <el-date-picker value-format="x" v-model="editorFormInfo.blogCreateData" type="date"></el-date-picker>
        </el-form-item>
        <el-form-item label="作者">
          <el-select v-model="editorFormInfo.userId" placeholder="请选择作者" size="large">
            <el-option v-for="item in userList.list" :key="item.userId"
                       :label="item.nickname"
                       :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="editorFormInfo.blogTypeId" placeholder="请选择类型" size="large">
            <el-option v-for="item in typeList.list" :key="item.blogTypeId"
                       :label="item.blogTypeName"
                       :value="item.blogTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可见范围">
          <el-select v-model="editorFormInfo.blogVisibilityId" placeholder="请选择可见范围" size="large">
            <el-option v-for="item in visibilityList.list" :key="item.blogVisibilityId"
                       :label="item.blogVisibilityName"
                       :value="item.blogVisibilityId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="摘要">
          <el-input type="textarea" rows="3" style="width: 800px" v-model="editorFormInfo.blogSummary"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <TinymceEditor :value="editorFormInfo.blogContent" @onDataEvent="getEditDataHandler"/>
        </el-form-item>
        <el-form-item label="展现量">
          <el-input v-model="editorFormInfo.blogShow"></el-input>
        </el-form-item>
        <el-form-item label="阅读量">
          <el-input v-model="editorFormInfo.blogRead"></el-input>
        </el-form-item>
        <el-form-item label="点赞量">
          <el-input v-model="editorFormInfo.blogLike"></el-input>
        </el-form-item>
        <el-form-item label="收藏量">
          <el-input v-model="editorFormInfo.blogFavorite"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureEditorHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--编辑对话框 end-->
  </div>
</template>

<script setup>
import {detaFormater} from "@/utils/utils.js"
import axios from "../../api/index.js"
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {useUploadStore} from "../../stores/uploadStore.js"
import TinymceEditor from "../../components/TinymceEditor/Index.vue"

import {useRouter} from 'vue-router'

const router = useRouter()
const uploadStore = useUploadStore()


//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化用户列表
const userList = reactive({
  list: []
})
//初始化类型列表
const typeList = reactive({
  list: []
})
//初始化可见范围列表
const visibilityList = reactive({
  list: []
})
//初始化标签列表
const tagList = reactive({
  list: []
})
//初始化专栏列表
const columnList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  blogCoverImg: "",
  blogTitle: "",
  blogSummary: "",
  blogContent: "",
  blogCreateData: "",
  blogStatus: "0",
  blogShow: "",
  blogRead: "",
  blogLike: "",
  blogFavorite: "",
  userId: "",
  blogTypeId: "",
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  blogId: "",
  blogCoverImg: "",
  blogTitle: "",
  blogSummary: "",
  blogContent: "",
  blogCreateData: "",
  blogStatus: "",
  blogShow: "",
  blogRead: "",
  blogLike: "",
  blogFavorite: "",
  userId: "",
  blogTypeId: "",
})
//初始化富文本编辑器的内容【新增时】
const getAddDataHandler = (data) => {
  addFormInfo.blogContent = data
}
//初始化富文本编辑器的内容【修改时】
const getEditDataHandler = (data) => {
  editorFormInfo.blogContent = data
}
/**
 * 网路请求：分页查询
 *  */
const http = (search, page, size) => {
  axios.blog_search({
    search: search,
    page: page,
    size: size
  }).then(res => {
    console.log(res.data)
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
onMounted(() => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
  axios.user_findAll().then(res => {
    if (res.data.code == 200) {
      userList.list = res.data.data
    }
  })
  axios.blog_type_findAll().then(res => {
    if (res.data.code == 200) {
      typeList.list = res.data.data
    }
  })
  axios.blog_visibility_findAll().then(res => {
    if (res.data.code == 200) {
      visibilityList.list = res.data.data
    }
  })
})
/**
 * 查询标签
 */
const handTags = (index, row) => {
  axios.blog_findTagByBlogId({
    blogId: row.blogId
  }).then(res => {
    if (res.data.code == 200) {
      tagList.list = res.data.data
    }
  })
}
/**
 * 查询专栏
 */
const handColumns = (index, row) => {
  axios.blog_findColumnByBlogId({
    blogId: row.blogId
  }).then(res => {
    if (res.data.code == 200) {
      columnList.list = res.data.data
    }
  })
}
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  http(searchInfo.value, nowPage, defaultPageSize.value)
  currentPage.value = nowPage
}
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
}
//上传成功的钩子
const onHeadImageAddSuccess = (response, uploadFile) => {
  addFormInfo.blogCoverImg = response.data
  ElMessage.success("上传成功")
}
//移除图片的钩子
const onHeadImageAddRemove = (response, uploadFile) => {
  axios.fastdfs_delete(
      {
        filePath: addFormInfo.blogCoverImg
      }
  ).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("移除成功")
    }
  })
}
/**
 * 修改状态
 */
const handleStatus = (index, row) => {
  axios.blog_updateStatus({
    blogId: row.blogId
  }).then(res => {
    if (res.data.code == 200) {
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 评论
 */
const handleComment = (index, row) => {
  router.push("/blog/comment/" + row.blogId)

}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  axios.blog_add({
    blogCoverImg: addFormInfo.blogCoverImg,
    blogTitle: addFormInfo.blogTitle,
    blogSummary: addFormInfo.blogSummary,
    blogContent: addFormInfo.blogContent,
    blogCreateData: addFormInfo.blogCreateData,
    blogStatus: addFormInfo.blogStatus,
    blogShow: addFormInfo.blogShow,
    blogRead: addFormInfo.blogRead,
    blogLike: addFormInfo.blogLike,
    blogFavorite: addFormInfo.blogFavorite,
    userId: addFormInfo.userId,
    blogTypeId: addFormInfo.blogTypeId,
    blogVisibilityId: addFormInfo.blogVisibilityId,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {

  dialogEditorVisible.value = true
  axios.blog_findById({
    blogId: row.blogId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.blogId = res.data.data.blogId;
      editorFormInfo.blogCoverImg = res.data.data.blogCoverImg;
      editorFormInfo.blogTitle = res.data.data.blogTitle;
      editorFormInfo.blogSummary = res.data.data.blogSummary;
      editorFormInfo.blogContent = res.data.data.blogContent;
      editorFormInfo.blogCreateData = res.data.data.blogCreateData;
      editorFormInfo.blogStatus = res.data.data.blogStatus;
      editorFormInfo.blogShow = res.data.data.blogShow;
      editorFormInfo.blogRead = res.data.data.blogRead;
      editorFormInfo.blogLike = res.data.data.blogLike;
      editorFormInfo.blogFavorite = res.data.data.blogFavorite;
      editorFormInfo.userId = res.data.data.userId;
      editorFormInfo.blogTypeId = res.data.data.blogTypeId;
      editorFormInfo.blogVisibilityId = res.data.data.blogVisibilityId;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 头图修改时图片上传成功事件
 */
    //上传成功的钩子
const onHeadImageEditSuccess = (response, uploadFile) => {
      //删除以前图片
      axios.fastdfs_delete(
          {
            filePath: editorFormInfo.blogCoverImg
          }
      ).then(res => {
        if (res.data.code == 200) {
          ElMessage.success("fastdfs移除原图片成功")
        }
      })
      //替换为现在的图片
      editorFormInfo.blogCoverImg = response.data
      ElMessage.success("上传成功")

    }
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.blog_update({
    blogId: editorFormInfo.blogId,
    blogCoverImg: editorFormInfo.blogCoverImg,
    blogTitle: editorFormInfo.blogTitle,
    blogSummary: editorFormInfo.blogSummary,
    blogContent: editorFormInfo.blogContent,
    blogCreateData: editorFormInfo.blogCreateData,
    blogStatus: editorFormInfo.blogStatus,
    blogShow: editorFormInfo.blogShow,
    blogRead: editorFormInfo.blogRead,
    blogLike: editorFormInfo.blogLike,
    blogFavorite: editorFormInfo.blogFavorite,
    userId: editorFormInfo.userId,
    blogTypeId: editorFormInfo.blogTypeId,
    blogVisibilityId: editorFormInfo.blogVisibilityId,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.blog_delete({
      blogId: row.blogId
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        //刷新
        http(searchInfo.value, currentPage.value, defaultPageSize.value)
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })


}
</script>
<style scoped>
.data-container {
  background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  height: 800px;
}

.data-header {
  padding: 20px;
}

.data-header .input {
  width: 300px;
}

.data-table {
  padding: 20px;
}

.page {
  position: fixed;
  right: 10px;
  bottom: 10px;
}
</style>

Column.vue

<template>
  <div class="data-container">
    <!--添加 start-->
    <div class="data-header">
      <el-button round @click="onClickLeft" size="large" type="primary">
        <el-icon><ArrowLeftBold /></el-icon>
      </el-button>
      <el-button round @click="addHander" size="large" type="primary">
        <el-icon>
          <DocumentAdd/>
        </el-icon>
        <span>新增</span>
      </el-button>
    </div>
    <!--添加 end-->
    <!--表格数据展示 start-->
    <div class="data-table">
      <el-table :data="dataList.list" style="width: 700px;">
        <el-table-column label="封面" prop="blogColumnCoverImg" align="center">
          <template #default="scope">
            <img :src="scope.row.blogColumnCoverImg" style="height:60px"/>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="blogColumnName" align="center"></el-table-column>
        <el-table-column label="简介" show-overflow-tooltip prop="blogColumnIntroduction"
                         align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页 start-->
      <div class="page">
        <el-pagination background
                       layout="prev,pager,next,jumper"
                       :default-page-size="defaultPageSize"
                       :total="totalData"
                       @current-change="currentChangeHaddler"></el-pagination>
      </div>
      <!--分页 end-->
    </div>
    <!--表格数据展示 end-->
    <!--添加对话框 start-->
    <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="35%" center>
      <el-form inline :model="addFormInfo" label-width="150px">
        <el-form-item label="封面">
          <el-upload list-type="picture-card"
                     :action="uploadStore.fastdfsUploadUrl"
                     :on-success="onHeadImageAddSuccess"
                     :on-remove="onHeadImageAddRemove">
            <el-icon>
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>

        <el-form-item label="名称">
          <el-input v-model="addFormInfo.blogColumnName"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" rows="6" style="width: 200px" v-model="addFormInfo.blogColumnIntroduction">
          "></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--添加对话框 end-->
    <!--编辑对话框 start-->
    <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
    <el-dialog
        draggable
        destroy-on-close
        v-model="dialogEditorVisible"
        title="编辑"
        width="35%"
        center>
      <el-form inline :model="editorFormInfo" label-width="150px">
        <el-form-item label="封面">
          <el-upload list-type="picture-card"
                     :action="uploadStore.fastdfsUploadUrl"
                     :on-success="onHeadImageEditSuccess"
          >
            <el-image :src="editorFormInfo.blogColumnCoverImg"/>
          </el-upload>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="editorFormInfo.blogColumnName"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" rows="6" style="width: 200px"
                    v-model="editorFormInfo.blogColumnIntroduction"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureEditorHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--编辑对话框 end-->
  </div>
</template>

<script setup>
import axios from "../../api/index.js"
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {useRoute} from "vue-router"
import {useUploadStore} from "../../stores/uploadStore.js"
//回退
const onClickLeft = () => history.back();
const uploadStore = useUploadStore()
const route = useRoute()
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  blogColumnName: "",
  blogColumnCoverImg: "",
  blogColumnIntroduction: ''
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  blogColumnId: '',
  blogColumnName: "",
  blogColumnCoverImg: "",
  blogColumnIntroduction: ''

})
/**
 * 网路请求：分页查询
 *  */
const http = (page, size) => {
  axios.blog_column_searchByUserId({
    userId: route.params.name,
    page: page,
    size: size
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
onMounted(() => {
  http(currentPage.value, defaultPageSize.value)
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  http(nowPage, defaultPageSize.value)
  currentPage.value = nowPage
}
//上传成功的钩子
const onHeadImageAddSuccess = (response, uploadFile) => {
  addFormInfo.blogColumnCoverImg = response.data
  ElMessage.success("上传成功")
}
//移除图片的钩子
const onHeadImageAddRemove = (response, uploadFile) => {
  axios.delete('file/fastdfs/delete', {
    params: {
      filePath: addFormInfo.blogColumnCoverImg
    }
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("移除成功")
    }
  })
}

/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  axios.blog_column_add({
    blogColumnName: addFormInfo.blogColumnName,
    blogColumnCoverImg: addFormInfo.blogColumnCoverImg,
    blogColumnIntroduction: addFormInfo.blogColumnIntroduction,
    userId: route.params.name
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http(currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {

  dialogEditorVisible.value = true
  axios.blog_column_findById({
    blogColumnId: row.blogColumnId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.blogColumnId = res.data.data.blogColumnId;
      editorFormInfo.blogColumnName = res.data.data.blogColumnName;
      editorFormInfo.blogColumnCoverImg = res.data.data.blogColumnCoverImg;
      editorFormInfo.blogColumnIntroduction = res.data.data.blogColumnIntroduction;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 头图修改时图片上传成功事件
 */
    //上传成功的钩子
const onHeadImageEditSuccess = (response, uploadFile) => {
      //删除以前图片
      axios.fastdfs_delete({
        filePath: editorFormInfo.blogColumnCoverImg
      }).then(res => {
        if (res.data.code == 200) {
          ElMessage.success("fastdfs移除原图片成功")
        }
      })
      //替换为现在的图片
      editorFormInfo.blogColumnCoverImg = response.data
      ElMessage.success("上传成功")

    }
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.blog_column_update({
    blogColumnId: editorFormInfo.blogColumnId,
    blogColumnName: editorFormInfo.blogColumnName,
    blogColumnCoverImg: editorFormInfo.blogColumnCoverImg,
    blogColumnIntroduction: editorFormInfo.blogColumnIntroduction,
    userId: route.params.name
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http(currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.blog_column_delete({
      blogColumnId: row.blogColumnId
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        //刷新
        http(currentPage.value, defaultPageSize.value)
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })


}
</script>
<style scoped>
.data-container {
  background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  height: 800px;
}

.data-header {
  padding: 20px;
}

.data-header .input {
  width: 300px;
}

.data-table {
  padding: 20px;
}

.page {
  position: fixed;
  right: 10px;
  bottom: 10px;
}
</style>

Comment.vue

<template>
  <div class="data-container">
    <!--添加 start-->
    <div class="data-header">
      <el-button round @click="onClickLeft" size="large" type="primary">
        <el-icon><ArrowLeftBold /></el-icon>
      </el-button>
      <el-button round @click="addHander" size="large" type="primary">
        <el-icon>
          <DocumentAdd/>
        </el-icon>
        <span>新增</span>
      </el-button>
    </div>
    <!--添加 end-->
    <!--表格数据展示 start-->
    <div class="data-table">
      <el-table :data="dataList.list" style="width: 700px;">
        <el-table-column label="评论时间" :formatter="value => detaFormater(Number(value.blogCommentTime))"
                         prop="blogCommentTime" align="center" width="100"></el-table-column>
        <el-table-column label="评论者" prop="userId" align="center">
          <template #default="scope">
                  <span v-for="item in userList.list" :key="item.userId">
                      {{ scope.row.userId == item.userId ? item.nickname : '' }}
                  </span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="评论内容" prop="blogCommentContent"
                         align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页 start-->
      <div class="page">
        <el-pagination background
                       layout="prev,pager,next,jumper"
                       :default-page-size="defaultPageSize"
                       :total="totalData"
                       @current-change="currentChangeHaddler"></el-pagination>
      </div>
      <!--分页 end-->
    </div>
    <!--表格数据展示 end-->
    <!--添加对话框 start-->
    <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="35%" center>
      <el-form inline :model="addFormInfo" label-width="150px">
        <el-form-item label="评论时间">
          <el-date-picker value-format="x" v-model="addFormInfo.blogCommentTime" type="date"></el-date-picker>
        </el-form-item>
        <el-form-item label="评论者">
          <el-select v-model="addFormInfo.userId" placeholder="请选择评论者" size="large">
            <el-option v-for="item in userList.list" :key="item.userId"
                       :label="item.nickname"
                       :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" rows="8" style="width: 250px" v-model="addFormInfo.blogCommentContent"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--添加对话框 end-->
    <!--编辑对话框 start-->
    <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
    <el-dialog
        draggable
        destroy-on-close
        v-model="dialogEditorVisible"
        title="编辑"
        width="35%"
        center>
      <el-form inline :model="editorFormInfo" label-width="150px">
        <el-form-item label="评论时间">
          <el-date-picker value-format="x" v-model="editorFormInfo.blogCommentTime" type="date"></el-date-picker>
        </el-form-item>
        <el-form-item label="评论者">
          <el-select v-model="editorFormInfo.userId" placeholder="请选择评论者" size="large">
            <el-option v-for="item in userList.list" :key="item.userId"
                       :label="item.nickname"
                       :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" rows="8" style="width: 250px" v-model="editorFormInfo.blogCommentContent"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureEditorHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--编辑对话框 end-->
  </div>
</template>

<script setup>
import axios from "../../api/index.js"
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {useRoute} from "vue-router"
import {detaFormater} from "@/utils/utils.js"

const route = useRoute()
//回退
const onClickLeft = () => history.back();
//初始化博客的id
const blogId = route.params.name;
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化用户列表
const userList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  blogCommentTime: "",
  userId: "",
  blogCommentContent: ''
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  blogCommentId: '',
  blogCommentTime: "",
  userId: "",
  blogCommentContent: ''
})
/**
 * 网路请求：分页查询
 *  */
const http = (page, size) => {
  axios.blog_comment_searchByBlogId({
    blogId: blogId,
    page: page,
    size: size
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
onMounted(() => {
  http(currentPage.value, defaultPageSize.value)
  axios.user_findAll().then(res => {
    if (res.data.code == 200) {
      userList.list = res.data.data
    }
  })
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  http(nowPage, defaultPageSize.value)
  currentPage.value = nowPage
}
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http(currentPage.value, defaultPageSize.value)
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  axios.blog_comment_add({
    blogCommentTime: addFormInfo.blogCommentTime,
    userId: addFormInfo.userId,
    blogCommentContent: addFormInfo.blogCommentContent,
    blogId: blogId,

  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http(currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {

  dialogEditorVisible.value = true
  axios.blog_comment_findById({
    blogCommentId: row.blogCommentId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.blogCommentId = res.data.data.blogCommentId;
      editorFormInfo.blogCommentTime = res.data.data.blogCommentTime;
      editorFormInfo.userId = res.data.data.userId;
      editorFormInfo.blogCommentContent = res.data.data.blogCommentContent;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.blog_comment_update({
    blogCommentId: editorFormInfo.blogCommentId,
    blogCommentTime: editorFormInfo.blogCommentTime,
    userId: editorFormInfo.userId,
    blogCommentContent: editorFormInfo.blogCommentContent,
    blogId: blogId,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http(currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.blog_comment_delete({
      blogCommentId: row.blogCommentId
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        //刷新
        http(currentPage.value, defaultPageSize.value)
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })


}
</script>
<style scoped>
.data-container {
  background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  height: 800px;
}

.data-header {
  padding: 20px;
}

.data-header .input {
  width: 300px;
}

.data-table {
  padding: 20px;
}

.page {
  position: fixed;
  right: 10px;
  bottom: 10px;
}
</style>

Tag.vue

<template>
  <div class="data-container">
    <!--添加 start-->
    <div class="data-header">
      <el-input class="input" @keyup.enter="searchHandle" v-model="searchInfo" size="large"
                placeholder="请输入关键字"></el-input>
      <el-button @click="searchHandle" class="button" size="large" type="primary" plain>搜索</el-button>
      <el-button round @click="addHander" size="large" type="primary">
        <el-icon>
          <DocumentAdd/>
        </el-icon>
        <span>新增</span>
      </el-button>
    </div>
    <!--添加 end-->
    <!--表格数据展示 start-->
    <div class="data-table">
      <el-table :data="dataList.list" style="width: 400px;">
        <el-table-column label="标签名" prop="blogTagName" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页 start-->
      <div class="page">
        <el-pagination background
                       layout="prev,pager,next,jumper"
                       :default-page-size="defaultPageSize"
                       :total="totalData"
                       @current-change="currentChangeHaddler"></el-pagination>
      </div>
      <!--分页 end-->
    </div>
    <!--表格数据展示 end-->
    <!--添加对话框 start-->
    <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="35%" center>
      <el-form inline :model="addFormInfo" label-width="150px">
        <el-form-item label="标签名">
          <el-input v-model="addFormInfo.blogTagName"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--添加对话框 end-->
    <!--编辑对话框 start-->
    <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
    <el-dialog
        draggable
        destroy-on-close
        v-model="dialogEditorVisible"
        title="编辑"
        width="35%"
        center>
      <el-form inline :model="editorFormInfo" label-width="150px">
        <el-form-item label="标签名">
          <el-input v-model="editorFormInfo.blogTagName"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureEditorHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--编辑对话框 end-->
  </div>
</template>

<script setup>
import axios from "../../api/index.js"
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  blogTagName: "",
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  blogTagId: '',
  blogTagName: "",
})
/**
 * 网路请求：分页查询
 *  */
const http = (search, page, size) => {
  axios.blog_tag_search({
    search: search,
    page: page,
    size: size
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
onMounted(() => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  http(searchInfo.value, nowPage, defaultPageSize.value)
  currentPage.value = nowPage
}
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 添加对话框 确定事件
 */ 2
const sureHandler = () => {
  axios.blog_tag_add({
    blogTagName: addFormInfo.blogTagName,
    blog_tagDesc: addFormInfo.blog_tagDesc,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {

  dialogEditorVisible.value = true
  axios.blog_tag_findById({
    blogTagId: row.blogTagId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.blogTagId = res.data.data.blogTagId;
      editorFormInfo.blogTagName = res.data.data.blogTagName;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.blog_tag_update({
    blogTagId: editorFormInfo.blogTagId,
    blogTagName: editorFormInfo.blogTagName,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.blog_tag_delete({
      blogTagId: row.blogTagId
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        //刷新
        http(searchInfo.value, currentPage.value, defaultPageSize.value)
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })


}
</script>
<style scoped>
.data-container {
  background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  height: 800px;
}

.data-header {
  padding: 20px;
}

.data-header .input {
  width: 300px;
}

.data-table {
  padding: 20px;
}

.page {
  position: fixed;
  right: 10px;
  bottom: 10px;
}
</style>

Type.vue

<template>
  <div class="data-container">
    <!--添加 start-->
    <div class="data-header">
      <el-input class="input" @keyup.enter="searchHandle" v-model="searchInfo" size="large"
                placeholder="请输入关键字"></el-input>
      <el-button @click="searchHandle" class="button" size="large" type="primary" plain>搜索</el-button>
      <el-button round @click="addHander" size="large" type="primary">
        <el-icon>
          <DocumentAdd/>
        </el-icon>
        <span>新增</span>
      </el-button>
    </div>
    <!--添加 end-->
    <!--表格数据展示 start-->
    <div class="data-table">
      <el-table :data="dataList.list" style="width: 400px;">
        <el-table-column label="类型名" prop="blogTypeName" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页 start-->
      <div class="page">
        <el-pagination background
                       layout="prev,pager,next,jumper"
                       :default-page-size="defaultPageSize"
                       :total="totalData"
                       @current-change="currentChangeHaddler"></el-pagination>
      </div>
      <!--分页 end-->
    </div>
    <!--表格数据展示 end-->
    <!--添加对话框 start-->
    <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="35%" center>
      <el-form inline :model="addFormInfo" label-width="150px">
        <el-form-item label="类型名">
          <el-input v-model="addFormInfo.blogTypeName"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--添加对话框 end-->
    <!--编辑对话框 start-->
    <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
    <el-dialog
        draggable
        destroy-on-close
        v-model="dialogEditorVisible"
        title="编辑"
        width="35%"
        center>
      <el-form inline :model="editorFormInfo" label-width="150px">
        <el-form-item label="类型名">
          <el-input v-model="editorFormInfo.blogTypeName"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureEditorHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--编辑对话框 end-->
  </div>
</template>

<script setup>
import axios from "../../api/index.js"
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  blogTypeName: "",
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  blogTypeId: '',
  blogTypeName: "",
})
/**
 * 网路请求：分页查询
 *  */
const http = (search, page, size) => {
  axios.blog_type_search({
    search: search,
    page: page,
    size: size
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
onMounted(() => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  http(searchInfo.value, nowPage, defaultPageSize.value)
  currentPage.value = nowPage
}
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  axios.blog_type_add({
    blogTypeName: addFormInfo.blogTypeName,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {

  dialogEditorVisible.value = true
  axios.blog_type_findById({
    blogTypeId: row.blogTypeId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.blogTypeId = res.data.data.blogTypeId;
      editorFormInfo.blogTypeName = res.data.data.blogTypeName;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.blog_type_update({
    blogTypeId: editorFormInfo.blogTypeId,
    blogTypeName: editorFormInfo.blogTypeName,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.blog_type_delete({
      blogTypeId: row.blogTypeId
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        //刷新
        http(searchInfo.value, currentPage.value, defaultPageSize.value)
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })


}
</script>
<style scoped>
.data-container {
  background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  height: 800px;
}

.data-header {
  padding: 20px;
}

.data-header .input {
  width: 300px;
}

.data-table {
  padding: 20px;
}

.page {
  position: fixed;
  right: 10px;
  bottom: 10px;
}
</style>

Visibility.vue

<template>
  <div class="data-container">
    <!--添加 start-->
    <div class="data-header">
      <el-input class="input" @keyup.enter="searchHandle" v-model="searchInfo" size="large"
                placeholder="请输入关键字"></el-input>
      <el-button @click="searchHandle" class="button" size="large" type="primary" plain>搜索</el-button>
      <el-button round @click="addHander" size="large" type="primary">
        <el-icon>
          <DocumentAdd/>
        </el-icon>
        <span>新增</span>
      </el-button>
    </div>
    <!--添加 end-->
    <!--表格数据展示 start-->
    <div class="data-table">
      <el-table :data="dataList.list" style="width: 400px;">
        <el-table-column label="范围" prop="blogVisibilityName" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页 start-->
      <div class="page">
        <el-pagination background
                       layout="prev,pager,next,jumper"
                       :default-page-size="defaultPageSize"
                       :total="totalData"
                       @current-change="currentChangeHaddler"></el-pagination>
      </div>
      <!--分页 end-->
    </div>
    <!--表格数据展示 end-->
    <!--添加对话框 start-->
    <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="35%" center>
      <el-form inline :model="addFormInfo" label-width="150px">
        <el-form-item label="范围">
          <el-input v-model="addFormInfo.blogVisibilityName"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--添加对话框 end-->
    <!--编辑对话框 start-->
    <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
    <el-dialog
        draggable
        destroy-on-close
        v-model="dialogEditorVisible"
        title="编辑"
        width="35%"
        center>
      <el-form inline :model="editorFormInfo" label-width="150px">
        <el-form-item label="范围">
          <el-input v-model="editorFormInfo.blogVisibilityName"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureEditorHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--编辑对话框 end-->
  </div>
</template>

<script setup>
import axios from "../../api/index.js"
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  blogVisibilityName: "",
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  blogVisibilityId: '',
  blogVisibilityName: "",
})
/**
 * 网路请求：分页查询
 *  */
const http = (search, page, size) => {
  axios.blog_visibility_search({
    search: search,
    page: page,
    size: size
  }).then(res => {
    console.log(res.data)
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
onMounted(() => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  http(searchInfo.value, nowPage, defaultPageSize.value)
  currentPage.value = nowPage
}
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  axios.blog_visibility_add({
    blogVisibilityName: addFormInfo.blogVisibilityName,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {
  dialogEditorVisible.value = true
  axios.blog_visibility_findById({
    blogVisibilityId: row.blogVisibilityId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.blogVisibilityId = res.data.data.blogVisibilityId;
      editorFormInfo.blogVisibilityName = res.data.data.blogVisibilityName;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.blog_visibility_update({
    blogVisibilityId: editorFormInfo.blogVisibilityId,
    blogVisibilityName: editorFormInfo.blogVisibilityName,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.blog_visibility_delete({
      blogVisibilityId: row.blogVisibilityId
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        //刷新
        http(searchInfo.value, currentPage.value, defaultPageSize.value)
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })


}
</script>
<style scoped>
.data-container {
  background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  height: 800px;
}

.data-header {
  padding: 20px;
}

.data-header .input {
  width: 300px;
}

.data-table {
  padding: 20px;
}

.page {
  position: fixed;
  right: 10px;
  bottom: 10px;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/941106.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

适合新手程序员的体质，一键代码审查轻松搞定

适合新手程序员的体质，一键代码审查轻松搞定

很多刚入行的程序员会面临一个问题&#xff0c;写完代码进行运行会出现很多bug但是不能准确的定位问题的所在&#xff0c;很多人对于自己的代码结构和层次也摸不着头脑&#xff0c;为了提高代码的质量经常会消耗大量的人力物力来做这件事情。 在&#xff08;软件工程的事实与谬…
阅读更多...
阻塞io读取内核驱动变量值

阻塞io读取内核驱动变量值

应用程序&#xff1a; #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <string.h> #include <sys/ioctl.h> #include "head.…
阅读更多...
Spring MVC 四：Context层级

Spring MVC 四：Context层级

这一节我们来回答上篇文章中避而不谈的有关什么是RootApplicationContext的问题。 这就需要引入Spring MVC的有关Context Hierarchy的问题。Context Hierarchy意思就是Context层级&#xff0c;既然说到Context层级&#xff0c;说明在Spring MVC项目中&#xff0c;可能存在不止…
阅读更多...
Linux学习之DNS服务的原理

Linux学习之DNS服务的原理

DNS服务一些理论 域名系统&#xff08;Domain Name System&#xff0c;DNS&#xff09;是互联网的核心应用服务&#xff0c;可以通过IP地址查询到域名&#xff0c;也可以通过域名查询到IP地址。 FQDN&#xff08;Full Qualified Domain Name&#xff09;是完全限定域名&#xf…
阅读更多...
解决FreeRTOS程序跑不起来，打印调试却提示“Error:..\FreeRTOS\port\RVDS\ARM_CM3\port.c,244“的方法

解决FreeRTOS程序跑不起来，打印调试却提示“Error:..\FreeRTOS\port\RVDS\ARM_CM3\port.c,244“的方法

前言 今天来分享一个不会造成程序编译报错&#xff0c;但会使程序一直跑不起来&#xff0c;并且通过调试会发现有输出错误提示的错误例子分析&#xff0c;话不多说&#xff0c;我们就直接开始分析~ 首先&#xff0c;我们说过这个例子在编译时候没有明示的错误提示&#xff0c…
阅读更多...
Excel·VBA二维数组组合函数、组合求和

Excel·VBA二维数组组合函数、组合求和

目录 1&#xff0c;二维数组组合函数举例 2&#xff0c;组合求和 之前的文章《ExcelVBA数组组合函数、组合求和》和《ExcelVBA数组排列函数》&#xff0c;都是针对一维数组的组合和排列 二维数组组合&#xff1a;对一个m行*n列的二维数组&#xff0c;每行抽取1个元素进行组合&a…
阅读更多...
[管理与领导-56]：IT基层管理者 - 扩展技能 - 1 - 时间管理 -3- 帮助下属提升效能（辅导与激励）

[管理与领导-56]：IT基层管理者 - 扩展技能 - 1 - 时间管理 -3- 帮助下属提升效能（辅导与激励）

前言&#xff1a; 对下属的辅导是管理者一个重要的职责&#xff0c;帮助下属者提升时间效能也辅导下属的一个职责。 管理者与下属&#xff0c;管理者与团队是“共生”的关系&#xff0c;管理者提升下属的时间效能&#xff0c;就是提升团队的效能&#xff0c;也就是提升了自己…
阅读更多...
计算机视觉-LeNet

计算机视觉-LeNet

目录 LeNet LeNet在手写数字识别上的应用 LeNet在眼疾识别数据集iChallenge-PM上的应用 LeNet LeNet是最早的卷积神经网络之一。1998年&#xff0c;Yann LeCun第一次将LeNet卷积神经网络应用到图像分类上&#xff0c;在手写数字识别任务中取得了巨大成功。LeNet通过连续使用…
阅读更多...
Linux各类性能分析工具用法详解

Linux各类性能分析工具用法详解

文章目录 静态性能分析工具文件系统观测工具虚拟文件系统(VFS)分析工具磁盘管理工具进程资源占用监测系统库调用分析工具网络配置防火墙配置多路径配置进程调度系统命令操作查看硬件信息磁盘管理网络端口硬件信息 监测工具内核调用监测系统调用监测系统函数调用监测系统性能监测…
阅读更多...
【VRTK4.0运动专题】轴移动AxisMove（真实身体的移动）

【VRTK4.0运动专题】轴移动AxisMove（真实身体的移动）

文章目录 1、概览2、释义3、属性设置 1、概览 2、释义 “竖直轴”控制的行为“水平轴”控制的行为1Vertical-Slide 滑动Horizontal-Slide 滑动2Vertical-Slide 滑动Horizontal-SmoothRotate 转动3Vertical-Slide 滑动Horizontal-SnapRotate 转动&#xff08;不连续&#xff09…
阅读更多...
PDF制作成翻页电子书

PDF制作成翻页电子书

在日常工作中&#xff0c;大部分人使用的都是PDF文档发送给客户&#xff0c;但是PDF文档通常是静态的&#xff0c;缺乏交互性和视觉吸引力。那你有没有想过把它转换成翻页的电子书呢&#xff1f; 小编将告诉你操作步骤&#xff0c;非常简单 1.搜索FLBOOK在线制作电子杂志平台 …
阅读更多...
零基础搭建个人影音媒体平台，实现远程访问Jellyfin播放器的简易方法

零基础搭建个人影音媒体平台，实现远程访问Jellyfin播放器的简易方法

文章目录 1. 前言2. Jellyfin服务网站搭建2.1. Jellyfin下载和安装2.2. Jellyfin网页测试 3.本地网页发布3.1 cpolar的安装和注册3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5. 结语 1. 前言 随着移动智能设备的普及&#xff0c;各种各样的使用需求也被开发出来&…
阅读更多...
静态树提升对Vue生态系统的影响和发展

静态树提升对Vue生态系统的影响和发展

文章目录 1. 了解Vue 3的静态树提升介绍Vue 3的基本概念和优势解释静态树提升的作用和目标 2. 什么是静态树&#xff1f;解释静态树的概念和特点比较静态树和动态树的区别 3. Vue 3中的静态树提升解释Vue 3中静态树提升的原理和工作方式强调静态树提升对性能的影响和优化效果 4…
阅读更多...
【Vue3】transition 组件

【Vue3】transition 组件

1. 基础用法 <template><div class"content"><button click"flag !flag">switch</button><transition name"fade"><div v-if"flag" class"box"></div></transition><…
阅读更多...
javacv基础04-图像色彩空间转换函数Imgproc.cvtColor（）（彩图转灰度图示例）

javacv基础04-图像色彩空间转换函数Imgproc.cvtColor（）（彩图转灰度图示例）

opencv python 实现方式参考 opencv-19 图像色彩空间转换函数cv2.cvtColor() javacv 中的函数 Imgproc.cvtColor(image, grey, Imgproc.COLOR_BGR2GRAY); 参数说明&#xff1a; image: 原始图像新灰度图转换参数&#xff1a;多种转换方式参考上面链接地址内容 javacv 实现方式…
阅读更多...
K8s的Pod出现Init:ImagePullBackOff问题的解决(以calico为例)

K8s的Pod出现Init:ImagePullBackOff问题的解决(以calico为例)

对于这类问题的解决思路应该都差不多&#xff0c;本文以calico插件安装为例&#xff0c;发现有个Pod的镜像没有pull成功 第一步&#xff1a;查看这个pod的描述信息 kubectl describe pod calico-node-wmhrw -n kube-system 从上图发现是docker拉取"calico/cni:v3.15.1&q…
阅读更多...
鸿蒙是一个怎么样的操作系统，真的是安卓套壳吗？

鸿蒙是一个怎么样的操作系统，真的是安卓套壳吗？

从鸿蒙项目正式推出以来&#xff0c;就一直有各自声音&#xff0c;有看好的&#xff0c;认为鸿蒙的出现将会成为一个智能终端设备操作系统的框架和平台&#xff0c;促进万物互联产业的繁荣发展&#xff1b;也有的人在唱衰&#xff0c;觉得鸿蒙发展不起来&#xff0c;甚至认为鸿…
阅读更多...
rknn_toolkit以及rknpu环境搭建-rv1126

rknn_toolkit以及rknpu环境搭建-rv1126

rknn_toolkit安装------------------------------------------------------------------------------- 环境要求&#xff1a;ubutu18.04 建议使用docker镜像 安装docker 参考https://zhuanlan.zhihu.com/p/143156163 镜像地址 百度企业网盘-企业云盘-企业云存储解决方案-同…
阅读更多...
http请求方式过滤器与拦截器的区别

http请求方式过滤器与拦截器的区别

get:获取查询数据(查询)post:数据的提交&#xff0c;新增操作(增加)put:向服务端发送数据、改变信息&#xff0c;侧重点在于对数据的修改操作delete:数据库数据的删除head:一般用来判断类型、根据返回状态确定资源是否存在、资源是否更新以及更新的时间等 过滤器与拦截器的区别…
阅读更多...
URI和URL和URN区别

URI和URL和URN区别

URI、URL 和 URN 是一系列从不同角度来看待资源标识和定位的概念。虽然它们有一些重叠&#xff0c;但每个概念都强调了不同的方面。 URI&#xff08;Uniform Resource Identifier&#xff09;&#xff1a;URI 是一个通用的术语&#xff0c;用于标识和定位资源。它是一个抽象的概…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023