前端第三次作业

1、ref和reactive的区别

ref：在 Vue 3 中，ref 是用来创建响应式引用的函数。它返回一个带有 .value 属性的对象，通过修改 .value 属性来更新数据。ref 主要用于包装基本数据类型，如数字、字符串等，使其具备响应式能力。

import { ref } from 'vue'; const count = ref(0); // 创建一个 ref console.log(count.value); // 读取值 count.value++; // 更新值

reactive：reactive 用于创建一个响应式数据对象。它接收一个普通对象，并返回一个响应式代理对象，这意味着对象中的每个属性都会变成响应式的，修改这些属性会触发视图更新。

import { reactive } from 'vue'; const state = reactive({ count: 0, message: 'Hello' }); console.log(state.count); // 读取值 state.count++; // 更新值

2、ElementPlus中什么是slot槽

        在 ElementPlus 中，slot 槽是一种机制，允许开发者在组件内部插入额外的内容或组件。通过 slot，可以在组件的特定位置插入自定义的内容，这样可以增强组件的灵活性和复用性。
3、对话框、自定义标题、表单、展现控制、新增和修改控制

c#的对话框实现

MessageBox.Show("这是一个消息框", "提示", MessageBoxButtons.OK, MessageBoxIcon.Information);

自定义标题

public partial class MyCustomDialog : Form
{
    public MyCustomDialog()
    {
        InitializeComponent();
        this.Text = "自定义标题";
    }
}

表单

public partial class MainForm : Form
{
    public MainForm()
    {
        InitializeComponent();
    }

    private void btnSubmit_Click(object sender, EventArgs e)
    {
        // 处理提交按钮点击事件
        string name = txtName.Text;
        int age = Convert.ToInt32(txtAge.Text);
        // 其他数据处理逻辑
    }

    private void btnReset_Click(object sender, EventArgs e)
    {
        // 处理重置按钮点击事件
        txtName.Text = "";
        txtAge.Text = "";
        // 其他重置逻辑
    }
}

展现控制

if (isAdmin)
{
    adminPanel.Visible = true;
    userPanel.Visible = false;
}
else
{
    adminPanel.Visible = false;
    userPanel.Visible = true;
}

新增和修改控制

public partial class ItemForm : Form
{
    private Item currentItem;

    public ItemForm(Item item = null)
    {
        InitializeComponent();
        
        if (item != null)
        {
            // 编辑模式
            this.Text = "编辑项目";
            this.currentItem = item;
            // 设置表单控件的值为当前项目的属性值
        }
        else
        {
            // 新增模式
            this.Text = "新增项目";
            this.currentItem = new Item();
        }
    }

    private void btnSave_Click(object sender, EventArgs e)
    {
        // 保存操作，根据当前模式执行新增或修改逻辑
        if (currentItem.Id == 0)
        {
            // 新增操作
            // 将表单数据保存到数据库等操作
        }
        else
        {
            // 修改操作
            // 更新数据库中对应的记录
        }
        this.Close();
    }
}

4、雪花算法引起javascript long型精度问题及解决方法

• 雪花算法生成的唯一 ID 是一个 64 位整数，而 JavaScript 中的数字类型是双精度浮点数，只能精确表示 53 位整数。这可能导致大整数在处理时丢失精度或溢出。

  解决方案包括：

  • 使用第三方库处理大整数，如 bigint-buffer 或 long.js。
  • 将 ID 作为字符串处理，避免直接操作大整数。
  • 将大整数拆分或分段处理，以确保不超出 JavaScript 数字的精度限制。

5、什么是RESTful

RESTful 是一种软件架构风格，设计用于构建具有可伸缩性的网络应用程序。它基于 REST 原则，使用 HTTP 协议的方法（如 GET、POST、PUT、DELETE）来访问和操作数据资源。RESTful API 设计风格强调资源的状态转移，提供了一种简洁和统一的接口风格，易于理解和使用。
6、对象赋值和Object.Assign的区别

• 对象赋值：直接将一个对象的引用赋给另一个变量，这两个变量指向同一个对象。修改其中一个变量也会影响到另一个。

• let obj1 = { name: 'Alice' }; let obj2 = obj1; // obj2 和 obj1 指向同一个对象 obj2.name = 'Bob'; console.log(obj1.name); // 输出 'Bob'，因为修改了同一个对象

• Object.assign：将一个或多个源对象的属性复制到目标对象中。它返回目标对象，并且是浅拷贝，即只复制对象的属性，不会复制对象的深层结构或引用。

  let obj1 = { name: 'Alice' }; let obj2 = { age: 30 }; Object.assign(obj1, obj2); console.log(obj1); // 输出 { name: 'Alice', age: 30 }
  如果属性值是对象，只复制对象的引用，而不是对象本身。。

7、如果实现修改回显

// 假设从后端获取的数据 let userData = { name: 'Alice', age: 25 }; // 将数据填充到表单中 form.name = userData.name; form.age = userData.age;
用户修改表单后，可以将更新后的数据再次提交给后端进行保存。

8、如何实现新增清空数据

// 清空表单数据 form.name = ''; form.age = ''; // 或者重置表单的状态 this.$refs['formName'].resetFields(); // Vue 中的重置表单方法