前端登录注册页面、多方式登录功能、腾讯云短信发送功能二次封装(包)、发送短信接口

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

今日内容概要

• 登陆注册页面
• 多方式登陆功能
• 腾讯云短信发送二次封装
• 发送短信接口

内容详细

1、登陆注册页面(前端项目页面)

# 打开前端项目 luffycity:

# 如果登录注册是一个新页面，比较好写
	新建一个页面组件，跳转到这个页面即可
    
    
# 使用vue-router实现页面跳转
	第一步：需要在router文件夹的index.js中配置一条路由
	{
		path: '/login',
		name: 'login',
		component: Login
	}
    
	第二步：访问/login路径，就会显示Login这个页面组件
	
	第三步：点击按钮跳转到这个路径
	js中：this.$router.push('/login')
    
	第四步：在html页面中跳转-->点击该标签，就可以跳转到/login这个路径
	"/login">
    
    
# 如果登录注册是单独一个页面的话比较简单

# 现在要求登录注册是弹出模态框效果--》弹出框---》也是组件
	创建：Login，Register两个组件，普通组件---》放在components文件夹下

更改 src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Login from "@/components/Login"

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/home',
        name: 'home',
        component: HomeView
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    },
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE\_URL,
    routes
})

export default router

更改 src/components/Header.vue :

 
 
 老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活


 
 
 * ![](../assets/img/head-logo.svg)
* 免费课
* 实战课
* 轻课



 
 
 登录
 |
 注册
 
 
 
 
 
 



import Login from "@/components/Login";
import Register from "@/components/Register";

export default {
 name: "Header",
 data() {
 return {
 url\_path: sessionStorage.url\_path || '/',
 is\_login: false,
 is\_register: false
 }
 },
 methods: {
 goPage(url\_path) {
 // 已经是当前路由就没有必要重新跳转
 if (this.url\_path !== url\_path) {
 this.$router.push(url\_path);
 }
 sessionStorage.url\_path = url\_path;
 },
 close\_login() {
 this.is\_login = false
 },
 close\_register() {
 this.is\_register = false
 },
 put\_register() {
 this.is\_register = true
 this.is\_login = false
 },
 put\_login() {
 this.is\_register = false
 this.is\_login = true
 }

 },
 created() {
 sessionStorage.url\_path = this.$route.path;
 this.url\_path = this.$route.path;
 },
 components: {
 Login, Register
 }
}



.header {
 background-color: white;
 box-shadow: 0 0 5px 0 #aaa;
}

.header:after {
 content: "";
 display: block;
 clear: both;
}

.slogan {
 background-color: #eee;
 height: 40px;
}

.slogan p {
 width: 1200px;
 margin: 0 auto;
 color: #aaa;
 font-size: 13px;
 line-height: 40px;
}

.nav {
 background-color: white;
 user-select: none;
 width: 1200px;
 margin: 0 auto;

}

.nav ul {
 padding: 15px 0;
 float: left;
}

.nav ul:after {
 clear: both;
 content: '';
 display: block;
}

.nav ul li {
 float: left;
}

.logo {
 margin-right: 20px;
}

.ele {
 margin: 0 20px;
}

.ele span {
 display: block;
 font: 15px/36px '微软雅黑';
 border-bottom: 2px solid transparent;
 cursor: pointer;
}

.ele span:hover {
 border-bottom-color: orange;
}

.ele span.active {
 color: orange;
 border-bottom-color: orange;
}

.right-part {
 float: right;
}

.right-part .line {
 margin: 0 10px;
}

.right-part span {
 line-height: 68px;
 cursor: pointer;
}

更改 src/components/Banner.vue的template标签：

 
 
 
 
 
 
 ![]()
 
 
 
  [![]()](https://blog.csdn.net/biggbang) 
 
 
 
 

新建：src/components/Register.vue

 
 
 
 
 
 新用户注册
 
 
 
 
 
 
 
 
 {
  { sms\_interval }}
 
 
 注册
 
 
 立即登录
 
 
 
 



export default {
 name: "Register",
 data() {
 return {
 mobile: '',
 password: '',
 sms: '',
 sms\_interval: '获取验证码',
 is\_send: false,
 }
 },
 methods: {
 close\_register() {
 this.$emit('close', false)
 },
 go\_login() {
 this.$emit('go')
 },
 check\_mobile() {
 if (!this.mobile) return;
 if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
 this.$message({
 message: '手机号有误',
 type: 'warning',
 duration: 1000,
 onClose: () => {
 this.mobile = '';
 }
 });
 return false;
 }
 this.is\_send = true;
 },
 send\_sms() {
 if (!this.is\_send) return;
 this.is\_send = fal