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;
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项目,打开微信开发者工具,点击获取用户信息
实现功能一:如果没登录,点击按钮完成微信登录,会有登录成功的图片提示
实现功能二:登录成功后,留下登录信息,下次访问时不显示登录按钮
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>
export function showSuccess(text){
wx.showToast({
title:text,
icon:'success'
})
}
cnpm install sass-loader --save-dev
cnpm install node-sass --save-dev
<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>
.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;
}
扫码功能的官方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>
<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>
<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>
打开cmd,cd到mydemo下,执行
npm run lint
报错
去修改
到App.vue下,将代码
import {get} from './until'
import config from './config'
删掉,再运行
npm run lint
发现没再报错,代码矫正完成。