第十章菜單、axios封裝

時間 2019-12-18

原文原文鏈接

Mappervue

首先，調整UserMapper.xml，添加resultMap用來表和對象作映射java

 1 <resultMap type="xyz.txfan.tqms.mng.entity.model.User" id="UserResultMap">
 2         <id column="id" property="id"/>
 3         <result column="username" property="username"/>
 4         <result column="password" property="password"/>
 5         <result column="salt" property="salt"/>
 6         <result column="realname" property="realname"/>
 7         <result column="sex" property="sex"/>
 8         <result column="mail" property="mail"/>
 9         <result column="phone" property="phone"/>
10         <result column="avatar" property="avatar"/>
11         <result column="remarks" property="remarks"/>
12         <result column="status" property="status"/>
13         <result column="create_time" property="createTime"/>
14         <result column="edit_time" property="editTime"/>
15         <result column="editor" property="editor"/>
16         <result column="editor_name" property="editorName"/>
17         <result column="last_login_time" property="lastLoginTime"/>
18         <result column="last_login_ip" property="lastLoginIp"/>
19     </resultMap>
20     <sql id="columns">
21         id, username, password, salt, realname , sex, mail, phone, avatar ,remarks, status, create_time,
22         edit_time, editor, editor_name, last_login_time, last_login_ip
23     </sql>
24     <select id="select" resultMap="UserResultMap">
25         select
26         <include refid="columns"/>
27         from ts_user
28     </select>

日期的格式不是咱們想要的User.java中Date類型添加註解，顯示就是正確的了ios

@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8")sql

1 　　@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8")
2     private Date createTime;
3     @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8")
4     private Date editTime;
5     private int editor;
6     private String editorName;
7     @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8")

導航欄npm

而後是導航欄，如今是讀的router裏的設置，如今要變成讀json，之後會從後臺動態獲取。element-ui

Components下建立menu，建立index.vue文件，json是將來咱們從後臺加載的，代碼以下json

  1 <template>
  2     <el-menu :default-active="$route.path" class="el-menu-vertical-demo" unique-opened router
  3              v-show="!collapsed">
  4         <template v-for="navMenu in menuData.childs">
  5             <el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state==='ENABLE'"
  6                           :key="navMenu.entity.id" :index="navMenu.entity.value"
  7                           :route="navMenu.entity.value" collapse="true">
  8                 <i :class="navMenu.entity.icon"/>
  9                 <span slot="title">{{navMenu.entity.alias}}</span>
 10             </el-menu-item>
 11             <el-submenu v-if="navMenu.childs&&navMenu.entity&&navMenu.entity.state==='ENABLE'"
 12                         :key="navMenu.entity.id" :index="navMenu.entity.value">
 13                 <template slot="title">
 14                     <i :class="navMenu.entity.icon"/>
 15                     <span>{{navMenu.entity.alias}}</span>
 16                 </template>
 17                 <template v-for="subMenu in navMenu.childs">
 18                     <el-menu-item v-if="subMenu.childs==null&&subMenu.entity&&subMenu.entity.state==='ENABLE'"
 19                                   :key="subMenu.entity.id" :index="subMenu.entity.value"
 20                                   :route="subMenu.entity.value">
 21                         <i :class="subMenu.entity.icon"/>
 22                         <span slot="title">{{subMenu.entity.alias}}</span>
 23                     </el-menu-item>
 24                 </template>
 25             </el-submenu>
 26         </template>
 27     </el-menu>
 28 </template>
 29 
 30 <script>
 31     export default {
 32         name: "index.vue",
 33         data: function () {
 34             return {
 35                 collapsed: false,
 36                 menuData: {
 37                     "entity": null,
 38                     "childs": [
 39                         {
 40                             "entity": {
 41                                 "id": 1,
 42                                 "parentMenuId": 0,
 43                                 "name": "systemManage",
 44                                 "icon": "el-icon-message\r\n",
 45                                 "alias": "系統管理",
 46                                 "state": "ENABLE",
 47                                 "value": '/system',
 48                             },
 49                             "childs": [
 50                                 {
 51                                     "entity": {
 52                                         "id": 2,
 53                                         "parentMenuId": 1,
 54                                         "name": "userManage",
 55                                         "icon": "el-icon-phone-outline",
 56                                         "alias": "用戶管理",
 57                                         "state": "ENABLE",
 58                                         "value": "/system/user",
 59                                     },
 60                                     "childs": null
 61                                 },
 62                                 {
 63                                     "entity": {
 64                                         "id": 3,
 65                                         "parentMenuId": 1,
 66                                         "name": "roleManage",
 67                                         "icon": "el-icon-bell",
 68                                         "alias": "角色管理",
 69                                         "state": "ENABLE",
 70                                         "value": "/system/role",
 71                                     },
 72                                     "childs": null
 73                                 },
 74                                 {
 75                                     "entity": {
 76                                         "id": 4,
 77                                         "parentMenuId": 1,
 78                                         "name": "menuManage",
 79                                         "icon": "el-icon-edit",
 80                                         "alias": "菜單管理",
 81                                         "state": "ENABLE",
 82                                         "value": "/system/menu",
 83                                     },
 84                                     "childs": null
 85                                 },
 86                                 {
 87                                     "entity": {
 88                                         "id": 5,
 89                                         "parentMenuId": 1,
 90                                         "name": "deptManage",
 91                                         "icon": "el-icon-mobile-phone\r\n",
 92                                         "alias": "部門管理",
 93                                         "state": "ENABLE" ,
 94                                         "value": "/system/dept",
 95                                     },
 96                                     "childs": null
 97                                 }
 98                             ]
 99                         },
100                         {
101                             "entity": {
102                                 "id": 10,
103                                 "parentMenuId": 0,
104                                 "name": "contentManage",
105                                 "icon": "el-icon-rank",
106                                 "alias": "菜單一",
107                                 "state": "ENABLE",
108                                 "value": "/content",
109                             },
110                             "childs": [
111                                 {
112                                     "entity": {
113                                         "id": 11,
114                                         "parentMenuId": 10,
115                                         "name": "classifyManage",
116                                         "icon": "el-icon-printer",
117                                         "alias": "子菜單一",
118                                         "state": "ENABLE",
119                                         "value": "/content/classify",
120                                     },
121                                     "childs": null
122                                 },
123                                 {
124                                     "entity": {
125                                         "id": 12,
126                                         "parentMenuId": 10,
127                                         "name": "articleManage",
128                                         "icon": "el-icon-star-on",
129                                         "alias": "子菜單二",
130                                         "state": "ENABLE",
131                                         "value": "/content/article",
132                                     },
133                                     "childs": null
134                                 },
135                                 {
136                                     "entity": {
137                                         "id": 13,
138                                         "parentMenuId": 10,
139                                         "name": "commentManage",
140                                         "icon": "el-icon-share",
141                                         "alias": "子菜單三",
142                                         "state": "ENABLE",
143                                         "value": "/content/comment",
144                                     },
145                                     "childs": null
146                                 }
147                             ]
148                         }
149                     ]
150                 }
151             }
152         }
153     }
154 
155 </script>
156 
157 <style scoped>
158 
159 </style>

