基础面试题
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括:HTML,CSS,JavaScript,浏览器,性能优化等等
- 选择账户栏往下翻
- 有一个POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务栏,选择IMAP/SMTP服务开启选项,如图.记得记录给你的授权码,填入pass
// 创建发送邮件对象
let transporter=nodemailer.createTransport({
service:'qq',
secure: true,
auth:{
user:'XXX@qq.com', // QQ邮箱
pass:'XXXXXXX', // 授权码
},
})
在通用返回组件通过获取当前激活路由信息来改变界面标题(components文件夹)
this.$route.meta.title;
在底部通用导航中,通过获取路由携带的信息来渲染底部组件(components文件夹)
<template>
<div class="my-tabbar">
<my-tabbar :list="list" selectedColor="#f00"></my-tabbar>
</div>
</template>
<script>
/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
/\* 应用中各页面复用的tabbar \*/
/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
import routes from '@/router/router' // 从router中获取信息
export default {
name: 'app-tab-bar',
computed:{
list(){
return routes.filter(route=>route.meta?.inTabbar).map(item=>({ // 循环遍历拿到信息
pagePath: item.path,
text: item.meta.title,
icon: item.meta.icon,
}))
},
},
}
</script>
<style lang="less">
</style>
根据路由激活后isActive来确定是否选中(components文件夹)
:class="['tab-bar-item', isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
只有isActive,isExactActive为真才会有属性router-link-active,router-link-exact-active也就是渲染样式
放置全局前置守卫来判定是否登录(router文件夹)
// 全局前置路由守卫,实现页面拦截
router.beforeEach((to,from,next)=>{
if(to.meta?.permission){ // 在登录后才能访问的路由中有meta={permission:true}
if(store.state.shoppingCart.token){
next()
}else{
next('/login')
}
}else{
next()
}
})
- to要到达的路由
- from从那个路由来
- next下一步(无论哪种状态都必须执行下一步操作,不然会阻止程序继续执行)
store仓库,仓库中的数据在启用命名空间后只能在store中进行更改,并且调用时要加上仓库名称
- 启用命名空间
namespaced: true, // 命名空间(名字空间)
- 配置文件也有相应配置
export default new Vuex.Store({
strict: process.env.NODE\_ENV !== 'production', // 启用严格模式,保证在mutation中更改数据
modules: {
shoppingCart, //shoppingCart 是这个模块命名空间
},
plugins: [createPersistedState({
storage: sessionStorage, // 默认是向 localStorage 中保存数据
paths:[
'shoppingCart.token',
'shoppingCart.name',
],
})],
})
- 调用store时要加上名字
import { mapActions,mapGetters } from 'vuex' // 引入映射
export default {
name:'cart',
computed:{
carts(){
return this.$store.state.shoppingCart.carts
},
...mapGetters('shoppingCart',['allChecked','allMoney']), // 前面加入模块名shoppingCart
},
methods:{
...mapActions('shoppingCart',['removeCart','changNumCart','changCheckedSingle','changCheckedAll']),
// 前面加入模块名shoppingCart
onSubmit(){
console.log("提交订单");
},
onClickEditAddress(){
console.log('修改地址');
},
},
}
分类页面刚进入就显示商品信息
created(){
this.$router.push({
name:'sub',
params:{
name:this.navList[0],
},
})
},
也就是在分类页面加载好后即向子路由发送网络请求拿到第一个分类商品中的数据
项目结构
- BE(back-end后端)
- bin 后端启动目录
- www
- email
- email.js(发送验证码)
- model
- index.js(配置连接数据库)
- public(默认的一些样式)
- routes
- index.js(公共的获取商品数据和轮播图)
- private.js(私有的需要登录后获取用户信息)
- user.js(登录与注册模块)
- views(默认配置视图)
- app.js(入口文件)
- config.js(密钥存放文件)
- package-lock.json(配置文件)
- package.json(三方包资源)
- bin 后端启动目录
- dist(打包文件存放)
- public (前端启动目录)
- favicon.ico(图标存放)
- index.html(前端主界面)
- src(前端资源存放)
- api(网络资源统一适配)
- constants.js(前端放送网络请求用到的接口)
- rotation.js(获取轮播图与商品模块)
- search.js(搜索模块)
- user.js(处理与用户信息相关模块)
- assets(存放静态资源)
- components (存放组件)
- app-nav-bar(同步返回通用组件)
- index.vue
- app-tab-bar(拿到路由中信息并处理)
- index.vue
- tab-bar (其他一些组件)
- index.vue(自定义插件)
- search.vue(搜索功能,除主界面使用)
- search-box.vue(搜索功能,主界面使用)
- tab-bar.vue (底部导航)
- app-nav-bar(同步返回通用组件)
- router(路由)
- index.js(路由模块)
- router.js(路由分配)
- store(仓库)
- modules
- shopping-cart.js(购物车逻辑处理模块)
- index.js(仓库配置)
- modules
- utils(工具模块)
- request.js(封装axios)
- vant-import.js(引入vant组件)
- views(视图模块)
- cart
- index.vue(购物车视图)
- category
- index.vue(商品分类左边)
- sub-category.vue(商品分类右边)
- detail
- index.vue(商品详情)
- home
- index.vue(主界面)
- login
- index.vue(登录与注册)
- mine
- changAvatar.vue(更改用户头像)
- index.vue(我的页面)
- not-found
- index.vue(路径错误是404界面)
- searchResult
- searchResult.vue(搜索结果页面)
- cart
- app.vue(主界面)
- main.js(入口配置文件)
- api(网络资源统一适配)
- babel.config.js(配置文件)
- jsconfig.json(JS配置文件)
- package-lock.json(配置文件)
- package.json(三方包资源)
- vue.config.js(vue配置文件)
移动端适配
直接通过PC端写的代码在移动端不同的设备上,布局会出现问题
总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
《前端工程师面试手册》电子稿文件。
前端面试题汇总