爪哇程徐苑眼中的前后端分离和Vue.js介绍(推荐)

宋师兄的书其实涉及到Vue，但没有详细描述。原因很简单。Vue的资料都是中文的。从头到尾浏览Vue.js官网的资料基本就能看懂。个人觉得这是Vue.js最好的学习资料，所以书里没说太多。但是总结了一下最近朋友们遇到的问题，感觉很多人对前端分离的发展还是完全盲目的，所以今天宋歌想和大家聊聊前端分离和Vue.js，这是一门简单的入门科学。

前端和后端是不可分割的

后端模板：Jsp、FreeMarker、Velocity前端模板：百里香叶没有前端和后端的区分。Jsp是一种非常典型的编写方法。Jsp结合了HTML和Java代码。刚开始确实提高了生产力，但是时间长了，大家都发现了Jsp的问题。对于后端工程师来说，可能不精通css，所以流程一般是这样的：前端设计页面——后端把页面转换成Jsp——后端发现问题——页面交给前端——前端没有Jsp。这种方式效率低下。尤其是移动互联网兴起后，公司的业务除了PC之外，一般还包括手机和小程序。通常一套后端系统需要对应多个前端，不可能不加区分地继续使用前端和后端的开发模式。

一般来说，后端可能会返回一个ModelAndView，渲染成HTML后浏览器可以显示，但是对于小程序和移动终端来说，HTML显示不好(其实移动终端也支持HTML，只是操作效率低)。此时，后端与前端数据交互的主流解决方案是通过JSON实现的。

前端和后端分离

前端分离后，后端不再写页面，只提供JSON数据接口(现在很少使用XML数据格式)。前端可以是移动、小程序或PC，负责JSON显示和页面跳转。前端分离后，前端目前有三个主流框架：

某视频剪辑软件

作者尤雨溪，Vue本身就借鉴了Angular。目前，GitHubstar的明星数量最多。建议后端工程师使用这个。最大的原因就是Vue好用，可以快速学习。对于后端工程师来说，快速构建页面来解决问题就足够了。但是如果你是专业的前端工程师，我会推荐你们三个都学。就国内前端框架而言，使用最多的是Vue。而且目前有很多和Vue相关的周边产品，各种UI框架，开源项目，还有很多学习资料。

反应

脸书产品。它是一个用于构建用户界面的js库，具有良好的React性能和简单的代码逻辑。

有角的

AngularJS是Google维护的开源JavaScript库，用于帮助单页应用程序运行。它的目标是通过MVC模式(MVC)增强基于浏览器的应用程序，使开发和测试更加容易。

Vue简介

Vue(发音为/vju/，类似于view)是一个用于构建用户界面的渐进式框架。与其他大框架不同，Vue的设计是从下到上一层一层的应用。Vue的核心库只关注视图层，不仅易用，而且容易与第三方库或现有项目集成。另一方面，当与现代工具链和各种支持类库相结合时，Vue还可以为复杂的单页应用程序提供驱动程序。

只注意视图层MVVM框架。在使用jQuery的过程中，大量的DOM操作混合在一起，需要DOM操作来修改视图或获取值。MVVM是视图和数据模型之间的双向绑定框架，即当数据发生变化时，视图会发生变化，视图也会发生变化，数据模型也会发生变化。开发人员不再需要操作DOM节点。

让我们用下面这个简单的乘法表来体验一下MVVM:

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :https://cdn . jsdeliver . net/NPM/Vue/dist/Vue . js '/script/head meta charset id=' app '输入类型='text' v-model='num '表格边框=' 1 ' tr v-for=' I in parseInt(num)' TD v-for=' j in I ' { j } } * { { I/script/body/html用户修改输入框中的数据，导致变量发生变化，然后在1999年更新乘法表。

矿泉

SPA(单页web应用程序)是网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，而不是从服务器重新加载整个新页面。这种方法避免了页面之间切换带来的用户体验中断，使应用程序更像桌面应用程序。在单页应用程序中，所有必需的代码(HTML、JavaScript和CSS)都是通过加载单个页面来检索的，或者根据需要动态加载适当的资源并添加到页面中(通常是响应用户操作)。SPA有一个缺点，因为SPA应用部署后只有一个页面，这个页面只是一堆js和css引用，没有其他的有效价值。所以SPA应用不容易被搜索引擎收录，所以一般来说，SPA适合大型企业后台管理系统。

Vue的用法大致可以分为两类：

直接将Vue引入页面，不要搭建SPA应用的基础环境SPA应用

首先需要安装两件东西：

NodeJS npm可以直接搜索下载NodeJS。安装成功后，npm将可用。安装成功后，您可以在cmd命令中验证安装是否成功：

NodeJS安装成功后，再安装Vue工具：

