后端视角下的前端框架之Vue.js初探

背景

作为常年搞后端的自己来说,除了多年前学习的一点关于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做后台是一个非常棒的方案。

转载于:https://www.cnblogs.com/liushijie/p/10534250.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/387245.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习12推荐系统

推荐系统(Recommender Systems) 推荐系统根据浏览用户过去买过什么书,或过去评价过什么电影来判断并推荐新产品给用户。 这些系统会为像亚马逊和网飞这样的公司带来很大一部分收入。 因此,对推荐系统性能的改善,将对这些企业的有实质性和…

使用Apriori进行关联分析(二)

使用Apriori进行关联分析(二)书接上文(使用Apriori进行关联分析(一)),介绍如何挖掘关联规则。发现关联规则我们的目标是通过频繁项集挖掘到隐藏的关联规则。所谓关联规则,指通过某个…

Apache Tomcat 7 Configuration BIO NIO AIO APR ThreadPool

Apache Tomcat 7 Configuration Reference (7.0.93) - The Executor (thread pool)https://tomcat.apache.org/tomcat-7.0-doc/config/executor.html Tomat组件研究之ThreadPool - 老码农的专栏 - CSDN博客https://blog.csdn.net/chen77716/article/details/344764 Tomcat中的线…

数学笔记3——导数3(隐函数的导数)

数学笔记3——导数3(隐函数的导数)幂函数的扩展形式f(x) xn的导数:f’(x) nxn-1,n是整数,该公式对f(x) xm/n, m,n 是整数同样适用。推导过程:什么是隐函数引自知乎:“如果方程F(x,y)0能确定y…

机器学习13大规模数据集

大型数据集的学习(Learning With Large Datasets) 如果我们有一个低方差的模型, 增加数据集的规模可以帮助你获得更好的结果。 我们应该怎样应对一个有 100 万条记录的训练集? 以线性回归模型为例,每一次梯度下降…

svn认证失败,解决方案

在svnserve.conf:文件中去掉authz-db authz前面的#号,会出现的认证失败。 造成此原因的主要问题就是authz文件中权限没有配置好。 例如: 创建prj1库 svnadmin create prj1 修改配置文件 svnserve.conf: [general] anon-access read auth-access write…

Python机器学习库sklearn的安装

Python机器学习库sklearn的安装 scikit-learn是Python的一个开源机器学习模块,它建立在NumPy,SciPy和matplotlib模块之上能够为用户提供各种机器学习算法接口,可以让用户简单、高效地进行数据挖掘和数据分析。 Ubuntu14.04系统上安装 安装num…

Java07多线程

14 多线程 操作系统的多任务(multitasking):在同一时刻运行多个程序的能力。 多线程在较低的层次上扩展了多任务的概念:一个程序同时执行多个任务。 通常,每一个任务称为一个线程(tread)&…

MySQL字段拼接Concat

有时候,从数据库中拿出的数据并不是我们想要的格式,比如,有以下的vendors表 如果,想以 name (location)的格式展现出来,那么就要用到MySQL的Concat了。 Concat()拼接串,即把多个串连接起来形成一个较长的串…

使用pycharm调用模块后字体变灰 是什么原因呢?

使用pycharm调用模块后字体变灰 是什么原因呢?点击小灯泡提示出现以下内容:This inspection detects names that should resolve but dont. Due to dynamic dispatch and duck typing, this is possible in a limited but useful number of cases. Top-l…

操作系统01概述

第一章 概论 《Operating System Internals and Design Principles》 《Applied Operating System Concepts》 操作系统——裸机上的第一层软件,它是对硬件系统功能的首次扩充,填补人与机器之间的鸿沟。 1.1 操作系统与计算机同在 1.2 对操作系统的…

CNN训练模型 花卉

一、CNN训练模型 模型尺寸分析:卷积层全都采用了补0,所以经过卷积层长和宽不变,只有深度加深。池化层全都没有补0,所以经过池化层长和宽均减小,深度不变。http://download.tensorflow.org/example_images/flower_photo…

Linux re

正则表达式并不是一个工具程序,而是一个字符串处理的标准依据,如果想要以正则表达式的方式处理字符串,就得使用支持正则表达式的工具,例如grep、vi、sed、asw等。 注意:ls不支持正则表达式。 grep 正则表达式: 注意gr…

操作系统02进程管理Process_Description_and_Control

作业的基本概念:用户再一次计算过程中或一次事务处理过程中,要求计算机系统所做的工作的集合。 包含多个程序、多个数据、作业控制说明书 系统调用时操作系统提供给编程人员的唯一接口。 1、文件操作类; 2、进程控制类; 3、资…

蓝桥杯 方格填数(全排列+图形补齐)

方格填数 如下的10个格子 填入0~9的数字,同一数字不能重复填。要求:连续的两个数字不能相邻。(左右、上下、对角都算相邻) 一共有多少种可能的填数方案? 请填写表示方案数目的整数。注意:你提交的应该是一个…

操作系统03进程管理Process_Scheduling

2 Process Scheduling >Type of scheduling >Scheduling Criteria (准则) >Scheduling Algorithm >Real-Time Scheduling (嵌入式系统) 2.1 Learning Objectives By the end of this lecture you should be able to Explain what is Response Time 响应时间-…

花卉分类CNN

tensorflow升级到1.0之后,增加了一些高级模块: 如tf.layers, tf.metrics, 和tf.losses,使得代码稍微有些简化。 任务:花卉分类 版本:tensorflow 1.3 数据:http://download.tensorflow.org/example_images/f…

【模板】可持久化线段树

可持久化线段树/主席树: 顾名思义,该数据结构是可以访问历史版本的线段树。用于解决需要查询历史信息的区间问题。 在功能与时间复杂度上与开n棵线段树无异,然而空间复杂度从$O(n\times nlogn)$降到了$O(nlogn)$。 实现方法: 每次…

skimage库需要依赖 numpy+mkl 和scipy

skimage库需要依赖 numpymkl 和scipy1、打开运行,输入cmd回车,输入python回车,查看python版本2、在https://www.lfd.uci.edu/~gohlke/pythonlibs/#numpy 中,根据自己python版本下载需要的包 (因为我的是python 2.7.13 …

操作系统04进程同步与通信

4.1 进程间的相互作用 4.1.1 进程间的联系资源共享关系相互合作关系临界资源应互斥访问。临界区:不论是硬件临界资源,还是软件临界资源,多个进程必须互斥地对它们进行访问。把在每个进程中访问临界资源的那段代码称为临界资源区。显然&#x…