<router-link to="/userProfile/travelCount"> <button href="#" class="btn btn-primary btn-flat ch">账户信息</button></router-link>
userProfile.vue:
<template> <!-- Main content --> <section class="content"> <div class="row"> <div class="col-md-3"> <!-- Profile Image --> <div class="box box-primary"> <div class="box-body box-profile"> <img class="profile-user-img img-responsive img-circle" src="../assets/img/avatar5.png" alt="User profile picture"> <h3 class="profile-username text-center ch">{{displayName}}</h3> <p class="text-muted text-center ch">{{duty}}</p> <ul class="list-group list-group-unbordered"> <li class="list-group-item"> <b class="ch">用户名:</b> <b class="pull-right ch">{{displayName}}</b> </li> <li class="list-group-item"> <b class="ch">登录名:</b> <b class="pull-right ch">{{name}}</b> </li> <li class="list-group-item"> <b class="ch">邮箱地址:</b> <b class="pull-right ch">{{email}}</b> </li> <li class="list-group-item"> <b class="ch">所属部门:</b> <b class="pull-right ch">{{department}}</b> </li> <li class="list-group-item"> <b class="ch">职务:</b> <b class="pull-right ch">{{duty}}</b> </li> <li class="list-group-item"> <b class="ch">办公地点:</b> <b class="pull-right ch">{{location}}</b> </li> <li class="list-group-item"> <b class="ch">办公电话:</b> <b class="pull-right ch">{{tel}}</b> </li> <li class="list-group-item"> <b class="ch">手机:</b> <b class="pull-right ch">{{phone}}</b> </li> <li class="list-group-item"> <b class="ch">上级领导:</b> <b class="pull-right ch">{{superior}}</b> </li> </ul> <strong class="ch"><i class="fa fa-pencil margin-r-5"></i>技能标签</strong> <p style="padding-top:5px"> <button v-for="skill in skills" class="label btn-primary ch" style="margin:2px; color:white">{{skill}}</button> </p> </div> <!-- /.box-body --> </div> <!-- /.box --> </div> <!-- /.col --> <div class="col-md-9"> <div class="nav-tabs-custom"> <ul class="nav nav-tabs"> <li class="ch active" data-toggle="tab"> <router-link to="/userProfile/travelCount"> <span>出差统计</span> </router-link> </li> <li class="ch" data-toggle="tab"> <router-link to="/userProfile/workCircle"> <span>我的工作圈</span> </router-link> </li> </ul> <div class="tab-content"> <router-view></router-view><!--这里是要显示travelCount内容的地方--> </div> <!-- /.content --> </div> </div> </div> </section></template><script> export default { data() {//这里对应用户的基本信息 return { displayName: null, duty: null, name: null, email: null, department: null, location: null, tel: null, phone: null, superior: null, skills: null } }, mounted (){//使用mounted在挂在DOM时通过restful api获取用户基本信息并填充到data中。这个之后详细说明。 this.$http.get( 'https://192.168.227.1:8443/userInfo' , { headers: {'token' : localStorage.token}//在requestHeader中携带之前产生的token用来在后端验证用户权限。 } ) .then( //success response => { this.displayName = response.data.displayName; this.duty = response.data.duty; this.name = response.data.name; this.email = response.data.email; this.department = response.data.department; this.location = response.data.location; this.tel = response.data.tel; this.phone = response.data.phone; this.superior = response.data.superior; this.skills = response.data.skills; }, //error response => { } ) } }</script><style scoped> @font-face { font-family: yaHeiFont; src: url('../assets/font/yaHei.ttf') } .ch { font-family:yaHeiFont; color: black; }</style>
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import VueRouter from 'vue-router'import VueResource from 'vue-resource'import store from './store/store'//bootstrapimport 'bootstrap/dist/css/bootstrap.css'import 'bootstrap/dist/js/bootstrap.min.js'//AdminLTEimport './assets/css/skins/_all-skins.min.css'import './assets/css/AdminLTE.min.css'import './assets/js/app.min.js'//font-awesomeimport 'font-awesome/css/font-awesome.min.css'//echartsimport echarts from 'echarts'//componentsimport App from './App'import Login from './components/login'import Index from './components/index'import DeviceCatalog from './components/deviceCatalog'import UserProfile from './components/userProfile'import TravelCount from './components/travelCount'import WorkCircle from './components/workCircle'Vue.use(VueRouter)Vue.use(VueResource)//注册echarts的一种方法// Object.defineProperties(Vue.prototype, {// $echarts: { get: () => echarts }// });//Vue-Resource提交方式设置Vue.http.options.emulateJSON = true;const routes = [ //登录页 { path: '/login', component : Login }, //导航页 { path: '/index', component: Index, //导航页子页面,children中的component将被渲染到之前说的红色区域内 children: [ //设备目录页 { path: '/deviceCatalog', component: DeviceCatalog }, //账户信息页 { path: '/userProfile', component: UserProfile, //账户信息子页面 children: [ //出差统计页 { path: '/userProfile/travelCount', component: TravelCount }, //工作圈子页 { path: '/userProfile/workCircle', component: WorkCircle } ] }, ] },]const router = new VueRouter({ routes})//默认导航到登录页// router.push('/login')/*全局路由钩子访问资源时需要验证localStorage中是否存在token以及token是否过期验证成功可以继续跳转失败返回登录页重新登录 */router.beforeEach((to, from, next) => { if(to.path == '/login'){ next() } if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){ next() } else{ next('/login') }})new Vue({ el: '#app', template: '<App/>', components: { App }, router:router, store: store, echarts: echarts//注册echarts的另一种方法 }})
import echarts from 'echarts'
<template> <div id="main" style="height:730px"></div></template><script>export default { mounted() { var myChart = this.$root.$options.echarts.init(document.getElementById('main'));//这里注意 var option = { grid : { left : '1%', right : '2%', bottom : '1%', containLabel : true }, xAxis : { type : 'value', boundaryGap : [ 0, 0.01 ] }, yAxis : { type : 'category', axisLabel : { inside : true, textStyle : { fontWeight : 'bold' }, }, z : 100, data : ['A国:2016-01-01至2016-02-01' , 'B国:2016-03-01至2016-04-01' , 'C国:2016-06-01至2016-06-01'] }, series : [ { type : 'bar', barGap : '10%', itemStyle : { normal : { color : 'LightSkyBlue' } }, data : [100 , 200 , 300] } ] } myChart.setOption(option); //窗口尺寸变化时重新绘制chart window.onresize = () => { myChart.resize() } }}</script>
this.$root.$options.echarts
Object.defineProperties(Vue.prototype, { $echarts: { get: () => echarts }});
this.$http.get( 'https://192.168.227.1:8443/userInfo' , { headers: {'token' : localStorage.token} })
package an.userinfo;import static org.springframework.ldap.query.LdapQueryBuilder.query;import java.util.Date;import javax.naming.directory.Attributes;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.beans.factory.annotation.Value;import org.springframework.http.HttpStatus;import org.springframework.http.ResponseEntity;import org.springframework.ldap.NamingException;import org.springframework.ldap.core.AttributesMapper;import org.springframework.ldap.core.LdapTemplate;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.RequestHeader;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RestController;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.serializer.SerializerFeature;import an.entity.Employee;import io.jsonwebtoken.Jwts;@RestController("/userInfo")public class UserInfoWeb { //jwt加密密匙 @Value("${jwt.key}") private String jwtKey; //ldap模板 @Autowired private LdapTemplate ldapTemplate; /** * 将域用户属性通过EmployeeAttributesMapper填充到Employee类中,返回一个填充信息的Employee实例 */ private class EmployeeAttributesMapper implements AttributesMapper<Employee> { public Employee mapFromAttributes(Attributes attrs) throws NamingException, javax.naming.NamingException { Employee employee = new Employee(); employee.setName((String) attrs.get("sAMAccountName").get()); employee.setDisplayName((String) attrs.get("displayName").get()); employee.setEmail((String) attrs.get("userprincipalname").get()); employee.setDuty((String) attrs.get("title").get()); employee.setDepartment((String) attrs.get("department").get()); employee.setSuperior((String) attrs.get("manager").get()); employee.setLocation((String) attrs.get("physicaldeliveryofficename").get()); employee.setTel((String) attrs.get("homephone").get()); employee.setPhone((String) attrs.get("mobile").get()); String skill = (String) attrs.get("description").get(); String skills[] = skill.split(";"); employee.setSkills(skills); return employee; } } /** * 使用用户凭证取得用户信息 * @param token 用户凭证 * @return */ @CrossOrigin @RequestMapping(method = RequestMethod.GET) public ResponseEntity<String> getUserInfo(@RequestHeader("token") String token){ //解析token String username = Jwts.parser().setSigningKey(jwtKey).parseClaimsJws(token).getBody().getSubject(); String roles = Jwts.parser().setSigningKey(jwtKey).parseClaimsJws(token).getBody().getAudience(); long expiration = Jwts.parser().setSigningKey(jwtKey).parseClaimsJws(token).getBody().getExpiration().getTime(); long current = new Date().getTime(); //验证token过期时间、用户权限 if(current > expiration || roles.indexOf("ROLE_USER") == -1) { return new ResponseEntity<String>(HttpStatus.FORBIDDEN); } //查询并产生用户信息 Employee employee = ldapTemplate .search(query().where("objectclass").is("person").and("sAMAccountName").is(username), new EmployeeAttributesMapper()) .get(0); return new ResponseEntity<String>(JSON.toJSONString(employee , SerializerFeature.DisableCircularReferenceDetect) , HttpStatus.OK); }}
联系客服