前端项目总结与分享

两个月时间，项目大概已经完成了80%
领导让我总结总结，做一个技术分享准备一个PPT，一个小时

然后给我的感觉就是头大_-

网上百度一下大神是怎么分享的

前端技术分享给非技术的人？
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）使用百度脑图，把这个功能从头捋一遍。

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

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

怎么分解应对需求的，对应到技术，分模块，框架搭起来，
按照先静态页面再添加效果，最后写逻辑的思路

登录页面

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

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

项目中用到的技术：
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.$emit{(}^{\prime }getCalle{d}^{\prime },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.$store.dispatch{(}^{\prime }xx{x}^{\prime })分发在getters给他定义一个函数去调用这个isShow我们在页面是设置v-show="isRellyShow"，是否展示就要看计算属性this.$store.getters.isShowMethod最后我们看到，这个返回的是false，所以就是隐藏
因为我们要实现的效果是点击旁边，让他隐藏，这也就解释了一开始为什么要给他赋值是false

遮罩及上面的内容样式
遮罩： 宽高100% 固定定位，颜色rgba(0, 0, 0, 0.5) 上下左右都0
遮罩内容： 宽自定义 高100% 固定定位，颜色rgb(0, 50, 116) 上下左右都0
保证内容的z-index比遮罩大，遮罩的比原页面的大

动画：页面从右往左划是这样的
transform: translate(286px, 0px);
页面从左往右划是这样的
transform: translate(-286px, 0px);
我的行程页面
小圆点和虚线怎么来的，用了一个div设置了宽高，让他border-radius:50%就变成圆了，然后虚线是设置了伪类，整体是ul ，每一截就是一个li，高度固定，左边的时间用了绝对定位，相对于每一个li，让他距离顶部45%。

收获：
我是有点畏难的，面对不会的，就想去逃避，在不断学习中我总结出了，要多去查找相似的案例，去学习一些ui框架里面类似的样式，看看别人怎么写的然后照猫画虎，写出来就觉得也不是那么难

在遇到问题最多的情况是去找度娘，但是有时候会因为自己的专业术语不够准确，往往搜不到想要的答案，这时候问问前辈，就会发现不一样的思路或者专业名词，然后再顺着这个思路去找，总是可以解决的。