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

vue

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

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

以上是 Vue+koa2开发一款全栈小程序(6.个人中心) 的全部内容, 来源链接: utcz.com/z/375568.html

回到顶部