鍍金池/ 問答/PHP  HTML/ 請問如何設(shè)計前端UI，方便編輯SQL多對多關(guān)系？

請問如何設(shè)計前端UI，方便編輯SQL多對多關(guān)系？

我正在做一個在線書店，顯然書和作者是多對多關(guān)系（一本書可以有多個作者，一個作者可以寫多本書），因此需要三個表：
書表B: id, title, ...
作者表A: id, name, ...
兩者關(guān)系表C: bid, aid。

現(xiàn)在我們向數(shù)據(jù)庫錄入一本書（假定是數(shù)據(jù)庫沒有的新書），那么一定要向B表和C表插入新記錄，但A表呢？這本新書的作者可能已經(jīng)在A中了，也可能不在，若不在，就應(yīng)先創(chuàng)建作者插入到A中，取得自動遞增id，才能和bid一起插入到C中。

我想問的是，前端UI怎么設(shè)計，才能優(yōu)雅地提示用戶該如何錄入作者，例如：
當作者不存在時，提示用戶先創(chuàng)建作者；
當作者已存在或剛創(chuàng)建完，如何把作者id和這本書關(guān)聯(lián)起來？

我曾想過用作者名字來找id，比如用一個 input 框要求用戶輸入作者名字，然后Ajax提交到后臺搜索數(shù)據(jù)庫，沒找到時提示用戶作者尚不存在，若找到了……

但這種方案也有幾個挺難辦的問題：
1.如果用戶把名字輸錯導致沒有找到怎么辦？當作者是外國人時名字很容易輸錯
2.用戶輸對了，但卻找到多個重名的怎么辦？當作者是中國人時重名并不罕見

拜托大家?guī)臀以O(shè)計一下UI，我覺得不管怎么樣，后臺肯定都有辦法處理！所以我不擔心后臺，我希望前端UI能令用戶用起來方便。

謝謝！

回答
編輯回答
雨蝶

輸入框

可以參考一下element ui的的輸入框。

  1. 姓名模糊搜索
  2. 搜索結(jié)果顯示可以分辨作者的信息。如：學校、出生年份
2017年12月20日 14:56
編輯回答
青瓷

我個人覺得：
方案一：查找再提示
列出一個添加新書的表單，表單作者一欄里，可以邊輸入邊顯示（像百度搜索那樣），然后用戶選擇一個，作者名字就成為一個標簽一樣。類似于下面這種感覺：
圖片描述
但是不建議做成這種標簽質(zhì)感的設(shè)計，會讓人感覺是關(guān)鍵詞啥的。

方案二：彈出窗口型
列出一個添加新書的表單，表單作者一欄里，改成一個選擇作者的按鈕，然后彈出一個小彈窗，可以直接搜索作者，也可以按類別/拼音開頭之類的查找，想要哪個就點下哪個。如果沒有自己想要的作者，就點擊添加作者。

方案三：后臺直接處理
列出一個添加新書的表單，表單作者一欄里，作者自己輸入。提交內(nèi)容后，后臺自己判斷有沒有這個作者，如果沒有就插入一條新的。這種就用戶操作簡單很多，但是如果怕用戶輸錯的話，可以在旁邊加個小提示：你輸入的是不是___？之類的。

如果是重名的情況，可以考慮鼠標移動到作者名字的時候，出現(xiàn)一個小氣泡，內(nèi)容就是作者的簡介，這樣應(yīng)該能區(qū)分開吧。

2018年2月9日 02:49
編輯回答
冷眸

第3張關(guān)系表完全可以 在書表B 里加一個 authorIdList字段 代替，對應(yīng)類型為JSON

2017年3月28日 00:19
編輯回答
祈歡

問題1：使用模糊搜索，有一種輸入框是輸入部分文字，會顯示出一個下拉列表，把模糊搜索匹配的結(jié)果顯示出來
問題2：同上，在下拉列表中選擇正確的人名

2018年4月28日 00:37