【学习打卡】第9天 【2022版】Vue3 系统入门与项目实战第九讲

课程名称： 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 

}

} 

}