2024年【前端】实习随笔1 - 老师二维码2，阿里2面

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

老师管理中添加【类型配置】页面 包括：

1. 类型展示的列表字段：类型名称/创建时间/编辑（导入现有类型数据）

2. 编辑只可删除。 点击删除时，校验该类型关联老师二维码个数n,

n>0,toast提示：该类型已关联老师二维码，无法删除；  n=0,弹窗提示：确认删除此类型

3. 支持新建类型，点击【新建类型】按钮，出现弹窗（类型名称：限制15字符，字符类型不做限制）

点击确认，和已有类型排重校验， 若名称重复，toast提示：该类型名称已存在，请修改；

新建成功，返回类型列表页，toast提示：建立成功

4. 新建的类型，创建时间即为创建时间，并按时间倒序排入列表中

5. 新建成功后，新建的类型实时同步到1.1二维码管理编辑页、1.3修改页面和1.4商品编辑页调取 的类型下拉单里面，

实现思路

1. HTML部分

<el-button

type=“primary”

@click=“dialogFormVisible = true”

style=“float:right;margin-bottom:20px;margin-right:100px”

新建类型

<el-input

v-model=“typeName”

autocomplete=“off”

maxlength=“15”

placeholder=“点击输入”

clearable

style=“width:200px”

<el-button @click=“dialogFormVisible = false”>取 消

<el-button type=“primary” @click=“addType”>确 定

{{scope.row.createTime}}

<el-button size=“normal” type=“text” @click=“deleteType(scope.row)”>删除

确认删除此类型？

<el-button @click=“centerDialogVisible = false”>取 消

<el-button type=“primary” @click=“sureDelete”>确 定

2. JS思路

（1）获取列表数据

在created中添加getData,使得每次页面刷新都获取数据

async getData() {

const result = await this.$ajax.get(‘/admin/teacher/getAllTeacherType’)

this.typeData = result.data.data

//处理时间格式

this.typeData = this.typeData.map(item => {

const time = item[‘createTime’]

item[‘createTime’] = this.format(new Date(time), ‘yyyy-MM-dd hh:mm:ss’)

return item

})

console.log(result)

},

（2）删除某类型

首先调用接口判断关联二维码个数是否为0，如果不为零toast提示，如果为零，弹出对话框再次确认删除

async deleteType(row) {

// 删除类型 *校验关联二维码个数n

console.log(‘删除’)

this.currentTypeId = row.id

let res = await this.$ajax.get(‘${this.api.linkUrl}?id=${row.id}`)

if (res.data && res.data.retcode == 10000) {

console.log(res.data.data)

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-OJadJxTj-1715475302493)]
[外链图片转存中…(img-uS6sQsaC-1715475302495)]