【Vue + Koa 前后端分离项目实战7】使用开源框架==＞快速搭建后台管理系统 -- part7 前端实现最新期刊管理【增删查改】

news2024/11/28 22:56:03

人生没有白走的路，每一步都作数。

对应后端部分章节回顾：

【Vue + Koa 前后端分离项目实战5】使用开源框架==＞快速搭建后台管理系统 -- part5 后端实现最新期刊列表管理【增删查改】_小白Rachel的博客-CSDN博客

效果展示：

 

目录

一、路由创建

 二、最新期刊列表

1.编写静态页面效果

2.模型层定义方法获取接口数据 

3.效果展示

三、最新期刊新增

        1.前端页面代码

2.（关键）级联选择器options格式化处理

3.添加页面逻辑

4.模型层定义方法获取接口数据 

5.效果展示

四、最新期刊编辑

1.编写页面逻辑

2.模型层定义方法获取接口数据

3.效果展示

 五、最新期刊删除 

1.前端页面逻辑

2.模型层定义方法获取接口数据

3.效果展示

本篇核心新学内容

往期回顾

一、路由创建

打开路由配置文件 src-->config-->stage-->content.js 添加新页面路由。并创建页面文件flow.js

{
      title: '最新期刊',
      type: 'view',
      name: 'flow',
      route: '/content/flow',
      filePath: 'views/content/Flow.vue',
      inNav: true,
      icon: 'iconfont icon-tushuguanli',
    },

 

 二、最新期刊列表

1.编写静态页面效果

在views目录下的content文件夹添加Flow.vue文件。并添加如下代码（对于前端开发，这些很简单，么有什么要讲的）

Flow.vue
<template>
  <div class="container">
    <div class="title">最新期刊列表</div>
    <div class="add-button">
      <el-button type="primary" @click="handleAdd()" v-permission="'新增最新期刊'">关联期刊</el-button>
    </div>
    <div class="table-container">
      <el-table :data="tableData" border highlight-current-row :cell-style="{ 'text-align': 'center' }">
        <el-table-column label="序号" width="60" type="index"></el-table-column>
        <el-table-column label="内容标题" prop="detail.title"></el-table-column>
        <el-table-column label="内容类型" prop="type">
          <template slot-scope="scope">
            {{ type[scope.row.type] }}
          </template>
        </el-table-column>
        <el-table-column label="内容介绍" prop="detail.content"></el-table-column>
        <el-table-column label="排序" prop="index"></el-table-column>
        <el-table-column label="是否展示" >
          <templete slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="success">展示中</el-tag>
            <el-tag v-else type="info">未展示</el-tag>
          </templete>
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" v-permission="'编辑最新期刊列表'">编辑</el-button>
            <el-button @click="handleDelete(scope.row)" v-permission="'删除最新期刊列表内容'" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Flow',
  data() {
    return {
      tableData: [],
      type: {
        100: '电影',
        200: '音乐',
        300: '句子'
      }
    }
  },
  methods: {
    handleAdd() {},
    handleEdit() {},
    handleDelete() {}
  }
}
</script>

<style scoped lang="scss">
.container {
  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;
    border-bottom: 1px solid #dae1ec;
  }
  .add-button {
    padding: 20px 40px;
  }
  .table-container {
    padding: 0 40px 20px 40px;
  }
}
</style>

2.模型层定义方法获取接口数据 

（1）在models的content.js文件下编写调用接口的函数

import { get, post, put, _delete } from '@/lin/plugins/axios'

class Flow {
  // 列表数据
  static async getFlowList() {
    const res = await get('v1/flow')
    return res
  }
}

export { Flow as FLowModel }

（2）在前端页面使用该方法。实现列表效果

created() {
    this.getFlowList()
  },
  methods: {
    async getFlowList() {
      this.tableData = await FLowModel.getFlowList()
    },
}

3.效果展示

三、最新期刊新增

