四、若依--P13【黑马程序员Java最新AI+若依框架项目开发新方案视频教程，基于RuoYi-Vue3前后端分离版本，从前端到后端再到AI智能化应用全通关】

我劝告了风*

于 2024-06-23 14:32:06 发布

阅读量467

点赞数 9

文章标签： java 人工智能前端

本文链接：https://blog.csdn.net/qq_56435346/article/details/139896190

版权

学习视频

【黑马程序员Java最新AI+若依框架项目开发新方案视频教程，基于RuoYi-Vue3前后端分离版本，从前端到后端再到AI智能化应用全通关】 https://www.bilibili.com/video/BV1pf421B71v/?p=6&share_source=copy_web&vd_source=3949d51b57b2891ea14d6e51c792bef6

template标签用于存放前端展示的各个组件标签（标题一到五）

script标签编写一下业务的逻辑代码（标题六）

一、搜索表单

:model 用来做双向绑定的，将前端录入的这些条件封装给响应式对象“queryParams”

:v-show 用来控制搜索栏显示还是隐藏

部分表单项

1、课程编码文本框

2、课程学科下拉框

3、搜索 / 重置按钮

二、按钮区域

1、新增按钮

2、修改按钮

删除和导出按钮，可以参考上述两个按钮

3、自定义组件right-toolba

三、数据展示表格

表格的列标签

四、分页区域

五、添加 / 修改课程的对话框

六、script标签中的业务逻辑方法


// 引入后端api接口
import { listCourse, getCourse, delCourse, addCourse, updateCourse } from "@/api/course/course";
// 获取当前实例代理对象，用于访问组件数据、方法
const { proxy } = getCurrentInstance();
// 获取课程学科的数据字典
const { course_subject } = proxy.useDict('course_subject');

//接下来通过ref定义了一些简单类型的响应式对象
// 列表数据，用于接收后端返回的课程列表
const courseList = ref([]);
// 是否显示弹框
const open = ref(false);
// 是否显示加载状态
const loading = ref(true);
// 是否显示搜索栏
const showSearch = ref(true);
// 复选框，被选中id的数组
const ids = ref([]);
// 复选框，是否单选，用于高亮修改、删除按钮;true表示不可用
const single = ref(true);
// 复选框，是否多选，仅高亮删除按钮
const multiple = ref(true);
// 总（记录）条数
const total = ref(0);
// 用于区分新增、修改对话框标题
const title = ref("");
// 定义reactive响应式对象
const data = reactive({
  // 新增或修改表单数据
  form: {},
  // 搜索条件参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    code: null,
    subject: null,
    name: null,
    applicablePerson: null,
  },
  // 表单校验规则
  rules: {
    code: [
      { required: true, message: "课程编码不能为空", trigger: "blur" }
    ],
    subject: [
      { required: true, message: "课程学科不能为空", trigger: "change" }
    ],
    name: [
      { required: true, message: "课程名称不能为空", trigger: "blur" }
    ],
    price: [
      { required: true, message: "价格不能为空", trigger: "blur" }
    ],
    applicablePerson: [
      { required: true, message: "适用人群不能为空", trigger: "blur" }
    ],
    info: [
      { required: true, message: "课程介绍不能为空", trigger: "blur" }
    ],
  }
});
// 为方便三个属性的操作，将data对象的三个属性，转换为ref响应式对象
const { queryParams, form, rules } = toRefs(data);