zoukankan      html  css  js  c++  java
  • 4-restfulapi的介绍,vue代码结构

    #####

    前后端分离的优缺点,

    前后端分离的优点
    1,随着h5,app,pad,这样多端的出现,前后端分离就变的越来越重要了,
    只有只有pc,现在发展越来越快了,
    现在如果还需要后端生成模板的方式,这种局限就很明显了,
    2,spa开发模式的流行
    后端提供数据,前端负责展示,

    3,前后端开发职责不清,template到底应该后端写还是前端写,如果后端写,就必须后端会前端的知识,后端是不知道这些语法的,
    后端你懂了前端的语言之后才可以开发templates,如果前端写就需要知道后端的一些,这增加了学习成本,

    4,开发效率的问题,前端和后端互相等待,

    5,前端一直是配合后端,能力受限,前端只提供html

    6,后端开发语音和模板耦合性太高了,导致开发语言严重依赖,
    比如一开始php开发的,后面改成Python的,这是完全要重写的,

    前后端分离的缺点,
    1,前端的学习门槛增加,后端的学习门槛也是增加的,因为要提供规范的数据了,
    2,数据依赖导致文档重要性增加,后端怎么交付给前端,所以是通过文档来交付的,
    比如接口地址,字段说明,等等,修改了字段还需要通知给前端,
    3,前端工作量增加,
    4,SEO的难度增加,
    SEo的搜索引擎优化,这种难度增加,因为爬虫爬取的是爬取到页面是拿不到数据的,这样就不能往前面排了,
    ssr,这就是为了提高搜索引擎优化的排名,这也是工作量增加了,
    5,如果从原来的前后端不分离,迁移成为前后端分离的开发模式,这个迁移成本是很大的,


    前后端分离的技术是越来越流行的,


     #######

    restful api
    这是一套开发的规范,标准,这不是一个框架,
    标准对于开发人员来说是意味着一切,所有的html,ip协议,都是一套标准,
    你按照这个标准设计,

    好处:
    1,轻量,直接通过http,不需要额外的协议,另外post,get,put,delete,操作,
    2,这是面向资源的,一目了然,具有自解释性,
    url要求资源,是一个名词,所以有很好的可读性,
    3,数据表述简单,一般都是通过json



    #####

    vue基本的概念介绍

    1,前端工程化,
    工程化这个概念是后端比较常见的,
    不管还是项目的构建还是第三方的导入,都是工程化的
    前端也是越来越流行了,因为是越来越复杂了,node.js这个出来之后,前端工程化几乎是飞速的发展的,是越来越复杂的,


    2,数据双向绑定,
    比如写过vue,angular,react,这是非常基础的,这个什么意思?
    vue是学习成本,或者性价比是比较好的,,
    mvvm,model to view,view to model,
    model是数据,view是html,这就是view驱动数据,数据又驱动我们的view,
    数据和页面的显示都绑定起来了,


    3,组件化开发
    如果使用bootstrap,需要把css,js文件全部导入,才可以,这是导入了很多的无用的东西,
    我们希望只导入有用的东西,

    数据双向绑定和组件化开发,是大大增加了,项目的重构,用这些组件开发效率会非常的高,
    vue是国人写的,有很好的中文文档,


    vue开发的几个概念,
    1,webpack
    这个是对于很多程序员是一个很大的障碍,
    这个webpack是所有的vue项目都用到的,这个不是vue 的一部分,而是js的一个工具,可以把整个的js,比如es6到es5的转换,这是一个问题,
    浏览器只认识三个东西,html,css,js,
    所以工程化开发的时候,不管怎么做,都需要变成这三个,
    这里面最灵活的是js,js可以操作css和html的,正是因为这个不管我们的项目怎么写的,都可以通过webpack变成js,然后写入一个js文件,,
    webpack最终的都是把代码变成了js文件,如果想要学好vue这是必须要了解的, 是绕不开的,


    2,vue,vuex,vue-router,axios
    这是vue全家桶,
    vue是一个框架,
    vuex,组件的通信,这是一个非常常见的,这个就是为了解决组件间的通信的,
    vue-router,整个系统是一个单页面的应用,如果想要跳转,都没有向后台发起请求,vue组件之间的跳转,我们怎么知道的,这就是vue-router做的事情,
    前端内部实现跳转,
    axios,这是可以发送ajax请求的,在页面里面肯定要发送http请求的,如果通过jQuery发请求的话,最大的问题就是jQuery整个导入进来
    但是我们只是使用了一个ajax而已,所以会导致性能降低,所以axios是专门用来做http请求的,是异步的,比jQuery小很多的,因为功能比较单一,
    这也是vue官方比较推荐的http请求的包,


    3,es6,babel,
    我们平时用的js,是按照es的标准来实现的,网上的vue的项目基本都是基于es6的语法来写的
    所以es6的语法,肯定是js的未来,这是很很重要的,
    babel,,这是一个转换器,可以把es6的语法,转换成es5的语法的,因为es6比较新,所以很多的流量器是不支持es6的,
    所以需要es6,转换成es5,但是我们开发的时候还是可以使用的es6开发的,

    这些是很重要的概念,后面都会遇到,要学好vue,东西是非常多的,


    #######

    vue源码结构分析,
    整个项目是基于组件来开发的,
    首先拿到项目的时候,
    babelirl,---这是babel的配置文件,
    src,这是所有的源码,英文就是source,src,
    --api,就是请求的api,
    ---axios,里面加了很多的全局拦截,
    ---components,这是基础的组件
    ---router,就是vue-router配置的东西,
    ---static,这是静态文件,
    ----store,就是vuex里面放的东西,
    ----style,这就是css样式,
    ----views,这就是所有的组件了,

    #####
    我们的组件有哪些?
    1,首页里面,顶部,header是一个,
    轮播图是一个组件,
    新品是一个组件,
    生鲜,视频,酒水,饮料是一个组件,

    2,商品列表页,
    面包屑是一个组件,
    导航栏是一个组件,
    价格区间是一个组件,
    销量是一个组件,
    列表是一个组件,
    分页是一个组件,
    底部是一个组件,

    3,商品详情页,
    左侧使用一个组件,右侧是一个组件,

    4,个人中心,
    订单是一个组件,
    收获地址是一个组件,
    用户信息是一个组件,
    收藏是一个组件,
    留言是一个组件,

    5,结算,
    结算也是一个组件,

    如果我们要知道整个项目有多少组件怎么做?
    谷歌浏览器可以安装一个vue组件,可以查看,

    所以我们知道了有哪些组件,我们做数据映射的时候就会非常的快,修改的比较快,

    所以
    第一我们有哪些组件,
    第二,如何快速分析有哪些组件,这样可以快速定位到vue文件,去修改,


    ####

    ######

  • 相关阅读:
    工业互联网兴起
    互联网经济学
    广泛应用的区块链技术
    工业互联网数据传输探讨
    谈谈网站性能
    深入探讨vue响应式原理
    工业互联网虚拟数字
    对www.518shengmao.com站资源打包,采用vue Node.js
    jquery的事件命名空间详解
    巧用索引与变量
  • 原文地址:https://www.cnblogs.com/andy0816/p/14362434.html
Copyright © 2011-2022 走看看