服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - 编程技术 - Serverless 完结篇:文件上传、用户管理、上线部署。

Serverless 完结篇:文件上传、用户管理、上线部署。

2021-04-25 22:42勾勾的前端世界西岭 编程技术

本篇是关于Serverless 的最后一篇文章,主要介绍文件上传、用户管理、上线部署。

Serverless 完结篇:文件上传、用户管理、上线部署。

在 Vue 客户端调用中,需要继续完善获取数据的功能:

Serverless 完结篇:文件上传、用户管理、上线部署。

文件上传 & 云对象存储

Serverless 完结篇:文件上传、用户管理、上线部署。

用户管理及登录授权服务

 

基础架构代码

开始之前,先完成基础的代码和功能搭建,引入路由,完成注册登录的页面和对应的表单。

  1. $ npm install vue-router 

添加路由文件,\src\router\index.js

Serverless 完结篇:文件上传、用户管理、上线部署。

在入口文件 main.js 中引入并注册路由:

Serverless 完结篇:文件上传、用户管理、上线部署。

完成对应的单文件组件代码:

注册组件 src\components\Register.vue

Serverless 完结篇:文件上传、用户管理、上线部署。

登录组件:\src\components\Login.vue

 Serverless 完结篇:文件上传、用户管理、上线部署。

注册逻辑

 

在控制台开启 “短信验证码登录” 的选项

Serverless 完结篇:文件上传、用户管理、上线部署。

短信验证使用的是 js-sdk,手册在这里登录认证 | 云开发 CloudBase - 一站式后端云服务,所以先安装:npm install@cloudbase/js-sdk

因为我们需要在多个地方使用,因此先进行封装,这里选在使用 Vue 插件的方式。

\src\assets\auth.js

Serverless 完结篇:文件上传、用户管理、上线部署。

不要忘记在入口文件中导入:\src\main.js

Serverless 完结篇:文件上传、用户管理、上线部署。

首先完成手机验证码的发送。

Serverless 完结篇:文件上传、用户管理、上线部署。

用户输入验证码及密码,进行验证码及手机号的验证。

Serverless 完结篇:文件上传、用户管理、上线部署。

验证注册成功后,跳转到登录界面。

登录逻辑

 

登录验证是非常简单的,那么,我们是如何保持登录状态的呢?

Serverless 完结篇:文件上传、用户管理、上线部署。

登录状态的保持有三种不同的方式,登录认证 | 云开发 CloudBase - 一站式后端云服务

local:在显式退出登录之前的 30 天内保留身份验证状态

session:在窗口关闭时清除身份验证状态

none:在页面重新加载时清除身份验证状态

在初始化调用auth方法时,传入:\src\assets\auth.js

Serverless 完结篇:文件上传、用户管理、上线部署。

不同的登录状态都可以在浏览器的控制台的 “Appliction” 中查看;那么在不同的组件中,如何获取登录状态和登录的数据呢?

auth 对象中,有 getLoginState 方法,看名字也知道,时获取登录状态的,我们在首页中使用挂载的生命周期函数进行验证,\src\components\Index.vue

Serverless 完结篇:文件上传、用户管理、上线部署。

当然,你也可以使用 Vue-router 提供的导航守卫进行全局的登录状态验证。

上线部署

 

Serverless 完结篇:文件上传、用户管理、上线部署。

申请 SSL 证书,添加 CNAME 记录执行服务器地址即可。

Serverless 完结篇:文件上传、用户管理、上线部署。

原文地址:https://mp.weixin.qq.com/s/XS_i8OQX8l2x1I8CcHnAzQ

延伸 · 阅读

精彩推荐
  • 编程技术AIOps,SRE工程师手中的利器

    AIOps,SRE工程师手中的利器

    AIOps开始成为一种极为重要的站点可靠性工程工具。它能够高效吸纳观察数据、参与数据以及来自第三方工具的数据,判断系统运行状态并保证其处于最佳...

    至顶网5972021-03-08
  • 编程技术真正聪明的程序员,总有办法不加班

    真正聪明的程序员,总有办法不加班

    工作效率提升了,就可以少加班了,聪明的程序员,总会有一堆可以提升编码效率的工具?当一种工具满足不了工作需求,就去探索新的,今天纬小创就给...

    今日头条12482021-03-04
  • 编程技术Delphi - Indy idMessage和idSMTP实现邮件的发送

    Delphi - Indy idMessage和idSMTP实现邮件的发送

    这篇文章主要介绍了Delphi - Indy idMessage和idSMTP实现邮件的发送,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下...

    JJ_JeremyWu6592020-09-22
  • 编程技术让开发效率倍增的 VS Code 插件

    让开发效率倍增的 VS Code 插件

    今天来分享一些提升开发效率的实用 VS Code 插件!Better Comments 扩展可以帮助我们在代码中创建更人性化的注释,有不同形式和颜色的注释供我们选择。 ...

    前端充电宝7132022-04-21
  • 编程技术从Context源码实现谈React性能优化

    从Context源码实现谈React性能优化

    这篇文章主要介绍Context的实现原理,源码层面掌握React组件的render时机,从而写出高性能的React组件,源码层面了解shouldComponentUpdate、React.memo、PureComponen...

    魔术师卡颂5312020-12-20
  • 编程技术简单、好懂的Svelte实现原理

    简单、好懂的Svelte实现原理

    本文会围绕一张流程图和两个Demo讲解,正确的食用方式是用电脑打开本文,跟着流程图、Demo一边看、一边敲、一边学...

    魔术师卡颂4822021-11-10
  • 编程技术用户态 Tcpdump 如何实现抓到内核网络包的?

    用户态 Tcpdump 如何实现抓到内核网络包的?

    在网络包的发送和接收过程中,绝大部分的工作都是在内核态完成的。那么问题来了,我们常用的运行在用户态的程序 tcpdump 是那如何实现抓到内核态的包...

    开发内功修炼11612021-09-08
  • 编程技术2021年值得关注的React PDF 库

    2021年值得关注的React PDF 库

    今天,许多网络应用程序为其用户提供内置的PDF浏览选项。然而,选择一个并不容易,因为它们的功能远远超过显示PDF。在这篇文章中,我将评估5个React的...

    TianTianUp5232021-06-21