------- | ---- | -------------------------------- |
| appid | 是 | 应用唯一标识，在微信开放平台提交应用审核通过后获得 |
| secret | 是 | 应用密钥AppSecret，在微信开放平台提交应用审核通过后获得 |
| code | 是 | 填写第一步获取的code参数 |
| grant_type | 是 | 填authorization_code |

返回说明

正确的返回：

{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN","openid":"OPENID",
"scope":"SCOPE"
}

参数	说明
access_token	接口调用凭证
expires_in	access_token接口调用凭证超时时间，单位（秒）
refresh_token	用户刷新access_token
openid	授权用户唯一标识
scope	用户授权的作用域，使用逗号（,）分隔

3.4.2 编写node服务

创建新的node工程 weixinlogin 用于调用微信第三方登陆接口工程下创建server.js

var http = require('http');  
var https = require('https');  
var url = require('url');
http.createServer(function(request,response){   
    var params=url.parse(request.url, true).query;
    var appid='wx3bdb1192c22883f3';
    var secret='db9d6b88821df403e5ff11742e799105';
    if(params.operation==='token'){
        https.get(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${params.code}&grant_type=authorization_code`, function (res) {
            res.on('data', function (chunk) {  
              response.writeHead(200,{'Content-Type':'application/json;charset=utf-8' ,"Access-Control-Allow-Origin": "*" });        
              response.end(chunk);
            });
        })
    }   
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

在控制台输入 node server 运行服务

地址栏测试：http://localhost:8888/?code=02147Yff12Yhgz0ArCef1qabgf147Yf0&operation=token

结果如下：

{
  "access_token": "10_zSHADX2JGMivKFfa4nMbZV3ECzY21UY3qrF5ADyjpr_iiLUifo-nlN0GaRnUEN9T7BagiwSC07awplRFIO1Ghw",
  "expires_in": 7200,
  "refresh_token": "10__zl8gcJz0RXVDKtksbNTQJZ2uK1HiLJZ3I5PcSkA2VB3b6WXi2CR3R_htW6B8kKOmj-91p08SJMfVKkL84vP1w",
  "openid": "oypcC1u9r-mxVsRGSLFqE65lysVI",
  "scope": "snsapi_login",
  "unionid": "o6JuL1gaIwnVsZC5BpRYImTHKTm8"
}

3.4.3 调用node服务

node服务编写完成后，我们在十次方前台工程中调用node服务

（1）编写API ,创建api/weixin.js

import axios from 'axios'
export default {
    getAccessToken(code){
        return axios.get(`http://localhost:8888?operation=token&code=${code}`)
    }
}

（2）创建utils/param.js （用于获取浏览器地址栏参数）

export function getUrlParam(name) {
　　var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
　　var r = window.location.search.substr(1).match(reg);
　　if(r != null) return unescape(r[2]);
　　return null;
}

（3）创建pages/weixinlogin.vue

<template>
    <div></div>
</template>
<script>
import {getUrlParam} from '@/utils/param'
import weixin from '@/api/weixin'
import {setUser} from '@/utils/auth'
export default {
    mounted(){
      let code=getUrlParam('code')
      if(code!==null){//如果是微信登陆
        //根据code获取access_token
        weixin.getAccessToken(code).then( res=>{
          let access_token= res.data.access_token
          let openid= res.data.openid
          console.log('access_token:'+access_token+ 'openid:'+openid)
        })
      }
    }
}
</script>

3.5 获取用户昵称与头像

3.5.1 API

http请求方式: GET
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

参数	是否必须	说明
access_token	是	调用凭证
openid	是	普通用户的标识，对当前开发者帐号唯一
lang	否	国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语，默认为zh-CN

返回说明

正确的Json返回结果：

{
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
"privilege":[
"PRIVILEGE1",
"PRIVILEGE2"
],
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"

}

参数	说明
openid	普通用户的标识，对当前开发者帐号唯一
nickname	普通用户昵称
sex	普通用户性别，1为男性，2为女性
province	普通用户个人资料填写的省份
city	普通用户个人资料填写的城市
country	国家，如中国为CN
headimgurl	用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空
privilege	用户特权信息，json数组，如微信沃卡用户为（chinaunicom）
unionid	用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。

3.5.2 编写node服务

修改node工程 weixinlogin的server.js, 新增代码

.....
    if(params.operation==='userinfo'){
        https.get(`https://api.weixin.qq.com/sns/userinfo?access_token=${params.access_token}&openid=${params.openid}`, function (res) {
            res.on('data', function (chunk) {  
              // 发送响应数据 "Hello World"
              response.writeHead(200,{'Content-Type':'application/json;charset=utf-8' ,"Access-Control-Allow-Origin": "*" });        
              response.end(chunk);
            });
        })
    }  
.....

3.5.3 调用node服务

（1）编写API ,修改api/weixin.js 新增方法用于根据access_token和openid获取用户信息

    getUserinfo(access_token,openid){
        return axios.get(`http://localhost:8888?operation=userinfo&access_token=${access_token}&openid=${openid}`)
    }

（2）修改pages/weixinlogin.vue

import {setUser} from '@/utils/auth'

在获取access_token和openid后，再次请求接口，获取昵称和头像，保存到cookie中

    mounted(){
      let code=getUrlParam('code')
      if(code!==null){//如果是微信登陆
        //根据code获取access_token
        weixin.getAccessToken(code).then( res=>{
          let access_token= res.data.access_token
          let openid= res.data.openid
          weixin.getUserinfo( access_token, openid ).then( res => {
            //提取用户昵称和头像  **********************
            let nickname= res.data.nickname
            let headimgurl= res.data.headimgurl
            setUser(access_token,nickname,headimgurl)
            location.href='/'
          })
        })
      }
    }

3.6 域名与端口设置

我们刚才都是要通过手动更改url才能完成测试，主要是因为回调地址是域名而我们的工程是本地地址。其实我们要想实现一气呵成的效果也不难，只要通过域名和端口设置即可。

3.6.1 域名指向

我们可以通过SwitchHosts 配置域名指向

127.0.0.1 note.java.itcast.cn

这样我们的工程就可以通过 http://note.java.itcast.cn:3000来访问了

3.6.2 NUXT端口设置

修改package.json ,添加配置

  "config": {
    "nuxt": {
      "port": "80"
    }
  },

重新启动工程，就可以通过http://note.java.itcast.cn 来访问了。

通过以上修改后，我们再次测试微信扫码登陆，就可以看到和生产环境一样的运行效果。

4 用户中心嵌套布局

4.1 子布局页

（1）创建pages/manager.vue ,这个是用户中心的布局页

<template>
<div>
  <div class="myhome-personinfo" style="background-image: url('~/assets/img/widget-homebg.png');"> 
   <div class="wrapper"> 
    <div class="person-baseinfo"> 
     <!--头像信息--> 
     <div class="photo"> 
      <img src="~/assets/img/widget-myphoto.jpg" alt="" class="person" /> 
      <div class="share"> 
       <span><img src="~/assets/img/asset-QQ.png" alt="" width="34" height="28" /></span> 
       <span><img src="~/assets/img/asset-weixin.png" alt="" width="28" height="28" /></span> 
       <span><img src="~/assets/img/asset-weibo.png" alt="" width="28" height="28" /></span> 
      </div> 
     </div> 
     <!--文字信息--> 
     <div class="info"> 
      <h1>Web爱好者<span class="allinfo"><a href="~/assets/person-myfile.html" target="_blank">查看完整档案</a></span></h1> 
      <ul class="fill"> 
       <li> <i class="fa fa-map-marker" aria-hidden="true"></i> <span class="edit-item"> 填写现居城市</span> 
        <form action="" class="sui-form form-inline"> 
         <input type="text" placeholder="现居城市" /> 
         <button class="sui-btn btn-danger save-btn">保存</button> 
        </form> </li> 
       <li> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <span class="edit-item"> 填写毕业院校</span> 
        <form action="" class="sui-form form-inline"> 
         <input type="text" placeholder="院校名称" /> 
         <input type="text" placeholder="所学专业" /> 
         <button class="sui-btn btn-danger save-btn">保存</button> 
        </form> </li> 
       <li> <i class="fa fa-shopping-bag" aria-hidden="true"></i> <span class="edit-item"> 填写所在公司/组织</span> 
        <form action="" class="sui-form form-inline"> 
         <input type="text" placeholder="公司/组织名称" /> 
         <input type="text" placeholder="职位头衔" /> 
         <button class="sui-btn btn-danger save-btn">保存</button> 
        </form> </li> 
       <li> <i class="fa fa-link" aria-hidden="true"></i> <span class="edit-item"> 填写个人网站</span> 
        <form action="" class="sui-form form-inline"> 
         <input type="text" placeholder="个人网站" /> 
         <button class="sui-btn btn-danger save-btn">保存</button> 
        </form> </li> 
      </ul> 
     </div> 
    </div> 
    <!--右侧编辑--> 
    <div class="edit-info"> 
     <h4>个人简介<span class="addedit"><img src="~/assets/img/widget-edit.png" width="12" height="12" />编辑</span></h4> 
     <div class="info-box"> 
      <div class="edit-intro">
       暂时没有个人简介
      </div> 
     </div> 
    </div> 
    <div class="clearfix"></div> 
   </div> 
  </div> 
   <!--两列布局--> 
  <div class="wrapper  myhome"> 
   <div class="left-list"> 
    <div class="myhome-list"> 
     <ul class="home-list"> 
      <li class="active"><a href="~/assets/person-homepage.html">我的主页</a></li> 
      <li><a href="~/assets/person-myanswer.html">我的回答</a></li> 
      <li><a href="~/assets/person-myquestion.html">我的提问</a></li> 
      <li><a href="~/assets/person-myshare.html">我的分享</a></li> 
     </ul> 
     <ul class="home-list bottom"> 
      <li><a href="~/assets/person-dynamic.html">个人动态</a></li> 
      <li><a href="~/assets/person-myfocus.html">我的关注</a></li> 
      <li><a href="~/assets/person-mycollect.html">我的收藏</a></li> 
      <li><a href="~/assets/person-myreaded.html">浏览记录</a></li> 
      <li><a href="~/assets/person-account.html">账户设置</a></li> 
     </ul> 
    </div> 
   </div> 
   <div class="right-content"> 
    <nuxt-child/>
   </div> 
   <div class="clearfix"></div> 
  </div> 
</div>
</template>
<script>
import '~/assets/css/page-sj-person-homepage.css'
</script>

注意：我们使用<nuxt-child/>标签

（2）在pages下创建manager文件夹，manager文件夹下创建index.vue（用户中心的默认首页）

<template>
   <div class="home-content"> 
     <ul class="sui-nav nav-tabs nav-large"> 
      <li class="active"><a href="#one" data-toggle="tab">我的提问</a></li> 
      <li><a href="#two" data-toggle="tab">我的回答</a></li> 
     </ul> 
     <div class="tab-content tab-wraped"> 
      <div id="one" class="tab-pane active"> 
       <ul class="question-list"> 
        <li> <span class="fl good"><span class="num">12</span> 有用</span> <span class="title"><a href="#">有关PHP初级进阶的问题</a></span> <span class="fr date">4月6日</span> <span class="clearfix"></span> </li> 
        <li> <span class="fl good"><span class="num">12</span> 有用</span> <span class="title"><a href="#">有关JAVA初级进阶的问题</a></span> <span class="fr date">4月6日</span> <span class="clearfix"></span> </li> 
        <li> <span class="fl good"><span class="num">12</span> 有用</span> <span class="title"><a href="#">有关HTML5初级进阶的问题</a></span> <span class="fr date">4月6日</span> <span class="clearfix"></span> </li> 
        <li> <span class="fl good"><span class="num">12</span> 有用</span> <span class="title"><a href="#">有关C++初级进阶的问题</a></span> <span class="fr date">4月6日</span> <span class="clearfix"></span> </li> 
        <li> <span class="fl good"><span class="num">12</span> 有用</span> <span class="title"><a href="#">有关python初级进阶的问题</a></span> <span class="fr date">4月6日</span> <span class="clearfix"></span> </li> 
       </ul> 
      </div> 
      <div id="two" class="tab-pane"> 
       <ul class="question-list"> 
        <li> <span class="fl good"> <span class="num">8</span> 有用</span> <span class="title"><a href="#">有关PHP初级进阶的问题</a></span> <span class="fr date">2017-07-05 15:08</span> <span class="clearfix"></span> </li> 
        <li> <span class="fl good"> <span class="num">7</span> 有用</span> <span class="title"><a href="#">有关JAVA初级进阶的问题</a></span> <span class="fr date">2017-07-05 15:08</span> <span class="clearfix"></span> </li> 
        <li> <span class="fl good"> <span class="num">6</span> 有用</span> <span class="title"><a href="#">有关HTML5初级进阶的问题</a></span> <span class="fr date">2017-07-05 15:08</span> <span class="clearfix"></span> </li> 
        <li> <span class="fl good"> <span class="num">12</span> 有用</span> <span class="title"><a href="#">有关C++初级进阶的问题</a></span> <span class="fr date">2017-07-05 15:08</span> <span class="clearfix"></span> </li> 
        <li> <span class="fl good"> <span class="num">12</span> 有用</span> <span class="title"><a href="#">有关python初级进阶的问题</a></span> <span class="fr date">2017-07-05 15:08</span> <span class="clearfix"></span> </li> 
       </ul> 
      </div> 
     </div> 
     <div class="activities"> 
      <h4 class="tit"><span>我的动态</span></h4> 
      <ul class="activities-content"> 
       <li> 
        <div class="index-title"> 
         <span class="author">本杰明</span> 
         <span class="operate">关注了标签</span> &middot; 
         <span class="time">3小时前</span> 
        </div> 
        <div class="guanzhuname"> 
         <span class="tag">php</span> 
         <span class="tagnum">100</span> 关注 
        </div> 
        <div class="intro">
          PHP，是英文超文本预处理语言 Hypertext Preprocessor 的缩写。PHP 是一种开源的通用计算机脚本语言，尤其适用于网络开发并可嵌入HTML中使用。PHP 的语法借鉴吸收C语言、Java和Perl等流行计算机语言的特点，易于一般程序员学习。 
        </div> </li> 
       <li> 
        <div class="index-title"> 
         <span class="author">本杰明</span> 
         <span class="operate">回答了问题</span> &middot; 
         <span class="time">3小时前</span> 
        </div> 
        <div class="question"> 
         <p class="title">网页链接如何直接打开微信，并进入公众号关注页面</p> 
         <p class="content">现在针对这个微信是屏蔽的，你可以选择通过连接到一个其他的公众号文章中进行关注。</p> 
        </div> 
        <div class="qa-num"> 
         <span>关注<i>1</i></span> 
         <span>回答<i>2</i></span> 
        </div> </li> 
       <li> 
        <div class="index-title"> 
         <span class="author">本杰明</span> 
         <span class="operate">收藏了文章</span> &middot; 
         <span class="time">3小时前</span> 
        </div> 
        <div class="question"> 
         <p class="title">网页链接如何直接打开微信，并进入公众号关注页面</p> 
        </div> 
        <div class="qa-num"> 
         <span><a href="#">http://baidu.com</a></span> 
        </div> </li> 
       <li> 
        <div class="index-title"> 
         <span class="author">本杰明</span> 
         <span class="operate">收藏了文章</span> &middot; 
         <span class="time">3小时前</span> 
        </div> 
        <div class="question"> 
         <p class="title">网页链接如何直接打开微信，并进入公众号关注页面</p> 
        </div> 
        <div class="qa-num"> 
         <span><a href="#">http://baidu.com</a></span> 
        </div> </li> 
       <li> 
        <div class="index-title"> 
         <span class="author">本杰明</span> 
         <span class="operate">回答了问题</span> &middot; 
         <span class="time">3小时前</span> 
        </div> 
        <div class="question"> 
         <p class="title">网页链接如何直接打开微信，并进入公众号关注页面</p> 
         <p class="content">现在针对这个微信是屏蔽的，你可以选择通过连接到一个其他的公众号文章中进行关注。</p> 
        </div> 
        <div class="qa-num"> 
         <span>关注<i>1</i></span> 
         <span>回答<i>2</i></span> 
        </div> </li> 
      </ul> 
     </div> 
    </div> 
</template>

4.2 用户中心各子页面

（1）创建pages/manager/myanswer.vue（我的问答）

（2）创建pages/manager/myquestion.vue（我的提问）

（3）创建pages/manager/myshare.vue（我的分享）

（4）创建pages/manager/dynamic.vue（个人动态）

（5）创建pages/manager/myfocus.vue（我的关注）

（6）创建pages/manager/mycollect.vue（我的收藏）

（7）创建pages/manager/myreaded.vue （浏览记录）

（8）创建pages/manager/account.vue(账户设置)

4.3 菜单样式处理

修改pages/manager.vue中的链接地址

    <div class="myhome-list"> 
     <ul class="home-list"> 
       <router-link to="/manager" active-class="active" tag="li" exact ><a>我的主页</a></router-link>
       <router-link to="/manager/myanswer" active-class="active" tag="li" exact ><a>我的回答</a></router-link>
       <router-link to="/manager/myquestion" active-class="active" tag="li" exact ><a>我的提问</a></router-link>
       <router-link to="/manager/myshare" active-class="active" tag="li" exact ><a>我的分享</a></router-link>     
     </ul> 
     <ul class="home-list bottom">
       <router-link to="/manager/dynamic" active-class="active" tag="li" exact ><a>个人动态</a></router-link>
       <router-link to="/manager/myfocus" active-class="active" tag="li" exact ><a>我的关注</a></router-link>
       <router-link to="/manager/mycollect" active-class="active" tag="li" exact ><a>我的收藏</a></router-link>
       <router-link to="/manager/myreaded" active-class="active" tag="li" exact ><a>浏览记录</a></router-link>
       <router-link to="/manager/account" active-class="active" tag="li" exact ><a>账户设置</a></router-link>
     </ul> 
    </div>

4.4 用户中心鉴权

修改pages/manager.vue代码部分

import '~/assets/css/page-sj-person-homepage.css'
import {getUser} from '@/utils/auth'
export default {
    created(){
        if(getUser().name===undefined){
            this.$router.push('/login')
        }
    }
}

测试：在未登录的情况下在地址栏输入http://localhost:3000/manager 会自动跳转到登录页

修改layouts/default.vue的用户名与头像，修改链接到用户中心

<li><a href="/manager" class="notice">{{user.name}}</a></li>     
...
<li><a href="/manager"  class="homego"><img :src="user.avatar" width="50px" height="50px" :alt="user.name" /></a></li>

目录CONTENT

十次方前端系统开发v1.0--第6章.md