前端vue框架使用

为了进一步产出，得学习前后端框架，那就干啦！

1.创建vue项目

npm create vue@latest

npm i

npm run dev

2.项目结构

node_modules：存放项目依赖的第三方包
public：一些公共的文件
src：项目的源代码，图片资源等
--assets：图片、字体等静态资源
--components：自定义组件
App.vue：项目的主入口vue文件
main.js：项目的主入口ts文件
index.html：项目的html文件
package.json：项目依赖包文件
vite.config.js：vite项目配置文件

3.vue文件、钩子mounted、http.js的区别

vue文件：网页页面本身

mounted：页面完成后触发，去调用页面中的方法，方法去调用http.js工具

http.js:对接服务器，post、get数据。跟后端服务器要数据，数据返回给my.vue, my.vue把数据展示在页面上。

4.表单验证

流程：用户操作-> 前端验证-> 接口请求 -> 后端响应

my.vue

const onSubmitabsent =() => {
  absenformref.value.validate(async (valid, fields) => {
    if(valid){
      let data = {
        title: absentform.title,
        absent_type_id : absentform.absent_type_id,
        start_time: absentform.date_range[0],
        end_time: absentform.date_range[1],
        request_content: absentform.request_content,
      }
      console.log(data)
      try{
        let absent = await absenthttp.applyabsent()
        console.log(absent)
        dialogFormVisible.value = false;
      }catch(detail){
        ElMessage.error(detail)
      }
    }
  })
}

absenthttp.js

const applyabsent = (data) => {
  const path = "/absent/absent"
  return http.post(path,data)
}

后端seriallizers.py

def validate_absent_type_id(self, value):
    # 检查前端传的absent_type_id是否在数据库的请假类型表里存在
    if not AbsentType.objects.filter(id=value).exists():
        # 验证失败：抛异常，返回错误提示
        raise exceptions.ValidationError('考勤类型不存在')
    return value