项目进度：

最近一直在搭建环境，都没写什么：登陆页面采用登陆注册在同一个界面，用v-if进行渲染，并且借助validation插件中的yup神器进行校验，

<script setup>
// import { ref } from 'vue'
import * as yup from 'yup'
import { Form, Field, ErrorMessage } from 'vee-validate'
import { ref, watch } from 'vue'
// import { useUserStore } from '@/stores/index'
// import { useRouter } from 'vue-router'
import { userRegisterService, userLoginService } from '@/api/user'
const isRegister = ref(true)
const isSendingCode = ref(false)
// 注册功能，整个的用于提交的form对象
// 设置预校验
// const userStore = useUserStore()
const formValidate = ref()
// const router = useRouter()
const login = async () => {await formValidate.value.validate()const res = userLoginService(loginFormModel.value)// userStore.setToken(res.data.token)ElMessage.success('登录成功')console.log('开始登录', res)// router.push('/')
}
const register = async () => {await formValidate.value.validate()await userRegisterService(formModel.value)ElMessage.success('注册成功')isRegister.value = false
}
const formModel = ref({email: '',password: '',repassword: '',confirm: ''
})
const loginFormModel = ref({userAccount: null,password: ''
})
watch(isRegister, () => {formModel.value = {email: '',password: '',repassword: ''}loginFormModel.value = {userAccount: '',password: ''}
})const simpleSchema = yup.object({email: yup.string().trim().required('该选项不能为空').matches('^[1-9]\\d{4,10}@qq\\.com$', '输入的内容不满足邮箱格式'),password: yup.string().trim().required('该选项不能为空').min(8, '密码必须为至少8位字符').test('test2', '与第一次输入的密码不匹配', function (password) {const repassword = this.parent.repasswordif (password !== repassword) {return this.createError({ path: 'confirmPassword' })}return true}),repassword: yup.string().trim().required('该选项不能为空').test('test1', '与第一次输入的密码不匹配', function (repassword) {const password = this.parent.passwordif (password !== repassword) {return false}return true}),// 要么是数字要么是字符串2选1，trim是字符串特有的，只有number不能专门提示userAccount: yup.number().required('输入的必须为非空数字').min(10, '账号必须是10位数字哦')
})
</script><template><div class="layoutLogin"><imgclass="loginBackground"src="https://pic1.zhimg.com/80/v2-9140eb49073346f74f04b6628c77c3fc_1440w.webp"alt="背景图"/><Form@submit="submit":validation-schema="simpleSchema":model="formModel"class="form"v-if="isRegister"ref="formValidate"><div class="title">注册</div><div class="frame"><Fieldtype="email"v-model="formModel.email"name="email"placeholder="请输入你的邮箱"/><br /><ErrorMessage name="email" /></div><div class="frame"><Fieldname="password"v-model="formModel.password"type="password"placeholder="请输入你想要的密码"/><br /><ErrorMessage name="password" /></div><div class="frame"><Fieldname="repassword"type="password"placeholder="请再次确认你输入的密码"v-model="formModel.repassword"/><br /><ErrorMessage name="repassword" /></div><div class="frame"><Fieldname="repassword"type="password"placeholder="请输入验证码"v-model="formModel.confirm"class="confirmInput"/><span class="getConfirm" :disabled="isSendingCode">验证码</span></div><button @click="register">注册</button><div class="toWhere"><a href="#" class="toLogin">已有帐号？去登录</a><br /><a href="#" class="toModify">忘记密码？</a></div></Form><!-- 切换的时候重置表单内容 --><Form@submit="submit":validation-schema="simpleSchema":model="loginFormModel"class="form"ref="formValidate"v-else><div class="title">登录</div><div class="frame"><Fieldtype="text"v-model="loginFormModel.userAccount"name="userAccount"placeholder="请输入你的账号"/><br /><ErrorMessage name="userAccount" /></div><div class="frame"><Fieldname="password"v-model="loginFormModel.password"type="password"placeholder="请输入密码"/><br /><ErrorMessage name="password" /></div><button @click="login">登录</button><div class="toWhere"><a href="#" class="toLogin">新用户？去注册</a><br /><a href="#" class="toModify">忘记密码？</a></div></Form></div>
</template>
<style scoped>
* {outline: none;padding: none;margin: 0;
}
.form {width: 30vw;min-height: 40vh;font-family: 'YouYuan';box-shadow: 2px 4px 8px 4px rgba(49, 110, 64, 0.387);border-radius: 10px;
}
.title {font-size: 40px;font-family: 'STCaiyun';text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.329);color: whitesmoke;margin-top: 0.5em;margin-bottom: 0.2em;margin-left: 4em;
}.layoutLogin {display: flex;height: 100vh;width: 100vw;justify-content: center;align-items: center;
}
/* 对于Field，本质上是input，所以还是要改变这个 */
input {height: 2em;width: 20em;border: rgba(41, 202, 143, 0.089) solid 1.5px;box-shadow: 0px 1px 8px 2px rgba(0, 0, 0, 0.223);border-radius: 1em;background-color: rgba(240, 255, 255, 0);
}
.confirmInput {width: 12em;
}
.getConfirm {padding: 0.6em;border-radius: 2em;border: rgba(28, 172, 131, 0.295) solid 1px;box-shadow: 0px 1px 8px 2px rgba(0, 0, 0, 0.223);margin-left: 3em;color: white;cursor: pointer;
}
.getConfirm:hover {background-color: rgba(240, 248, 255, 0.315);
}
.frame {margin: 30px 5em;
}
.loginBackground {position: absolute;height: 100vh;width: 100vw;z-index: -1;
}
span {color: red;font-size: 0.8em;
}
button:hover {background-color: rgba(234, 236, 230, 0.421);
}
button {margin: 0.5em 12.5em;margin-top: 1em;border: rgba(26, 120, 121, 0.377);background-color: rgba(143, 212, 198, 0.216);width: 5em;height: 2.5em;border-radius: 1em;color: aliceblue;box-shadow: 0px 1px 8px 2px rgba(0, 0, 0, 0.223);
}
.toWhere {font-size: 0.5em;margin-left: 1.5em;margin-bottom: 20px;
}
.toLogin,
.toModify {color: aliceblue;
}
.toLogin:hover,
.toModify:hover {color: rgb(205, 242, 255);
}
</style>

