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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

小程序开发的40个技术窍门,纯干货!

微信小程序正式上线一周时间,相关话题持续升温。现在为大家筛选出小程序开发实战需要注意的40个技术点,供大家参考! ? 小程序开发的40个技术窍门 1 Q:为什么...

25010
来自专栏编程坑太多

「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)

902
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增、编辑...

2735
来自专栏macOS 开发学习

Mac开发之 Cocoa 绑定 入门

从iOS开发转为Mac OSX应用开发的过程中,cocoa 绑定算是比较大的一个差异,也是OSX上比较实用的技术,cocoa 绑定让开发者节省了大量的代码,可以...

1012
来自专栏前端大白专栏

基于mpvue开发微信小程序,vue能用的,用mpvue哪些情况不能用

3517
来自专栏mantou大数据

MacOS下SVN迁移Git踩坑记

1. First Blood 之前在Windows环境下进行svn到git的迁移是很简单的,参考官方文档。 可是在macOS环境下(macOS High Si...

5355
来自专栏猛牛哥的博客

API获取窗口滚动条位置

1313
来自专栏java思维导图

一文告诉你,Intellij IDEA神器隐藏的11种实用小技巧!

我们可以使用【Presentation Mode】,将IDEA弄到最大,可以让你只关注一个类里面的代码,进行毫无干扰的coding。

1412
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用①简单使用)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

3208
来自专栏向治洪

React Native程序调试

在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低B...

2776

扫码关注云+社区

领取腾讯云代金券