说明：最新期刊的新增并不涉及到真实的添加，在数据库总主要是进行【关联】操作。针对期刊列表选中期刊【关联】到最新期刊。因此这里的新增需要注意。对应的后端逻辑方面请参考对应章节。

1.前端页面代码

（1）在页面添加dialog对话框

添加的对话框部分代码如下，还需要添加对应的属性值。

<el-dialog
        :title="dialogTitle"
        width="800px"
        :visible.sync="showDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="resetForm"
    >
      <el-form ref="form" :model="temp" label-width="90px" :rules="rules">
        <el-form-item label="排序" prop="index">
          <el-input-number v-model="temp.index" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="期刊内容" prop="art">
          <el-cascader v-model="temp.art" :options="options"></el-cascader>
        </el-form-item>
        <el-form-item label="是否展示" prop="status">
          <el-switch v-model="temp.status" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="dialogTitle == '关联期刊' ? confirmAdd() : confirmEdit()">保 存</el-button>
      </span>
    </el-dialog>

（2）定义表单和表单校验规则

在期刊内容部分使用到了【级联选择器】这里是重点内容，需要满足固定的options格式

rules: {
        art: [{
          required: true, message: '期刊内容不能为空', trigger: 'blur'
        }]
      },

2.（关键）级联选择器options格式化处理

定义函数getContentOptions() 

函数实现思路：1.获取所有期刊内容  2.数据格式化_generateOptionsData()

并最终吧数据绑定在this.options上

async getContentOptions() {
      // 获取所有期刊内容
      const contentList = await ContentModel.getContentList()
      // 数据格式化
      this.options = this._generateOptionsData(contentList)
      console.log(this.options, '=========')
    },
    _generateOptionsData(data) {
      // 筛选出分类
      let types = []
      data.forEach(d => types.push(d.type))
      // 去重
      types = Array.from(new Set(types))
      // 构建一级分类选项
      const options = types.map(t => ({
        value: t,
        label: this.type[t],
        children: []
      }))
      // 往分类里添加子内容
      options.forEach((o, index) => {
        const children = []
        data.forEach(d => {
          if (d.type === o.value) {
            children.push({
              value: d.id,
              label: d.title,
              disabled: !d.status,
            })
          }
        })
        options[index].children = children
      })
      return options
    },

3.添加页面逻辑

（1）点击‘添加期刊’按钮，弹出对话框，并调用函数初始化options

handleAdd() {
      this.dialogTitle = '关联期刊'
      this.showDialog = true
      this.getContentOptions()
    },

（2）数据提交操作

调用表单校验函数===>传参 调用模型层方法 ==>处理返回结果并处理提示 ===>更新列表

confirmAdd() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const res = await FLowModel.addContentToFlow(this.temp.index, this.temp.art[0], this.temp.art[1], this.temp.status)
          this.$message.success(res.message)
          this.showDialog = false
          await this.getFlowList()
        }
      })
    },

4.模型层定义方法获取接口数据 

models/flow.js
// 新增
  static async addContentToFlow(index, type, art_id, status) {
    const res = await post('v1/flow', { index, type, art_id, status })
    return res
  }

5.效果展示

四、最新期刊编辑

1.编写页面逻辑

复用新建页面逻辑

（1）点击“编辑”按钮逻辑

回显数据（需要注意处理级联选择器的对象格式）==>记录当前修改id ==>显示弹框==>获取options数据

handleEdit(row) {
      this.id = row.id
      this.showDialog = true
      this.temp.index = row.index
      this.temp.art = [row.detail.type, row.detail.id]
      this.temp.status = row.status
      this.dialogTitle = '编辑期刊'
      this.showDialog = true
      this.getContentOptions()
    },

（2） 提交编辑操作

类比新建操作即可。需要传递id

confirmEdit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const res = await FLowModel.editFlow(this.id, this.temp.index, this.temp.art[0], this.temp.art[1], this.temp.status)
          this.$message.success(res.message)
          this.showDialog = false
          await this.getFlowList()
        }
      })
    },

