也许今天你是最好的,但未必明天还最好;今天也许你是最差的,但社会给了你很多的机会,只要你把握,只要努力,总会有机会。 ——马云
Github和Gitee代码同步更新: https://github.com/corleytd/Django_Fresh_Ecommerce; https://gitee.com/Python_Full_Stack/Django_Fresh_Ecommerce。
后端架构搭建好之后,需要搭建前端架构。
近年来,随着多种平台类型(PC端、Android端、Mac端、iPhone端、Pad端等)的出现和普及,前后端分离变得更加重要和流行,显然,其是具有一定的适应性的。
前后端分离的原因如下:
但是前后端分离也存在一些局限性:
REST全称Representational State Transfer,中文为表征性状态转移,而RESTful API就是REST风格的API,即rest是一种架构风格,与开发语言无关,跟平台无关,采用HTTP做传输协议。restful api目前是前后端分离的最佳实践,它不是一种框架,而只是为前后端分离提供了一种标准、规范,具有以下特点: (1)轻量,直接通过http协议,而不需要额外的协议,包括post、get、put、delete操作; (2)面向资源,可读性好、一目了然,具有自解释性; (3)数据描述简单,一般通过json或者xml进行数据通信。
Restful API充分利用HTTP状态码和请求方法来完成其标准设计,大量运用已有规范实现新的标准,而Django Restful framework是完全按照Restful API标准实现的。
(1)前端工程化: 工程化在后端开发中很常见,对于前端开发,工程化也逐步完善成熟,Node.js和webpack的出现推进了前端工程化的发展。
(2)数据双向绑定: 数据和页面的双向绑定,修改任何一个,另一个都会同步变化,MVVM也是这个概念,Angular、Vue都实现了数据双向绑定。
(3)组件化开发: 做一个组件,只需要导入和组件相关的元素即可,从而加大了项目的纯度。
(4)webpack Webpack是一个前端资源加载、打包工具。它将根据模块间的依赖关系进行静态分析,然后根据指定的规则生成相应的静态资源。其实现了代码转换,将开发文件转化为基础的HTML、CSS、JavaScript文件等功能。
(1)Vue全家桶 Vue: Vue.js是一套构建用户界面的渐进式框架,只关注视图层,采用自底向上增量开发的设计,其目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
Vuex: 用于Vue组件之间的通信。
Vue-Router: Vue组件之间的跳转,将路径和组件关联。
axios: 在Vue中发送Ajax请求。
(2)ES6和babel ES6: ES6,全称ECMAScript 6.0,是JavaScript的一个新版本标准,主要是为了解决ES5的先天不足。
Babel: 是一个转换器,将ES6语法转化成ES5语法,以兼容浏览器。
一个典型的Vue项目文件结构类似如下:
├─mock
│ └─mock
└─src
├─api
├─axios
├─components
│ ├─common
│ │ ├─associateFile
│ │ ├─cloud-cooperation
│ │ ├─contextmenu
│ │ ├─control
│ │ ├─current-loc
│ │ ├─drag
│ │ ├─layout
│ │ ├─list-nav
│ │ ├─list-sort
│ │ │ └─images
│ │ ├─loading
│ │ ├─loading2
│ │ ├─menu
│ │ ├─nodata
│ │ ├─page
│ │ ├─price-range
│ │ │ └─images
│ │ ├─product-list
│ │ │ └─images
│ │ ├─result-list
│ │ └─tag
│ └─heighchart
│ ├─bar
│ │ └─line-bar
│ └─circle
│ └─circle
├─router
├─static
│ ├─images
│ │ ├─footer
│ │ ├─head
│ │ ├─indexNew
│ │ ├─login
│ │ ├─loginHead
│ │ ├─new
│ │ ├─register
│ │ ├─seriesList
│ │ └─shopHead
│ ├─js
│ └─vendors
│ └─iview
│ └─dist
│ └─styles
│ └─fonts
├─store
├─styles
│ └─fonts
└─views
├─app
├─cart
│ └─images
├─footer
│ └─images
├─head
├─home
├─index
├─list
│ ├─current-loc
│ ├─list-nav
│ ├─list-sort
│ │ └─images
│ ├─page
│ ├─price-range
│ │ └─images
│ └─product-list
│ └─images
├─login
├─loginHead
├─member
├─productDetail
│ ├─current-loc
│ └─images
│ └─images
└─register
其中,src是项目源码,包括:
本项目的前端部分还包括其他文件,具体目录结构如下:
前端项目收入整个项目的fresh_online目录下,便于统一管理。