澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

Diy页面服务端渲染解决方案,一个实际的案例介

现在的App和桌面软件开发,每一个界面都是有无数个组件所构成。但是网页开发呢?我们以前一直都是每个页面都在编写重复的代码,慢慢的,我们把重复的内容抽离出来,然后用引入的方式拼成一个完整的html页面(这种模板渲染可以用后台引擎也可以用前端的模板引擎)。

MVVM

什么是MVVM?其实这是一个前端概念,本人是后端开发,其实对前端不是很了解,但是本人也是.Net开发人员,.Net中的WPF中其中一个核心是MVVM,最近手上一个项目也在用WPF,所以对MVVM还是有点个人的理解。从表面上理解Model-View-ViewModel那就是实体-视图-视图实体,好像有点明白,是不是实体可以到视图,视图也可以到实体,在想下,是不是数据可以从实体到视图,也可以从视图到实体,在用一个高大上的名字,那就是数据双向绑定。是的MVVM其实就是一种数据双向绑定的思想。

对于node层的缓存,在生产环境中,上线时可以手动更新这些js和css缓存,让用户每次访问都是从缓存中取数据。

作为一只专注于后台和服务器的程序猴子,偶然间看了一下前端开发,发现自己写的前端代码简直是远古时代的产物。

在spring boot 引入静态文件

为了演示一个静态资源服务器,我在本机开启一个nginx,来承载静态资源。
对nginx进行了简单的配置,直接将根目录指向vue生成的目录

server {

        listen 80;
        server_name localhost;
        root   D:xxxxxxxxxspringboot-vue-samplefrontdist;
        index  index.php index.html index.htm;
        add_header Access-Control-Allow-Origin "*";
        default_type 'text/html';
        charset utf-8;
        #rewrite_log on;
    }

运行一下看下效果:

nginx上的效果

现在在后端spring boot 里面引入静态资源。上面已经讲了,index.html相当于vue的入口,那么这个入口文件的代码直接拷贝到后台spring boot 里面提供的一个页面其实就能把后台的这个页面当成vue的启动文件。改造后的后台页面如下:

后台页面改造

改造完成点击运行,运行结果为:

改造运行结果

源代码:https://github.com/applenele/springboot-vue-sample

 

欢迎大家给点意见哈

后端搭建

创建Spring boot 项目我就不说了。我直接搭建展示目录。

后端目录

直接运行结果:

后端运行

代码基于node的thinkjs框架,个人认为thinkjs真的不错,大家比较熟悉的MVC模式,thinksjs送给前端开发人员大大的福利,访问thinkjs 。

vue项目搭建

关于vue项目搭建我直接百度的(哈哈)。我在这装X总结下。

  1. 安装node.js
  2. 安装淘宝镜像(不然会慢的一X)
  3. 全局安装webpack cnpm install webpack -g
  4. 全局安装vue-cli (cnpm install -g vue-cli)
  5. (用webpack模板来创建一个vue项目)vue init webpack my-project
  6. 安装项目依赖 cd my-project / cnpm install
  7. 启动项目
  8. 编译vue为静态文件(npm run build)

如下图是我创建后的vue项目,已经运行结果。

vue项目目录

运行结果

编译之后的文件路径:

编译之后的

我们看下index.html的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>front</title>
<link href=/static/css/app.46520b505f33694e3eee33aba78b61eb.css rel=stylesheet>
</head><body>
<div id=app></div>
<script type=text/javascript src=/static/js/manifest.3322ba91290e7480ffb3.js>
</script>
<script type=text/javascript src=/static/js/vendor.13ccb5cb8cfc8644879c.js></script>
<script type=text/javascript src=/static/js/app.3c073d6bceb68d30b32f.js></script>
</body>
</html>

其实就是引用js或者css文件,没有其他的,这相当与vue项目的入口,只引用一些主要的js或者的css,其他的js或者css,会在主要的js里面import(java里面叫添加包,其实应该是类似的概念)

反正文件都是这样的,据说可以设置。
以上相当于一个vue的Hello World。(有学一门新语言的感觉)

  3. 安装依赖 npm install;

太久没有接触前端开发了,感觉整个人都脱节了。顺便分享一个自己造的前端打包,压缩合并,并且为静态资源自动打上版本号的小轮子:

Show Code

俗话说的好,别总BB,show your code。下面我开始搭建一个demo。在搭建之前先来在讨论下vue,vue开发的时候需要自建一个服务,来开发调试,开发完成了可以将vue打包编译成普通的静态资源js或者css。在正式的项目中将打包编译后的静态资源放到静态资源服务器上或者cnd上,我们直接用打包编译后的静态资源就好了。这样在开发的时候,前端需要开启一个服务来开发和测试,那么在开发调试的时候要调用后端的接口,就会出现跨域情况,所以在开发过程需要解决跨域问题。这在后面会配置一个nginx用以解决跨域问题。