2.模型层定义方法获取接口数据

// 编辑
  static async editFlow(id, index, type, art_id, status) {
    const res = await put(`v1/flow/${id}`, { id, index, type, art_id, status })
    return res
  }

3.效果展示

 五、最新期刊删除 

1.前端页面逻辑

（1）添加删除对话框

<el-dialog title="提示" :visible.sync="showDeleteDialog" width="400px">
      <span>确认删除内容</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDeleteDialog = false">取 消</el-button>
        <el-button type="danger" @click="confirmDelete()">删 除</el-button>
      </span>
    </el-dialog>

（2）删除逻辑 

async confirmDelete() {
      const res = await FLowModel.deleteFlow(this.id)
      this.$message.success(res.message)
      this.showDeleteDialog = false
      await this.getFlowList()
    }

2.模型层定义方法获取接口数据

// 删除
  static async deleteFlow(id) {
    console.log(id)
    // debugger
    const res = await _delete(`v1/flow/${id}`)
    return res
  }

3.效果展示

 本篇核心新学内容

使用【级联选择器】需要对应拼凑级联选择器的options的数据格式。====新增和编辑操作

往期回顾

第一节：简单介绍了林间有风框架

【Vue + Koa 前后端分离项目实战】使用开源框架==＞快速搭建后台管理系统 -- part1 项目搭建_小白Rachel的博客-CSDN博客_vue快速搭建管理系统

第二到第五节：展开讲解后端部分【期刊列表】【最新期刊】的增删查改功能

【Vue + Koa 前后端分离项目实战2】使用开源框架==＞快速搭建后台管理系统 -- part2 后端新增期刊功能实现_小白Rachel的博客-CSDN博客_vue+koa

【Vue + Koa 前后端分离项目实战3】使用开源框架==＞快速搭建后台管理系统 -- part3 权限控制+行为日志_小白Rachel的博客-CSDN博客_koa权限管理 【Vue + Koa 前后端分离项目实战4】使用开源框架==＞快速搭建后台管理系统 -- part4 后端实现【增删改查】功能_小白Rachel的博客-CSDN博客_利用koa搭后台管理系统

【Vue + Koa 前后端分离项目实战5】使用开源框架==＞快速搭建后台管理系统 -- part5 后端实现最新期刊列表管理【增删查改】_小白Rachel的博客-CSDN博客

第六到第七节：展开讲解前端功能实现

【Vue + Koa 前后端分离项目实战6】使用开源框架==＞快速搭建后台管理系统 -- part6 前端实现期刊列表管理【增删查改】_小白Rachel的博客-CSDN博客

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

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

相关文章

少儿Python每日一题（15）：回文数

少儿Python每日一题（15）：回文数

原题解答 本次的题目如下所示： 【编程实现】 回文数是指一个像14641这样“对称”的数，即：将这个数的各位数字按相反的顺序重新排列后，所得到的数和原来的数一样。请编程求不同位数数字的回文数的个数。用户输入一个正整数M（2<M<7），M作为回文数的位数。要求输出M位…
阅读更多...
【Javascript】高阶函数，JSON

【Javascript】高阶函数，JSON

❤️ Author&#xff1a; 老九 ☕️ 个人博客&#xff1a;老九的CSDN博客 &#x1f64f; 个人名言&#xff1a;不可控之事 乐观面对 &#x1f60d; 系列专栏&#xff1a; 文章目录高阶函数箭头函数apply函数JSON高阶函数 把函数作为参数&#xff0c;或者返回一个函数&#xff…
阅读更多...
【并发】并发锁机制-深入理解synchronized（一）

【并发】并发锁机制-深入理解synchronized（一）

【并发】并发锁机制-深入理解synchronized&#xff08;一&#xff09; synchronized 基础篇&#xff08;使用&#xff09; 一、Java共享内存模型带来的线程安全问题 1. 代码示例 2. 运行结果 3. 问题分析 4. 临界区&#xff08;Critical Section&#xff09; 5. 竞态条件…
阅读更多...
【Go】内存模型中的内存可见性

