2024年实习总结 - 广告位管理 - 设计实现（1） - 页面布局(3)，面试宝典

对象篇

模块化编程-自研模块加载器

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

{

path: ‘advert’,

name: ‘advert’,

component: () => import(‘@/views/advert/index’),

meta: {

title: ‘广告位管理’,

icon: ‘table’

},

// redirect: ‘/market/advert/list’,

children: [{

path: ‘/’,

name: ‘list’,

component: () => import(‘@/views/advert/list’),

meta: {

title: ‘广告位管理’,

icon: ‘tree’,

breadcrumb: false

},

hidden: true

},

{

path: ‘edit/:id’,

name: ‘edit’,

component: () => import(‘@/views/advert/edit’),

meta: {

title: ‘新建广告位’,

icon: ‘tree’

},

hidden: true

}

]

},

3. 静态页面设计

广告位管理主页面列表 list.vue

广告位管理

<el-option

v-for=“(item,index) in Object.keys(PublishMap)”

:value=“item”

:key=“index”

:label=“PublishMap[item]”

/>

<el-option

v-for=“(item,index) in PositionMap”

:value=“item.value”

:key=“index”

:label=“item.label”

/>

<el-button type=“primary” @click=“search”>搜索

<el-button type=“primary” @click=“clearbtn”>清空

<el-button type=“primary” @click=“createNew”>新建广告

{{ PositionMap[scope.row.adsPosition].label }}

{{ GoTypeMap[scope.row.adsType] }}

{{tformat(new Date(scope.row.createTime),“yyyy-MM-dd hh:mm:ss”)}}

{{tformat(new Date(scope.row.updateTime),“yyyy-MM-dd hh:mm:ss”)}}

<el-switch

v-model=“scope.row.status”

:inactive-value=“0”

:active-value=“1”

@change=“switchPublishStatus(scope.$index, scope.row)”

/>

<el-button type=“text” @click=“edit(scope.row)”>编辑

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

<el-pagination

:current-page=“pageIndex”

:total=“total”

:page-size=“pageNum”

class=“layout-page”

layout=“total, prev, pager, next, jumper”

background

@current-change=“currentPageChange”

/>

data() {

return {

searchParams: {

status: ‘’,

adsPosition: ‘’,

query: ‘’,

},

pageIndex: 1,

pageNum: 10,

total: 0,

advList: [],

}

},

新建广告页面edit

<el-form

ref=“advForm”

:model=“advForm”

:rules=“rules”

:disabled=“disableForm”

label-width=“140px”

<el-input

v-model.number=“advForm.showOrder”

maxlength=“50”

placeholder=“请输入正整数，数字越大，优先级越高”

style=“width:200px”

/>

<el-input

v-model=“advForm.adsName”

style=“width:200px”

maxlength=“60”

placeholder=“最多输入60个字符”

/>

<el-option

v-for=“(item, index) in PositionMap”

:value=“item.value”

:key=“index”

:label=“item.label”

/>

<el-option

v-for=“(item, index) in StopTime”

:value=“item.value”

:key=“index”

:label=“item.label”

/>

<el-option

v-for=“(item, index) in Type”

:value=“item.value”

:key=“index”

:label=“item.label”

/>

手机图片：

<el-upload

:action=“picUrl”

:limit=“1”

list-type=“picture-card”

:file-list=“adsPhoneImgList”

:on-success=“handleMobileSuccess”

:on-remove=“handleMobileRemove”

:before-upload=“beforeUpload”

accept=“.jpg, .jpeg, .gif, .png”

只支持.jpg .png .gif格式

pad图片：

<el-upload

:action=“picUrl”

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

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