Vue3项目开发——新闻发布管理系统(八)

文章目录

  • 十、新闻管理模块设计开发
    • 1、新闻管理主页面设计
      • 1.1 基本架构搭建
        • 1.1.1 搜索表单
        • 1.1.2 新闻主表格样式(静态数据模拟渲染)
      • 1.2 新闻分类选择框
        • 1.2.1 新建组件
        • 1.2.2 页面中导入渲染
        • 1.2.3 调用接口,动态渲染下拉分类,设计成 v-model 的使用方式
        • 1.2.4 父组件定义参数绑定
        • 1.2.5 发布状态,也绑定一下,便于将来提交表单
    • 2、新闻表格渲染
      • 2.1 封装 API 接口,新闻主表格渲染
        • 2.1.1 api/news.js封装接口
        • 2.1.2 页面中调用保存数据
        • 2.1.3 格式化日期显示
      • 2.2 分页渲染 [element-plus 分页]
      • 2.3 添加 loading 处理
        • 2.3.1 准备数据
        • 2.3.2 el-table上面绑定
        • 2.3.3 发送请求时添加 loading
      • 2.4 搜索 和 重置功能
        • 2.4.1 注册事件
        • 2.4.2 绑定处理
    • 3、实现新闻发布&修改功能
      • 3.1 点击显示抽屉
        • 3.1.1 准备数据
        • 3.1.2 准备抽屉容器
        • 3.1.3 点击修改布尔值显示抽屉
      • 3.2 封装抽屉组件 NewsEdit
        • 3.2.1 封装组件
        • 3.2.2 通过 ref 绑定
        • 3.2.3 点击调用方法显示弹窗
      • 3.3 完善抽屉表单结构
        • 3.3.1 准备数据
        • 3.3.2 准备 form 表单结构
        • 3.3.3 一打开默认重置添加的 form 表单数据
        • 3.3.4 扩展 下拉菜单 width props
      • 3.4 上传文件
        • 3.4.1 准备结构
        • 3.4.2 准备数据 和 选择图片的处理逻辑
        • 3.4.3 样式美化
      • 3.5 富文本编辑器 [ vue-quill ]
        • 3.5.1 安装包
        • 3.5.2 注册成局部组件
        • 3.5.3 页面中使用绑定
        • 3.5.4 样式美化
      • 3.6 添加新闻功能
        • 3.6.1 封装新闻添加接口
        • 3.6.2 注册点击事件调用
        • 3.6.3 父组件监听事件,重新渲染
      • 3.7 添加完成后的内容重置
      • 3.8 编辑新闻回显
        • 3.8.1 封装接口,根据 id 获取详情数据
        • 3.8.2 页面中调用渲染
        • 3.8.3 封装一个函数(网络图片地址 转 file 对象)
      • 3.9 编辑新闻功能
        • 3.9.1 封装编辑接口
        • 3.9.2 提交时调用
    • 4、实现新闻删除功能
      • 4.1 封装删除接口
      • 4.2 页面中添加确认框调用
    • 5、代码下载

十、新闻管理模块设计开发

1、新闻管理主页面设计

1.1 基本架构搭建

基本架构如下:
Vue3项目开发——新闻发布管理系统(八)_第1张图片

1.1.1 搜索表单

views/news/NewsManage.vue添加如下搜索表单内容:

<el-form inline>
  <el-form-item label

你可能感兴趣的:(Vue知识学习及项目开发实践,项目开发实践,Vue3,项目开发,新闻发布管理系统)