一、目标
1、完成登录、注册的功能
2、实现表单的验证
二、过程
主要是实现过程及一些问题记录。
2.1、登录
1、安装 axios 用于向服务器发送接受请求。 npm i axios
2、启动api服务（没有，就用node简单搭一个）
3、对接口进行测试，看是否可用，用postman或者浏览器插件都可以
node服务器没问题，mysql挂掉了，重启下，接着测试，发现我的数据库不见了t_t。并在数据库里找到了有意思的东西。
建议准备自己搭mysql服务器的小伙伴，将账号密码改复杂一点。
测试数据：
4、接口测试没问题后，进行sign_in组件 axios部分的编写和测试，先写死数据看能不能成功
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import useEmitter from '@/hooks/useEmitter.js'
import axios from 'axios'
//在button标签中绑定自定义sign_in事件，点击实现axios数据的请求
const sign_in=()=>{
axios({
url:'http://127.0.0.1:80/api/login',
method: 'post',
data:{
username: "test",
password: "123456"
}
}).then((res) => {
console.log('sign_in接受的数据', res.data)
})
}
在页面点击按钮触发事件时，并没有想要的结果。
原因：
axios默认使用的 content-type 为 application/json 并且是以 request payload 的形式发送数据。
而我此时node服务中的中间件，只能解析 application/x-www-form-urlencoded 格式的表单数据。数据被过滤了。
app.use(express.urlencoded({extended:false}))思路：将两者收发数据的格式，设置成一致就可以。
解决：在前端安装 qs 用于格式化数据 npm i qs 。导入 import qs from "qs" , 用 qs.stringify( ) 处理数据。
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import useEmitter from '@/hooks/useEmitter.js'
import axios from 'axios'
import qs from 'qs'
const sign_in=()=>{
axios({
url:'http://127.0.0.1:80/api/login',
method: 'post',
data:qs.stringify({
username: "test",
password: "123456"
})
}).then((res) => {
console.log('sign_in接受的数据', res.data)
})
}
对表单数据用 v-mode进行双向绑定。进行小改动就可以。
到这，简单的登录就差不多搞定了。
2.1、数据验证
现在一些不合理的数据也能发送，比如没有密码，这种数据本就没意义，也会增加服务端的压力，这是需要在数据发送前对数据进行验证，过滤掉一些不合法的数据。
当然自己写个 if 判断也可以，但扩展起来比较麻烦 。这里借助第三方库来实现表单的验证。
1. npm i element-plus 安装
快速开始 | Element Plus 根据需求设置全局引入或者按需引入
Form 表单 | Element Plus 相关组件，照着修改就可以
2、关于配置方面，官网只提供了vite和webpack的配置，vue实现按需导入有些许差别
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],}
})3、对sign组件进行些许修改
添加规则:
问题一，样式错乱
原因：el 本身就有css样式，本地根据class属性也定义了css样式，两者结合就出现了这种情况。
办法：改el样式 ，先定位下，要改什么属性。
在浏览器中的调了下，可能不是最佳样式，但能用就行。
.form__input .el-input__inner { width: 350px; height: 40px; margin: 4px 0; padding-left: 25px; font-size: 13px; letter-spacing: 0.15px; border: none; outline: none; font-family: "Montserrat", sans-serif; background-color: #ecf0f3; transition: 0.25s ease; border-radius: 8px; box-shadow: inset 3px 3px 3px #d1d9e6, inset -3px -3px 3px #f9f9f9; } .form__input .el-input__wrapper { display: inline-flex; /* flex-grow: 1; */ /* align-items: center; */ /* justify-content: center; */ /* padding: 1px 11px; */ background-color:transparent; background-image: none; border-radius: var(--el-input-border-radius,var(--el-border-radius-base)); transition: var(--el-transition-box-shadow); box-shadow: 0 0 0 1pxvar(--el-input-border-color,var(--el-border-color)) inset; }问题二：输入框无法输入内容、以及验证失效
两者本质是一个问题，原来代码中 loginFrom 为非响应式数据，数据的改变不会触发视图更新。用 ref 或 reactive 定义都可以
import {reactive} from 'vue' const loginFrom = { username: "", password: "" } // 修改----------------------------------------- const loginFrom = reactive({ username: "", password: "" })
然后实现数据验证后再提交数据，主要几个注意点，其他照着官网来就行。
//验证完后再发送数据
const sign_in = async (formEl: FormInstance | undefined) => {
if (!formEl) return console.log('error');
await formEl.validate((valid, fields) => {
if (valid) {
console.log('submit!')
//axios 数据请求
axios({
url:'http://127.0.0.1:80/api/login',
method: 'post',
data:qs.stringify({
username: loginFrom.username,
password: loginFrom.password
})
}).then((res) => {
console.log('sign_in接受的数据', res.data)
})
} else {
console.log('error submit!', fields)
}
})
}