Django+Vue开发生鲜电商平台之4.Restful API和Vue介绍

CuterCorley 等级 374 0 0

也许今天你是最好的,但未必明天还最好;今天也许你是最差的,但社会给了你很多的机会,只要你把握,只要努力,总会有机会。 ——马云

Github和Gitee代码同步更新https://github.com/PythonWebProject/Django_Fresh_Ecommercehttps://gitee.com/Python_Web_Project/Django_Fresh_Ecommerce

后端架构搭建好之后,需要搭建前端架构。

一、Restful API介绍

1.前后端分离优缺点

近年来,随着多种平台类型(PC端、Android端、Mac端、iPhone端、Pad端等)的出现和普及,前后端分离变得更加重要和流行,显然,其是具有一定的适应性的。

前后端分离的原因如下:

  • PC、APP、Pad等多端适应的要求 近几年随着移动端的普及,需要对其进行适应,运用传统的方式只适用于PC端,需要前后端分离实现对移动端的适应。
  • SPA开发模式逐渐流行 SPA模式即单页Web应用模式,对单页应用来说模块化的开发和设计显得相当重要。
  • 前后端开发职责分工不清 在编写模板时,会面临着是由前端还是后端开发的问题,如果由前端人员来开发就必须了解后端语言,如果由后端人员来写就必须了解前端知识。
  • 开发效率低下,前后端互相等待 之前的模式是前端需要等待后端开发完成后才能开发,或者后端等待前端,造成效率低下。
  • 前端被动配合后端,能力受限 由于很多业务逻辑是在是在模板语法中实现,前端开发者只是单纯地给后端提供前端网页文件,开发能力受到限制。
  • 后台开发语言和模板高度耦合,导致开发语言依赖严重 由于后台采用单一的开发语言进行开发,导致了高耦合,后端语言的切换成本很高。

但是前后端分离也存在一些局限性:

  • 前后端学习门槛增加 由于开发模式的改变,导致前后端开发者均不能再像之前那样只是负责自己的那一块即可,为了前后端配合,需要学习更多的技术和方法。
  • 数据依赖导致文档重要性增加 后端把数据交给前端时,如果没有文档,前端就可能会出现很严重的问题,还要保证文档的及时更新和准确。
  • SEO的难度增大 现在很多页面中只是HTML框架,并没有数据,这虽然在很大程度上放置了爬虫,但同时也对搜索引擎的索索造成了很大影响。
  • 后端开发模式迁移增加成本 不同的开发语言对应的模板语法不同,因此在进行迁移时也会面临很大的成本。

2.Restful API简介

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标准实现的。

二、Vue的基本介绍

1.前端重要概念

(1)前端工程化: 工程化在后端开发中很常见,对于前端开发,工程化也逐步完善成熟,Node.js和webpack的出现推进了前端工程化的发展。

(2)数据双向绑定: 数据和页面的双向绑定,修改任何一个,另一个都会同步变化,MVVM也是这个概念,Angular、Vue都实现了数据双向绑定。

(3)组件化开发: 做一个组件,只需要导入和组件相关的元素即可,从而加大了项目的纯度。

(4)webpack Webpack是一个前端资源加载、打包工具。它将根据模块间的依赖关系进行静态分析,然后根据指定的规则生成相应的静态资源。其实现了代码转换,将开发文件转化为基础的HTML、CSS、JavaScript文件等功能。

2.Vue重要概念

