购物网站导航模板中源建设有限公司网站
引言
在项目开发过程中，优化用户界面和完善数据处理逻辑是提升用户体验的重要环节。本篇文章将带你一步步实现从修改项目图标、添加数据、优化日期显示，到新增自定义字段、调整按钮样式以及自定义按钮跳转等功能。这些操作不仅提升了项目的可视化效果，还为项目的灵活性和易用性打下了坚实基础。
一、修改图标
注意每次修改完成后，记得点击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。当然，你可以把字段替换成其他的。
就可以进行搜索啦。
总结
通过本文的讲解，我们顺利完成了从前端界面的美化到后端数据库字段的同步与修改，最终实现了功能优化与用户体验提升。项目在完善的过程中，借助相对日期显示、字段截断、按钮自定义等技巧，大大增强了系统的交互性和功能性。掌握了这些步骤，相信你可以更加游刃有余地处理后续开发中的复杂需求。