对于请求进行封装，设置请求拦截器和响应拦截器：

import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'
import axios from 'axios'
const baseURL = 'https://big-event-vue-api-t.itheima.net'
const instance = axios.create({baseURL,timeout: 10000//   headers: { 'X-Custom-Header': 'foobar' }
})
// Add a request interceptor
axios.interceptors.request.use((config) => {// 携带token// Do something before request is sentconst useStore = useUserStore()if (useStore.token) {config.headers.Authorization = useStore.token}return config},function (error) {// Do something with request errorreturn Promise.reject(error)}
)// Add a response interceptor
axios.interceptors.response.use(function (response) {// Any status code that lie within the range of 2xx cause this function to trigger// Do something with response dataif (response.data.code === 0) {return response}ElMessage.error(response.data.message || '服务异常')return Promise.reject(response.data)},function (error) {// Any status codes that falls outside the range of 2xx cause this function to trigger// Do something with response error//错误的特殊情况401 权限不足或者token过期=》拦截到登录if (error.response?.status === 401) {router.push('/login')}//错误的默认情况ElMessage.error(error.response.data.message || '服务异常')return Promise.reject(error)}
)export default instance
export { baseURL }

封装接口：

import request from '@/utils/request'
//注册接口
export const userRegisterService = ({ email, password, repassword }) => {return request.post('/api/reg', { email, password, repassword })
}//登录接口
export const userLoginService = ({ userAccount, password }) => {return request.post('/api/login', { userAccount, password })
}

这周答辩过后实在是看到了很大的不足，从这周起要开始认真了；这周的话应该要写完登陆注册jwt和修改个人资料，然后如果能多写一点的话可以适当加上一个搜索分页；

然后，激励自己：