基于上述原因的分析,改进后的方案最好是可以在服务端渲染web组件。

webpack和grunt等。

常规的开发方式

采用Spring Boot 开发项目开发项目常规的方式其实很简单,无非还是采用原来Spring Mvc那一套,建控制器(Controller)然后建方法(action)再添加模板引擎(spring boot 推荐使用thymeleaf)这样开发开起来其实也没有大问题,毕竟是采用了MVC的思想,在一定程度上开发起来还是很方便的。但是如果在分工很细的情况下,这里前端后端是是分离开的,那么假如前端的同学需要加个页面那么就要找后端得到同学给他加,想想一个复杂的项目,好多页面,这样开发方式肯定不是一个好的方案,如何解决这个问题呢?让我们慢慢的一步一步的深入解答。

3. 服务端渲染生成页面html,方便SEO,更方便后期做页面静态化,进一步提升页面性能。

现在不是以前那种单单一个jquery就行了的时代,现在很多都用上vue.js,Angular,React这些新的前端mvc框架。

SPA(Single Page Application)

SPA翻译成中文就是单页面应用,其实从名字也可以看出来,所谓的单页面应用,就是整个web项目只需要一个页面就可以,这个怎么实现的呢。我想起了我之前用jquery的时候(似乎现在说写jquery有点被鄙视,哈哈),用jquery写过瀑布流,瀑布流的思想很简单,就是下拉触发一个事件,在这个事件里面请求一个后台接口,然后得到结果,将结果append到页面上。那单页面是不是跟append效果类似。可能优化了性能。(前端的同学可能要喷我,本来高大上的东西,被我说的这么low)。我已知的前端的单页面框架有:vue,AngularJS。我们使用的是vue,这个东西不管前端还是后端估计不知道的人很少了。

  1. Diy 页面初期解决方案

假如你有很多页面都引入,又都是写死的话,我相信你会改到吐,so这些事情还是需要一个工具来做。

介绍

最近在工作中做个新项目,后端选用Spring Boot,前端选用Vue技术。众所周知现在开发都是前后端分离,本文就将介绍一种前后端分离方式。

在移动互联网电商领域,运营每天需要搭建多个促销页面来吸引用户去点击去购买,一开始程序员临时写个新页面去实现,可这些页面可以用几次就不用了,每次创建新页面去实现费时费力,而且,电商的运营需求是快速迭代的,每次去页面代码里去改,然后上线也太不方便了。所以产品提出了Diy 页面----配置web组件去搭建页面,事先定好页面可能到用到哪些的组件,然后运营在后台选好页面由哪些组件组成,然后分别去配置对应的组件数据,这样运营可以快速地去创建他们所需要的页面,快速响应需求变化。所以Diy 页面能很好地解决电商运营的复杂而快速的需求变动。

情况一:先发布html页面,当html发布之后,静态资源文件没有发布的时候,用户访问拿到了旧的静态资源,并且缓存了,然后他下一次访问(在静态资源文件发布之后),他用的还是旧的css,这个时候,发布等于没发不呀。

Spring Boot Vue 使前后端分离

之前说过了,常规的spring mvc 开发其实也很难完全的前后端分离。前端的同学要加页面需要找后端的同学给加。那么我们可以只建一个页面,前端使用vue,构建一个单页面应用。这样前端可以完全不用依赖后端了,在项目创建的时候,就创建一个页面,也不需要把js,css等静态资源加到spring boot项目里面,把静态资源放到静态资源服务器上(可以放到CDN上),前端去维护静态资源就好了。那么其实只要在我们创建的一个页面上加上一个总的JS,总的CSS,再在js里面引用其他的js或者css,这样在一个页面上其实加的东西不多,这样做前端对后端的依赖大大减少。那么问题来了,就是都这样,为何不干脆不完全的把前端和后端分离开,后端连一个页面都不用了,只提供接口。前端自己弄个服务来承载就好了。其实这样行不行?
其实也行,但是至少需要考虑两点:1.单独为前端开一个服务来承载是不是合算2.解决接口调用跨域问题(其实就是在配个nginx转发,但是增加发布配置)。其实还有可能遇到不得不用后端模板引擎来控制的情况。其实我觉得完全的前后端分离在我看来并不是一个合适的方案。所以我们仍然选用在后端提供一个页面来供前端使用,前端在这个页面上做单页面应用的方式。前面为什么介绍MVVM,个人观点vue搭配mvvm会不会很爽(本人没试过,但是写wpf mvvm超级爽,所以推荐)。

  1. 安装node;

一直以来,后台就是这样子用mvc框架来开发。然而前端开发直接一个页面,一个html文件,一个css文件,一个js文件。似乎这样子维护也没什么问题,开发过程也算是比较清晰了。

实现方式如下 :

本文由澳门皇冠金沙网站发布于编辑程序,转载请注明出处:Diy页面服务端渲染解决方案,一个实际的案例介