需求

uniapp頁面上顯示的Code，需要替換成后端數(shù)據(jù)字典中的Text。

包括

列表展示

數(shù)據(jù)編輯

思路

? 前端關鍵點

? ? 1、頁面修改：取值統(tǒng)一改成屬性加后綴的方式顯示（例如，sex_dictTxt）

? ? 2、增加攔截器（在App.vue中找個鉤子添加）：

? ? ? ? 2-1：在向后端發(fā)數(shù)據(jù)前攔截，用來替換sex_dictTxt 和 sex，出于vue是響應式的，應該先復制一個副本后修改，最后發(fā)出。

? ? ? ? 2-2：在接收到后端服務之后，可以直接使用后端服務傳過來的sex_dictTxt即可

? ? ? ? 2-3：在發(fā)送數(shù)據(jù)之前，把dictTxt對應的真實code替回去（如果有必要的話）

? 后端關鍵點

? 1、字典服務：需要有一個后端的字典查詢服務。在數(shù)據(jù)返回給前端之前，對數(shù)據(jù)進行一次轉(zhuǎn)換操作。

? 2、數(shù)據(jù)對象增加元數(shù)據(jù)：給具體要轉(zhuǎn)換的那些字段打上注解（例如，User.java， User.sex字段，需要打上一個@UniAppDict(xxx)）方便工具方法（可能是模板方法或者攔截器）對指定字段進行轉(zhuǎn)義。

? 3、在service層返回給controller層數(shù)據(jù)之前，對已查出來的數(shù)據(jù)進行加工（由于查出來的對象集合中，需要轉(zhuǎn)換的屬性都打注解了）。

? 4、controller層盡量使用jsonArray作為返回類型（可以封裝返回對象，帶有狀態(tài)信息，但是具體的數(shù)據(jù)最好是json），方便添加或刪除屬性。

代碼

? 前端關鍵代碼

? ??

App.vue<script>export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')},mounted() {uni.addInterceptor('request', {// invoke函數(shù)是在調(diào)用request方法時，進入后端代碼之前觸發(fā)，可以在進入后臺代碼之前做一些事invoke(args) {debuggerlet token = uni.getStorageSync("token")// 校驗是否已登錄if (!token || 'undefined' == token.trim().toLowerCase() || 'null' == token.trim().toLowerCase()) {// empty illegal token storageuni.removeStorageSync("token")uni.showToast({title: "未登錄，請先登錄。",icon:'none',duration:3000,})// redirect to login pagereturn false} else {// token存在，傳參數(shù)之前轉(zhuǎn)換一遍參數(shù)// args.data是傳給后端所有參數(shù)的合集，例如后臺有參數(shù) objlist，則在這可以通過args.data.objlist取到值let full = args.data;// 假設參數(shù)名稱是objlistlet list = full.objlist;// 深克隆，復制一份新數(shù)據(jù)let newlist = JSON.parse(JSON.stringify(list));// 根據(jù)具體情況整理數(shù)據(jù)for (let item of newlist) {Object.keys(item).forEach( (attr) => {if (attr.endsWith("_dictTxt")) {// 我是把兩個值替換了let txtVal = item[attr];item[attr.replace("_dictTxt", '')] = txtVal;}});}// 改完了把參數(shù)替了，防止前端頁面發(fā)生變化，后端也能收到正確的值args.data.objlist = newlist;return true;}},// 請求成功后的鉤子，在uni.request的success之前，可以修改數(shù)據(jù)success(res) {}, // 請求失敗的鉤子，在uni.request的fail之前，可以做統(tǒng)一異常處理的入口fail(err) {console.log('interceptor-fail',err)}, // 請求完成的鉤子，在uni.request的complete之前，可以做點收尾工作complete(res) {console.log('interceptor-complete',res)}})}} </script><style>/*每個頁面公共css */ </style>

? 后端關鍵代碼

/*** 用戶實體類*/ public class User {private String userName;private String passWord;@UniAppDict(dictCode="dict_code_column")// select txt from dictTable where dict_code_column = sexprivate String sex;// getter ...// setter ... }/*** uniapp字典轉(zhuǎn)換注解*/ @Target(ElementType.FIELD) @Retention(RetentionPolicy.RUNTIME) public @interface UniAppDict {/*** 對應字典中的code值*/String dicCode();/*** 如果指定不是默認系統(tǒng)表，需要關聯(lián)的列名* select txt from dictTable where dectText = dictCode*/String dicText() default "";/*** 字典表名稱*/String dictTable() default "sys_dict"; }/*** 字典表服務*/ public interface SysDictService {String translate(String code); }// ------------------------模板方式開始/*** 工具服務，提供service層的統(tǒng)一入口* 開放具體數(shù)據(jù)查詢細節(jié)給子類*/ public abstract class AbstractController<T> {public JsonArray doit() {List<T> res = select();for (T t : res) {Field[] fields = t.getClass().getDeclaredFields();for (Field f : fields) {Annotation[] annos = f.getAnnotations();for (Annotation an : annos) {// 判斷注解類型// 取注解值，并使用字典表服務進行查詢// 把對象轉(zhuǎn)成jsonArray，動態(tài)添加 XXX_dictTxt 的屬性}}}return null;}abstract List<T> select(); }/*** 繼承了抽象controller* 實現(xiàn)抽象方法，調(diào)用父類的入口，復用父類的數(shù)據(jù)加工邏輯*/ @Controller public class TestController extends AbstractController<User> {@OverrideList<User> select() {// 查數(shù)據(jù)return null;}@RequestMapping(params = "hello")public JsonArray comeon () {return doit();}}// ------------------------模板方式結(jié)束// ------------------------攔截器方式 聲明一個攔截器，攔截service層的服務，在service層返回List<Object>之前，對數(shù)據(jù)進行加工即可。

后續(xù)有需求再開發(fā)。

?

后端代碼：https://github.com/NickDaDa/uniappdict_backend

前端代碼：

總結(jié)

以上是生活随笔為你收集整理的uniapp 前端数据显示数据字典值 程序设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。