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

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）使用百度脑图，把这个功能从头捋一遍。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190415154 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源徽信搜索公众号【编程进阶路】 155467.png)

按照“是什么、为什么、怎么做、有什么用”的思路，首先，简述你负责的项目，让别人有所了解，接着，你在项目中是怎么去操作的，为什么要这么做，其次，这个项目的做法起到什么用，有什么值得借鉴的地方、有什么需要改进的地方。基本按照这个思路，“骨”和“肉”就出来了。最好是分点表达，凸显逻辑，避免冗杂。

怎么做的？

房子是长的还是扁的，材料，这个房间是干嘛的，门在哪里，不需要了解混凝土，木头

怎么分解应对需求的，对应到技术，分模块，框架搭起来，

按照先静态页面再添加效果，最后写逻辑的思路

登录页面

业务逻辑：

不同的项目有不同的功能，不同的功能需要不同的实现，实现这些核心功能的代码就叫业务逻辑

一旦要扩展功能就不用做太多的改动

项目中用到的技术：

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

前端项目总结与分享（PPT整理）相关推荐

技术分享PPT整理（三）：网页渲染流程
在我刚开始学习Web开发的时候,一直有个疑问--我写出的代码究竟是在什么时候发生作用的呢?是不是每次我修改代码网页都随之变化了?当然,现在来看这肯定是一个错误的想法,经过一段时间的工作和学习后,代码到 ...
nginx怎么部署php项目,nginx怎么正确部署前端项目
目的: nginx部署打包成为dist的前端项目 (学习视频分享:php视频教程) 相关知识:docker 安装与使用 docker pull nginx docker run --restart=o ...
GitHub 上100个优质前端项目整理，值得收藏！
作者:小明小明长大了来源:https://www.jianshu.com/p/72ca8192f7b8 这里整理收集了 GitHub上几乎所有优秀的前端项目,包括工具,优质资源,测试工具,框架, ...
GitHub 上100个优质前端项目整理，非常全面！
点击"开发者技术前线",选择"星标" 在看|星标|留言, 真爱作者:小明小明长大了来源:https://www.jianshu.com/p/72ca8 ...
【Github分享】GitHub 上值得收藏的100个精选前端项目！
引言整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者简书上文章会持续更新,版权归原作者所有. 最新更新 codepen 一个在线编辑前端项目的网站,其中有一些 ...
【华为云技术分享】如何度量前端项目研发效率与质量（上）
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.欢迎来这里和我们一起打造优雅高效的人机设计/研发体系. 官方网站:de ...
基于React和fabricjs开发的在线名片、海报设计器，大前端项目在线图片编辑器源码分享
基于React和fabricjs开发的在线名片.海报设计器,大前端项目在线图片编辑器大家好我是伟伟权现在我给大家介绍一个我的前端项目这是一个名片设计器它是使用react加fabric js进行 ...
精选 GitHub 值得收藏的100个前端项目
作者:小明小明长大了博客:https://www.jianshu.com/p/72ca8192f7b8 引言整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者 ...
GitHub上值得收藏的100个精选前端项目！
引言整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者简书上文章会持续更新,版权归原作者所有. 最新更新 codepen 一个在线编辑前端项目的网站,其中有一些 ...
建议收藏：GitHub 上值得收藏的100个精选前端项目！
作者:小明小明长大了来源:https://www.jianshu.com/p/72ca8192f7b8 引言整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习, ...

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

前端项目总结与分享（PPT整理）相关推荐

最新文章

热门文章