(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项目结构介绍

一个典型的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是项目源码,包括:

  • api 请求网络的API通过此目录实现。
  • axios 全局拦截等全局设置。
  • components 项目组件。
  • router Vue-Router配置。
  • static 全局静态资源文件。
  • store Vuex存放目录。
  • style 静态CSS样式。
  • views 所有组件,包括Header、轮播图、新品、导航栏、商品展示、分页、商品详情、个人中心等众多组件,在项目代码中体现为app(入口组件)、cart(购物车组件)、footer(底部组件)、header(顶部组件)、home(主内容组件)、index(首页组件)、list(列表页组件)、login(登录组件)、loginHead(登录页头部组件)、member(个人中心组件)、productDetail(商品详情组件)、register(注册组件)。

本项目的前端部分还包括其他文件,具体目录结构如下: Django+Vue开发生鲜电商平台之4.Restful API和Vue介绍 前端项目收入整个项目的fresh_online目录下,便于统一管理。

需要安装前端项目的依赖包,直接在fresh_online目录下执行cnpm install并等待安装结束即可,如果目录下生成node_modules目录并且打印出

√ All packages installed (841 packages installed from npm registry, used 38s(network 35s), speed 556.67kB/s, json 731(1.81MB) , tarball 17.06MB)

则安装成功。

本文原文首发来自博客专栏Python Web开发实战,由本人转发至https://www.helloworld.net/p/z0xij0sG2hZz,其他平台均属侵权,可点击https://blog.csdn.net/CUFEECR/article/details/107522019查看原文,也可点击https://blog.csdn.net/CUFEECR浏览更多优质原创内容。

收藏
评论区

相关推荐

【官宣】Vue 3.0 发布!
Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。 原文:https://github.com/vuejs/vuenext/releases 作者:Vue 团队 译文:https://zh
Vue3.0--Vue Composition API使用体验
本文将之前采用Vue2.6开发的todoList小项目改造成为Vue3.0编写,并介绍一下2.x和3.x之间写法的不同之处。 Vue3.x适配大部分Vue2.x的组件配置,也就是说以前我们在Vue2.x针对组件的一些配置项,例如: export default { name: 'test', components: {}, props: {},
《精通react/vue组件设计》之配合React Portals实现一个功能强大的抽屉(Drawer)组件
前言 本文是笔者写组件设计的第六篇文章,内容依次从易到难,今天会用到react的高级API React Portals,它也是很多复杂组件必用的方法之一. 通过组件的设计过程,大家会接触到一个完成健壮的组件设计思路和方法,也能在实现组件的过程逐渐对react/vue的高级知识和技巧有更深的理解和掌握,并且在企业实际工作做游刃有余. 之所以会写组件设计相关
Django+Vue开发生鲜电商平台之1.项目介绍
我永远相信只要永不放弃,我们还是有机会的。最后,我们还是坚信一点,这世界上只要有梦想,只要不断努力,只要不断学习,不管你长得如何,不管是这样,还是那样,男人的长相往往和他的的才华成反比。今天很残酷,明天更残酷,后天很美好,但绝对大部分是死在明天晚上,所以每个人不要放弃今天。 马云 本项目旨在使用Django、Vue和REST Framewor
Tornado API 服务开发
本文讲述如何使用 Tornado(http://www.tornadoweb.org/) Web 框架来开发一个简单的 API 服务,以及如何使用 Docker 工具来构建镜像和部署服务。项目代码已在 GitHub 开源,JW Tornado Demo(https://github.com/jaggerwang/jwtornadodemo)。
笔趣阁小说api
笔趣阁api小说api,提供小说相关api接口,目前支持笔趣阁(https://m.bqkan.com/)。ip地址:http://49.234.123.245:8082 笔趣阁(https://m.bqkan.com/) 1. 首页 ip/getHome 2. 小说分类 ip/
2021前端技术面试必备Vue:(四)Vuex状态管理
前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站........唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue 提供了一种状态管理 解决办法 Vuex,它的思想和React 的R
Django+Vue开发生鲜电商平台之1.项目介绍
我永远相信只要永不放弃,我们还是有机会的。最后,我们还是坚信一点,这世界上只要有梦想,只要不断努力,只要不断学习,不管你长得如何,不管是这样,还是那样,男人的长相往往和他的的才华成反比。今天很残酷,明天更残酷,后天很美好,但绝对大部分是死在明天晚上,所以每个人不要放弃今天。 马云本项目旨在使用Django、Vue和REST Framewor
全面解析vue中的nextTick
为什么要用nextTick请看如下一段代码new Vue({ el: 'app', data: { list: }, mounted: function () { this.get() }, methods: { get: function () { this.$http.get('/api/a
Django+Vue开发生鲜电商平台之4.Restful API和Vue介绍
也许今天你是最好的,但未必明天还最好;今天也许你是最差的,但社会给了你很多的机会,只要你把握,只要努力,总会有机会。 ——马云Github和Gitee代码同步更新:;。后端架构搭建好之后,需要搭建前端架构。 一、Restful API介绍 1.前后端分离优缺点近年来,随着多种平台类型(PC端、Android端、Mac端、iPhone端、P
Django+Vue开发生鲜电商平台之5.使用DRF实现商品列表页和过滤
胸怀是非常重要的,一个人有眼光没胸怀是很倒霉的。三国演义的周瑜就是眼光很厉害,胸怀很小,所以被诸葛亮气死了。宰相肚里面能撑船,说明宰相怨气太多了。他不可能每天跟人解释,只能干,用胸怀跟人解释。每个人的胸怀是靠委屈撑大的。 ——马云Github和Gitee代码同步更新:;。 一、普通方式实现商品列表页先了解Django中实现Json数据传递的基
Django+Vue开发生鲜电商平台之6.使用Vue实现商品类别和商品数据前台显示
什么是胸怀?胸怀是人生的志向和抱负,胸怀是人格的品位和质量,胸怀是人对待世界万物气量和风度的定位。胸怀,能使弱者走过别人不敢走的路,攀上别人难以达到的高峰;胸怀,可以使先天低矮的人在别人眼里变得挺拔高大;胸怀,能使一名柔弱的女子充满大丈夫的英雄气概;胸怀,也使一个弱质变得体格健壮。 ——马云Github和Gitee代码同步更新:;。现在将DRF
Django+Vue开发生鲜电商平台之7.用户登录和注册功能
@toc 聪明是智慧者的天敌,傻瓜用嘴讲话,聪明的人用脑袋讲话,智慧的人用心讲话。所以永远记住,不要把自己当成最聪明的,最聪明的人相信总有别人比自己更聪明。 ——马云Github和Gitee代码同步更新:;。 一、DRF的token基本使用 1.DRF的token登录原理基于DRF的前后端分离登录与单独使用Django登录的原理不同,
Vue 3 计划放弃支持 IE11
Vue.js 作者尤雨溪就 Vue 3 支持 IE11 的计划提交了新提案。提案摘要:1. Vue 3 将不会支持 IE11 2. 原定投入 Vue 3 IE11 支持的精力将投入给 2.7,移植 3.x 兼容的新功能,包括: Composition API \<script setup\ 以及其它新的单文件组件特性
美团java研发岗二面:覆盖所有面试知识点
面试真题以及解析 Web,RESTful API 在微服务中的作用是什么?微服务架构基于一个概念,其中所有服务应该能够彼此交互以构建业务功能。因此,要实现这一点,每个微服务必须具有接口。这使得 Web API 成为微服务的一个非常重要的推动者。RESTful API 基于 Web 的开放网络原则,为构建微服务架构的各个组件之间的接口提供了最合理的模型。