免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

上一篇完成了AdminLTE的整合，接下來就要把頁面中的邏輯一一填充進(jìn)來了，先從展示用戶信息開始吧。

我們需要用戶點(diǎn)擊賬戶信息按鈕后被導(dǎo)航到賬戶信息頁。所以需要給賬戶信息按鈕添加router-link，點(diǎn)擊時(shí)調(diào)用router進(jìn)行頁面跳轉(zhuǎn)。

第一步：在賬戶信息的HTML代碼處添加事件

<router-link to="/userProfile/travelCount">    <button href="#" class="btn btn-primary btn-flat ch">賬戶信息</button></router-link>
1
2
3
1
2
3

第二步：新建一個(gè)userProfile.vue和一個(gè)travelCount.vue。userProfile用來展示用戶的基本信息，travelCount用來展示用戶的出差記錄。travelCount是被嵌套在userProfile中的。

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">職務(wù)：</b> <b class="pull-right ch">{{duty}}</b>                            </li>                            <li class="list-group-item">                                <b class="ch">辦公地點(diǎn)：</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">手機(jī)：</b> <b class="pull-right ch">{{phone}}</b>                            </li>                            <li class="list-group-item">                                <b class="ch">上級(jí)領(lǐng)導(dǎo)：</b> <b class="pull-right ch">{{superior}}</b>                            </li>                        </ul>                        <strong class="ch"><i class="fa fa-pencil margin-r-5"></i>技能標(biāo)簽</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>出差統(tǒng)計(jì)</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內(nèi)容的地方-->                    </div>                    <!-- /.content -->                </div>            </div>        </div>    </section></template><script>    export default {        data() {//這里對(duì)應(yīng)用戶的基本信息            return {                displayName: null,                duty: null,                name: null,                email: null,                department: null,                location: null,                tel: null,                phone: null,                superior: null,                skills: null            }        },        mounted (){//使用mounted在掛在DOM時(shí)通過restful api獲取用戶基本信息并填充到data中。這個(gè)之后詳細(xì)說明。            this.$http.get(                'https://192.168.227.1:8443/userInfo' ,                 {                    headers: {'token' : localStorage.token}//在requestHeader中攜帶之前產(chǎn)生的token用來在后端驗(yàn)證用戶權(quán)限。                }            )                .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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

第三步，在main.js中引入userProfile.vue文件并且為userProfile添加路由。這里因?yàn)閡serProfile內(nèi)容要顯示的地方是在紅框區(qū)域內(nèi)，如下圖：

而紅框區(qū)域內(nèi)的路由出口是在index.vue中定義的，所以如果想要userProfile的內(nèi)容正確渲染到紅框區(qū)域內(nèi)，則需要把userProfile嵌套在index中，需要用到vue-router的嵌套路由。

// 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)//注冊(cè)echarts的一種方法// Object.defineProperties(Vue.prototype, {//   $echarts: { get: () => echarts }// });//Vue-Resource提交方式設(shè)置Vue.http.options.emulateJSON = true;const routes = [  //登錄頁  {    path: '/login',    component : Login  },  //導(dǎo)航頁  {    path: '/index',    component: Index,    //導(dǎo)航頁子頁面，children中的component將被渲染到之前說的紅色區(qū)域內(nèi)    children: [      //設(shè)備目錄頁      {        path: '/deviceCatalog',        component: DeviceCatalog      },      //賬戶信息頁      {        path: '/userProfile',        component: UserProfile,        //賬戶信息子頁面        children: [          //出差統(tǒng)計(jì)頁          {            path: '/userProfile/travelCount',            component: TravelCount          },          //工作圈子頁          {            path: '/userProfile/workCircle',            component: WorkCircle          }        ]      },    ]  },]const router = new VueRouter({  routes})//默認(rèn)導(dǎo)航到登錄頁// router.push('/login')/*全局路由鉤子訪問資源時(shí)需要驗(yàn)證localStorage中是否存在token以及token是否過期驗(yàn)證成功可以繼續(xù)跳轉(zhuǎn)失敗返回登錄頁重新登錄 */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//注冊(cè)echarts的另一種方法  }})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

做完之后點(diǎn)擊用戶信息按鈕應(yīng)該就可以跳轉(zhuǎn)到用戶信息頁了，看下效果

第四步出差統(tǒng)計(jì)信息，這里想使用echarts圖表來進(jìn)行展示（這里我跳了一個(gè)坑）。首先在項(xiàng)目中使用npm install echarts –save將echarts下載到項(xiàng)目中。然后在main.js中引用，對(duì)應(yīng)第三步main.js中

import echarts from 'echarts'
1
1

在travelCount中使用，travelCount.vue。這里有幾點(diǎn)需要注意

1.echarts掛載的dom必須設(shè)置一個(gè)高度，否則不能顯示出來。

2.echarts的配置需要放在mounted中。

3.使用echarts的resize方法配合js中onresize重繪圖表以動(dòng)態(tài)適應(yīng)屏幕尺寸。

<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國(guó):2016-01-01至2016-02-01' , 'B國(guó):2016-03-01至2016-04-01' , 'C國(guó):2016-06-01至2016-06-01']            },            series : [ {                type : 'bar',                barGap : '10%',                itemStyle : {                    normal : {                        color : 'LightSkyBlue'                    }                },                data : [100 , 200 , 300]            } ]        }        myChart.setOption(option);        //窗口尺寸變化時(shí)重新繪制chart        window.onresize = () => {            myChart.resize()            }    }}</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

這里要說下我跳的坑，引入echarts時(shí)，上面的代碼使用了

this.$root.$options.echarts
1
1

如果這樣引用的話，需要在main.js的Vue根實(shí)例中注冊(cè)echarts，見第三步main.js配置。還有一種方法可以使用this.$echarts的方式引用（這個(gè)方法是Vue論壇中tomi-li老師指點(diǎn)的，謝謝老師）。

這種方法需要使用js的Object.defineProperties將echarts手動(dòng)添加到Vue對(duì)象中，見第三步main.js配置。使用這種方法時(shí)不需要在根實(shí)例中注冊(cè)echarts。

Object.defineProperties(Vue.prototype, {   $echarts: { get: () => echarts }});
1
2
3
1
2
3

如果沒有手動(dòng)添加的話，在其他Vue文件中使用echarts時(shí)會(huì)報(bào)錯(cuò)，告訴你echarts沒有定義過。

看下效果

OK，前端的部分完成了，現(xiàn)在出差信息是靜態(tài)數(shù)據(jù)，因?yàn)閬硖幚?、記錄這些數(shù)據(jù)的服務(wù)可能還要依賴其他服務(wù)，我們先用靜態(tài)數(shù)據(jù)代替。但是用戶基本信息是從Ldap中取出來的，之前第二步中不是使用了vur-resourse到這個(gè)地址獲取用戶數(shù)據(jù)么。

