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