# exam-student

**Repository Path**: shanhe-organization/exam-fore

## Basic Information

- **Project Name**: exam-student
- **Description**: 前端
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-11
- **Last Updated**: 2022-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 前端, 学生端

## README

# 教考分离系统

English | [简体中文](./README-zh.md)

> A minimal vue admin template with Element UI & axios & iconfont & permission control & lint

**Live demo:** http://panjiachen.github.io/vue-admin-template

**The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`**

## 运行起来

```bash
# develop
npm run dev
```

## 视频：

[尚硅谷VUE项目实战，前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili](https://www.bilibili.com/video/BV1Vf4y1T7bw?p=200&spm_id_from=pageDriver)

## 借鉴项目：

后台管理项目：https://gitee.com/jch1011/guigu

考试系统（直接看exam-vue）：[云帆考试系统: 云帆考试系统是一款基于SpringBoot+Vue开发的考试系统。包含在线考试、用户体系、错题训练、考试规则、智能算分等考试功能，流程通畅、可用于简单的考试或进行二次开发！ (gitee.com)](https://gitee.com/davz/yf-exam-lite#云帆培训考试系统-开源版)

上面的考试系统在线体验：https://lite.yfhl.net/

## 文件名解释：

dashboard 首页

login登录页

Sidebar 左侧 侧边栏

navbar右上角栏

appmain 主页面



## 资料：

### 创建新版块的时候：具体可以看125集

1、想要给左侧添加新栏目，要在views下创建文件夹，子文件夹。。。

2、然后设置路由



### 纯表格的增删查改，看126集



### 拥有分类选择栏的三级联动表格，增删查改，看133集



### SPU，看149集



### SKU，看165集



### 数据可视化，画图表的，看176集

canvas得会，svg矢量图, ECharts

## 具体操作

### //列表展示

1、书写相关的API接口
2、删除API里的table，因为里面都是假数据
3、里面有带参接口的写法，也有不带参接口的写法。
4、在API里创建文件夹，分别创建js文件，然后再最外层API里，创建index.js统一暴露
5、暴露完后，在main.js里在Vue.prototype里指向API，为了任意组件都能使用以上接口
6、回到product里，在相应的组件里，调用接口函数，索取数据
     欣赏：views/product/tradeMark/index.vue
7、//列表添加，修改，删除功能
	  //静态（添加和修改）
      1、查询饿了么UI的Dialog对话框
      2、详情：请欣赏views/product/tradeMark/index.vue
      3、涉及到，对话框、上传图片upload
      4、CV战神永远的神
	  //接口操作
      1、到API里设置
      2、想好接口需要传的参数，嘿嘿，后端菜鸡加班去。
      3、上传图片upload的action,要加上/dev-avi+接口，不一样
      4、“添加成功”：        使用小弹窗message
      5、浅拷贝。。。
      6、添加品牌，停留在第一页；修改品牌，停留在当前页。传参不同罢了。
      7、表单验证（前面带红星的，必填项）
      8、自定义表单验证，（据说可以实现密码二次确认）（重点@@@@）
            自定义校验规则函数写在data里，return之前
                //删除功能
      1、添加点击事件，查看饿了么MessageBox弹框，复制函数修改
      2、修改API
      3、修改组件里的函数，使用接口，这里有个小细节，怎么实现删除后停留在删除页。



### //多级分类表单展示

1、此处欣赏：Attr/index.vue
2、这里他先把card应用到Attr/index.vue里，调整margin间距。
3、然后card里套了一个组件，此组件被申请为全局组件
      //见components/CategonySelect/index.vue
      1、先创建该组件，跑到main.js里注册全局组件。
      2、并将该组件添加到Attr/index.vue里。
      	//开始处理该组件CategonySelect/index.vue
                1、第一个选择分类嘛，所以查看eleme的行内表单。直接添加+修改
	2、//动态信息，就是（接口）
	      1、打开attr.js，写好各级分类的接口
 	      2、当组件一挂载，就请求好第一分类数组，
		         看components/categoryselect/index.vue
	      3、添加第一类获取数据的函数，修改表单里的写法，改成动态生成的。
	      4、需要准备一个对象，里面存着多级分类的id, 方便相邻类别内容的生成
	      5、给下拉框指定事件
	      6、三级的逻辑是：（用到子对父的传递）
		        第一类确定，向上传id; 但是第一类一改，会取消第2类；
		        第2类确定，向上传id；但是第二类一改，会取消第3类；
		        第3类确定，向上传id，由父组件调用函数，展示列表。
	      7、请求函数里，把3id传上去，把数据存在数组里。
4、//开始构建下方card内容。
     1、组件就是列表展示
     2、如果你就想在该card处实现表单切换的话，可以用v-show。
     3、在按钮那有个属性disabled，可以表现为按钮失效的效果。
     //动态，接口处理
     1、转到attr.js（这里实际上已经提前分析了一下要收集那些数据给服务器）
     2、index.vue 收集数据
     3、不要再data里使用this.xxx收集数据，不行的，这种方式收集的数据是无序的
     4、table单向传递列表数据，为了显示；
           input双向传递，保存数据。
     5、对象里面有数组，数组里面还有对象，要是用深拷贝，
	见updateAttr,使用到loadash当中的深拷贝，cloneDeep
     6、逻辑很多啊，可恶
     7、编辑与查看模式，细的很
	flag是个响应式变量，生成一个属性值，就会有一个自己的flag
     8、处理了input框里全是空格符的无效输入，发出警告。
     9、数组可以用some遍历，解决输入增加的数据内容与已有的数值相同的情况
     10、$set给响应式对象添加属性flag , 只有响应式才能影响视图
     11、span转变成input, 为了确保input存在， 使用$nextTick;
	然后使用ref,跟踪到相应的input框，实现光标焦点
     12、自动聚焦问题，靠了
      //删除功能
      1、pop泡泡确认框，查看相关event
      2、我靠，饿了么UI有版本号，目前项目用的老了点
      3、通过修改数组完成删除操作，splice(index,1)  （索引值，删除1个）
      //真正去发送请求，完成添加和修改功能
      1、实际上就是完成保存按钮的功能
      2、实现接口
      3、然后在组件里实现函数（涉及整理参数）
           //数据值为空的无效添加，去掉
           //我们实现功能用的flag参数
           使用数组的filter,过滤出我们想要的数据
           他娘的删除参数，居然就是           delete 数据！！！
5、细致化，按钮和三级联动的逻辑关系
     （父传子 ，disabled,为真不可以使用，为假可以使用）

## 关于人脸认证：

​     缺点：点击人脸识别时，上来就注册失败，明明设置了定时器，不懂。
​          需要用户多次点击按钮，我都想多一个按钮 “ 拍照 ”。
​          注册成功会有1秒的页面跳转问题，代码的问题吧，不太懂。
​          界面太丑了
​