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;
我们查看一下结果。有数据,也不报错了。好了本章到这
下章预告,分页及用户的新增,修改,删除。