Django+Vue3前后端分离学习（五）（前端登录页面搭建）

本文主要是介绍Django+Vue3前后端分离学习（五）（前端登录页面搭建），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、如果需要使用组合式API，需要安装插件：

npm install vite-plugin-vue-setup-extend --save-dev

在vite.config.js里配置：

首先导入:

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

添加：

2、创建login.vue

然后再index.js里添加：

然后修改根路由：

采用Hash方式：

在Vue中加载外部的css文件：

<style scoped src="@/assets/css/login.css"></style>
<style scoped src="@/assets/iconfont/iconfont.css"></style>

图片的话，需要在<scripts>中当做对象一样导入进来

 import login_image from "@/assets/image/login.png"

3、为了接收用户输入的邮箱和密码，在<scripts>里定义一个响应式对象：

引入

import { reactive } from "vue";

let form=reactive({email:"",password:""})

然后再input里通过v-model绑定邮箱和密码：

给登录按钮添加点击事件：

邮箱正则表达式： let pwdRgx = /^[0-9a-zA-Z_-]{6,20}/

密码正则表达式：let emailRgx = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9])+/

采用axios库：

npm install axios --save或者设置版本号npm install axios@1.6.8 --save

引入axios库：

 import axios from "axios";

定义方法（后面有改进）：

axios.post("http://127.0.0.1:8000/auth/login",{email:form.email,password:form.password}).then((res)=>{//then:代表是成功的情况（在这里，代表返回的状态码200）let data=res.data;let token=data.token;let user=data.userauthStore.setUserToken(user,token);router.push({name:"frame"})}).catch((err)=>{//catch:代表失败的情况（在这里，代表返回的状态码是非200console.log(err.response.data.detail);})

数据的保存，放在stores文件夹里：

在stores里创建一个anth.js文件（可以把counter.js里的复制到auth.js里改造）

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'const USER_KEY = "OA_USER_KEY"
const TOKEN_KEY = "OA_TOKEN_KEY"export const useAuthStore = defineStore('auth', () => {let _user = ref({})let _token = ref("")function setUserToken(user, token) {//保存到对象上(内存中)_user.value = user;_token.value = token;//存储到浏览器的localStorge中(硬盘上)localStorage.setItem(USER_KEY, JSON.stringify(user))localStorage.setItem(TOKEN_KEY, token)}function clearUserToken() {_user.value = {}_token.value = ""localStorage.removeItem(USER_KEY)localStorage.removeItem(TOKEN_KEY)}//计算属性let user = computed(() => {//在JS中//1、空对象{}:用if判断，会返回true Object.keys(_user.value).length==0//2、空字符串"":用if判断，会返回falseif (Object.keys(_user.value).length == 0) {let user_str = localStorage.getItem(USER_KEY)if (user_str) {_user.value = JSON.parse(user_str)}}// if (!_user.value) {//   _user.value = localStorage.getItem(USER_KEY)// }return _user.value})let token = computed(() => {if (!_token.value) {let token_str = localStorage.getItem(TOKEN_KEY)if (token_str) {_token.value = token_str}}return _token.value})let is_logined = computed(() => {if (Object.keys(user.value).length > 0 && token.value) {return true;}return false;})return { setUserToken, user, token, is_logined, clearUserToken }
})

然后再login.vue中导入：

  import { useAuthStore } from "@/stores/auth";

然后创建对象：

引入跳转 （router是路由跳转， route 是保存路由信息的）：

 import { useRouter } from "vue-router";

然后创建router对象：

设置路由跳转：

4、对axios 优化 ，封装：

在src文件夹下新建一个api文件夹，然后在其下面新建http.js

这篇关于Django+Vue3前后端分离学习（五）（前端登录页面搭建）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---