项目2---十次方项目开发---注册与登陆---06

登陆。

代码位置：

-----------------------------------------------------------------------------01-----------------------------------------------------------------------------------

逻辑编写。

mock，编写api。

---------------------------------------------------------------------02-------------------------------------------------------------------------------------------

首先发送验证码。请求后台，后台通过短信业务获取验证码。

sendsms(){
        userApi.sendsms( this.pojo.mobile ).then(res => {       
          this.$message({
            message: res.data.message,
            type: (res.data.flag?'success':'error')
          })      
        })
      }

-----------------------------------------------------------------------------03--------------------------------------------------------------------------------------

使用ElementUI我们要安装下：

第一步：下载

第二步：配置插件

第三步：nuxt配置下，都差不多是固定的。

第四步：配置全局样式

css是找到的：

--------

主要是为了把短信验证码发送到后端去处理的。

----------------------------------------------------------04-------------------------------------------------------------------------

注册用户：

提交注册。写api。

界面：

略。

----------------------------------------------------------05-------------------------------------------------------------------------

注册的校验：输入校验自己实现，就是判断空还有正则表达式什么的。

----------------------------------------------------------06-------------------------------------------------------------------------

登陆功能：

第一步：mock

注意这个是登陆的功能不是注册的功能。

注意：登陆成功返回的信息是token，用户的名字头衔。采用的是JWT。

JWT：前端提交给后端做验证的时候，后端返回一个token，前端把这个串进行存储到cookie。

再次发请求，提交给后端。通过消息头的方式。

mock的数据。

第三步：

逻辑：

-------------------------------------------------------------------------07--------------------------------------------------------------------------------------

登陆页面数据绑定。

----------------------------------------------------------08-------------------------------------------------------------------------

这个是十分重要的。保存登陆的信息，可以保存在vueX也可以保存在在cookie里面。

保存登陆信息：

第一步：安装jscookie

导入这个安装的库。

第二步：封装信息

代码自己看下。

第三步：

我们引入这个js，注意下vue是如何引入自己定义的js的方法的。

登陆：

----------------------------------------------------------09---------------------------------------------10----------------------------------------------------------

第一步：在default.vue修改代码：

第二步：

做判断是否显示登陆头像还是登陆按钮。

---------------------------------显示用户信息-------------------------------------11---12-----13---------------------------------------------------------------

退出登陆。

----------------------------------------------------------------------------14--------------------------------------------------------------------------------------

微信扫码登陆：

第一步，在微信第三方登陆的平台进行注册，并认证，创建我们的网站应用就是我们的网站：

这个就是微信的开放平台的认证系统。

第二步：看时序图，扫二维码确定就跳转到回调界面，获取临时的票据code。

第三步：获取code临时票据，按照官方文档引入js。

第四步：写代码，在页面渲染之后再显示，这个是登陆的二维码。

mount这个钩子函数是在整个页面渲染之后执行的。其中id是渲染的容器的id。

id：

appid：用老师的。

scop：

redirect_url:扫码之后的界面，这个是不能瞎写的。这个要和之前的授权的回调域是一样的。

第五步：扫描点击确定登陆。

地址：http://note.java.itcast.cn/weixinlogin?code=011914Zk1sqtlq0HS90l1FopZk1914Zg&state=undefined

code就是返回的临时票据。注意这个code是会过期的。

----------------------------------------15--------16------------17----------------------------------------------

第六步：看下地址的文档提供的。

返回示例：

开发文档：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

具体做法：复制这个地址官网给出的：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

替换参数：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx3bdb1192c22883f3&secret=db9d6b88821df403e5ff11742e799105&code=011914Zk1sqtlq0HS90l1FopZk1914Zg&grant_type=authorization_code

参数说明：

返回值：

{"access_token":"29_5Venc2PoPkvPIzOxAmZ6VyaRHFQYVRH4iaw-QcH7sCnfnKyFBecYRM0kvViK9WWbaapvvZvv7eLP31PahCCc9MhUq1H3fHe3ZGzv08bAydw","expires_in":7200,"refresh_token":"29_qMXJC9Q06kGYy90WgLgUt6epemFHMOz23XFCcDIEUjFtv_80xfE0KAqhoIokj9o5APvwfYLZu0WU3izgtBk1bKf3Ciu7GGf8glhZfp8Q5jg","openid":"oypcC1sKqxCuov9AnHDkg9YRQ7ck","scope":"snsapi_login","unionid":"o6JuL1jVgyWg2Rqld-IjxpgkujoM"}

