本文是一个关于前端项目的总结，详细介绍了项目结构、配置文件、遇到的问题与解决方案，包括前端路由、状态管理、适配策略等。作者分享了开发过程中时间管理、问题解决和与后端交互的经验，并探讨了自适应布局的实现。此外，还提到了前端面试的准备策略，强调了基础知识、项目经验和表达技巧的重要性。
│ ├── js # 自己写的 js，里面各种工具类方法等
│ ├── mixins # 混合
│ ├── router # 路由
│ ├── vuex # 状态管理
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── static # 静态资源，一般放 img
├── theme # 主题文件，修改的 Element-UI 主题
├── .babelrc # babel 编译配置
├── .editorconfig # 代码格式
├── .gitignore # Git 提交忽略的文件配置
├── .postcssrc.js # 转换 css 的工具配置文件
├── element-variables.css # Element 全局定义的变量，不明白为啥放这儿
├── index.html # 主页模板
├── package-lock.json # 用来锁定依赖的版本号（NPM 自动生成）
├── package.json # 项目基本信息
└── README.md # 项目介绍
作者：API搬运工
来源：CSDN
原文：https://blog.csdn.net/qq_29091239/article/details/83791200
版权声明：本文为博主原创文章，转载请附上博文链接！
项目开始时间 2019年2月15日
完成时间 2019年4月10号
项目现状 目前完成了80%
现状及问题点
明确的预期和目的
总结：
1期间遇到问题，自己网上查资料，最终解决；
去百度搜索的时候，很多情况搜不到的原因是自己没有用专业的语句，口语化的语句很少能搜到答案，有时候问一问别人或许不能直接解决问题，但是却给了我们另一个思路去搜索，这样说不定就能找到答案
2前一天晚上想好第二天要做的内容，划分好时间，可以提高开发效率
娱乐系统
web前端项目总结
连WiFi donouse
浏览器打开 http://192.168.188.9/nwebapp/连网
成功以后连接 http://192.168.188.14:8080/
1、首先要说我最近在做什么？
2、然后说遇到什么问题？
3、我通过什么途径，通过什么办法，尝试去解决我所遇到的问题，有哪一部分已经解决了，从中学到了什么？
4、最后说我遇到的这些问题中哪些方面还没有解决，希望老师在哪些方面点拨一下。
对于老板交代的事情，先要问清楚是否紧急？有没有期限要求？然后多想一下，站在老板的角度思考该怎么做才是最妥当的。
跨域问题：
适配
什么是自适应布局？
自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。简单的来说自适应就是让同一个页面自动适应不同大小的设备，从而解决为不同设备提供不同版本的页面问题。
如何实现？
当时考虑自适应时候，还有一个手机淘宝的lib-flexible，因为淘宝那个适配得刷新一下才能看到效果，我觉得体验很不好，所以果断放弃，采用PostCSS插件
前后端交互：（门是圆的，走进去）
前后端工程师需要约定交互接口，实现并行开发，开发结束后需要进行独立部署，前端通过ajax来调用http请求调用后端的api。前端只需要关注页面的样式与动态数据的解析&渲染，而后端专注于具体业务逻辑。
请求方式：
1、浏览器发送请求
2、直接到达html页面（前端控制路由与渲染页面，整个项目开发的权重前移）
3、html页面负责调用服务端接口产生数据（通过ajax等等，后台返回json格式数据，json数据格式因为简洁高效而取代xml）
4、填充html，展现动态效果，在页面上进行解析并操作DOM。
工作不足
经验总结:
拿到需求到代码实现经历了怎样的过程？
1、站在用户角度使用
拿到ui设计稿，把所有的页面先点一点，大概了解有哪些功能？在这一步，我们可以参考其他成熟的软件，如果有类似的功能的话，就去点一点，了解每个操作。知道新功能的基本流程是哪些。
2、站在技术角度
要思考自己上一步都做了些什么。每个功能的要点在哪里。实现的难点在哪里。可能会发生什么样的情况，类似于if…else方式的思考。这一步，我们作为技术，考虑的是如何实现
3、具体实现
1）可以用写注释的方式，把每个步骤的注释都提前写好，然后开始撸码
2）使用百度脑图，把这个功能从头捋一遍。
按照“是什么、为什么、怎么做、有什么用”的思路，首先，简述你负责的项目，让别人有所了解，接着，你在项目中是怎么去操作的，为什么要这么做，其次，这个项目的做法起到什么用，有什么值得借鉴的地方、有什么需要改进的地方。基本按照这个思路，“骨”和“肉”就出来了。最好是分点表达，凸显逻辑，避免冗杂。
怎么做的？
房子是长的还是扁的，材料，这个房间是干嘛的，门在哪里，不需要了解混凝土，木头
怎么分解应对需求的，对应到技术，分模块，框架搭起来，
按照先静态页面再添加效果，最后写逻辑的思路
登录页面
业务逻辑：
不同的项目有不同的功能，不同的功能需要不同的实现，实现这些核心功能的代码就叫业务逻辑
一旦要扩展功能就不用做太多的改动
项目中用到的技术：
HTML，CSS，JS，cube-ui，Vue(相关：vue-cli,vue-router,vuex，vue-awesome-swiper)，swiper，axios ,postcss
登录（分在线和离线）
在线登录 ：填手机号，验证码，座位号，安全须知
离线登录 ：填手机号，座位号，安全须知
如何控制在线和离线的页面展示不一样？
首先在线和离线页面元素的区别：
在线页面有验证码，底部显示在线
离线页面有验证码，底部显示离线
v-show=“online” online是true显示在线，false显示离线
初始化设置online是false，也就是默认不显示
vue实例被生成后调用created函数
请求接口：/api/4g/status
如果返回状态200，即网络连接成功，就让online=true，显示在线
否则显示离线
点登陆会先判断是在线状态还是离线，
如果是在线状态
在线状态逻辑判断：
填手机号
1 验证手机号码输入框，分别判断以下情况并作出弹窗警告
(1：是否为空
(2：是否为11位数字
(3：是否是13，15, 17, 18开头的正确手机号码
2 输入框右边添加一个获取验证码的按钮，默认为可点击状态，
点击后变灰显示30s后重新获取，开启一个定时器setInterval，然后发送一个请求给后台带上刚才的手机号，这时后台生成一个随机的验证码保存起来，然后通过短信接口把这个验证码发送到这个手机号中。
收到短信填入验证码
3 验证验证码的输入框，分别判断以下情况并作出弹窗警告
1：是否为空
2：是否为6位数字
填入座位号
4 验证座位号的输入框，分别判断以下情况并作出弹窗警告
1：是否为空
2：只能字母或者数字
勾选娱乐系统安全须知
如果上面的条件有一个不正确，点击都会有错误提示，只有满足设定的条件，才能够成功登录
离线状态
输入正确的手机号验证码，勾选须知点登录，把这些数据作为参数传给后台，请求通过即可跳转主页
在登录页面输入手机号和座位号，通过localstorage传给后面的每一个页面
座位号在机上升舱，呼唤铃，餐食这里去获取，获取方式：父组件传值给子组件
难点：
上传文件展示到页面
呼唤铃：
1点击种类，会显示不同的效果，可以切换上面的图片和价格，
2从前台传来的座位号可以编辑修改提交
这里我把呼唤铃这部分代码从main页面拿出来重新定义了一个组件
需求： 点击呼唤铃弹框类似淘宝界面，点击右上角X 关闭
点击种类，会显示不同的效果，可以切换上面的图片和价格，
1点击种类会显示不同的样式，这里我做了一个判断:class=“{orange:i === index}”
i初始是0，i=0表示选中第一个，i=1表示选中第二个
specificationBtn: function (item, index) {
this.i = index // 点击选中
this.description = item.description
this.type = item.type
this.thumbUrl = item.thumbUrl
// console.log(index)
// console.log(item.type)
},
点击呼唤铃
这里的展示隐藏 用的是v-if=“is_sku” 默认false 关闭即is_sku = false
is_sku=true显示蒙层，请求接口/api/callbell/list，把获取到的数据存到数组skuArr里面挂载在实例上面，然后再渲染在页面，为了让一开始默认选中第一个，我们去获取数组里面的第一个元素的图片，种类和详情
2座位号是从登陆页面localstorage传值过来的，然后在main页面接收，再通过父组件给子组件传值:seat=this.userInfo.seat，prop的形式接收，挂载在data上，赋值给newseat: this.seat，然后绑定到页面v-model=“newseat” ，编辑以后提交this. e m i t ( ′ g e t C a l l e d ′ , t h i s . n e w s e a t ) / / 事 件 触 发 后 ， 自 动 触 发 g e t C a l l e d 事 件 3 数 量 的 加 减 获 取 最 终 的 结 果 提 交 ： t h i s . n e w n u m = t h i s . emit(‘getCalled’, this.newseat) //事件触发后，自动触发getCalled事件 3数量的加减获取最终的结果提交：this.newnum = this. emit(′getCalled′,this.newseat)//事件触发后，自动触发getCalled事件3数量的加减获取最终的结果提交：this.newnum=this.refs.num.value
（）
（ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：）
侧滑菜单
需求：点击菜单会出现一个黑色遮罩，上面一个长的列表
这里用到了vuex ,它是什么？
官网的解释它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，也就是在组件外部管理状态
我在store里面定义一个常量，
const state = {
isShow: false
}
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
所以在这个mutation里面
规定了
showBar(state) {
state.isShow = true
},
hideBar(state) {
state.isShow = false
}
Action 提交的是 mutation，而不是直接变更状态。
const actions = {
showSideBar({
commit
}) {
commit(‘showBar’)
},
hideSideBar({
commit
}) {
commit(‘hideBar’)
}
}
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
const getters = {
isShowMethod(state) {
return state.isShow
}
}
计算属性：
总结一下：
我们给isShow一个默认的状态让他是false，false是隐藏，true是显示
在mutation里面给他设置规则，什么样的情况isShow是false，什么情况是true
在action里面去提交这两种情况,然后使用 this. s t o r e . d i s p a t c h ( ′ x x x ′ ) 分 发 在 g e t t e r s 给 他 定 义 一 个 函 数 去 调 用 这 个 i s S h o w 我 们 在 页 面 是 设 置 v − s h o w = " i s R e l l y S h o w " ， 是 否 展 示 就 要 看 计 算 属 性 t h i s . store.dispatch(‘xxx’) 分发 在getters 给他定义一个函数去调用这个isShow 我们在页面是设置v-show=“isRellyShow”，是否展示就要看计算属性 this. store.dispatch(′xxx′)分发在getters给他定义一个函数去调用这个isShow我们在页面是设置v−show=“isRellyShow”，是否展示就要看计算属性this.store.getters.isShowMethod最后我们看到，这个返回的是false，所以就是隐藏
因为我们要实现的效果是点击旁边，让他隐藏，这也就解释了一开始为什么要给他赋值是false
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
正体系化！**
[外链图片转存中…(img-9j0fcEi7-1712317780025)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
