登录界面-vue - vue - 前端 | Mi Manchi = yuan = Whatever is worth doing at all is worth doing well

安装的依赖，注意安装的途径

1662900096670

reset.css 用来清除浏览器自主加的样式，放在 public 的 css 目录下，并在 public 的 index.html 页面中引入。

在 App.vue 中仅有如下内容，在路由中访问的组件直接渲染到 <router-view /> 上

	<template>
	<div id="app">
	<router-view />
	</div>
	</template>

	<style lang="less">
	html,
	body,
	#app {
	width: 100%;
	height: 100%;
	}
	</style>

相比之前的，加了 <router-link to="/">Home</router-link> 标签，在点击标签时，通过路由，将对应的组件渲染到 <router-view /> 上

	<template>
	<nav>
	<router-link to="/">Home</router-link> \|
	<router-link to="/about">About</router-link> \|
	<router-link to="/test">Test</router-link>
	</nav>

	<router-view/>
	</template>

使用的表单组件

1662900497911

在导入子组件的时候，如果使用的 setup script，在 import 进子组件之后可以直接在 template 中使用了，而如果使用的 setup 函数，则还需要在 component 字段写上组件的名字

引入加载动画

1662904517864

遇到的问题：在 django 后台，前端传入的数据是需要进行校验才能传入数据库的，而不是直接就能序列化就保存到数据库中了。因此需要自定义各个字段的校验规则和错误时的相应的报错信息。

1663200209385

serializers.ModelSerializer 相比 serializers.Serializer 默认实现了 .create() 和 .update() 方法。

在登录之后才能转到主页，如果在前端直接查看主页，则在前端应该检查 token 状态，如果没有登录，则应转到登录界面。

前端检查数据格式是否正确，后端检查数据是否重复之类的

难道是这样，当前后端数据的校验都成功之后，前端接收到后端数据校验成功的信息，然后前端在浏览器设置一个 token（这个值难道是自己设置的么）表示已经登录了，然后就可以转到主页了。退出登录就是删除这个 token。

下面的视频截图显示在注册成功后返回了一个 token 字段
1663204363460

本地存储 token
1663206130048

django 自带的验证好像是用来登录 django 后端平台查看数据的，并不是所需要的前端登录认证，

前端拿到用户的登录表单，将登录表单中的信息发送给后端，后端根据用户信息返回对应的 token 值（如果是注册，则在后端生成对应的 token）

在 django 的模型中没有特定的 token 字段

登录是 post 请求

在登录界面中，通过 post 发送表单数据后，后端接受到数据后，根据数据生成 token 并返回 true，因此要重写 post 方法。

在选择混合视图的时候，已经看到各个视图的源代码了，我们可以直接重构就行了

注册发送的是 post 请求。

1663328636965

在 django 后端中，因为要生成 token，视图类就不能再继承 viewsets.ModelViewSet 类，而应该继承 rest_framework.generics.GenericAPIView，因为要为 Mixin 扩展类的执行提供方法支持，需要被重写的是 post 函数，其他的就不用改变，可以直接使用对应方法的 APIView 类型，而对于 post 方法，直接定义就好，

只有 ModelViewSet 类才可以使用 router，其他的视图类是不可以使用的

1663331823195