主要我们要accesstoken。

第七步：还要进行接口的调用的。

存在的问题：我们不能去跨域的调用的在前台。写一个服务端做一个中转。

我们不能再js直接调用这个地址去访问资源的：

-----------------------------------------------------------------------18--------------------------------------------------------------------------------------

编写node服务解决跨域问题。

先确定一件事：

1.扫码，根据指定的回调地址重定向到网址，并返回code

2.code和appid等再次访问返回axxess_token，这个就是获得access_token的。

var http = require('http'); //node本身的内置模块
var https = require('https');
var url = require('url');

http.createServer((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) { //chunk是访问的地址的返回的内容
                response.writeHead(200, {
                    'content-Type': 'application/json;charset-utf-8',
                    'Access-Control-Allow-Origin': '*'
                });
                response.end(chunk);
            });
        })

    }
}).listen(8888);

访问,我们这个中转的是第二步。这个是获得code之后去访问的。

如何让这个地址可以跨域访问？

这个是允许跨域的。

----------------------------------------19--------20-------------------------------------------

前端写登陆：

第一步：引入一个工具类

导入即可使用。

写这段代码。

第二步：写这段代码再weixinlogin.vue，回调地址并获得地址的参数。

  mounted(){
        //1.获取参数code的值
        let code= getUrlParam('code')
        //2 调用API
        weixinApi.getAccessToken(code).then( res=> {
            let access_token= res.data.access_token
            let openid= res.data.openid
            console.log( 'access_token:'+access_token+" openid:"+openid )

第三步跑起来：

1.首先我们要扫码知道code，返回配置的重定向的地址

2.我们修改下这个重定向的地址为

http://localhost:3000/weixinlogin?code=021EaqUo156ubl0Mg7Uo1DysUo1EaqUU&state=undefined

对应这个界面：

getAccessToken就是访问我们的虚拟后台的。

这个代码是为了得到我们的accesstoken。这个代码执行完了会返回一大堆的内容的。

此时看下f12看下输出：

--------------------------------------------------------------21----------------------------------------------------------

第四步：获取用户的昵称和头像。

官网地址：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Authorized_Interface_Calling_UnionID.html

第五步：写我们的node后台系统。

代码：

 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) { //chunk是访问的地址的返回的内容
                response.writeHead(200, {
                    'content-Type': 'application/json;charset-utf-8',
                    'Access-Control-Allow-Origin': '*'
                });
                response.end(chunk);
            });
        })

我们测试一下：

数据：

access_token:29_rzYNyCZ4e2-cxEUxQ7kBOb6SZrFdBX-C7-6skYWtksAGrGNfO3CUg7Ao-0WCS6ALjyTXh4un0xIONRmdoM0oJKIFfMam7kjPjtiyU-TDzBE 
openid:oypcC1sKqxCuov9AnHDkg9YRQ7ck

访问地址：

http://localhost:8888/?operation=userinfo&access_token=29_rzYNyCZ4e2-cxEUxQ7kBOb6SZrFdBX-C7-6skYWtksAGrGNfO3CUg7Ao-0WCS6ALjyTXh4un0xIONRmdoM0oJKIFfMam7kjPjtiyU-TDzBE&openid=oypcC1sKqxCuov9AnHDkg9YRQ7ck

返回的结果为：

第六步：

在weixin.js写方法：

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

界面：

第七步：成功。

--------------------------------------------------22---------------23---------------------24-----------

域名与端口设置：

第一步：

这个软件：

D:\softWork\SwitchHosts

让回调的地址到我们的项目地址：

这个地址哪里来的？

第二步：测试

第三步：去掉项目的端口号

这句话的意思是配置nuxt的启动端口是80

第四步：测试

最后看下weixinlogin.vue:

没有界面就是一个页面路由，用于中转的。

------------------------------------------------25--------------------------------------------------------------

用户中心：

nuxt显示的是路由的信息

但是我们再nuxt里面也有路由菜单的话怎么办嗯？

嵌套布局：

思路：上面的页面应该是一个嵌套在<nuxt>的界面。

是在根的。

这个界面有<nuxt-child/>

第一步：写子布局页面，再次讲了如何拷贝html界面。

注意这个vue是在第一个最大的nuxt底座里面的。

---------------------------------------------------------------26--------------------------------------------------------------------------------------

第二步：

这个必须是同名的