this.$http.get(     'https://192.168.227.1:8443/userInfo' ,       {            headers: {'token' : localStorage.token}      })
1
2
3
4
5
6
1
2
3
4
5
6

后端處理這個(gè)請(qǐng)求的controller。因?yàn)樵诜植际郊軜?gòu)下這個(gè)controller通過restful對(duì)外提供獲取用戶信息的服務(wù)，所以需要使用@CrossOrigin注解滿足跨域的需求。

getUserInfo方法做這幾件事情

1.拿到header中的用戶token，解密后判斷用戶憑證是否過期、是否擁有某種權(quán)限角色。

2.如果判斷沒有問題，使用token中的用戶名作為入?yún)ⅲ{(diào)用SpringLdap取得用戶信息，并使用EmployeeAttributesMapper 填充我們自己的POJO類。返回response信息。

3.如果判斷有問題，返回403表示認(rèn)證沒有通過。

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類中，返回一個(gè)填充信息的Employee實(shí)例     */    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();        //驗(yàn)證token過期時(shí)間、用戶權(quán)限        if(current > expiration || roles.indexOf("ROLE_USER") == -1) {            return new ResponseEntity<String>(HttpStatus.FORBIDDEN);        }        //查詢并產(chǎn)生用戶信息        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);    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

寫完收工，文字表達(dá)能力實(shí)在是差，各位費(fèi)眼了。