需求

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

包括

列表展示

數據編輯

思路

? 前端關鍵點

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

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

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

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

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

? 后端關鍵點

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

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

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

? 4、controller層盡量使用jsonArray作為返回類型（可以封裝返回對象，帶有狀態信息，但是具體的數據最好是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函數是在調用request方法時，進入后端代碼之前觸發，可以在進入后臺代碼之前做一些事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存在，傳參數之前轉換一遍參數// args.data是傳給后端所有參數的合集，例如后臺有參數 objlist，則在這可以通過args.data.objlist取到值let full = args.data;// 假設參數名稱是objlistlet list = full.objlist;// 深克隆，復制一份新數據let newlist = JSON.parse(JSON.stringify(list));// 根據具體情況整理數據for (let item of newlist) {Object.keys(item).forEach( (attr) => {if (attr.endsWith("_dictTxt")) {// 我是把兩個值替換了let txtVal = item[attr];item[attr.replace("_dictTxt", '')] = txtVal;}});}// 改完了把參數替了，防止前端頁面發生變化，后端也能收到正確的值args.data.objlist = newlist;return true;}},// 請求成功后的鉤子，在uni.request的success之前，可以修改數據success(res) {}, // 請求失敗的鉤子，在uni.request的fail之前，可以做統一異常處理的入口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字典轉換注解*/ @Target(ElementType.FIELD) @Retention(RetentionPolicy.RUNTIME) public @interface UniAppDict {/*** 對應字典中的code值*/String dicCode();/*** 如果指定不是默認系統表，需要關聯的列名* select txt from dictTable where dectText = dictCode*/String dicText() default "";/*** 字典表名稱*/String dictTable() default "sys_dict"; }/*** 字典表服務*/ public interface SysDictService {String translate(String code); }// ------------------------模板方式開始/*** 工具服務，提供service層的統一入口* 開放具體數據查詢細節給子類*/ 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) {// 判斷注解類型// 取注解值，并使用字典表服務進行查詢// 把對象轉成jsonArray，動態添加 XXX_dictTxt 的屬性}}}return null;}abstract List<T> select(); }/*** 繼承了抽象controller* 實現抽象方法，調用父類的入口，復用父類的數據加工邏輯*/ @Controller public class TestController extends AbstractController<User> {@OverrideList<User> select() {// 查數據return null;}@RequestMapping(params = "hello")public JsonArray comeon () {return doit();}}// ------------------------模板方式結束// ------------------------攔截器方式 聲明一個攔截器，攔截service層的服務，在service層返回List<Object>之前，對數據進行加工即可。

后續有需求再開發。

?

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

前端代碼：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。