腾讯云·社区
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
发现没再报错，代码矫正完成。
本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
发表于
雪胖纸的玩蛇日常
120 篇文章43 人订阅
相关文章
扫码关注云+社区
领取腾讯云代金券
我来说两句