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

引言

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

一、修改图标

注意每次修改完成后，记得点击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();

3、找到sims文件夹，用vscode打开，然后找到redirectpage路由加上 /:id  然后保存。

4、点击ActionButtons，然后修改里面的参数

如图：  redirectpage/${data.teacher_id}   然后点击okay，记得publish。

5、再进入redirectpage.vue里面 添加id字段 可接受String和Number两种类型的数据。

然后记得点击publish哦。

可以看见按钮已经添加两个页面重定向啦。

点击redirctPage就会重定向到百度，并且查询teacher_id。当然，你可以把字段替换成其他的。

就可以进行搜索啦。

总结

        通过本文的讲解，我们顺利完成了从前端界面的美化到后端数据库字段的同步与修改，最终实现了功能优化与用户体验提升。项目在完善的过程中，借助相对日期显示、字段截断、按钮自定义等技巧，大大增强了系统的交互性和功能性。掌握了这些步骤，相信你可以更加游刃有余地处理后续开发中的复杂需求。