从零开始的电商后台世界(更新 ing)

简介: 1.3数据接口设计2 预备知识储备2.1页面加载过程2.

1.3数据接口设计

img_5e654e0aab55cb4702a7c20b0dbe1ff3.png

2 预备知识储备

img_a5872fca95e5efbb66eda9990d35641d.png

2.1页面加载过程

img_418712b3078dc738f8aa951537014ead.png

img_837f49cd3cddaa1428d0dd3b79050428.png

img_7e42c9c7966b317abbc2524f437663e8.png

img_dba73ed5c833f5fd4c368d9d37d8b999.png

img_154ec4634f63cd8df686514de71d4579.png

img_3178364e300becfd3b6e62dcfd9e659b.png

2.5 本地存储

img_66c0723b0c8304028e1b0b7d0ad2d987.png

img_42df3f9ff48e32839bacd8cc5e0e2f81.png

img_91ecd94f929cffa9eae6814ce0b3fd80.png

img_b00df0578370d8aca13668f21ca90622.png
浏览器执行此脚本即可查看 cookie

img_f61f852a7a5aa506770c83aeb8ed6f45.png
img_6fbbaaf199249f50657583787c04d5b4.png
自定义

img_36bf5a61488a402c95fef92dfaadb9e0.png
自定义生效

修改 cookie


img_839edd519e20cd1242d8299a4f5c3a12.png

img_bad36f7c5cfe52215f38131ec30f2f5f.png
生效

删除 cookie


img_0f4ce5f005ccab33941bdbf095e766c5.png
有效期设置为以前的时间即可或者设成0

img_29e208ab691f26f1f4cf2645bd805d3c.png
已经不存在 sss1234 的 cookie
img_459d1a4b9ac6536be7a4890a5ba7f948.png

登录后,发现新增 jssessionID 字段的 cookie,属于 http-only, 用户端不可修改


img_7c13899ae750ed4973addb87ddda7e59.png
发现并无此 cookie

img_6d330a29ee8bc35e0774176dd8bdcf92.png
查看具体的 response 信息
img_9a665a0a3877192ba0ccce09c89d44d2.png
替代 cookie

img_453029da50478fb8fb4e1364b652bf3e.png

img_a2ccd23154f0ced3731858a09d3a43aa.png

img_cfa985f2f2b35a79f31a497ed43abb11.png

img_505602358e86e627765addd2c61d09d9.png
浏览器存储位置
img_b5c196a939cd40bad8488a1f0cc7cb43.png

img_f9f0f70a96b4bd6de76726b4b3cfe1ab.png

3 前端框架的分析

img_23d21eab9a9a2ef23ca9421d8a5ec189.png

3.1 前端框架要解决的问题

img_92a836821cf5d2f85abc6c70534b714d.png

img_f36c1f384b4161de9b64368a952601ea.png

img_37ae1ce224066f47c78ae44687e21121.png

img_83948e28012fa38695bdebc3ccd3a91f.png

img_f050d43613eae6317b911bfaf49cc1b3.png

3.2 三大框架对比

img_8af067b726d0695629264c9ebaf79552.png

img_13ce3a53e18fbb1728789999a33a40a5.png

img_d34e5c53cd147031610e2f0b4d3a1ad4.png

img_34cb372e016a0c018e4f23a97755b663.png

img_565bec063b89473fec600d106711ced0.png

img_e40ef23de330dd21876b0f9f9eb5d5b8.png

img_324804869bee918da5b6eeb9993333f8.png

4.2 git的安装和项目的建立

img_db9a71583aeb1c4fa21f877dce37d4de.png

img_add366263342b206e206b8078b7fa290.png

img_22ae992174655b10e46f3b510c54c9c5.png

img_7559e017e49f0744ec68d2759db30ea2.png
拉取代码到本地

4.3 node.js 及 yarn 安装

img_9b597498dab2e4209e964e694621d940.png

img_f124dd0583e4884d35efc5b19adf177e.png

img_4d573c763afd35afb4081b3b5c153470.png

img_7ecb25666f621920c3d3e02f20e7694c.png
使用 npm安装 yarn

img_7daceb459a27559003a68a150d010e8c.png
yarn初始化项目

4.4 Webpack 配置

img_03a0c58cd8121d64f0a7f46ed60b090a.png

img_7f00c05532af30694c39606aaa0fe76b.png

img_18302917c49ca3e76f5e3a81f0c9b982.png

img_ee1430c4fbaa1dcc7a909a2fb74676e9.png
  • 安装 Webpack


    img_9349e8bee23b4058b7635d07278d73de.png
    yarn add webpack@3.10.0 --dev

    直接查看中文官方文档


    img_575fa9e855f8bf8d30f5efc013233f12.png

    img_be8a9ff63aecc8bb1cae6ba8d4e13057.png
    安装插件 yarn add html-webpack-plugin@2.30.1 --dev

    为防止版本冲突,用此 webpack 打包
    img_280efa4b9977b75335c5c9b1453ce83d.png

    img_3de8be719ae4d26900b2f274d0de3f23.png
    yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev

    img_02bce702fd96aa31ab7d9dbc87bcf5ff.png
    插件安装成功

    img_f9a353831ba82da02f48ca5d511e1f81.png
    yarn add babel-preset-react@6.24.1 --dev
  • react 相关操作


    img_76a59779cb82dd1707f416b0c574263c.png
    官网安装指南
