4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍

天涯明月笙 关注

2018.02.20 19:23* 字数 762 阅读 1352评论 6喜欢 16

使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站

项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, 支持第三方登录。集成了sentry错误监控系统。

线上演示地址: http://vueshop.mtianyan.cn/
github源代码地址: https://github.com/mtianyan/VueDjangoFrameWorkShop

本小节内容: restful api 与前端源码介绍

4- restful api 与前端源码介绍

restful api 介绍

  • 前后端分离优缺点

为什么要前后端分离

  1. pc,app,pad多端适应

后端模板渲染的方式适合pc,app端不好弄。

  1. SPA开发模式开始流行

单页面应用。最流行的方式就是前后端分离,后端提供接口。

  1. 前后端开发职责不清

Django的template由谁写?拆分,模板语言。
php java template 语言使用。

  1. 开发效率问题,前后端互相等待
  2. 前端一直配合着后端,能力受限
  3. 后台开发语言和模板高度耦合,导致开发语言依赖严重。

前后端分离缺点:

- 前后端学习门槛增加,后端的if else语法。这些根据数据展示页面交给前端做了
- 数据依赖导致文档重要性增加,以前交给后端,后端一个人看懂
- 前端工作量加大
- seo的难度加大,爬虫请求不到数据。有专门的优化
- 后端开发模式迁移增加成本

restful api

restful api 目前是前后端分离最佳实践(一套标准,建议)

  1. 轻量,直接通过http,不需要额外协议,post/get/put/delete操作
  2. 面向资源,一目了然,具有自解释性。

资源是名词,post等是动词

推荐阅读: 理解restful架构 阮一峰

vue基本概念介绍

  1. 前端工程化
  2. 数据双向绑定
  3. 组件化开发

nodejs 包管理。

mvvm: 数据驱动view,view又改变数据。

双向数据绑定。

表单变成一个组件。而以前bootstrap就得引入库,库中有很多我们不需要的东西。

vue开发中的几个概念

  1. webpack

重要,属于js工具。

  • es6到es5代码转换,vue不能被浏览器认识。

最终想让浏览器认识就得html js css

 
mark

可以看到看起来什么都没写。

webpack将所有东西打包变成一个js文件。

  1. vue vuex(组件通讯) vue_router(单页面的路由) axios

前端内部自己跳转,发送ajax请求。不推荐操作dom。
jQuery导入进来只用ajax。不如axios。

  1. ES6, babel

es6语法。babel将es6转换为es5。

vue项目的目录结构

vue的组件方案

babel配置文件

mock数据。

 
mark
  • api就是我们现在请求网络的api,所有组件的api通过这个设置。
  • axios设置了全局拦截401
  • components是基础组件
  • router 路由
  • style 全局静态文件

views中可以看到我们所有组件。

  • header组件。
  • 轮播图
  • 新品
  • 分页组件
  • 个人中心三组件
  • 结算组件

想知道页面是由哪些vue的组件凑成。

 
mark

使用vue官方提供的插件。

app.vue 入口文件。

原文学习来自简书,作者:天涯明月笙

原文链接:https://www.jianshu.com/p/a0f0dbd24329

4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍的更多相关文章

  1. 3- vue django restful framework 打造生鲜超市 - model设计和资源导入

    3- vue django restful framework 打造生鲜超市 - model设计和资源导入 使用Python3.6与Django2.0.2(Django-rest-framework) ...

  2. 引爆潮流技术 Vue+Django REST framework打造生鲜电商项目

    引爆潮流技术Vue+Django REST framework打造生鲜电商项目 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受, ...

  3. 7- vue django restful framework 打造生鲜超市 -商品类别数据展示(上)

    Vue+Django REST framework实战 搭建一个前后端分离的生鲜超市网站 Django rtf 完成 商品列表页 并没有将列表页的数据json 与前端的页面展示结合起来 讲解如果将dr ...

  4. 6- vue django restful framework 打造生鲜超市 -完成商品列表页(下)

    Vue+Django REST framework实战 搭建一个前后端分离的生鲜超市网站 Django rtf 完成 商品列表页下 drf中的request和response drf对于django的 ...

  5. 1- vue django restful framework 打造生鲜超市

    Vue+Django REST framework实战 使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支 ...

  6. Vue+Django REST framework打造生鲜电商项目

    1-1 课程导学 2-1 Pycharm的安装和简单使用 2-2 MySQL和Navicat的安装和使用 2-3 Windows和Linux下安装Python2和Python3 2-4 虚拟环境的安装 ...

  7. 5- vue django restful framework 打造生鲜超市 -完成商品列表页(上)

    使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, ...

  8. 2- vue django restful framework 打造生鲜超市 -环境搭建

    使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, ...

  9. web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝

    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...

随机推荐

  1. 05-树9 Huffman Codes (30 分)

    In 1953, David A. Huffman published his paper "A Method for the Construction of Minimum-Redunda ...

  2. jcmd jmap应用:一个String经典笔试题的验证

    笔试题: String strA = new String("123123");这一行中创建了几个String对象?? public class StringHeapCountTe ...

  3. 错误:正在解析文件 '/var/lib/dpkg/updates/0004'

    sudo rm /var/lib/dpkg/updates/* sudo apt-get update

  4. 【Unity3D】Unity中用C#读取CSV文件

    1.创建csv文件 既然做实验嘛,没有资源怎么行,自己徒手写个csv文件吧,打开Numbers工具,新建一个表格文件,我的文件编辑截图如下: 创建完成后,导出成csv格式,我这里文件名为test.cs ...

  5. 网络爬虫之记一次js逆向解密经历

    1 引言 数月前写过某网站(请原谅我的掩耳盗铃)的爬虫,这两天需要重新采集一次,用的是scrapy-redis框架,本以为二次爬取可以轻松完成的,可没想到爬虫启动没几秒,出现了大堆的重试提示,心里顿时 ...

  6. Redis中的LRU淘汰策略分析

    Redis作为缓存使用时,一些场景下要考虑内存的空间消耗问题.Redis会删除过期键以释放空间,过期键的删除策略有两种: 惰性删除:每次从键空间中获取键时,都检查取得的键是否过期,如果过期的话,就删除 ...

  7. CQRS之旅——旅程1(我们的领域:Contoso会议管理系统)

    旅程1:我们的领域:Contoso会议管理系统 起点:我们从哪里来,我们带来了什么,谁将与我们同行?" 只要前进,我愿意去任何地方." --大卫•利文斯通 本章介绍了一个虚构的公司 ...

  8. Swift网络库Alamofire的导入

    一.手动导入 1, 官网下载 Alamofire 2, 解压下载的文件 放入工程的顶层目录下 3, 打开工程 Add Files 4, 选中项目 TARGETS > General > E ...

  9. C 碎片三 运算符与表达式

    一.算术运算符 算术运算符:+. -. *. /. %等 加:+ 减: - 乘: * 除: /     除数不能为0 模:%    参与模运算的数据不能为小数 二.赋值运算符 赋值运算符:= 作用: ...

  10. IO模型与soketserver实现并发

    一 IO模型介绍 为了更好地了解IO模型,我们需要事先回顾下:同步.异步.阻塞.非阻塞 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非 ...