Npm install -g vue-cli #只需要在第一次安装期间执行vueinit web pack my-project #创建vue项目cd my-project #进入项目目录npm install #下载依赖项(如果在项目创建的最后一步中选择了自动执行Npm install，则可以省略此步骤)npm run dev #启动项目

启动成功后，浏览器可以输入http://localhost:8080，看到如下页面：

执行npm install命令时，默认使用国外下载源，淘宝的镜像可以通过以下代码配置：

https://registry.npm.taobao.org NPM配置集注册表

修改完成后，可以有效提高下载成功率。

Vue项目结构介绍

创建Vue项目后，使用Web Storm打开该项目。项目目录如下：

生成文件夹用于存储项目生成脚本配置中存储的项目的一些基本配置信息。最常用的目录是port forwarding node_modules，它存储了项目的所有依赖项，也就是说，项目的源代码存储在目录src中，src是npm install命令下载的文件。也就是说，开发人员编写的代码放在这里。静态用于存储静态资源。index.html是整个项目的首页、入口页和唯一的HTML页面。package.json定义了项目的所有依赖关系，包括开发时依赖关系和发布时依赖关系。对于开发者来说，未来99.99%的工作将在src完成。src中的文件目录如下：

资产目录用于存储资产文件。组件目录用于存储组件(一些可重用和非独立的页面)。当然，开发人员也可以直接在组件中创建完整的页面。建议将组件存储在组件中，单独创建一个新的页面文件夹，专门用于存储完整的页面。在路由器目录中，js文件App。Vue for routing是Vue组件，也是项目的第一个Vue组件。main.js相当于Java中的main方法，也是整个项目的入口。jsmain.js如下：

从“vue”导入Vue从“App”导入。/App“从导入路由器”。/router ' Vue . config . production tip=false/* eslint-disable no-new */在main.js中，newVue ({el:' # App '，router，components: { app }，template3360' app/'})首先将vue对象导入到App.vue中，App . vue被命名为app import router。注意，由于路由器目录中路由的默认文件名是index.js，所以可以省略，在一切导入成功后创建一个vue对象，将Vue要处理的节点设置为' #app '，也就是说通过预先在index.html文件中定义的div将路由器设置到Vue对象中。这里是简写，完整的写法是router:router。如果键/值完全相同，则声明一个组件App，该组件App在开始时已经导入到项目中，但是直接导入的组件不能直接使用，所以必须声明。页面模板在模板中定义，即App组件中的内容呈现为div' #app '。所以可以猜测，项目成功启动后，看到的页面效果是在App.vue中定义的

模板div id='app' img src='http:/assets/logo . png ' router-view///div/templatescript export default { name : ' App ' }/script style # App { font-family : ' Avenir '，Helvetica，Arial，sans-serif；-web kit-font-smooth :抗锯齿；-moz-OSX-font-smooth :灰度；文本对齐：中心；color : # 2c 3e 50；边距-top : 60px；}/styleApp.vue是一个vue组件，包含三个部分：1。页面模板；2.页面脚本；3.页面样式的HTML元素在页面模板中定义。这里定义了两个元素，一个是图片，一个是路由器-视图页面脚本，主要用来实现当前页面数据初始化、事件处理等操作。页面样式是对模板中HTML元素的页面美化操作。需要补充说明的是，Router-view指的是路由页面显示的位置，可以简单理解为一个占位符，这个占位符显示的内容会根据当前具体的URL地址来确定。有关详细信息，请参考路由表，即router/index.js文件，如下所示：

从' vue '导入vue从' vue-router '导入router从' @/components/HelloWorld ' Vue . use(Router)在文件中导出默认的新路由器({route: [{path:'/'，name3360' hello world '，component: hello world}]})，首先导入Vue对象、Router对象和hello world组件，创建一个Router对象，定义这里定义的路由表。路径为/，对应的组件为HelloWorld，即浏览器地址为/，在路由器视图位置显示HelloWorld组件的WebStorm中启动Vue。

您也可以配置vue并直接在webstorm中启动它，然后单击右上角进行配置：

然后配置脚本：

配置完成后，单击右上角的开始按钮启动Vue项目，如下所示：

项目汇编

这么大的前端项目，不能直接发布运行。开发人员完成项目开发后，将cmd命令行定位到当前项目目录，然后执行以下命令打包项目：

npm运行构建

打包成功后，将在当前项目目录下生成一个dist文件夹。这个文件夹里有两个文件，即index.html和静止。index.html页面是我们SPA项目中唯一的HTML页面，编译后的js、css等文件都是静态保存的。项目发布后，您可以使用nginx在dist中独立部署静态文件，或者将静态文件复制到Spring Boot项目的静态目录中，然后编译、打包和发布Spring Boot项目。

摘要

因为的读者大多在后端程，也有少数前端程，所以想从一个后端程的角度带大家了解一下前端分离和Vue的一些基本用法，也欢迎专业的前端工程师出来拍砖。

以上是边肖介绍的Vue.js的前端分离和详细集成。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！