## 前序：（程序人生的孤独）
入了程序员的生涯不知道自己的选择对不对，但对于青涩、稚嫩以至于说自己无法满足自己的生活 、无法支付起自己的生活费的我来说是一个对的选择......
### 回忆篇
那年炎热的夏天，我满怀憧憬、期盼以及好奇的走出了校园，对生活充满了无限的好奇，我毅然决然的离开自己生我养我的小山村来到了北京,过上了北漂的生活，家里的条件并不是很充裕，我带了三千yuan来到了魔力的北京，于是开始了我的北漂生活......
我写好了自己的简历，在各个平台开始找工作，但因为我是一个应届生，自己的机会并不是很多，简历投了上百份，但是收到回复的寥寥数几，因为我得无知，连仅有的几份邀请都被浪费了，那时对于我来如产生了巨大的压力，除去了自己的租房的qian，口袋里几近空空，几近放弃，回村。。。
#### 第一份程序员的工作
我内心是讨厌的，是不想就这样一事无成的回去，但现实就是很残酷的，对于生活的压力我无法再继续承受...
电话打通了，对面的是我的大学好基友，"喂.....怎么了？" , 我支支吾吾说"可不可以借点钱给我.."，电话的那头沉默了，过了一会说"咱们都刚毕业我也难"，听完后的我感觉无地自容，但紧接着又说"一千元，我只能拿出来这么多"，"可是我不知道这个钱什么时候能换上你...","没事你拿着把，你要继续不能这样就放弃了"....
一辈子的好兄弟！！！！！！！！！
我拿着这些买了泡面，在自己出租的房子里学习，做笔记，查资料，每天大约将近18个小时坐在电脑旁学习，就这样突击学习了一周把，我在网上看到了一家招聘信息，决然的投了简历过去，庆幸的是我...得到了面试的资格...经过自己一周的突击 我成功找到了月薪3k（北京）的工作。。
##### 公司工作
进入公司以切都是那么的陌生，对于教科书的无法快速的应用到工作中，不敢说话，不敢东张西望，就连上厕所都没有那么随意，因为我知道这个工作的来之不易
拿到任务，不知道怎么去开展实施开发，我感觉自己真的快要呆不下去了，真是压抑的很，感觉同事每个人都在嘲笑，（脸皮厚）的我就开始问了起来，不会的地方就去问，感恩同事们对我的关注，我慢慢的开始能够上手工作，很快使用期就过去了，我转正了~~无比的开心 （每天八点半到公司，凌晨一两点是我下班的时间，这些时间用来完成我得工作，之外的就是学习了，程序路上一直在进步~~~）,转正后的薪资涨了一点点。
###### 转折
我跳槽了~~离开了老东家，来到了一家做教育的公司，公司有自己的产品 APP H5 crm * 不同的环境收获都是不一样的
我被分配到了h5的项目组面临新的问题，技术栈太新我自己并不会//////////////////要命
一边学习一边工作，能力不够加班来凑，我又开始加班学习...
# ！！！important ==========Vue （由以往的dom驱动转变为数据驱动，不再操作dom，而是通过数据驱动试图，内部提供了统一管理数据的内置功能[Vuex],管理数据更为标准、统一化，并且提供了路由Api[Vue-router],生命周期不同阶段的callback）
## 1.虚拟dom (不是真实的Dom，但有dom的特性)
## 2.template模板语法
## 3.vue双向绑定 ()
## 4.diff算法
## 5.vue指令（v-if、、v-else、v-show、v-model...）==>(v-bind:)
## 6.vue-router 路由
## 7.Vuex
## 8.插槽solt
## (Vue最大模式改变数据驱动试图离不开内部的双向绑定)
what??什么是双向绑定？
# vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调;每个数据再修改时会自动调用setter 在获取它时会自动调用getter
## 1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者 2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数 3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
Vuex 数据统一管理 ：
## state 存放状态
## mutations state成员操作(同步)
## getters 加工state成员给外界
## actions 异步操作（dispatch） 异步
## modules 模块化状态管理
Vue-router:
## SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是:更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式。
路由守卫：
## router.beforeEach(to,from,next) to:即将进入的路由 from:即将离开的路由 next:执行成功的回调 //全局前置首位
## router.afterEach(to, from) 全局后置首位
## const router = new VueRouter({routes: [ {path: '/foo',component: Foo,beforeEnter: (to, from, next) => { // ... } } ]})//路由独享守卫
About seven month later... (crm)
## 项目架构
基于vue-cli脚手架进行创建(基础)、eslint规范代码格式跨域、设置(配置开发环境的跨域)、babelrc 编译es6脚本、路由设计、登录拦截、axios、api设计(服务端交互)、目录划分
组件化开发： 基于vue组件通信进行组件封装（父子 子父 同级 跨级）
1.全局scss的配置，自己开发了，_mixin，_variables 统一页面UI规范
2.通过postcss的autoprefixer自动处理浏览器对于css的兼容自动添加浏览器厂商前缀
3.通过postcss-px2rem自动做px到rem单位的转换
4.svg-sprite-loader处理svg图标文件，自动生成symbol图标
5.通过devServer.proxy设置代理处理跨域
6.目录规范的设计
7.vue组件开发的规范采用的是eslint，结合vue组件开发规则
### * 重点：
crm 管理系统离不开的是权限的划分 这也是重中之重的
#### 设计规则：
# 流程:登录获取登录权限拿到返回值token》动态渲染页面控制页面模块的显隐》通过token请求数据
登录功能：采用手机号以及验证码的方式 手机号：格式化输入格式，利用filter进行格式转换输出（xxx xxxx xxxx）
获取验证码：验证手机号码格式是否正确，确定按钮是否可点击，点击后变成倒计时状态
登录错误
登录成功：成功后通过replace跳转到对应成功的页面
路由权限：通过登录获取token，通过前端路由Vue-router的mate属性定义是否需要校验token权限，让后根据权限展示试图
个人信息:登录成功后获取：执行dispatch('user/login')在其内部，请求登录接口，登录成功后请求用户信息接口
个人中心页面展示：通过vuex读取用户信息,浏览器强制刷新数据不会丢失：浏览器刷新会导致vuex的数据重新初始化用户信息就不显示了，在App.vue中判断token是否存在，如果存在那么就执行用户信息的接口请求
登录接口:接收用户手机号，验证码，判断用户传递的验证码是否和session中保存的一致，判断用户是否存在数据库，如果存在将用户信息利用jsonwebtoken生成token，并且使用cookie发送到用户客户端
用户信息接口：利用中间件authority验证token的正确性，如果错误，直接抛出401的错误状态，如果正确解析token并且扩展到当前请求的context上，自定义userInfo字段，在用户信息接口中只需要输出userInfo即可
数据存储：利用Vuex作为数据的集中管理器，mutation同步处理state数据 action异步处理state数据 页面使用vuex import 引入{mapState，mapMutations}或者使用store.commit('mutation中的方法') 异步提交action $store.dispatch('action中的方法名')
About four month later....(hahahahha best like Wx小程序)
# 小程序：
## 优势：
微信小程序省内存还能直接用 直bai接在微信中使用，减少了下载APP耗费流量占用内存的问题，这是许多用户认为微信小程序最方便的地方。一些手机内存只有16G甚至8G的用户，并不愿意在手机中下载许多并不常用的APP，但偶尔需要使用时又觉得不太方便，微信小程序的出现在很大程度上被看做是这类用户的福音。
1、对用户使用上来说，确实方便，要用的时候打开，不用的时候关掉，即用即走。这点比需要下载，还要占用手机内存空间的APP要好。
2、主要的样式代码都封装在微信小程序里面，所以打开速度比普通的H5要快，接近原生APP。
3、可以调用比H5更多的手机系统功能来进行开发，例如GPS定位、录音、拍视频、重力感应等，能开发更丰富的使用场景。
4、在安卓手机上可以添加到手机桌面，看上去跟原生APP差不多，但仅限安卓手机，iphone就不行了。
5、运行速度跟APP差不多，也能做出很多H5不做到的功能，开发成本跟H5差不多，相对来说开发成本比APP要低。
## 劣势：
微信小程序只拥有APP部分功能 微信小程序可谓是“程序APP的简化版”，也就是说，它并不能完全涵盖APP开发的全部内容。有开发者表示，微信对小程序的内存大小是有限制的，大概在1兆左右，因此只能保留最基础的内容。对于手机内存小、只需要使用微信小程序基础功能的用户来说，无需下载APP，在小程序中完成相关动作即可；不过对于想要完整体验的用户来说，依然需要下载APP完成其他功能。
1、微信小程序只有1M的大小，这样导致无法开发大型一些的小程序。所以目前你会看到很多小程序真的很小很简单。
2、小程序的技术框架还不稳定，开发方法时常有修改，导致短时间内经常要升级维护，或许这能解析为什么小程序只能1M大小，怕部署太大型的项目会出大问题。
3、不能跳转外链网址，所以间接影响了小程序的开放性。也可能是想限制其他支付方式或功能接入（或许是我想多了）。
4、不能直接分享到朋友圈，哎呀，少了一个重要的推广方式。
5、需要像APP一样审核上架，这点比HTML5即做即发布要麻烦些
## 实现需求：以H5交互需求达到雷同 功能大体相同 （登录————(1)首先会调起小程序内部的登录功能产物“session_key”(2)通过拿到的Sessiong_key字段以及登录名密码调起后台java接口进行校验拦截》登录成功跳转小程序首页，反只抛出异常）
## 设计规则：根据H5需求，ui高保真为开发标准， 与后台同学一起定义接口 规则字段
开发搞起：冲冲冲......
基于微信开发这文档 开撸
采用原生小程序开发，依据开发者文档，使用编辑器为 微信开发者工具（现在太多例如 Taro-react编码格式及生命周期、mpVue-vue、ivew开发模式）
目录结构：pages、images、utils、app.js、app.json、app.wxss
app.js:小程序逻辑（必存）
app.json:小程序公共配置（必存）====路由、导航
app.wxss:全局样式（非必存）
pages:存放页面 每个页面存在 wxml wxss js json
总结 ：总体感觉小程序还是比较easy的开发周期三周，感觉还可以更快点，下次再接再励！！！
# 服务端渲染
小菜我之后接手了服务端渲染项目，是H5的SEO，说实话，小菜是第一次接触，不过恰巧的是用的是Vue NUXT架构，虽然架构与Vue有点区别，但是换汤不换药，
上手体验还是很不错的 ， 但是在这个过程中小菜是踩了很多坑，
谈谈服务端渲染：
简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序
右图页面使用了服务端渲染，当请求user页面时，返回的body里已经有了首屏的html结构，之后结合css显示出来
## 优势：
1.更利于SEO。
不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本（Google除外，据说Googlebot可以运行javaScript）。使用了React或者其它MVVM框架之后，页面大多数DOM元素都是在客户端根据js动态生成，可供爬虫抓取分析的内容大大减少(如图一)。另外，浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML，网络爬中就可以抓取到完整页面的信息。
2.更利于首屏渲染
首屏的渲染是node发送过来的html字符串，并不依赖于js文件了，这就会使用户更快的看到页面的内容。尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。
这部分参与的并不是很深入，因为种种因素，随之我离开了少东家...
# 转折二
离近年底，当时公司的需求不是很大，我意外之下接了个短期项目，是被外派到大场的开发，大厂就是大场，氛围就是不一样，感觉每个人都是大佬，抱着学习的态度 我开始工作了....
第一个项目是一个杀毒软件包的后台管理，说到了后台管理我还是很不陌生的，有着从0到1的过程，也有过自主开发的经历，觉得是没啥问题，拿到项目后发现架构已经成形了，而且大拿造了好多轮子，但是我就有些看不多，好多轮子根本用不上，很是奇怪，后来知道是php老大哥迁移过来的，但我发现那些轮子很是精华，偷偷的自己学了下来
例如：
## 文件上传组件
//谈谈我对组件封装的思路
1.首先遇到组件封装的时候，先去考虑它要怎么使用，而不是考虑代码
2.分析完怎么用了后，那么我们就会利用组件间的通讯，将影响到组件使用的参数通过父组件的调用传入进来
3.搞带码。。
## 项目架构：
杀毒软件管理后台基于Vue脚手架3.0进行搭建项目，项目配置的一些文件，例如:
### utils:存放js方法全局的公用方法，例如 setCookie,getCookie,本地存储 validate=正则方法 scroll-to=滚动方法...
### store:Vuex一套
### styles:全局样式 主题颜色
### filler:过滤
大体的回顾就是这些，详细的还在云盘待整理，慢慢的都会在掘金上出现，排版是以MD文档直接copy来到时间紧迫 抱歉~~~ 干饭！！
