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

發現沒再報錯，代碼矯正完成。