🚀 优质资源分享 🚀
今日内容概要
- 登陆注册页面
- 多方式登陆功能
- 腾讯云短信发送二次封装
- 发送短信接口
内容详细
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