引言

????????在項(xiàng)目開發(fā)過程中，優(yōu)化用戶界面和完善數(shù)據(jù)處理邏輯是提升用戶體驗(yàn)的重要環(huán)節(jié)。本篇文章將帶你一步步實(shí)現(xiàn)從修改項(xiàng)目圖標(biāo)、添加數(shù)據(jù)、優(yōu)化日期顯示，到新增自定義字段、調(diào)整按鈕樣式以及自定義按鈕跳轉(zhuǎn)等功能。這些操作不僅提升了項(xiàng)目的可視化效果，還為項(xiàng)目的靈活性和易用性打下了堅(jiān)實(shí)基礎(chǔ)。

一、修改圖標(biāo)

注意每次修改完成后，記得點(diǎn)擊pubilsh，重新發(fā)布。

然后可以看到項(xiàng)目的變化：

二、添加數(shù)據(jù)

給下面的表都添加一些數(shù)據(jù)進(jìn)去，下面是我隨便加的哦。

三、添加relative date ?相對(duì)日期

1、點(diǎn)擊Teachers表，對(duì)此表進(jìn)行編輯，然后修改成相對(duì)日期，記得最后要publish。

2、可以看到如圖效果，不再是具體時(shí)間了，而是相對(duì)日期。

四、把按鈕下拉框變成橫向的按鈕

1、操作步驟如下圖所示：

五、Course表新增book_image字段

1、打開navicat，找到sims數(shù)據(jù)庫，然后在courses數(shù)據(jù)表中添加一個(gè)字段book_image

2、點(diǎn)擊同步按鈕，將數(shù)據(jù)庫的修改同步至項(xiàng)目。

如果沒有自動(dòng)生成，選擇 File

六、truncate(20, ‘...’) ?截?cái)?/h2>

七、將teacherid顯示出老師的姓，不再是👁Teacher

這樣修改完成之后，記得點(diǎn)擊publish，然后我們就可以看到說無法完成請(qǐng)求，那么去看看8060的終端，報(bào)的是：

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

那么我們現(xiàn)在，把字段名修改一下，然后再同步一下數(shù)據(jù)庫，再publish。

最后的效果就是這樣子啦。

八、高級(jí) ?自定義按鈕

1、新建一個(gè)RedirectPage頁面，記得點(diǎn)擊publish哦。

2、點(diǎn)擊Page Custom JS，添加以下內(nèi)容：

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、點(diǎn)擊ActionButtons，然后修改里面的參數(shù)

如圖：? redirectpage/${data.teacher_id}? ?然后點(diǎn)擊okay，記得publish。

5、再進(jìn)入redirectpage.vue里面 添加id字段 可接受String和Number兩種類型的數(shù)據(jù)。

然后記得點(diǎn)擊publish哦。

可以看見按鈕已經(jīng)添加兩個(gè)頁面重定向啦。

點(diǎn)擊redirctPage就會(huì)重定向到百度，并且查詢teacher_id。當(dāng)然，你可以把字段替換成其他的。

就可以進(jìn)行搜索啦。

總結(jié)

????????通過本文的講解，我們順利完成了從前端界面的美化到后端數(shù)據(jù)庫字段的同步與修改，最終實(shí)現(xiàn)了功能優(yōu)化與用戶體驗(yàn)提升。項(xiàng)目在完善的過程中，借助相對(duì)日期顯示、字段截?cái)唷粹o自定義等技巧，大大增強(qiáng)了系統(tǒng)的交互性和功能性。掌握了這些步驟，相信你可以更加游刃有余地處理后續(xù)開發(fā)中的復(fù)雜需求。