nginx+vue.js实现前后端分离的示例代码

1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理.

它常用于做负载均衡(通过调用多台服务器达到此目的)

静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因)

适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因)

占用内存少,秒启,能快速切换结点,防止宕机

2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,这是必须要学会的一门语言,推荐学习地址如下:http://es6.ruanyifeng.com/

3.vue.js是一款前端模板渲染引擎,类似于后端的jsp,beetl等模板引擎.当然结合node环境也可作为后端渲染用.(官网已支持)

说了上述几点,让我们来回答几个为什么?
1.实现前后端分离的好处是什么?主要应用场景在哪?
2.为什么有了后端模板引擎,为什么还要用前端的模板引擎?他们的优势和劣势?
3.实现前后端分离需要怎么改?

长长的分割线思考后……………………………

1.首先是发展的眼光看问题,以前的项目大多呈现的是PC端项目,且场景简单,固定.请求大多是有状态的.而现在我们常常是移动端项目较多,同一款app大多是原生和内嵌页面相结合的方式.并且现在的项目场景更多元化,这导致一个功能模块很可能是好几个项目的请求共同作用的结果.

2.如果还按照以前的做法,第一个问题是我只能用jsonp去解决调多个跨域请求的问题,实现起来代码太过冗余。对于同一功能,很有可能app端和PC端就有两套不同的写法。并且带宽是个很贵的东西,客户端总是去服务器端一起静态资源的请求,会导致速度慢。动静分离可以实现静态资源和动态资源分开获取,并且服务器也能动静分离,有效解决带宽问题。

3.后端开发人员对于css,js的掌握可能不如前端熟练,比如利用jsp填充数据时,往往需要后端开发人员去调样式和写js,这样会造成开发效率低下。

4.采用前端模板渲染可以释放服务器端的一部分压力,并且前端模板引擎支持的功能比后端丰富.比如用vue可以自定义组件,校验方式,深入式渐变等,这比后端模板引擎功能要更加丰富.

4.我们的解决方案如下

1.传统的交互方式:

客户端发起请求,服务器端响应,经过一系列操作生成动态数据,将动态数据交由后端模板引擎,经过渲染后,传递给前端.

2.改良的交互方式

客户端发起请求,nginx拦截,若是静态资源,则交由文件服务器直接压缩后发送至前端.若是动态资源请求,则经过动态资源服务器生成动态数据,以json格式返回至前端,交由vue.js渲染处理后进行展示.

5.vue.js 2.x版的重点功能讲解

1.怎样和html结构进行绑定,怎样和样式进行动态绑定,常用的监听事件有哪些

1.基本的渲染

    //html结构
    <div id="app">
     {{ message }}
    </div>

    //js模块
    var app = new Vue({
    //会检索绑定的id 如果是class 则是.class即可绑定
       el: '#app',
       data: {
        message: 'Hello Vue!'
       }
    })

2.class与style绑定

<div class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

 data: {
     isActive: true,
     hasError: false
    }

渲染结果为:<div class="static active"></div>

3.常用的绑定事件

 //输出html
<div v-html="rawHtml"></div>
//绑定id或class
<div v-bind:id="dynamicId"></div>
//绑定herf
<a v-bind:href="url" rel="external nofollow" ></a>
//绑定onclick
<a v-on:click="doSomething"></a>

2.和服务器怎样进行通讯

在这里推荐大家使用axios进行和服务端的请求,然后将请求后的数据交由vue.js处理.

关于axios的使用例子链接地址

3.常见的流程控制语句 数据校验 自定义指令

 //if 语句
 <h1 v-if="ok">Yes</h1>

 //for 循环语句
 <ul id="example-1">
 <li v-for="item in items">
  {{ item.message }}
 </li>
 </ul>