【Go】内存模型中的内存可见性

前言 使用go必然会使用到协程以及其他的并发操作&#xff0c;初期学习的时候&#xff0c;经常在启动协程时操作变量出现问题&#xff0c;要么就是变量没更新&#xff0c;要么就是各种崩溃&#xff0c;或者vscode报告警之类的&#xff0c;于是浅看了一下Go的内存模型&#xff0…
阅读更多...
离散制造业ERP系统对生产物料管理有哪些帮助？

离散制造业ERP系统对生产物料管理有哪些帮助？

在离散制造企业生产加工过程中&#xff0c;生产物料管理是一个至关重要的环节。车间物料能不能管控好&#xff0c;影响着整个产品的品质、工作效率及制造成本的控制等。离散制造业通常需要品类、属性繁多的原材料和配套件&#xff0c;而各类物料的及时供应十分重要&#xff1b;…
阅读更多...
优思学院｜QCC 是什么意思？有什么用？

优思学院｜QCC 是什么意思？有什么用？

QCC 的中文意思是质量控制圈&#xff0c;也有人称为品质圈。 质量控制圈&#xff08;QCC&#xff09;是来自日本的一种质量管理方法&#xff0c;这个概念的作者是石川馨、日本科学家和工程师联盟&#xff08;JUSE&#xff09;共同发明。 QCC的方法是建立由5-11名成员组成的小团…
阅读更多...
【VUE2-01】vue2的起步

【VUE2-01】vue2的起步

文章目录一、初识vue1.1vue.js的特点1.2什么是虚拟的dom&#xff1f;1.3为什么使用虚拟的dom1.4vue设计思想二、第一个vue应用如果想系统细致的学习&#xff0c;建议阅读vue的官方网站目前vue官网默认的是vue3的内容&#xff0c;此篇以vue2为基础开始学习一、初识vue 1.1vue.j…
阅读更多...
电脑重装系统后没声解决步骤

电脑重装系统后没声解决步骤

电脑重装系统之后&#xff0c;发现声音功能&#xff0c;不能正常使用了。对于电脑小白来说&#xff0c;不知道该如何处理&#xff0c;下面就和大家说说重装系统后没声音怎么办呢?&#xff0c;其实完全可以自己处理这种情况&#xff0c;快来看看小白重装系统后没声解决方法吧! …
阅读更多...
插入损耗——线对上的信号衰减

插入损耗——线对上的信号衰减

“您好&#xff0c;我需要您的帮助。我在测试长距离线缆的时候&#xff0c;插入损耗没有通过测试&#xff01;”这是在对铜缆布线进行验收测量时&#xff0c;我们经常能够听到的问题。针对这一情况&#xff0c;为了能提供更专业的支持&#xff0c;我们必须了解这一电气特性的基…
阅读更多...
如何修改linux下的vim复制行数限制

如何修改linux下的vim复制行数限制

vim-如何修改linux下的vim复制行数限制来自北方的小强正在努力成为资深数字IC搬砖工的搬砖工个人根目录下的.vimrc (~/.vimrc)添加如下内容:set viminfo1000,<600linux下&#xff0c;默认最多复制50行&#xff0c;上述修改即将限制改为600行。注意&#xff1a;1 如果.vimrc文…
阅读更多...
Arduino固件库的离线安装方式

Arduino固件库的离线安装方式

参考&#xff1a;https://www.cnblogs.com/hilary0614/p/libraries.html https://jingyan.baidu.com/article/9f7e7ec09d90906f281554e1.html&#xff0c;开发板管理器和管理库区别 Arduino 经常推出新的控制器&#xff0c;这些新的控制器可能不在现有的板子型号中&#xff0c;…
阅读更多...
【Linux】Linux 项目自动化构建工具 -- make/makefile

【Linux】Linux 项目自动化构建工具 -- make/makefile

