文章目录

• 十、新闻管理模块设计开发
• • 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、代码下载