前端项目总结与分享（PPT整理）(1)

---

ppt https://v.youku.com/v_show/id_XMzE3NzgwMTky.html

论文 https://v.qq.com/x/page/q0509o0ylb8.html

目录：

项目简介：

项目功能：

展示：

问题与难点：

总结，思考：

综述：

该web项目为娱乐系统，采用的技术主要有：vue cube-ui axios等，数据库：mysql, 开发工具VSCode 历时2个月完成。

1项目简介：

---

本项目需求一个包括

几大模块，几个功能，考虑到头部组件要复用，所以我选了vue-cli

从登录说起，

校验 用户名不存在，密码错误用什么做的

我的页面

项目答辩：

这一部分是什么功能，怎么做的

https://v.qq.com/x/page/l0390wnn5p6.html

总结

---

1看问题的角度，不能总以自己的思维去寻找答案，要多用专业名词，有时候请教前辈会让你换一个思路去思考问题，适当的转换思维往往离解决问题更进一步

2在敲代码的过程中，要慢慢学会思考每一步的流程，必要的话可以使用思维导图记下每一个步骤，然后再写代码会让你大脑思路变得清晰，并且更加专注。

3在遇到不会的问题，学会了要及时总结，并且举一反三，然后再运用到项目中，

在处理问题时候不会再像以前那样毫无头绪，学会一步一步去盘查错误。

不要依赖于别人的文章，学会看官方文档，要有质疑的思维

4这段时间的学习我也看了不少的文档和视频，对自己的基础也在查缺补漏，确实有了很大的进步，在框架的运用上面明显感觉得心应手了不少，我希望毕业以后，系统的去看一些相关书籍，对一些专业知识的原理能做深究，不只是做到会用，还要知道为什么，怎么用更好。

代码目录结构

|–node_modules 依赖的模块包

|–public

|–favicon.ico 浏览器最上面的小图标

|–index.html

|–src

|–assets 存放所以的静态资源，包括图片

|–images

|–components

|–cart 购物车页

|–cate 商品列表页，商品详情页

|–center 个人中心，注册登录

|–com 公共模块

|–header.vue 头部

|–loading.vue 加载

|–sidebar.vue 导航侧栏

|–swiper.vue 轮播

|–jam.js 公共功能函数

|–localDB.js localStorage本地存储

|–page 首页

|–Hello.vue

|–static 本地数据模拟请求（需放static目录下）

|–data

|–cart.json

|–cate.json

|–index.json

| .gitkeep

|–test

│ .babelrc

│ .editorconfig

│ .eslintignore

│ .eslintrc.js

│ .gitignore

│ index.html

│ package.json

│ README.md

my-project

├── .idea # 这个是编辑器生成的

├── build # Webpack 配置文件放在这里

├── config # Vue 基本配置文件放在这里

├── node_modules # 第三方依赖

├── src # 项目源码（核心文件）

│ ├── assets # 资源文件（js, css, scss）

│ ├── components # 所有组件

│ ├── 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：是否为空

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-v3NFCdCc-1715907433157)]

[外链图片转存中…(img-ZJyf34qQ-1715907433157)]

[外链图片转存中…(img-lVz9WCQv-1715907433158)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！