img_5fbeea88b730bef290eebdd8bcba50eb.png
yarn add react@16.2.0 react-dom@16.2.0
img_6d1885567867ec1994d6b493103ac522.png
yarn add style-loader@0.19.1 css-loader@0.28.8 --dev

img_7b7ce6ee3bb1391e1b822353eecaa64b.png
yarn add extract-text-webpack-plugin@3.0.2 --dev

img_986401c597de24ac78653ead5b2fa60b.png
yarn add sass-loader@6.0.6 --dev

img_f0f77b013da79b9134e1d7669f43a0bd.png
yarn add node-sass@4.7.2 --dev

img_a0ded979b568acebc856988c0b3c5bfd.png
yarn add file-loader@1.1.6 url-loader@0.6.2 --dev

img_ba32b2d0cb2b07b415f8937282d68b2e.png
yarn add font-awesome

img_6f891072610bea9595de6a26174b0969.png
yarn add webpack-dev-server@2.9.7 --dev

5 React 框架基础

img_b4fab429cabac1826400d44b749febb6.png

img_5c89af244aca7367969cee699b260564.png

img_f71cd625ea03350cc0c9f7e099bbbbf1.png

img_c1f23097f60d0cdb9fef486d26a103f2.png

img_9e54cf6d8a82df1624f0478ecc313ca3.png

img_218eeaea3350b2ec935ed73d12668752.png

img_49e0daa33e80e667024f4a9008fa3805.png

img_a8bc94a08ca675bb010dc756944e629d.png

img_ae44a8bd575fabd207f172aed367596f.png

img_504cd0717936d1ff31963359bada79a2.png
yarn add react-router-dom@4.2.2

img_5c55dfc2f7178b0920ef8d2db57089ba.png

6 通用部分的开发

6.1 通用部分的开发

img_2919da9ab15b3deab3e41dd8ae1a624d.png

img_816e6f8766f67d4e79ce68aa7d8dc4b3.png

6-2 通用布局的开发(1)

目录
相关文章
|
1月前
|
Go
区域代理分红商城系统开发指南教程/步骤功能/方案逻辑/源码项目
The development of regional proxy dividend distribution mall system involves multiple aspects such as proxy dividend function and electronic mall system development. The following is an overview of the steps for developing a regional agent dividend distribution mall system
|
1月前
|
安全
哈希竞猜游戏系统开发玩法详情/功能步骤/需求设计/流程方案/源码程序
Developing a hash guessing game system can provide a fun gaming experience. The following are possible gameplay and rules for your reference:
|
7月前
|
JavaScript Java 关系型数据库
基于springboot+vue在线外卖点餐系统(毕业设计,源码+文档)
基于springboot+vue在线外卖点餐系统(毕业设计,源码+文档)
|
4月前
|
算法 Java 程序员
程序员学习网站备份(小众+不定时更新ing...)建议收藏
程序员学习网站备份(小众+不定时更新ing...)建议收藏
24 1
|
5月前
|
JSON API 数据处理
调用API接口获取淘宝商品数据:实践指南与代码解析
本文将详细介绍如何使用Python编程语言调用淘宝API接口获取商品数据。我们将从API的基本概念开始,然后逐步深入到具体的实践环节,通过实例代码演示如何获取淘宝商品数据,并进行简单的数据处理与分析。
|
10月前
|
存储 区块链
即时聊天/即时通讯app系统开发详情方案/玩法规则/案例设计/源码说明
区块链的核心——分布式和存储不依赖于中心化的硬件或管理机构,在区块链中的所有节点的权限和义务都是对等的,Therefore,each result can also participate in the recording and maintenance of data.It differs from traditional data structures that rely on the"center"and can achieve point-to-point data transmission and real-time data recording,with higher effici
|
10月前
|
前端开发
前端学习笔记202303学习笔记第五天-使用key维护页面的状态
前端学习笔记202303学习笔记第五天-使用key维护页面的状态
59 0
|
缓存 小程序 开发工具
【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(下) -- 搜索历史
【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(下) -- 搜索历史
【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(下) -- 搜索历史
|
存储 安全 Go
# 补齐短板-开源IM项目OpenIM关于初始化/登录/好友接口文档介绍
# 补齐短板-开源IM项目OpenIM关于初始化/登录/好友接口文档介绍
450 0
# 补齐短板-开源IM项目OpenIM关于初始化/登录/好友接口文档介绍
|
数据库 开发者
【Discuz】主题浏览量实现原理和不更新的解决方案
【Discuz】主题浏览量实现原理和不更新的解决方案
221 0
【Discuz】主题浏览量实现原理和不更新的解决方案