从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战十八之我的文章新增功能

本节学习目标

掌握element-plus表单功能。

新增CreateArticle接口

修改MyArticles.vue

<template>
  <div class="main-body">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true">
        <el-form-item>
          <el-button icon="plus" type="primary" @click="handleAdd">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <!--新增编辑界面-->
  <el-dialog v-model="createVisible" :title="title" width="500px" :before-close="handleClose">
    <el-form ref="formRef" :model="createForm" label-width="80px">
      <el-form-item label="文章标题">
        <el-input v-model="createForm.title" placeholder="输入文章标题"></el-input>
      </el-form-item>
      <el-form-item label="文章描述">
        <el-input v-model="createForm.description" placeholder="输入文章描述"></el-input>
      </el-form-item>
      <el-form-item label="文章内容">
        <el-input v-model="createForm.body" placeholder="输入文章内容"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import type { CreateArticle } from '@/types';
import { createArticle } from '@/api';

const createForm = ref<CreateArticle>({
  title: '',
  description: '',
  body: '',
  tagList: [],
});


const article_slug = ref('');
const createVisible = ref(false);
const title = ref("新增文章");

const handleAdd = () => {
  title.value = "新增文章";
  createForm.value.title = ''
  createForm.value.description = ''
  createForm.value.body = ''
  createForm.value.tagList = []
  article_slug.value = ''
  createVisible.value = true;
}

const handleClose = () => {
  createVisible.value = false;
};

const handleConfirm = async () => {
  if (article_slug.value === '') {
    const res = await createArticle({ article: createForm.value })
  }

  handleClose();
}
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
  float: right
}
</style>

验证测试

切换到全部文章页面，查看刚刚新增的文章。