数据校验及其表单控件绑定链接地址(https://cn.vuejs.org/v2/guide/forms.html)

以下四点参考官网api,不再做介绍了

4.深入响应式怎样实现(在第一次页面初始化填值后,如果发生改变要修改怎么做)?

5.自定义组件应用及其使用Render创建Html结构

6.路由的使用

7.常见的修饰符

6.实战举例

1.nginx 配置静态资源

 server {
    listen    4000;
    server_name www.test.com;
    charset utf-8;
    index /static/index.html;//配置首页

    //这边可使用正则表达式,拦截动态数据的请求,从而解决跨域问题
    location = /sellingJson.html {
      proxy_pass http://192.168.100.17:8090/vueHelpSellingcar.html;
    }

    #配置Nginx动静分离,定义的静态页面直接从static读取。
    location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$
    {
    root /static/;
    #expires定义用户浏览器缓存的时间为7天,如果静态页面不常更新,可以设置更长,这样可以   节省带宽和缓解服务器的压力
    expires   7d;
    }
  }

2.后端请求返回json数据(以java为例)

  @RequestMapping("/vueHelpSellingcar.html")
  public void vueHelpSellingcar(HttpServletRequest request,HttpServletResponse response) {
    //若干操作后,返回json数据
    JSONObject resultJson = new JSONObject();

    resultJson.put("carbrandList", carbrandList);
    resultJson.put("provinceList", provinceList);

    //进行序列化,返回值前端
    try {
      byte[] json =resultJson.toString().getBytes("utf-8");
      response.setHeader("Content-type", "text/html;charset=UTF-8");
      response.getOutputStream().write(json);
    } catch (Exception e) {
      e.printStackTrace();
    }

  }

3.前端调用vue示例

//html模块
  <div v-if="carbrandList.length" class="char_contain">
   <p v-for="brand in carbrandList" id="  {{brand.brand_id}}">{{brand.brand_name}}</p>
  </div>

//js模块 页面加载后,自动去获取动态资源
  let v={};
  $(function() {
    axios.get('http://test.csx365.com:4000/sellingJson.html')
      .then(function(data){
        //定义一个vue对象,方便模板渲染
        v =Object.assign(v, new Vue({
        el : '.char_contain', //绑定事件名
        data : {
           carbrandList : data.data.carbrandList, //数据流
         }
        }));
       })
       .catch(function(err){
         console.log(err);
       });
    });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue+springboot前后端分离实现单点登录跨域问题解决方法
  • 基于vue实现网站前台的权限管理(前后端分离实践)
  • SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
  • 详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
  • 详解vue.js+UEditor集成 [前后端分离项目]
时间: 2018-02-11

vue+springboot前后端分离实现单点登录跨域问题解决方法

最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

基于vue实现网站前台的权限管理(前后端分离实践)

Javascript做为当下的热门语言,用途很广泛,从前端到后端处处可见其存在,该技术如今在我们项目内部也大量使用来开发诸如CMS系统以及其他其他一些数据分析系统的前端页面,为此个人非常感兴趣并将其作为帽子卡的扩展内容来进行课余学习. Javascript框架鳞次栉比,但基本原理大致相同,因此选用国内人开发的vue.js进行一个初步的尝试.学习vue.js也一周多的时间了,说起vue的主要用法,无外乎Declarative Rendering.Component System.Client-si

SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法

当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助.本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究.另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开

详解vue.js+UEditor集成 [前后端分离项目]

首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI来作为后端登陆之后的主页面框架,中间集成vue的大型单页应用: 后端,springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo +zookeep

详解利用 Vue.js 实现前后端分离的RBAC角色权限管理

项目背景:物业管理后台,不同角色拥有不同权限 采用技术:Vue.js + Vuex + Element UI 实现 RBAC 权限管理需要后端接口支持,这里仅提供前端解决方案. 因代码篇幅较大,对代码进行了删减,文中 "..." 即为省略的一部分代码. 大致思路: 首先登录成功后,从后台拉取用户当前可显示的菜单和可用权限列表,分别将其存入 store 的 nav(菜单导航) 和 auth(用户可用权限) 中,在用户切换路由时,判断是否存在 auth ,如果不存在,则重新获取,判断当前访

Django+Vue.js搭建前后端分离项目的示例

在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py

SpringBoot+Vue.js实现前后端分离的文件上传功能

这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建 我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可 项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l

vue+mock.js实现前后端分离

之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离. 安装: npm install mockjs 这里先写个小案例介绍一下具体使用,写法不规范,仅供参考. 然后案例讲完后我们讲具体的规范使用 那么一起来看看这个案例吧: <script> import Mock from "mockjs" export default { name: "FunctionsDbSource", methods:{ /

详解在Vue.js编写更好的v-for循环的6种技巧

在VueJS中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环. 在最基本的用法中,它们的用法如下. <ul> <li v-for='product in products'> {{ product.name }} </li> </ul> 但是,在本文中,我将介绍六种方法来使你的 v-for 代码更加精确,可预测和强大. 让我们开始吧. 1.始终在v-for循环中使用key 首先,我们将讨论大多数Vue开发人员已经知道的常见最佳做

Springboot+Vue+shiro实现前后端分离、权限控制的示例代码

本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分离的想法,由于之前,没有接触过,主要参考的还是网上的一些博客教程等,初步完成了前后端分离,在此记录以备查阅. 一.前后端分离思想 前端从后端剥离,形成一个前端工程,前端只利用Json来和后端进行交互,后端不返回页面,只返回Json数据.前后端之间完全通过public A

基于 Node.js 实现前后端分离

基本介绍 首先从一个重要的概念"模板"说起. 广义上来说,web中的模板就是填充数据后可以生成文件的页面. 严格意义上来说,应该是模板引擎利用特定格式的文件和所提供的数据编译生成页面.模板大致分为前端模板(如ejs)和后端模板(如freemarker)分别在浏览器端和服务器端编译. 由于当场有一部分同学对node.js并不是很了解,这里补充一下node.js的相关知识.官网上的给他的定义事件驱动.异步什么的就不说了.这里借用朴灵书上的一张图来解释一下node.js这个玩意的结构.如果懂

详解打造 Vue.js 可复用组件

Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组件也越来越多,组件逻辑耦合严重,使代码维护变得十分困难. 同时,Vue.js 的接口和语法十分自由,实现同一功能有若干种方法.每个人解决问题的思路不一样,写出来的代码也就不一样,缺乏团队内的规范. 本文旨在从组件开发的不同方面列举出合理的解决方法,作为建立组件规范的一个参考. 构成组件 组件,是一个

详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"