从数据管理到功能优化：Vue+TS 项目实用技巧分享

news2024/10/11 23:41:33

引言

在项目开发过程中，优化用户界面和完善数据处理逻辑是提升用户体验的重要环节。本篇文章将带你一步步实现从修改项目图标、添加数据、优化日期显示，到新增自定义字段、调整按钮样式以及自定义按钮跳转等功能。这些操作不仅提升了项目的可视化效果，还为项目的灵活性和易用性打下了坚实基础。

一、修改图标

注意每次修改完成后，记得点击pubilsh，重新发布。

然后可以看到项目的变化：

二、添加数据

给下面的表都添加一些数据进去，下面是我随便加的哦。

三、添加relative date 相对日期

1、点击Teachers表，对此表进行编辑，然后修改成相对日期，记得最后要publish。

2、可以看到如图效果，不再是具体时间了，而是相对日期。

四、把按钮下拉框变成横向的按钮

1、操作步骤如下图所示：

五、Course表新增book_image字段

1、打开navicat，找到sims数据库，然后在courses数据表中添加一个字段book_image

2、点击同步按钮，将数据库的修改同步至项目。

如果没有自动生成，选择 File

六、truncate(20, ‘...’) 截断

七、将teacherid显示出老师的姓，不再是👁Teacher

这样修改完成之后，记得点击publish，然后我们就可以看到说无法完成请求，那么去看看8060的终端，报的是：

'SELECT COUNT(DISTINCT `courses_final`.`course_id`) AS `cnt` FROM `courses_final` `courses_final` LEFT JOIN `teachers` `teachers` ON teacher_id = teacher_id

那么我们现在，把字段名修改一下，然后再同步一下数据库，再publish。

最后的效果就是这样子啦。

八、高级自定义按钮

1、新建一个RedirectPage页面，记得点击publish哦。

2、点击Page Custom JS，添加以下内容：

const openurl = async ()=> {
    console.log("==========================props.id========",props.id)
    window.open(`http://www.baidu.com/s?wd=${props.id}`,'_blank');
    window.history.back(-1);
}
openurl();