第十章 菜单、axios封装

Mapper

首先，调整UserMapper.xml，添加resultMap用来表和对象做映射

 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类型添加注解，显示就是正确的了

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

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")

 导航栏

       然后是导航栏，现在是读的router里的设置，现在要变成读json，以后会从后台动态获取。

       Components下创建menu，创建index.vue文件，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文件，修改后的文件

　　　　{
            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: '部门管理'
            }]
        },

 　　运行结果

封装axios

       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     }

前台我们修改为

1 _this.tableData = res.data.data;

我们查看一下结果。有数据，也不报错了。好了本章到这

下章预告，分页及用户的新增，修改，删除。