&#x1f451;作者主页&#xff1a;进击的安度因 &#x1f3e0;学习社区&#xff1a;进击的安度因&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;Linux 文章目录一、前言二、概念三、demo 实现四、原理与规则1、依赖关系和依赖方法① 感性理解② 深层理解…
阅读更多...
回顾 2022

回顾 2022

前言回顾过去的 2022 年&#xff0c;感觉自己学习了不少&#xff0c;输出的不多。适合 Golang 新手入门的项目 go-gin-api[1]&#xff0c;今年基本没更新&#xff0c;目前已收到 4.1k star&#xff0c;感谢大家的认可。关于健康今年室外跑步&#xff0c;跑了有 175 km&#xff…
阅读更多...
什么蓝牙耳机音质好？发烧友力荐四款好音质蓝牙耳机

什么蓝牙耳机音质好？发烧友力荐四款好音质蓝牙耳机

随着蓝牙技术的发展&#xff0c;现如今蓝牙耳机的音质越来越可以与有线耳机的音质相媲美了。音质作为选择蓝牙耳机的重要参考因素之一&#xff0c;在我们的日常生活中&#xff0c;不管是听歌、追剧、通话等&#xff0c;音质不一的蓝牙耳机都能带来不一样的听觉体验。下面&#…
阅读更多...
提高1--数字三角形模型

提高1--数字三角形模型

1.摘花生 Hello Kitty想摘点花生送给她喜欢的米老鼠。 她来到一片有网格状道路的矩形花生地(如下图)，从西北角进去，东南角出来。 地里每个道路的交叉点上都有种着一株花生苗，上面有若干颗花生，经过一株花生苗就能摘走该它上面所有的花生。 Hello Kitty只能向东或向南走，不…
阅读更多...
Java基础知识复习

Java基础知识复习

文章目录复习1. Java编译和运行2. Java运行环境3. Java注释4. Java中的打印5. 数据类型整形浮点型字符类型字节类型布尔类型数据类型转换强制类型转换隐式类型转换小结6. 变量命名规范7. 运算符算数运算符逻辑运算符移位运算符关系运算符8. switch9. 方法方法的重载可变参数变程…
阅读更多...
http请求走私详解

http请求走私详解

前言 HTTP请求走私是一种干扰网站正常处理从一个或多个用户收到的HTTP请求的方法&#xff0c;请求走私漏洞在本质上通常很关键&#xff0c;允许攻击者绕过安全控制&#xff0c;获得对敏感数据的未授权访问&#xff0c;并直接危害其他应用程序的用户。 随便提一句&#xff1a;…
阅读更多...
关系抽取概念及相关论文解读

关系抽取概念及相关论文解读

1.信息抽取概述 信息抽取是构建知识图谱的必要条件。知识图谱中以&#xff08;subject&#xff0c;relation&#xff0c;object&#xff09;三元组的形式表示数据。信息抽取分为两大部分&#xff0c;一部分是命名实体识别&#xff0c;识别出文本中的实体&#xff0c;另外就是关…
阅读更多...
【dp】排列问题——零钱兑换和组合总和IV

【dp】排列问题——零钱兑换和组合总和IV

文章目录零钱兑换组合总和IV零钱兑换 很明显&#xff0c;本题使用完全背包算法&#xff0c;求解的是组合数&#xff0c;直接使用完全背包算法即可&#xff0c;为什么是组合数呢&#xff1f; 如果题目说 amount5&#xff0c;coins[1,2,5] 有9种方法&#xff0c;那就是排列数&am…
阅读更多...
探秘SSD磨损均衡和闪存管理

探秘SSD磨损均衡和闪存管理

一块2TB的SSD要进行3000PE耐久度测试&#xff0c;需要在顺序写入方式下&#xff08;写入放大比接近1&#xff09;写入2TB x 30006000TB的数据&#xff0c;这需要相当长的时间才能完成。有朋友可能会问&#xff1a;在SSD里划分一个1GB容量的小分区&#xff0c;往里面覆盖写入300…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023