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-devcnpm 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
发现没再报错,代码矫正完成。
以上是 Vue+koa2开发一款全栈小程序(6.个人中心) 的全部内容, 来源链接: utcz.com/z/375568.html