课程名称： 2022持续升级 Vue3 从入门到实战 掌握完整知识体系
课程章节： 登陆功能开发
主讲老师： Dell
课程内容：
今天学习的内容包括：
如何开发一个登录功能
setup职责就是告诉你 代码执行的一个流程
课程收获：
9.1 心得：
让div垂直居中：
.wrapper{
position: absolute;
top:50%;
left:0;
right:0;
transform: translateY(-50%);
}
修改输入框中placeholder的颜色：
&_content{
line-height:.48rem;
border:none;
outline: none;
width:100%;
background:none;
font-size:.16rem;
color:$content-notice-fontcolor;
&::placeholder {
color:$content-notice-fontcolor;
}
}
9.2 心得：
每一个路由项有一个 beforeEnter 守卫；整体的路由项有一个 beforeEach 全局前置守卫，通过这两个可以实现登录效验功能
path: '/login',
name: 'Login',
component:Login,
beforeEnter:(to,from,next)=>{
const isLogin = localStorage.isLogin
if(isLogin){
next({name:"Home"})
}else{
next()
}
}
router.beforeEach((to,from,next)=>{
const isLogin = localStorage.isLogin
if(isLogin || to.name==="Login"){
next()
}else{
next({name: 'Login'})
}
})
9.3 心得：
Demo代码
//router=>router.js
import {
createRouter,
createWebHashHistory
} from 'vue-router'
//引入页面地址
import Home from '../views/home/Home'
import Register from '../views/register/Register'
import Login from '../views/login/Login'
//配置页面路由
const routes = [{
path: '/',
name: 'Home',
component: Home
}, {
path: '/register',
name: 'Register',
component: Register,
//路由刚进来，页面运行之前加载的方法，beforeEnter方法里包含着to,from,next三个参数。
//to:表示要去的页面
//from:从那个页面跳的
//next：判断条件的，告诉下一步要干嘛，如果只是next()就继续执行事件，反之给她判断。
beforeEnter(to, from, next) {
//定义一个isLogin,赋予本地状态
const { isLogin } = localStorage;
//如果本地已经登录，跳转Home页面，否则继续执行
isLogin ? next({ name: 'Home' }) : next();
}
}, {
path: '/login',
name: 'Login',
component: Login,
//点击登录页面时候判断，login状态是否登录了。
beforeEnter(to, from, next) {
const { isLogin } = localStorage;
isLogin ? next({ name: 'Home' }) : next();
}
},
]
// 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
//内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
history: createWebHashHistory(),
// `routes: routes` 的缩写
routes
})
// 路由拦截,如果没有登录的话，只能去登录页，或者注册页。
// 根据登录状态，或者前往的页面，判断是否要前往的页面。
router.beforeEach((to, from, next) => {
const { isLogin } = localStorage;
const { name } = to;
const isLoginOrRegister = (name === "Login" || name === "Register");
(isLogin || isLoginOrRegister) ? next(): next({ name: 'Login' });
})
export default router
9.4 心得：
修改默认类型：
import { useRouter } from 'vue-router'
import axios from 'axios' import { reactive } from 'vue'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
export default {
name: 'Login' , setup(){
const data = reactive({
username:' '
password: ' '
})
const router = useRouter()
const handleLogin=()=>
axios.post('https://fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd')
username: data.username,
password: data.password
9.5 心得：
如何发送请求
基础版：
const handleLogin=()=>{
axios.post("https://www.fastmock.site/mock/jd/api/user/login",{
username:data.username,
password:data.password
}).then(()=>{
localStorage.isLogin=true
router.push("/")
}).catch(()=>{
alert（＂登录失败”）
})
}
完整版：
const handlelogin=async()=>{
try{
const result=await axios.post(https://www.fastmock.site/mock/jd/api/user/login".{
username:data.username,
password:data.password
})
if(result?,data?.errno ===0){
localstorage.isLogin·true
router.push("/)
}else{
alert（＂登录失败”） }
)catch(e){
alert（＂请求失败”）
}
}
9.9/9.10 心得：
export default {
name: 'Login',
components: { Toast },
// 职责就是告诉你，代码执行的一个流程
setup () {
const { show, toastMessage, showToast }= useToastEffect()
const { username, password, handleLogin } = useLoginEffect ()
const { handleRegisterClick } = useRegisterEffect()
return {
username, password, show, toastMessage,
handleLogin, handleRegisterClick, handleRegisterClick
}
}
}
随时随地看视频
