16开发电商后台 react_react电商后台管理模板下载 - CSDN
  • 从零开始使用React全家桶开发电商系统
  • vim ~/.gitconfig Insert 一、项目建立 生成公钥:ssh-keygen -t rsa -C '347093772@qq.com' ls -al cd .ssh ls -al catid_rsa.pub 测试是否连通:ssh -T git@github.com 添加gitingore并push ...npm i...

    vim ~/.gitconfig    Insert

    一、项目建立

    生成公钥:ssh-keygen -t rsa -C '347093772@qq.com'

    ls -al   

    cd .ssh 

    ls -al   

    cat id_rsa.pub

    测试是否连通:ssh -T git@github.com

    添加gitingore并push

    二、步骤(webpack配置)

    npm init

    npm install webpack@3.10.0 --save-dev

    新建webpack.config.js

    新建文件夹src, app.js并配置webpack.config.js(入口,出口)

    刚开始使用node_modules/.bin/webpack进行打包, 后使用webpack-dev-server自动刷新

    html 需引入HtmlWebpackPlugin(引入,配置,安装)

    js配置(rules,test(babel))

    样式css单独打包成.css文件(extract-text-webpack-plugin,引入,rules,plugin配置)

    提出公共模块CommonsChunkPlugin(plugin配置)

    三、

     

     

     

     

     

    展开全文
  • 1.课前知识储备 资源加载过程 (1)URL解析 (2)DNS查询 DNS优化 在页面一加载时,就去这些域名的DNS服务器查询IP地址,并缓存下来,等到要请求这些域名下的资源时,省去了DSN查询的时间,提高了页面加载的速度...

    1.课前知识储备

    资源加载过程
    在这里插入图片描述
    (1)URL解析
    在这里插入图片描述
    (2)DNS查询
    在这里插入图片描述
    DNS优化
    在这里插入图片描述
    在页面一加载时,就去这些域名的DNS服务器查询IP地址,并缓存下来,等到要请求这些域名下的资源时,省去了DSN查询的时间,提高了页面加载的速度。

    (3)资源请求
    在这里插入图片描述
    (4)浏览器解析
    在这里插入图片描述
     1-在加载html时,开始构建DOM,碰到一个DOM节点,就将它放在DOM树中
     2-在期间碰到一个JS文件,就需要停下构建DOM树的工作,(因为JS可以操作DOM元素,就可能导致之前构建的DOM树都白搭了,所以遇到JS时,先让它执行)
     3-在构建DOM树过程中,如果遇到style标签,DOM构建和样式加载并行
     4-DOM树构建完,构造渲染树,渲染树是DOM树和CSS样式表结合的产物,
     5-渲染树在不同浏览器中构造方式不同,chrome浏览器中webkit内核,在原来的DOM树上附属一些样式,firefox中根据DOM树和样式表构建出一个新的渲染树
     6-渲染树构建出来,每一个要显示元素的大小和布局方式也就确定了
     7-根据每个元素的大小和布局方式,计算出每个元素的位置
     8-调用浏览器负责绘制的部分,将元素按照对应的样式和位置绘制在屏幕上


    面试题:在浏览器中输入一个网址,敲下回车后发生了什么?

    1. DNS解析
    2. TCP连接
    3. 发送HTTP请求
    4. 服务器处理请求并返回HTTP报文
    5. 浏览器解析渲染页面
    6. 连接结束关闭TCP连接

    1.DNS解析:寻找哪台机器上有你需要的资源的过程
    在输入www.baidu.com时,其实不是百度网站真正意义上的地址。
    互联网上每一台计算机的唯一标识是它的IP地址。
    IP地址不方便记忆,用网址www.baidu.com便于记忆。
    网址www.baidu.com到IP地址的转换就是DNS解析(翻译的角色)。

    2.TCP连接:三次握手。首先客户端向服务器发送请求是否可以建立连接,服务器同意后,客户端回馈服务器的响应,就是3次通话。

    3.发送HTTP请求:客户端向服务器发送http请求,http请求内容是
     请求行:方法+地址+http版本
     请求头
     请求体

    4. 服务器处理请求并返回HTTP报文
     响应行:http版本+状态码+状态描述
     响应头
     响应体

    状态码

    5. 浏览器解析渲染页面

    浏览器接收到htlm, css,js文件后,将这些信息渲染到客户端页面上。

    浏览器是一个边解析边渲染的过程。
     浏览器解析HTML文件构建DOM树
     解析CSS文件构建渲染树
     完成后,浏览器开始布局渲染树,将其绘制到屏幕上。

    回溯(reflow)和重绘(repain)
    Reflow:DOM节点中的各元素都是以盒模型的形式存在,浏览器需要计算其大小和位置
    Repain:当盒模型的位置、大小及其他属性(颜色、字体)确定后,浏览器开始绘制内容

    页面首次加载,必然reflow和repain。
    reflow和repain非常消耗性能,造成页面卡顿,尽可能减少这些操作。

    6.连接结束关闭TCP连接


    ES6基础知识
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
     1-箭头函数不仅仅是对function进行简化,比如箭头函数没有自己的指针,它继承外层作用域
     2-不能用作构造函数,也就是不能用new生成一个对象
     3-箭头函数没有prototype属性
    在这里插入图片描述
    在这里插入图片描述
    1-Promise的出现是为了解决异步回调函数层层嵌套的问题,
    2-以前,在前一个异步回调函数中嵌套下一个异步回调函数,多个,层级很深,不利于阅读
    3-Promise支持异步的链式操作,写出的代码更加清晰易读

    在这里插入图片描述
    在这里插入图片描述
    子类没有this对象,如果想在子类里调用父类的方法,需要在子类的构造方法里调用父类的构造方法,这样就可以把父类的this对象继承过来

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述


    本地存储

    传统的本地储存:cookie和session
    HTML5中提出的本地存储:localStorage和sessionStorage
    在这里插入图片描述
    在这里插入图片描述
    cookie
     1-前端和后端的数据交互,用的是http请求,但是http是一种无状态的协议(无状态:收到一个请求,返回一个响应,而不关心请求者的身份)
     2-http也不是一种持久性的链接,因此,记住某个用户的身份特征很困难
     3-后来就出现了cookie的机制,在用户端保存用户的身份,浏览器会在操作系统里开辟一个文件,专门存放cookie,这个文件只要不删除,就会一直存在,
     4-在每次请求后端的时候,都会在http请求头里加入cookie,后端就能知道是哪个用户
     5-Cookie就是一个字符串,分号分隔的多个key-value字段
     6-Cookie存储在本地文件里,这是浏览器可以操作的为数不多的本地文件之一,安全起见是加密的,只有浏览器可以操作它
     7-Cookie有域名和路径的限制,一个请求只能操作自己有权限的cookie

    在这里插入图片描述
    Session在服务端记录请求者身份
    在服务端接到请求以后,生成一个session id,然后把session id种到用户的cookie里,这样用户再次请求时,带着cookie,服务器就能知道是谁发来的,
    session id并不一定都是通过cookie实现的,也可能是放在请求参数里,

    Cookie其实是为了在http中保存用户状态而设计的,在一些场景中也会把它当成本地存储来使用,这种用法有一个缺点:有些信息只需要在本地存储就可以了,比如记录用户选中了哪个菜单,用户喜欢哪个样式,完全是为了前端展示用的。如果这些信息记录在cookie中,请求是这部分信息在cookie中携带,增大了网络请求的体积,
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    2.前端框架分析
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    Angular还在解决js的问题,对css和html的处理比较少

    在这里插入图片描述
    把html和css转换成js的一部分,把js作为整个应用的入口,
    视图层框架:只关注页面的显示,不像Angular这类MVC框架,数据也会被一同处理

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    3.开发环境的搭建

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    Npm安装的是一定范围的安装包
    Yarn安装的是确定版本的包
    缓存机制:一次安装,缓存下来,下次安装,不走网络请求,实现秒装
    缓存还能断网使用
    在这里插入图片描述
    Yarn安装版本有问题,这里没有用Yarn,用的还是npm

    在这里插入图片描述
    全局的webpack版本只能是一个,可以执行node_modules中的webpack可执行文件,将webpack的版本控制在这个项目内

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    Webpack.config.js配置

    1. 入口函数和出口函数

    在这里插入图片描述
    2. html-webpack-plugin插件,处理打包文件
    在这里插入图片描述
    3. babel-core,babel-loader,babel-preset-env,打包js文件,并且通过babel可以将我们写的ES6语法转换成ES5
    在这里插入图片描述
    4. babel-preset-react插件,支持react环境
    5. css-loader和style-loader,打包将css文件变成一个字符串,放在js文件中,这样出现的问题是,css要等所有的js文件都解析完,才会加载css文件,页面会出现白屏。为了解决这一问题,安装extract-text-webpack-plugin插件

    在这里插入图片描述

    在这里插入图片描述
    6. sass-loader 和node-sass插件,打包sass文件

    在这里插入图片描述
    7. file-loader url-loader,加载图片资源
    在这里插入图片描述
    8.字体文件解析,font-awesome
    在这里插入图片描述
    出现问题:
    在这里插入图片描述
    解决:将下面几句注释掉了
    在这里插入图片描述
    经过配置webpack.config.js,将资源分成了css,js,resource和index.html四个部分

    在这里插入图片描述

    9.为了能一保存文件,浏览器就刷新,安装一个webpack-dev-server插件
    在这里插入图片描述
    执行webpack-dev-server命令,在localhost:8080端口,可以显示页面
    出现问题,字体文件找不到了,
    在这里插入图片描述
    在这里插入图片描述

    这里发现,地址错误,少了一个dist
    解决:添加一个publicPath,就会在dist中的index.html引用资源时,自动加上一个dist在路径前面
    在这里插入图片描述
    10.最后在package.json文件中加一个scripts字段
    在这里插入图片描述
    在这里插入图片描述
    4.React框架
    在这里插入图片描述
    视图层框架:只负责显示部分的框架
    JXS表达式:将静态的模板字符串,变成有逻辑的jsx表达式,更加灵活

    在这里插入图片描述
    显示:数据变成DOM显示出来,监听DOM上的事件
    在这里插入图片描述
    State数据
    Props父子传递数据

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    怎么用create-react-app创建一个react项目?
    1.cnpm install create-react-app global
    2.create-react-app react-test
    安装的包很多,webpack. Webpack-dev-server都被集成在里面

    傻瓜式的建立项目


    给提交的分支,定一个tag名称:
    git tag tag-initial
    git push origin tag-initial


    在这里插入图片描述
    Sublime安装一个babel插件,可以将解析jsx文件

    基本语法:将元素渲染出来

    在这里插入图片描述

    行内样式
    在这里插入图片描述
    ClassName添加样式
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    将handerClick中的this修正到Component中

    在这里插入图片描述
    用箭头函数也可以改变作用域
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述
    接收到父组件传来的值
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在sublime安装插件的时候,出现There are no packages available for installtion.
    解决方法:将package control 文件夹中的内容全部替换掉就可以了

    支持jsx文件,下载babel插件
    支持sass文件,下载sass插件
    支持在jsx中补全div标签,emmet,下载过了,配置一下文件就可以了(代码网上很多,一搜就可以了)
    在这里插入图片描述
    配置webpack.config.js解决跨域问题

    在这里插入图片描述
    这样配置之后,在请求服务器数据时,默认是从http://admintest.happymmall.com发出请求,而不是http://localhost:8081/,就解决了跨域问题

    5.通用部分开发

    在这里插入图片描述
    6.基础功能模块的开发

    登录状态是怎么保持的?

    在登录状态下,访问其他接口都是可以的,
    我们在点击退出登录的时候,服务器是如何知道我是哪个用户名的?
    在点击退出登录时,会在请求头中,添加一个cookie

    在这里插入图片描述
    服务器就知道要把谁干掉了

    在这里插入图片描述
    再次登录时,请求头中还是同一个cookie,重复利用cookie

    在这里插入图片描述
    当把cookie中的JSESSIONID删除后,再次登录,如果本地没有JSESSIONID

    在这里插入图片描述
    在response header中会多一条以上的语句
    告诉浏览器,要设置一条这样的cookie
    在这里插入图片描述
    JSESSIONID就再次被种上了
    总结:
     1-在第一次请求返回的时候,response header中会有一个set-cookie字段,告诉浏览器设置一个cookie,就是JSESSIONID
     2-再次请求别的接口的时候,都会带着JSESSIONID这个字段,后端会判断这个字段是否生效,如果生效就对应着用户信息,就可以拿到数据
     3-如果退出登录,后端会将用户id和JSESSIONID作解绑,再请求就获取不了数据了

    7.商品模块的开发

    一个坑:
    React-fileuploader用的是15.0.2的版本
    但是项目里用的是16.13.0就会出现问题
    在这里插入图片描述
    在这里插入图片描述
    解决方法:
    对FileUpload.js提出来进行改动

    在这里插入图片描述
    1.React手册中查找PropTypes属性,安装一个prop-types插件
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    2.getInitialState换成state
    在这里插入图片描述
    在这里插入图片描述
    3.改onClick和onChange,onSubmit
    4.删除逗号

    富文本框采用的是simditor插件

    在回填富文本框内容的时候,删除所有的内容,再次填写时,会出现正向书写,反向显示的

    在这里插入图片描述
    比如输入123456,显示的是654321
    在这里插入图片描述

    因为我们这样写,没改变一次,就会setValue一次
    在这里插入图片描述
    改成这个样子,只有当defaultDetail变化时,才会setValue
    在这里插入图片描述
    在这里插入图片描述
    只有加载时,defaultDetail会变,其他都是detail在变
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    8.品类模块的开发

    在这里插入图片描述

    在这里插入图片描述

    9.订单模块的开发
    在这里插入图片描述
    在这里插入图片描述
    10.系统上线

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    总结:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述
    另外:
    在这里插入图片描述
    在这里插入图片描述
    行首或者&开头 + name+ =和除了&以外的0个或者多个字符,以行尾或者&结尾
    在这里插入图片描述
    queryString = “param=123&param1=456”
    在这里插入图片描述

    将javaScript值转换成JSON字符串
    {name:‘rosen’}
    {“name”:“rosen”}

    在这里插入图片描述
    将JSON字符串转换为对象

    在这里插入图片描述

    展开全文
  • 本文从Taro及小程序·云开发的简介开始,介绍了如何通过小程序·云开发搭建电商后台服务,最后再深入地阐述购物车页,订单页的小程序·云开发端处理逻辑,由浅入深地剖析了使用小程序·云开发开发电商后台服务的整个...

    转载来源:腾讯云云开发
    原作者:京东凹凸实验室

    本文从Taro及小程序·云开发的简介开始,介绍了如何通过小程序·云开发搭建电商后台服务,最后再深入地阐述购物车页,订单页的小程序·云开发端处理逻辑,由浅入深地剖析了使用小程序·云开发开发电商后台服务的整个过程。

    Taro简介

    Taro是由凹凸实验室开源、遵循 React 语法规范的多端开发解决方案,截止目前 star 数已经突破16.9k,受到了前端开发者的广泛关注,成为了当前最受欢迎的小程序多端开发框架之一。
    Taro 目前已支持微信小程序、H5、RN、支付宝小程序、百度小程序以及字节跳动小程序,持续迭代中的 Taro,也正在努力兼容更多的端,并增加支持一些新特性。

    小程序·云开发简介

    先看官方文档的说法:

    小程序·云开发是微信团队联合腾讯云团队推出的一套小程序开发解决方案。小程序·云开发为开发者提供完整的云端流程,弱化后端和运维概念,开发者无需购买和管理底层计算资源,包括服务器、数据库、静态存储,只需使用平台提供的简易
    API 进行核心业务等开发,实现快速上线和迭代,把握业务发展的黄金时期。

    其实翻译过来就是,一个在小程序中使用的,不用购买服务器,不用运维的简易后端体系,主要是为了突出快和简便。所以小程序·云开发,就非常适合那些对数据本身弱依赖的,中小型的功能性小程序使用。

    小程序·云开发主要有几大部分组成,分别是云控制台、数据库、云函数、云存储。以及分别在小程序端,和云端使用的 js-sdk、admin-sdk。关于这几部分的具体内容,可以在官方文档中查看。

    而与传统的电商后端开发相比,小程序·云开发有以下区别:

    传统电商后端开发 小程序·云开发
    后端代码 自主编写、开发接口 开发接口,云函数部署
    服务器 自主购买、部署
    数据监控 自主搭建 官方提供,控制台查看
    调用日志 自主搭建 官方提供,控制台查看
    费用 服务器购买成本

    项目结构

    因为该项目使用了小程序·云开发进行后端开发,故项目结构会有些不同。具体结构使用的是 Taro 初始化时提供的云开发模板,大致结构如下:

    ├── demo                          代码目录
    |   ├── client                    小程序代码目录
    |       ├── ...           
    |   ├── cloud                     小程序·云开发相关代码目录
    |       ├── functions             云函数相关目录
    |           ├── shop              shop 云函数目录
    |               ├── index.js      入口函数
    |               ├── getShop.js    getShop.js
    |               ├── package.json
    |               ├── ...
    |   ├── project.config.json       小程序配置文件
    |   ├── tcb.json                  小程序·云开发配置文件
    └── README.md                     readme 文件
    

    可以看到目录里主要分了两大块 client和 cloud:

    client 里和我们平常小程序的开发目录,存放的都是小程序里业务代码。

    cloud 里则是放云函数相关的代码,并且是以模板进行分割,每个模块一个云函数。

    基于这样的目录结构,小程序·云开发相关的代码与小程序本身的代码进行了有效分隔,极大地方便了项目的管理与开发,同时也有助于云函数的上线部署。

    通过小程序通过小程序·云开发搭建电商后台服务

    介绍完 Taro 及小程序·云开发,下面便开始讲解如何通过小程序·云开发搭建一个后端服务。

    1.后台服务搭建思路
    2.数据库建立
    3.数据交互
    4.【首页】【商详页】后端逻辑处理
    5.【购物车】后端逻辑处理
    6.【订单页】后端逻辑处理

    后台服务搭建思路

    首先,我们知道一个最简单的后端程序就是,开启一个 HTTP服务,连接上数据库,然后根据收到的请求进行相关操作,例如数据库的增删查改,返回 HTML,返回接口数据之类,如果要满足外网访问还要部署上线等等。

    而用上了小程序·云开发之后,因为云函数这个概念,我们免去了开启服务器和部署的步骤。同时,小程序是天然前后端分离的,也不需要返回HTML。所以在这种情况下,我们所搭建的后台服务最主要为了实现两个部分的内容,分别是数据库的建立和前后端的数据交互。

    1.数据库建立

    数据库建立,指的是数据集合及一些初始数据的创建。在我们搭建的这个 Demo 里,主要有以下数据集合:
    在这里插入图片描述
    · Information - 首页的资讯数据集。主要是以一个资讯为单位的数据集合,一个资讯可能含有商店图片,商店介绍,商品介绍等,主要作导购作用,点击后引导至相关页面。
    · Shop - 商店页的数据集。以商店为单位,一个商店页面里主要是各种楼层数据。
    · Commodity - 商品的数据集。显然,一个商品数据自然就是该商品所需要的各种信息。
    · Cart - 购物车的数据集。以用户为单位存放购物车数据。
    · Order - 订单的数据集。以用户为单位存放订单数据。
    · User - 用户信息的数据集。存放用户信息数据。

    上面所讲述的 6个数据集,基本就涵盖了一个最简单的电商所需要的各种数据,可以构成一个完整的购物流程。

    同时如下图,还可以设置数据集权限。例如将 Information、 Shop、Commodity设置为所有用户可读、仅管理员可写;将 Cart、 Order、 User改成仅创建者及管理员可读写。通过权限限制,增强了数据集的可靠性。
    在这里插入图片描述
    2.数据交互

    数据集建立起来后,再往里面填充一些假数据,基本的数据就有了,那么在小程序中如何进行数据交互?

    如果不是用小程序·云开发,自然是通过request拉取接口数据,进行展示。而在使用了小程序·云开发的情况下,通过官方提供的 sdk,主要有两种办法进行数据拉取:

    1.直接在小程序端操作数据库,获取所需数据,并进行增删查改等操作。
    2.使用云函数,把数据库的操作放到云端;然后在小程序端调用云函数,达到类似调用接口的效果。

    第一种方法其实比较适合一些简单的、对数据要求不高、量也不大的小程序。不然在小程序的代码中混合着数据库操作,实践起来不太优雅,也不利于维护。

    这里重点说下第二种方法。上篇文章有提到了云函数的概念,这里再回顾一下。所谓云函数,就是将一个函数放在Node.js(即服务端)环境下运行。因此,我们可以将数据库的操作放到云函数中执行,然后在小程序中调用云函数,达到一种类似调用接口的效果。回顾我们上一章节说到的云函数的目录:

    ├── demo                          代码目录
    |   ├── cloud                     小程序·云开发相关代码目录
    |       ├── functions             云函数相关目录
    |           ├── shop              shop 云函数目录
    |               ├── index.js      入口函数
    |               ├── getShop.js    getShop.js
    |               ├── package.json
    |               ├── ...
    |   ...
    └── README.md                     readme 文件
    

    名字叫 shop 的云函数的具体目录在cloud/functions/shop下,可以见到有一个入口文件 index.js,还有其它的子函数。下面看具体代码:
    在这里插入图片描述在这里插入图片描述在这个例子中,笔者将一个云函数当成一个模块相关函数的入口,根据函数传入的参数来决定调用哪个函数。而被具体调用的函数,执行的是一些数据的操作,然后返回数据。也就是说,在这个 Demo 里一个云函数是一个数据模块的入口,里面引用了许多待被调用的具体函数,视入参而定。

    以数据模块为单位分割云函数,是笔者觉得比较好的做法。一来云函数不必分割得太细,毕竟每个云函数都是独立部署的,省去了一些繁琐的操作;二来以数据模块为单位,就有点类似我们传统后端的 MVC 模式,易于开发者无缝接入。当然,这只是其中的一种云函数代码组织方式,并不代表就一定要遵循这样的方式,具体情况具体分析,还是要结合业务的实际情况。

    而具体到小程序的调用,就更简单了,只是将请求接口的操作改为调用云函数的操作。比如:
    在这里插入图片描述
    可以看到,仅仅是将调用 wx.request改为了调用 wx.cloud.callFunction,其它的地方并不需要改变太多。返回的数据也是可以自己定义的,达到了与调用接口相同的效果。

    不过云函数有一个缺点,就是每次都要上传部署后才能被小程序端调用,调试起来略显麻烦。一个比较好的调试方法是添加一个测试函数,在本地环境中使用 Node.js 进行测试。
    在这里插入图片描述
    2.1【首页】【商详页】后端逻辑处理

    经过上一段落的讲解,相信大家对于整个商城后端服务的搭建与处理逻辑已经有了基本了解。下面我们看一下首页和商详页的页面结构。

    首页:
    在这里插入图片描述
    商详页:
    在这里插入图片描述
    实际上,上一段落中所举例shop云函数,便是处理首页和商详页的后端逻辑。可以看到,其逻辑只是简单的根据id拉取数据并返回,因为整体也并没有过多与用户发生交互的部分,也没有需要后端逻辑处理的部分,总的来说还是比较简单的,在这里便不作过多介绍。

    2.2【购物车】后端逻辑处理

    购物车页相较于首页和商详页,其逻辑必定是复杂了很多,下面结合页面结构及代码分析一下。
    在这里插入图片描述
    上图是商城demo的购物车截图。可以看到在购物车里,小程序·云开发端需要处理的逻辑有商品的选择与反选、商品删除、商品数量的更改、商品型号的更改等等。因此,我们把购物车操作分类,得到如下一个 map:
    在这里插入图片描述
    然后,在用户执行相应的操作时,我们便会执行到对应的操作函数:
    在这里插入图片描述
    在这里,每个操作函数的入参都是 oldCartInfo(旧的购物车里的商品)、 skus(需要更改的 skus 数组)。然后返回处理后、最新的 newCartInfo (新的购物车里的商品)。具体的操作函数的逻辑我们便不再阐述了,主要就是对数组进行遍历然后根据相关操作处理数据。

    接下来,根据最新 newCartInfo,来得到完整购物车数据,完整的购物车数据结构如下所示:
    在这里插入图片描述
    更新完数据库后,便会返回给前端最新的购物车数据。

    总结下来,整个购物车后端逻辑的流程,可以用如下的流程图描述:
    在这里插入图片描述
    如果后续有新的购物车操作需要迭代,或者处理逻辑需要变更,我们也只需要改变小程序·云开发端执行函数 这一部分里面的内容即可。

    2.3【订单页】后端逻辑处理

    同样的,我们先看一下订单页的结构。

    订单详情页:
    在这里插入图片描述
    订单页这块主要处理的是生成订单的逻辑。每个用户的购物车中,已勾选的商品数据都是存放在数据库中的,所以当用户点击了去结算按钮,触发了结算请求时,后端会直接从用户数据库中的购物车数据,生成一份订单。详细的流程可以用如下的流程图描述:
    在这里插入图片描述
    下面我们来看具体代码:
    在这里插入图片描述
    从代码中可以看到,先是遍历当前购物车中的商品,然后把已经勾选的商品存放到 payInfo中。接着根据 payInfo 生成订单数据,同时除移购物车中已被结算的商品,并更新购物车数据库。

    整体来说,并没有太复杂的操作,不过需要注意的是,因为存在很多异步的操作,所以会有使用很多 await 命令来进行同步书写。

    除了生成订单之外,还有取消订单、删除订单等操作。相较于生成订单,这些就只是读取订单、更改状态而已,便不赘叙。

    总结

    笔者作为开发者,使用小程序·云开发后,深感其便利性。私以为有以下几点优势:

    1. 便捷。略去了后端部署、运维等步骤,可以快速地构建所需要的后端应用,非常适合灵活轻便的小程序开发。

    2. 免费。目前小程序·云开发提供了免费 2GB 的数据库存储和 免费 5 GB 的文件存储,虽然存储量并不是很大,但对于个人开发者来说,这些存储量绰绰有余。

    3. 开发简单。小程序·云开发的使用,云函数的开发都是非常简单的,官方提供的API可以让我们便捷地进行操作。只需掌握 JavaScript 和一些异步处理相关的知识,便可以快速上手。

    4. 一致性。小程序·云开发是小程序官方推出的一种解决方案,与正常的小程序开发无缝连接,而且不用担心是否会继续维护、升级迭代等的问题。

    最后希望这篇文章对于看完的你有所帮助!
    在这里插入图片描述

    展开全文
  • 1.网址 后台完整功能浏览网址:...项目地址: React电商后台管理系统 2.功能模块 用户模块:登陆 退出 用户列表 商品模块:商品列表 商品详情 添加和修改商品 品类模块:品类列表 添加品类 修改品类 订单模块...

    1.网址

    后台完整功能浏览网址:http://adminv2.happymmall.com/
    借口查询地址:https://gitee.com/imooccode/happymmallwiki/wikis/Home
    项目地址: React电商后台管理系统

    2.功能模块

    用户模块:登陆 退出 用户列表
    商品模块:商品列表 商品详情 添加和修改商品
    品类模块:品类列表 添加品类 修改品类
    订单模块:订单列表 订单详情 发货

    3. 总结

    (1)项目开发准备
    (2)React项目手动搭建webpack开发环境
    (3)项目分层架构
    (4)分页组件再封装
    (5)基于Jquery富文本编辑器Simditor再封装
    (6)文件上传组件React@15.x兼容到React@16.x
    (7)自定义通用的列表组件
    (8)带有路由保护的通用request请求方法
    (9)通用工具函数
    (10)项目上线发布
    (11)shell脚本自动发布项目

    展开全文
  • React16 React-Router4 webpack3 Antdesign 电商后台管理系统
  • 云生活超市——React Native项目,React Native电商app,(项目配套:1、后台管理系统(React ant-design) 2、服务器端代码(SpringBoot)。技术栈: react native redux react-navigation native-base
  • 本次课程,将进行基于小程序·云开发和 Taro 框架的【电商小程序开发】实战,从首页、商详、购物车、交易流程等电商模块,手把手教你搭建完整的电商小程序。 本次 Chat 主要内容: 云开发的特点及优势 Taro 框架...

    电商应用,是所有应用开发里最常见但也最复杂的场景之一。本次课程,将进行基于小程序·云开发和 Taro 框架的【电商小程序开发】实战,从首页、商详、购物车、交易流程等电商模块,手把手教你搭建完整的电商小程序。

    本次 Chat 主要内容:

    1. 云开发的特点及优势
    2. Taro 框架特点的介绍
    3. 电商小程序的搭建思路
    4. 电商模块的搭建步骤

    电商应用,是所有应用开发里最常见但也最复杂的场景之一。本次课程,将进行基于小程序·云开发和 Taro 框架的【电商小程序开发】实战,从首页、商详、购物车、交易流程等电商模块,手把手教你搭建完整的电商小程序。

    基础知识点

    微信小程序的介绍

    微信小程序是一种不需要安装即可使用的应用,它的优势有很多。比如:

    • 速度快,无需下载安装,随时可用。
    • 无适配,一次开发,免除对各种手机机型的适配。
    • 可分享,支持图文分享、支持分享给微信好友和群聊。
    • 体验好,可以达到和原生 App 相同的操作体验和流畅度。
    • 易获取,支持扫码、微信搜索、好友推荐等发起场景。
    • 低门槛,已有公众号的组织可以快速支持、可快速生成门店小程序。

    小程序·云开发的介绍

    小程序·云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念, 无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

    小程序·云开发主要有几大部分组成,分别是云控制台、数据库、云函数、存储、云调用,以及分别在小程序端和云端使用的 SDK 。

    Taro 框架的介绍

    Taro 是一套遵循 React 语法规范的多端开发解决方案。现如今市面上端的形态多种多样, Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有 所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就 能够适配到多端的能力就显得极为需要。使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端运行的代码。

    与传统的电商后端开发相比,小程序·云开发有以下区别

    enter image description here

    使用小程序•云开发,我们可以省略后端部署、运维等步骤,可以快速地构建所需要的后端应用。同时,云函数的开发都是非常简单的,官方提供的 API 可以让我们便捷地进行操作。它可以很快速上手。只需掌握 JavaScript 和一些异步处理相关的知识,对前端同学比较友好。小程序·云开发是小程序官方推出的一种解决方案,不用担心是否会继续维护、升级迭代等的问题。

    开发思路

    要进行 Taro 的项目开发,需要先安装 taro-cli。这里默认你已经装好了 taro-cli 并能运行命令。

    1、 我们用 cli 新建一个项目, 选择云开发模板,随后会得到这样的项目模板:​​enter image description here

    2、 根据梳理清楚的整体流程添加页面代码,大致的流程如图所示:enter image description here​​3、 相应的后台服务因为有小程序·云开发的支持,免去了开启服务器和部署的步骤,所以我们所搭建的后台服务最主要为了实现两个部分的内容:

    数据库建立

    最简单的电商应用需涵盖以下数据:

    • Information 首页的资讯数据集,大概含有商店图片,商店介绍,商品介绍等,主要作导购作用,点击后引导至相关页面。
    • Shop - 商店页的数据集,以商店为单位,一个商店页面里主要是各种楼层数据。
    • Commodity - 商品的数据集,即该商品所需要的各种信息。
    • Cart - 购物车的数据集,以用户为单位存放购物车数据。
    • Order - 订单的数据集,以用户为单位存放订单数据。
    • User - 用户信息的数据集,存放用户信息数据。

    前后端的数据交互

    使用云函数,把数据库的操作放到云端,即将一个函数放在 Node.js(即服务端)环境下运行;然后在小程序端调用云函数,达到类似调用接口的效果。

    实战演练

    进行整个小程序的配置

    在 src 的 app.js 中设置好相关信息,并初始化云函数。

    搭建首页

    首页大致分为顶部的搜索的组件,以及店铺和商品展示的楼层组件。搜索的组件,应该是一个公用的模块,它会在搜索页,分类页之类的地方出现,可以把这它抽离出来,进行复用。enter image description here

    搭建商详页面

    从首页进商详的店铺入口的逻辑只是简单的根据 id 拉取数据并返回,因为整体也并没有过多与用户发生交互的部分,也没有需要后端逻辑处理的部分。enter image description here不过,商详页面除了商品的展示信息外,还有一些交互动作。 例如下单前商品属性选择、件数、库存等等,这里我们是做了一个简易的 Popup 组件交互。

    搭建购物车页面

    购物车页相较于首页和商详页,其逻辑必定是复杂了很多,下面结合页面结构来分析一下。​​enter image description here

    上面的图是购物车的截图。可以看到在购物车里,小程序·云开发端需要处理的逻辑有商品的选择与反选、商品删除、商品数量的更改、商品型号的更改等等。因此,我们把购物车操作分类,得到如 下一个 map:enter image description here​​然后,在用户执行相应的操作时,我们便会执行到对应的操作函数:enter image description here​​然后返回处理后、最新的 newCartInfo (新的购物车里的商品)。具体的操作函数的逻辑我们便不再阐述了,主要就是对数组进行遍历然后根据相关操作处理数据,更新完数据库后,便会 返回给前端最新的购物车数据。如果后续有新的购物车操作需要迭代,或者处理逻辑需要变更,我 们也只需要改变小程序·云开发端执行函数 这一部分里面的内容即可。

    搭建订单页面

    订单页这块主要处理的是生成订单的逻辑。每个用户的购物车中,已勾选的商品数据都是存放在数据库中的,所以当用户点击了去结算按钮,触发了结算请求时,后端会直接从用户数据库中的购物车数据,生成一份订单。详细的流程如下:enter image description here

    小结

    受篇幅影响,一些细节并没有在文章提及。关于项目的具体实操,我将在 7 月 18 日(下周四)20:00 进行直播演练,欢迎大家进微信群观看,并参与交流。

    本文作者

    钟鑫,来自京东凹凸实验室,是 Taro 框架核心开发成员,主要负责 Taro 框架多端组件及 API 相关,还有京东购物小程序首页和搜索的相关研发。

    阅读全文: http://gitbook.cn/gitchat/activity/5d22eaf9ea3dd92f593016f8

    您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ,阅读更多 GitChat 专享技术内容哦。

    FtooAtPSkEJwnW-9xkCLqSTRpBKX

    展开全文
  • 1 通用布局的开发(1) 初始项目结构 app.jsx index.jsx 集成 Boostrap 直接引用此 URL 直接将其在全局安装即可 引入字体样式, 使用并全部改为 ...
  • react-admin-element,一款基于react后台管理系统。 那么我们和其他的后台管理系统有什么区别呢? demo地址:点我进入demo演示 github地址:点我进入github 1. cli工具 为了方便下载使用,我们提供了cli工具 ...
  • 主要介绍安装node环境和react环境依赖安装 node环境安装 1,官网下载node安装包。安装完成后可以通过以下命令查询安装版本号 node -v ,只要安装成功便会自动安装npm 依赖包管理工具。 yarn也是和npm 类似的工具 ,...
  • 项目运行 1.git clone ... 2.cd React_demo_onlineShop(文件目录) 3.npm install(安装依赖) 4.npm start(项目启动) 功能一览 1.购买产品 2.查看购买的产品 3.删除购买的产品 功能...
  • 作为程序员,大家应该都知道,电商项目对程序员的专业水平要求要求很高,我本人也是刚刚工作没多久的技术小白,因为现在做金融项目这一块,做的项目属于内部系统,总体来说对整体的水平没那么多要求,我也是做这个...
  • Taro • 云开发电商小程序示例 简介 hi, 大家好。我是来自京东凹凸实验室的钟鑫,Taro 框架核心开发成员。 目前我主要负责 Taro 框架多端组件及 API 相关。还有京东购物小程序首页和搜索的相关研发。 电商类的应用,...
  • 1.3数据接口设计 2 预备知识储备 2.1页面加载过程 2.5 本地存储 浏览器执行此脚本即可查看 cookie ...自定...
  • 这里写自定义目录标题前言AntDesign of React项目一:ant-design-pro-react代码&安装地址:预览地址:AntDesign of ...目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,...
  • 使用react做管理后台项目, 一点点感悟与问题 1.全选翻页问题 场景描述: 对一个table列表数据进行操作, 将选中的数据加到另一个列表中, 并可以对源列表进行全选和查询操作. 问题描述:当使用全选功能, 对数据进行...
  • 网上react后台管理开源免费的完整版项目比较少,所以利用空余时间集成了一个版本出来,已放到GitHub 启动和打包的时间都稍长,请耐心等待两分钟 原博客地址 掘金地址 GitHub地址 预览地址(已增加响应式,可手机...
  • 最近在用react做一个项目中的一个模块,总结react的几个重要的点1.state用于保存变量,setstate用于更新变量的值,但是要注意变量的冗余度,如果是一组数据同时变化需要修改的话可以在state中放置一个类似于modal的...
  • react项目开发流程

    2019-11-26 23:05:30
    React项目开发流程 0. 项目 项目描述 网易周边商城这个项目是一个电商类型项目,这个项目B2C项目,它的目的是为了给用户和商家提供 一个可以用于交易的平台,这个项目的适用的人群范围是: 青年 ,它里面核心提供...
1 2 3 4 5 ... 20
收藏数 1,386
精华内容 554
关键字:

16开发电商后台 react