人脸识别考勤管理系统
先看一下目录结构。
其中backend文件中存放的是后端代码，CP主要是配置文件，frontend存放前端代码。manage.py相当于main函数，最先执行这个，运行也是运行这个文件，运行命令python manage.py runserver
这里会进入setting.py文件，该文件是设置文件，其中大部分代码是创建项目时自动生成的。
根URL，之后会进入CP/urls.py文件
运行index.html文件，这就进入了前端部分，在frontend文件夹中，这里面的.vue，.js文件为前端代码。这些代码运行后会生成html文件在浏览器上运行。首先进入App.vue文件。
这些代码除<router-view/>外的运行结果即为下图除红框以外的部分。而<router-view/>的运行结果就是内部红框里的内容，这行代码表示引入别的文件，引入的文件不同运行结果相应改变。
引入文件看router.js文件，改文件负责路由配置。
path的值是’/’，即为默认路由，此时引入的component（组件）是Home，而从最上面引入的代码可知，Home是Home.vue，打开Home.vue可以看到这个文件的内容就一行，欢迎来到考勤管理系统！这就是主页面的运行结果。签到签退页面跟这个类似，引入的文件运行结果即为红框部分。
管理页面引入的是AdminHome.vue，跟App.vue类似，AdminHome.vue文件中也能看到有一行代码<router-view/>，所以AdminHome.vue文件运行结果是下图红框以外的部分，红框以内由<router-view/>引入，这里的引入就看上图的children部分，其中第一行表示一个重定向，即页面默认跳转，跳转到employee，后两行分别引入文件，运行结果即为下图红框部分。
这就是前端页面的逻辑。
后端代码主要在backend文件夹中，
每个后端接口的调用是在.vue文件的<script>......</script>部分，然后<template>...</template>再将返回的数据显示出来。