1.3数据接口设计
![img_5e654e0aab55cb4702a7c20b0dbe1ff3.png](https://i-blog.csdnimg.cn/blog_migrate/54434011f7772f73a6fcfaa0346cbd55.png)
2 预备知识储备
![img_a5872fca95e5efbb66eda9990d35641d.png](https://i-blog.csdnimg.cn/blog_migrate/835a0f79d80dd2d24ada883ff20a1e28.png)
2.1页面加载过程
![img_418712b3078dc738f8aa951537014ead.png](https://i-blog.csdnimg.cn/blog_migrate/11ec39acc2a28972817d5c2521c0e248.png)
![img_837f49cd3cddaa1428d0dd3b79050428.png](https://i-blog.csdnimg.cn/blog_migrate/6011c3c067b071b556c00aada9ee5f29.png)
![img_7e42c9c7966b317abbc2524f437663e8.png](https://i-blog.csdnimg.cn/blog_migrate/f1be9c980069d922538e8b29b2253610.png)
![img_dba73ed5c833f5fd4c368d9d37d8b999.png](https://i-blog.csdnimg.cn/blog_migrate/fde5dea821dda367a15d12456e92d96a.png)
![img_154ec4634f63cd8df686514de71d4579.png](https://i-blog.csdnimg.cn/blog_migrate/ed0ef33ff03132d08525303e628ed917.png)
![img_3178364e300becfd3b6e62dcfd9e659b.png](https://i-blog.csdnimg.cn/blog_migrate/df8712513168a5b02de3e28888fc9cf2.png)
2.5 本地存储
![img_66c0723b0c8304028e1b0b7d0ad2d987.png](https://i-blog.csdnimg.cn/blog_migrate/30dc02543eb1c5602228ce9d0dbebdc1.png)
![img_42df3f9ff48e32839bacd8cc5e0e2f81.png](https://i-blog.csdnimg.cn/blog_migrate/9988b26dbfd60eec4f260e4f1dc71324.png)
![img_91ecd94f929cffa9eae6814ce0b3fd80.png](https://i-blog.csdnimg.cn/blog_migrate/c57fdd351c9410d0678aa5fa8ee29881.png)
![img_b00df0578370d8aca13668f21ca90622.png](https://i-blog.csdnimg.cn/blog_migrate/722d26d3a2b0b0855c8eca84dddcb2ef.png)
浏览器执行此脚本即可查看 cookie
![img_f61f852a7a5aa506770c83aeb8ed6f45.png](https://i-blog.csdnimg.cn/blog_migrate/a93e3110502f7f3598a58d38cd414750.png)
![img_6fbbaaf199249f50657583787c04d5b4.png](https://i-blog.csdnimg.cn/blog_migrate/48bf8fc947ed94f8d0a4b00d286ab558.png)
自定义
![img_36bf5a61488a402c95fef92dfaadb9e0.png](https://i-blog.csdnimg.cn/blog_migrate/a14ed2a5d2bbea163b712dac3d867fd7.png)
自定义生效
修改 cookie
![img_839edd519e20cd1242d8299a4f5c3a12.png](https://i-blog.csdnimg.cn/blog_migrate/16bd562f0d5fac7199820db44f3f2dd5.png)
![img_bad36f7c5cfe52215f38131ec30f2f5f.png](https://i-blog.csdnimg.cn/blog_migrate/0f75b0aec3e7d8cbc382650ca1593922.png)
生效
删除 cookie
![img_0f4ce5f005ccab33941bdbf095e766c5.png](https://i-blog.csdnimg.cn/blog_migrate/bd71dd3d147b09a684da64f97f592be6.png)
有效期设置为以前的时间即可或者设成0
![img_29e208ab691f26f1f4cf2645bd805d3c.png](https://i-blog.csdnimg.cn/blog_migrate/2d068c5071cc69c8658aa3c680a743ad.png)
已经不存在 sss1234 的 cookie
![img_459d1a4b9ac6536be7a4890a5ba7f948.png](https://i-blog.csdnimg.cn/blog_migrate/e8e6f7a7fae2366c4668a600283198bb.png)
登录后,发现新增 jssessionID 字段的 cookie,属于 http-only, 用户端不可修改
![img_7c13899ae750ed4973addb87ddda7e59.png](https://i-blog.csdnimg.cn/blog_migrate/c7345f7d657ed7f555eda34d440cb45b.png)
发现并无此 cookie
![img_6d330a29ee8bc35e0774176dd8bdcf92.png](https://i-blog.csdnimg.cn/blog_migrate/4cf57d58be937df9b5975554ddb1850e.png)
查看具体的 response 信息
![img_9a665a0a3877192ba0ccce09c89d44d2.png](https://i-blog.csdnimg.cn/blog_migrate/17b9b00f1eab128924d653eddfb35a17.png)
替代 cookie
![img_453029da50478fb8fb4e1364b652bf3e.png](https://i-blog.csdnimg.cn/blog_migrate/51d74d8b61443feab3dfa6c872fdb698.png)
![img_a2ccd23154f0ced3731858a09d3a43aa.png](https://i-blog.csdnimg.cn/blog_migrate/c16b1e6cda568bde11c6629f55731827.png)
![img_cfa985f2f2b35a79f31a497ed43abb11.png](https://i-blog.csdnimg.cn/blog_migrate/8b7120607864349d81e2b9e1065f34db.png)
![img_505602358e86e627765addd2c61d09d9.png](https://i-blog.csdnimg.cn/blog_migrate/5deb39501aef090b485e97b197822d1a.png)
浏览器存储位置
![img_b5c196a939cd40bad8488a1f0cc7cb43.png](https://i-blog.csdnimg.cn/blog_migrate/3db9cb077db08f40c8e89e1bc87cfc38.png)
![img_f9f0f70a96b4bd6de76726b4b3cfe1ab.png](https://i-blog.csdnimg.cn/blog_migrate/8483b297de7162402f1ecd3ce140e77e.png)
3 前端框架的分析
![img_23d21eab9a9a2ef23ca9421d8a5ec189.png](https://i-blog.csdnimg.cn/blog_migrate/ddf941f74d9fe1556b481c73289ee466.png)
3.1 前端框架要解决的问题
![img_92a836821cf5d2f85abc6c70534b714d.png](https://i-blog.csdnimg.cn/blog_migrate/a3046229a9f8a265026d3c4fed1ae3c4.png)
![img_f36c1f384b4161de9b64368a952601ea.png](https://i-blog.csdnimg.cn/blog_migrate/81d3d44497a3f3d0bbc0611bfef3421c.png)
![img_37ae1ce224066f47c78ae44687e21121.png](https://i-blog.csdnimg.cn/blog_migrate/754565f355554903782ab0db8d83b6dd.png)
![img_83948e28012fa38695bdebc3ccd3a91f.png](https://i-blog.csdnimg.cn/blog_migrate/9a39473340cdefa47d18b72c33153069.png)
![img_f050d43613eae6317b911bfaf49cc1b3.png](https://i-blog.csdnimg.cn/blog_migrate/7c37da68de0122af542402f5580f0dcb.png)
3.2 三大框架对比
![img_8af067b726d0695629264c9ebaf79552.png](https://i-blog.csdnimg.cn/blog_migrate/43fc23070aa62ed99a444c8dca562859.png)
![img_13ce3a53e18fbb1728789999a33a40a5.png](https://i-blog.csdnimg.cn/blog_migrate/83e37b9eee3948cad0c12ec9c3d4c5de.png)
![img_d34e5c53cd147031610e2f0b4d3a1ad4.png](https://i-blog.csdnimg.cn/blog_migrate/8f110a97bb20d74c48f083a7e84042fe.png)
![img_34cb372e016a0c018e4f23a97755b663.png](https://i-blog.csdnimg.cn/blog_migrate/5e1938dfd80d1be69dc09044101c41aa.png)
![img_565bec063b89473fec600d106711ced0.png](https://i-blog.csdnimg.cn/blog_migrate/13b106520076f0363f57eca185a31dd9.png)
![img_e40ef23de330dd21876b0f9f9eb5d5b8.png](https://i-blog.csdnimg.cn/blog_migrate/6e53c4482c8fec3d7ba8a1c7aae4c7cd.png)
![img_324804869bee918da5b6eeb9993333f8.png](https://i-blog.csdnimg.cn/blog_migrate/97980ceee5559ad62d2d137f7e5ec450.png)
4.2 git的安装和项目的建立
![img_db9a71583aeb1c4fa21f877dce37d4de.png](https://i-blog.csdnimg.cn/blog_migrate/3301d58845a9bb2d4382b59573f95b2a.png)
![img_add366263342b206e206b8078b7fa290.png](https://i-blog.csdnimg.cn/blog_migrate/bb290262625b41922013483185831572.png)
![img_22ae992174655b10e46f3b510c54c9c5.png](https://i-blog.csdnimg.cn/blog_migrate/854c19a295be9f34987c5d2e93885873.png)
![img_7559e017e49f0744ec68d2759db30ea2.png](https://i-blog.csdnimg.cn/blog_migrate/4f3e0ff568f463f65033a753645cb666.png)
拉取代码到本地
4.3 node.js 及 yarn 安装
![img_9b597498dab2e4209e964e694621d940.png](https://i-blog.csdnimg.cn/blog_migrate/e5b8fa530ddc26ee3bddbc7343b17d6d.png)
![img_f124dd0583e4884d35efc5b19adf177e.png](https://i-blog.csdnimg.cn/blog_migrate/44d13a253f7d1573881a5c3b8475403b.png)
![img_4d573c763afd35afb4081b3b5c153470.png](https://i-blog.csdnimg.cn/blog_migrate/a1586e46190b3cc90b1861194c12294b.png)
![img_7ecb25666f621920c3d3e02f20e7694c.png](https://i-blog.csdnimg.cn/blog_migrate/22951aeeb8a0b26701f1f611751b563b.png)
使用 npm安装 yarn
![img_7daceb459a27559003a68a150d010e8c.png](https://i-blog.csdnimg.cn/blog_migrate/5a22db5b91502be352306605c0ee4fab.png)
yarn初始化项目
4.4 Webpack 配置
![img_03a0c58cd8121d64f0a7f46ed60b090a.png](https://i-blog.csdnimg.cn/blog_migrate/53c0b9724049373d435e60a8816bf868.png)
![img_7f00c05532af30694c39606aaa0fe76b.png](https://i-blog.csdnimg.cn/blog_migrate/9a093180bcfbe526f6d41a790a8c7965.png)
![img_18302917c49ca3e76f5e3a81f0c9b982.png](https://i-blog.csdnimg.cn/blog_migrate/cb66a8bd607a174a396a9a7cea49e17b.png)
![img_ee1430c4fbaa1dcc7a909a2fb74676e9.png](https://i-blog.csdnimg.cn/blog_migrate/e022bee3a28184642fbcc95e2d8a8479.png)
-
安装 Webpack
yarn add webpack@3.10.0 --dev直接查看中文官方文档
安装插件 yarn add html-webpack-plugin@2.30.1 --dev
为防止版本冲突,用此 webpack 打包
yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev
插件安装成功
yarn add babel-preset-react@6.24.1 --dev -
react 相关操作
官网安装指南
![img_5fbeea88b730bef290eebdd8bcba50eb.png](https://i-blog.csdnimg.cn/blog_migrate/17e8dbd6d2716faa64b4f9b7277e6858.png)
yarn add react@16.2.0 react-dom@16.2.0
![img_6d1885567867ec1994d6b493103ac522.png](https://i-blog.csdnimg.cn/blog_migrate/288a6d2d0a0a34a6ed2c5a17d5d7096f.png)
yarn add style-loader@0.19.1 css-loader@0.28.8 --dev
![img_7b7ce6ee3bb1391e1b822353eecaa64b.png](https://i-blog.csdnimg.cn/blog_migrate/25279897b119cd9da4823ae70431abd3.png)
yarn add extract-text-webpack-plugin@3.0.2 --dev
![img_986401c597de24ac78653ead5b2fa60b.png](https://i-blog.csdnimg.cn/blog_migrate/d675115f556005c6ae925f84e35aa17d.png)
yarn add sass-loader@6.0.6 --dev
![img_f0f77b013da79b9134e1d7669f43a0bd.png](https://i-blog.csdnimg.cn/blog_migrate/ab7964923c2662c93325804fe304b141.png)
yarn add node-sass@4.7.2 --dev
![img_a0ded979b568acebc856988c0b3c5bfd.png](https://i-blog.csdnimg.cn/blog_migrate/06bf1a24e623491e81fe3065fb97eed4.png)
yarn add file-loader@1.1.6 url-loader@0.6.2 --dev
![img_ba32b2d0cb2b07b415f8937282d68b2e.png](https://i-blog.csdnimg.cn/blog_migrate/294c19297001219975daa2e58994406e.png)
yarn add font-awesome
![img_6f891072610bea9595de6a26174b0969.png](https://i-blog.csdnimg.cn/blog_migrate/8c729ee8fcdd09283d2d1b65dec80c03.png)
yarn add webpack-dev-server@2.9.7 --dev
5 React 框架基础
![img_b4fab429cabac1826400d44b749febb6.png](https://i-blog.csdnimg.cn/blog_migrate/edf3a71016da78caa67190374ccf4c43.png)
![img_5c89af244aca7367969cee699b260564.png](https://i-blog.csdnimg.cn/blog_migrate/cee67e02a494550a458905ea316af449.png)
![img_f71cd625ea03350cc0c9f7e099bbbbf1.png](https://i-blog.csdnimg.cn/blog_migrate/894c063d1db800e3d87e9c246835096c.png)
![img_c1f23097f60d0cdb9fef486d26a103f2.png](https://i-blog.csdnimg.cn/blog_migrate/e02514208ac78b90ff953008ca106b4c.png)
![img_9e54cf6d8a82df1624f0478ecc313ca3.png](https://i-blog.csdnimg.cn/blog_migrate/c62d74afcfb26f1d09c3e93dd86898cd.png)
![img_218eeaea3350b2ec935ed73d12668752.png](https://i-blog.csdnimg.cn/blog_migrate/8112cb5413500c70d34dd4bfbfb3b838.png)
![img_49e0daa33e80e667024f4a9008fa3805.png](https://i-blog.csdnimg.cn/blog_migrate/5872839a17877e41cd72eda820f3ab80.png)
![img_a8bc94a08ca675bb010dc756944e629d.png](https://i-blog.csdnimg.cn/blog_migrate/7d07c5fc6b6b9e2bf995bbc5de553992.png)
![img_ae44a8bd575fabd207f172aed367596f.png](https://i-blog.csdnimg.cn/blog_migrate/045c27ea8439317ba65cfddc16f1ad7d.png)
![img_504cd0717936d1ff31963359bada79a2.png](https://i-blog.csdnimg.cn/blog_migrate/195e8d1296aba0789d90cc98822059eb.png)
yarn add react-router-dom@4.2.2
![img_5c55dfc2f7178b0920ef8d2db57089ba.png](https://i-blog.csdnimg.cn/blog_migrate/a658a7258825d0eb7da34c4d04f51fa5.png)
6 通用部分的开发
6.1 通用部分的开发
![img_2919da9ab15b3deab3e41dd8ae1a624d.png](https://i-blog.csdnimg.cn/blog_migrate/99c4995aa3456d912ef7be4b4ca21260.png)
![img_816e6f8766f67d4e79ce68aa7d8dc4b3.png](https://i-blog.csdnimg.cn/blog_migrate/df5600aaa4eb95ec3c3fea39293281fc.png)