背景

作为常年搞后端的自己来说,除了多年前学习的一点关于HTML的皮毛,对现在的前端技术栈可谓是一窍不通。但是因为最近在做的内部业务全链路监控系统,负责前端的同事做到一半去搞别的项目了,为了把项目落地不得不硬着头皮学一下前端知识。
项目采用了比较流行的Vue.js(以下简称Vue)框架,所以做了一些学习,有一些小的感悟,所以做个记录。对没有搞过前端的后端同学来说可能有点收获。

前后端分离

现在前后端主流的合作方式还是前后分离。我理解的前后端分离,从宏观上讲:前端负责发送请求到后端获取或者推送数据然后根据响应结果进行渲染。
关于后端,负责提供数据读写API供前端调用,此处不谈。
本文主要谈一下在前端如何使用Vue做渲染。当然Vue.js也可以不用在前后分离的场景,但是这样

Vue如何工作的

从三个方面入手:

  1. 实现原理
  2. Vue使用方式
  3. 生产实践

实现原理 - MVVM (Model - View - ViewModel)模式

关于MVVM的理解:视图层的变化会更新到Model,Model层的变化会更新到View,即所谓的双向绑定(data-binding)。
Vue基于MVVM模式实现。
维基百科定义:https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel

Vue使用方式 - 如何编码

Vue跟Java一样有自己的语法,可以像引用jar一样依赖第三方的JS库。官方文档:https://cn.vuejs.org/v2/guide/

生产实践 - 工程化

与Java工程一样,我们要构建一个可以发布的包,我们需要依赖管理工具来处理负责的依赖的关系,要使用构建工具来帮我们把Vue源文件编译成能被浏览器解释渲染的文件,比如js、css、png等。比如Maven、Gradle、Ivy,管理依赖,并调用Java编译器完成.java到.class的过程一样。Vue使用的构建工具是npm,基于nodejs的包管理工具,npm应该是js相关脚手架下公认的依赖管理工具。

Vue适用场景

Vue是当前很火的一个框架,其解放了前端同学手动绑定数据的大量操作,有利于更快速的写出稳定的功能代码。因为其前后分离的特性,真正的业务数据都是通过异步的方式来拉取,对搜索引擎的收录有影响。针对这种场景,Vue作者提供了一种ssr的解决方案,推荐nuxt.js在服务端完成html代码的渲染,嗯,这个需要nodejs的支持,也意味着额外的维护成本,也意味着多了一次转发,这种方案是否还有其他影响暂时不知。
个人认为,Vue做后台是一个非常棒的方案。

后端视角下的前端框架之Vue.js初探的更多相关文章

  1. 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

    ↓— Vue.js框架魅力 —↓ 前言       Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...

  2. 前端框架之Vue.js

    前言: 前端主流框架有Vue.react.angular,目前比较火因为Vue比较容易学习,运营起来比较快速: Vue是什么呢? 是一个基于MVVM架构的,前端框架: 如果你之前已经习惯了用jQuer ...

  3. Python-S9-Day99——Web前端框架之Vue.js

    01课程安排 02let和const: 03 箭头函数 04 对象的单体模式 05 Node.js介绍和npm操作 06 Webpack,babel介绍和Vue的第一个案例 01课程安排 1.1 ht ...

  4. vue.js初探

    前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...

  5. 前端框架之vue初步学习

    Vue.js介绍: Vue.js是一个构建数据驱动的web界面的渐进式框架.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既有项目整合 ...

  6. Python-S9——Day100-Web前端框架之Vue

    01 课程简介: 02 let和const: 03 箭头函数: 04 对象的单体模式: 05 nodejs介绍和npm操作: 06 webpack.babel介绍和vue的第一个案例: 07 昨日内容 ...

  7. 前端框架之Vue(10)-全家桶简单使用实例

    vue-router官方文档 vuex官方文档 安装 npm install vue-router --save 使用实例 vue-router初使用(webpack-simple模板) 1.切换到指 ...

  8. web前端框架之Vue hello world

    [博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] http ...

  9. 前端框架之Vue(9)-组件基础&vue-cli

    组件基础 基本示例 这里有一个 Vue 组件的示例: <!DOCTYPE html> <html lang="en"> <head> <m ...

随机推荐

  1. ABP之什么是ABP(ASP.NET Boilerplate)

    1.介绍 ABP是开源的且文档比较齐全的应用程序框架.其实它不仅仅是个框架,考虑其最佳实践,ABP更提供了基于领域驱动设计(DDD)的强大价格模型. ABP支持最新的ASP.NET Core和EF C ...

  2. Linux增加开放端口号

    Linux增加开放端口号 : 方法一:命令行方式 1. 开放端口命令: /sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT   2.保存:/etc/ ...

  3. Unity TimeLine

    最近一直再看这方面的内容,看的比较多知识点比较分散,所以目的就是把这些知识点内容梳理一边,并作记录. PlayableDirector与TrackAsset,TrackAsset与PlayableAs ...

  4. SpringMVC 接受请求参数、作用域传值

    目录 原生servlet接收参数 Spring MVC最基础的参数获取 接收基本数据类型参数 方法参数列表和请求参数不一致的处理方式 接收对象引用数据类型 接收复选框这种多个同名的参数 接收obj.f ...

  5. MongoDB系列:五、MongoDB Driver使用正确的姿势连接复制集

    MongoDB复制集(Replica Set)通过存储多份数据副本来保证数据的高可靠,通过自动的主备切换机制来保证服务的高可用.但需要注意的时,连接副本集的姿势如果不对,服务高可用将不复存在. 使用复 ...

  6. Spring Boot环境下出现No operations allowed after connection close错误

    一个基于springcloud的微服务项目,详细配置: SpringCloud + SpringMVC+SpringData JPA+ MySql+Postgresql 其中项目配置了多数据源,前期开 ...

  7. 一次jdk1.7升级jdk1.8后导致redis运行时blocked_clients过多问题解决

    公司有个采集项目,因为请求量较大,添加了redis集群,并且升级了原有的jdk1.7到jdk1.8版本,之后问题就出来了. 1.程序运行一段时间就自动停止,必须重启才能再次运行. 2.redis连接监 ...

  8. java核心卷笔记--P48字符串3.6.5

    一定不要使用 == 运算符检测两个字符串是否相等 ! 这个运算符只能够确定两个字串是否放置在同一个位置上 . 当然 , 如果字符串放置在同一个位置上 , 它们必然相等. 但是 ,完全有可能将内容相同的 ...

  9. 清北学堂(2019 4 28 ) part 1

    今天主要用来铺路,打基础 枚举 没什么具体算法讲究,但要考虑更优的暴力枚举方法,例如回文质数,有以下几种思路: 1.挨个枚举自然数,再一起判断是否是回文数和质数,然而一看就不是最优 2.先枚举质数再判 ...

  10. Keras 获取中间某一层输出

    1.使用函数模型API,新建一个model,将输入和输出定义为原来的model的输入和想要的那一层的输出,然后重新进行predict. #coding=utf-8 import seaborn as ...