完成一个二手市场前端静态网页，这一步不涉及云开发，样式部分大家可以自行完成大致如下，每个页面都会提供该页面的代码可直接贴为html文件使用。
image.png
功能1：登录页面（使用云开发提供的匿名登录与邮件登录）
样式部分，可以照抄，TODO的部分是云开发部分
<html>
<head>
<meta charset="utf-8">
<title>二手市场示例</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
body {
margin: 0;
background-color: #E9EEF3;
}
.el-header,
.el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
padding: 0;
}
.el-form-item {
display: flex;
align-items: center;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
line-height: 160px;
}
body>.el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
.anonymousLogin:hover {
cursor: pointer;
color: dodgerblue
}
</style>
<!-- 引入组件库 -->
<script type="text/javascript" src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<el-container>
<el-header>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-menu-item index="1">
<el-link href="../index.html"> 商品列表</el-link>
</el-menu-item>
<el-menu-item index="2">
<el-link href="./create.html">发布商品</el-link>
</el-menu-item>
<el-menu-item index="3">
<el-link href="./login.html">登录</el-link>
</el-menu-item>
</el-menu>
</el-header>
<el-main>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="邮箱">
<el-input v-model="form.email" type="text"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="mailSignUp" style="margin:20px 0;">注册</el-button>
<el-button type="default" @click="mailLogin" style="margin:20px 0;">登录</el-button>
<span class="anonymousLogin" @click="anonymousLogin">使用游客身份登录</span>
</el-main>
</el-container>
</div>
</body>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
app:""
activeIndex2: '3',
form: {
email: "",
password: ""
}
};
},
async mounted(){
//TODO
},
methods: {
mailSignUp: function () {
//TODO
},
mailLogin: function () {
//TODO
},
anonymousLogin() {
//TODO
},
}
})
</script>
</html>
业务逻辑部分
-
实现匿名登录
-
进入云开发控制台：console.cloud.tencent.com/tcb,在左边的菜单栏选择【登录授权】，并打开匿名登录
匿名登录开启后允许游客身份访问云环境，邮件登录开启后得用邮箱登录后才可以访问云环境
在login.html中引入云开发web sdk端的JS文件：
<script src="//imgcache.qq.com/qcloud/cloudbase-js-sdk/1.6.0/cloudbase.full.js"> </script>
- 代码部分（环境id注意填写为自己的环境id）
- mounted生命周期，检测是否登陆
async mounted() {
const app = this.app = cloudbase.init({
env: "xxxxxx" //填入自己的ID
});
const loginState = app.auth().hasLoginState();
console.log(app.auth())
if (loginState) {
// 登录态有效
this.$message('已登录，欢迎您' + app.auth().currentUser.uid)
} else {
// 没有登录态，或者登录态已经失效
this.$message({
type: 'warning',
message: '尚未登录'
})
}
},
- anonymousLogin函数
async anonymousLogin() {
this.app
.auth({
persistence: "local"
})
.anonymousAuthProvider()
.signIn()
.then(() => {
// 登录成功
this.$message('匿名登录成功')
})
.catch((err) => {
// 登录失败
console.log(err);
});
},
-
将该文件上传至静态网站托管
image.png 访问网址，如果我们可以正确显示未登录，并且在点击了【游客匿名登录】后，刷新页面可以弹出已登录，说明我们的这部分操作已经成功了。
-
实现邮件登录
- 获取邮箱授权码
打开QQ邮箱，去QQ邮箱的设置页面开启SMTP服务，并获取邮箱授权码
QQ邮箱-设置-账户-打开SMTP服务
- 在云开发控制台【登录授权】打开【邮箱登录】，同是在点击右边的配置邮箱，
点击上面图片最下面的【生成授权码】，将得到的授权码保存，回到，登陆授权页面
-
配置发信人
云开发控制台-登录授权
SMTP设置
如果配置成功，系统会给配置邮箱发送一封邮件
-
配置应用
这里都是随意配置，链接需要完整的（带协议）
- 配置完成后即可使用邮件登录SDK接入，参考代码如下（同样需要引入JSSDK）
<script src="//imgcache.qq.com/qcloud/cloudbase-js-sdk/1.6.0/cloudbase.full.js"></script>
- 实现 mailLogin 与 mailSignUp 函数
//用this获取表单内输入框值并注册
mailSignUp(){
this.app
.auth()
.signUpWithEmailAndPassword(this.form.email,this.form.password)
.then(() => {
// 发送验证邮件成功
this.$message({
type:'success',
message:'发送注册验证邮件成功'
})
}).catch(err=>{
this.$message({
type:'error',
message:'发送注册验证邮件失败' + err
})
});
}
//用this获取表单内输入框值并登录
mailLogin(){
this.app
.auth()
.signInWithEmailAndPassword(this.form.email,this.form.password)
.then((loginState) => {
this.$message({
type:'success',
message:'邮箱登录成功'
})
}).catch(err=>{
this.$message({
type:'error',
message:'邮箱登录失败' + err
})
});;
}
写完新的页面后，上传到静态网站托管覆盖原有页面，注册并登录看看。
如果正确，将会收到注册的邮件，注册成功后即可使用邮箱登录，登陆成功可使用云开发功能，在【用户管理】中也可以看到新注册的用户。
<这里放截图>
知识点1 ：需要在控制台打开对应的登录模式后，才可使用对应的方法
知识点2 ：需要将部署的域名配置在【安全配置】中，否则会跨域。本案例中由于静态网站托管域名默认已配置在【安全配置】，因此无需额外操作。平时测试使用的localhost或是自己服务器的域名，需要另外添加。
知识点3：使用邮箱登录需要到对应的邮箱设置中，打开SMTP服务并配置应用才可正常发送注册邮件
知识点4：登录成功后可以在【用户管理】看到对应的用户
