Vue+koa2开发一款全栈小程序(6.个人中心）

1.用户信息的获取和展示

1.初始化数据库

cd到server目录下，执行

node tools/initdb.js

登录mysql控制界面，查看初始化以后生成的表

show databases;
use cauth;
show tables;

如果报错（往往因为mysql的版本8.0什么的，加密方式导致初始化脚本报错），解决办法

进入mysql

alter user 'root'@'localhost' identified with mysql_native_password by '数据库密码’

flush privileges;

2.安装微信提供的sdk

cd到mydemo目录下，执行

cnpm install wafer2-client-sdk --save

腾讯wafer2-client-sdk在GitHub上的文档地址

https://github.com/tencentyun/wafer2-client-sdk

在mydemo/src下的config.js中，配置loginUrl

// 配置项

const host = 'http://localhost:5757'

const config = {
  host,
  loginUrl:`${host}/weapp/login`
}
export default config

在src/pages/me目录下的index.vue中，写登录代码

<template>
    <div>
        个人中心页面

        <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">获取用户信息</button>
    </div>
</template>
<script>
import qcloud from 'wafer2-client-sdk'
import config from '@/config.js'

export default {
      methods: {
      doLogin: function (e) {
        qcloud.setLoginUrl(config.loginUrl)
        qcloud.login({
          success: function (userInfo) {
            console.log('登录成功', userInfo)
          },
          fail: function (err) {
            console.log('登录失败', err)
          }
        })
      }
    }

}
</script>
<style>

</style>

启动server和mydemo项目，打开微信开发者工具，点击获取用户信息

3.数据缓存

实现功能一：如果没登录，点击按钮完成微信登录，会有登录成功的图片提示

实现功能二：登录成功后，留下登录信息，下次访问时不显示登录按钮

1.src/pages/me/index.vue

import config from '@/config.js'

import { showSuccess } from '@/until.js';

export default {
      data(){
        return{
          user:''
        }
      },
      methods: {
      doLogin: function (e) {
        qcloud.setLoginUrl(config.loginUrl)
        var _this=this//在success回调里面 this.user指向的已经不是data里的user了
        qcloud.login({
          success: function (userInfo) {
            console.log('登录成功', userInfo);

            showSuccess('登陆成功')//显示登录成功提示图标
            wx.setStorageSync('userinfo', userInfo)
            _this.user=wx.getStorageSync('userinfo')
          },
          fail: function (err) {
            console.log('登录失败', err)
          }
        })

      }
    },
    created(){
      this.user=wx.getStorageSync('userinfo')
      console.log(321,this.user)
    }

}
</script>
<style>

</style>

2.src/until.js内增加代码

export function showSuccess(text){
  wx.showToast({
    title:text,
    icon:'success'
  })
}

2.个人中心页面开发

1.安装scss的依赖

cnpm install sass-loader --save-dev
cnpm install node-sass --save-dev

2.在个人中心页面显示头像和微信名

1.src/pages/me/index.vue

<template>
    <div class="container">
        <button v-if="!user" open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">获取用户信息</button>
        <div class="userinfo">
          <img :src="user.avatarUrl" alt="">
          <p>{{user.nickName}}</p>
        </div>
        <button class="btn">添加图书</button>
    </div>
</template>
<script>
import qcloud from 'wafer2-client-sdk'
import config from '@/config.js'

import { showSuccess } from '@/until.js';

export default {
      data(){
        return{
          user:''
        }
      },
      methods: {
      doLogin: function (e) {
        qcloud.setLoginUrl(config.loginUrl)
        var _this=this//在success回调里面 this.user指向的已经不是data里的user了
        qcloud.login({
          success: function (userInfo) {
            console.log('登录成功', userInfo);

            showSuccess('登陆成功')//显示登录成功提示图标
            wx.setStorageSync('userinfo', userInfo)
            _this.user=wx.getStorageSync('userinfo')
          },
          fail: function (err) {
            console.log('登录失败', err)
          }
        })

      }
    },
    created(){
      this.user=wx.getStorageSync('userinfo')
      console.log(321,this.user)
    }

}
</script>
<style lang='scss'>
    .container{
      padding: 0 30rpx;
      .userinfo{
        margin-top: 100rpx;
        text-align: center;
        img{
          width: 150rpx;
          height: 150rpx;
          margin: 20rpx;
          border-radius: 50%;
        }

      }
    }
</style>

2.在src/App.vue中，对btn的样式做全局定义，在<style>标签中添加代码

.btn{
  color: white;
  background: #EA5A49;
  margin-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 2px;
  font-size: 16px;
  line-height: 40px;
  height: 40px;
  width: 100%;
}
.btn:active{
  background: #FA5A49;
}

运行项目，登录后的效果图

3.扫码功能开发

扫码功能的官方api

wx.scanCode({
          success: (res) => {
          console.log(res)
          }
        })

src/pages/me/index.vue内代码

<template>
    <div class="container">
        <button v-if="!user" open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">获取用户信息</button>
        <div class="userinfo">
          <img :src="user.avatarUrl" alt="">
          <p>{{user.nickName}}</p>
        </div>
        <button @click="scanBook" class="btn">添加图书</button>
    </div>
</template>
<script>
import qcloud from 'wafer2-client-sdk'
import config from '@/config.js'

import { showSuccess } from '@/until.js';

export default {
      data(){
        return{
          user:''
        }
      },
      methods: {
      doLogin: function (e) {
        qcloud.setLoginUrl(config.loginUrl)
        var _this=this//在success回调里面 this.user指向的已经不是data里的user了
        qcloud.login({
          success: function (userInfo) {
            console.log('登录成功', userInfo);

            showSuccess('登陆成功')//显示登录成功提示图标
            wx.setStorageSync('userinfo', userInfo)
            _this.user=wx.getStorageSync('userinfo')
          },
          fail: function (err) {
            console.log('登录失败', err)
          }
        })
      },

      scanBook(){
        wx.scanCode({
          success: (res) => {
          console.log(res)
          }
        })
      }

    },
    created(){
      this.user=wx.getStorageSync('userinfo')
      console.log(321,this.user)
    }

}
</script>
<style lang='scss'>
    .container{
      padding: 0 30rpx;
      .userinfo{
        margin-top: 100rpx;
        text-align: center;
        img{
          width: 150rpx;
          height: 150rpx;
          margin: 20rpx;
          border-radius: 50%;
        }

      }
    }
</style>

4.今年过了多少天组件开发

1.在src/components目录下新建YearProgress.vue

<template>
    <div class="progressbar">

        <progress :percent="percent" activeColor='#EA5A49'></progress>
        <p>{{year}}已经过去了{{days}}天，{{percent}}%</p>
    </div>
</template>

<script>
export default {
    methods:{
        isLeapYear(){
            const year=new Date().getFullYear()
            if(year%400===0){
                return true
            }else if(year%4===0&&year%100!==0){
                return true
            }else{
                return false
            }

        },
        getDayOfYead(){
            return this.isLeapYear()?366:365
        }
    },
    computed:{
        year(){
            return new Date().getFullYear()
        },
        days(){
            let start=new Date()
            start.setMonth(0)
            start.setDate(1)
            //start就是今年第一天
            //今天的时间戳 减去今天第一天的时间戳
            let offset=new Date().getTime()-start.getTime()
            return parseInt(offset/1000/60/60/24)+1
        },
        percent(){
            return (this.days*100/this.getDayOfYead()).toFixed(1)
        }
    }

}
</script>
<style lang='scss'>
    .progressbar{
        text-align: center;
        margin-top:10px;
        margin-bottom: 40px;
        width: 100%;
        progress{
            margin-bottom: 10px;
        }
    }
</style>

2. 在src/pages/me/index.vue中引用

3.效果图

5.登录逻辑的完善

me/index.vue

<template>
    <div class="container">

        <div class="userinfo">
          <img :src="avatarUrl" alt="">
          <button v-if="!user" open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">点击登录</button>
          <p>{{user.nickName}}</p>
        </div>
        <YearProgress></YearProgress>
        <button @click="scanBook" class="btn">添加图书</button>
    </div>
</template>
<script>
import qcloud from 'wafer2-client-sdk'
import config from '@/config.js'

import { showSuccess } from '@/until.js';

import YearProgress from '@/components/YearProgress'

export default {
      components:{
        YearProgress
      },
      data(){
        return{
          user:'',
          avatarUrl:'../../../static/img/unlogin.png',
        }
      },
      methods: {
      doLogin: function (e) {
        qcloud.setLoginUrl(config.loginUrl)
        var _this=this//在success回调里面 this.user指向的已经不是data里的user了
        qcloud.login({
          success: function (userInfo) {
            console.log('登录成功', userInfo);

            showSuccess('登陆成功')//显示登录成功提示图标
            wx.setStorageSync('userinfo', userInfo)
            _this.user=wx.getStorageSync('userinfo')
            _this.avatarUrl=_this.user.avatarUrl
          },
          fail: function (err) {
            console.log('登录失败', err)
          }
        })
      },

      scanBook(){
        wx.scanCode({
          success: (res) => {
          console.log(res)
          }
        })
      }

    },
    created(){
      this.user=wx.getStorageSync('userinfo')
      if(this.user){
        this.avatarUrl=this.user.avatarUrl
        this.nickName=this.user.nickName
      }
      console.log(321,this.user)
    }

}
</script>
<style lang='scss'>
    .container{
      padding: 0 30rpx;
      .userinfo{
        margin-top: 100rpx;
        text-align: center;
        img{
          width: 150rpx;
          height: 150rpx;
          margin: 20rpx;
          border-radius: 50%;
        }

      }
    }
</style>

6.eslint格式化代码

打开cmd，cd到mydemo下，执行

npm run lint

报错

去修改

到App.vue下，将代码

import {get} from './until'

import config from './config'

删掉，再运行

npm run lint

发现没再报错，代码矫正完成。