咱們修改一下router文件，修改後的文件axios

　　　　{
            path: '/',
            name: '系統管理',
            component: Home,
            icon: "el-icon-location",
            children: [{
                path: '/system/user',
                component: User,
                name: '用戶管理'
            }, {
                path: '/system/role',
                component: Role,
                name: '角色管理'
            }, {
                path: '/system/menu',
                component: Menu,
                name: '菜單管理'
            }, {
                path: '/system/dept',
                component: Auth,
                name: '部門管理'
            }]
        },

　　運行結果服務器

封裝axiosapp

Axios以前咱們已經加載成功了。可是須要在之返回到頁面前對返回結果之行處理。好比登錄超時，進行提示並返回到登錄，權限驗證未經過之類的統一處理都會在統一的地方進行處理。

Src下建立interface，下面建立axios。添加response的處理。代碼以下

 1 import axios from 'axios'
 2 import {Message} from 'element-ui';
 3 import qs from "qs";
 4 
 5 const service = axios.create({
 6     timeout: 30 * 1000,
 7 });
 8 
 9 service.interceptors.request.use(config => {
10     if (config.method === 'post') {
11         config.data = qs.stringify(config.data);
12     }
13     return config;
14 });
15 
16 service.interceptors.response.use(response => {
17     let data;
18     if (response.data == undefined) {
19         //ie9須要特殊處理
20         data = JSON.parse(response.request.responseText);
21     } else {
22         data = response.data;
23     }
24     if (data.code == "0") {
25         //正常訪問
26     } else {
27         Message({
28             message: "登錄超時，請從新登錄!",
29             type: "error",
30         })
31     }
32     return response
33 }, err => {
34     if (err && err.response) {
35         //todo 服務器錯誤返回
36     } else {
37         Message({
38             message: "鏈接到服務器失敗",
39             type: "error",
40         })
41     }
42     return Promise.resolve(err);
43 });
44 export default service;

而後咱們須要引用在此以前咱們須要引用」 vue-axios」，package.json中dependencies中。添加："vue-axios": "2.1.4"，而後右擊package.json，npm insall

回到main中

1 //添加引用    
2 
3 import VueAxios from 'vue-axios';
4 
5 import axios from './interface/axios/axios'
6 
7 //註冊axios：
8 
9 Vue.use(VueAxios,axios);

咱們打開user頁，改造一下調用方式。

//添加引用

 1 import Vue from 'vue';
 2 
 3 
 4 
 5             Vue.axios.get(queryUrl)
 6 
 7                 .then(function (res) {
 8 
 9                     console.log(res.data);
10 
11                     _this.tableData = res.data
12 
13                 })
14 
15                 .catch(function (error) {
16 
17                     console.log(error);
18 
19                 });

咱們刷新一下頁面，就看到結果了。同時返回告終果，又出現咱們剛纔添加的錯誤信息。說明咱們添加的方法是能夠的。

後臺咱們修改一下咱們以前的方法。變動爲

 1     @ApiOperation(value = "用戶信息查詢", notes = "獲取用戶信息")
 2     @PostMapping("query")
 3     public Object queryUser(QueryUser vo) {
 4         List<User> users = userService.query(vo);
 5         Map<String, Object> result = new HashMap<>();
 6         result.put("code", "0");
 7         result.put("data", users);
 8         result.put("message", "");
 9         return result;
10     }