前后端分离目前重要的前端技术是基于VUE技术的框架进行开发。

1、前后端分离的概念

Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

    这段话是我从网上贴过来的，大部分介绍VUE的文章都以这段话为开头。如果你第一次接触VUE，肯定会看得比较晕，如果你用过一段时间的VUE，回过头来看，可能比较容易理解。

~~~~~~  这里我说一下我的个人体会,你可以跳过，但是我希望还是能看一下，很值得  ~~~~~~~~ 

现在的应用大部分是B/S模式的，就是在网页上进行各类操作，例如购物、查看成绩、选课等，很少用C/S模式的应用，就是电脑上需要安装一个专用的软件，这个软件一般包括菜单和下面的各个操作页面，数据需要联网从远程读取到本地。有点类似我们电脑上安装的QQ软件，如果你用网页版的QQ，对比一下你就能知道体验的差别了。我非常怀念早期的C/S管理软件，数据查询和操作非常流畅，不像B/S方式每一页闪一下，感觉特别慢。但是B/S软件也有自己的优势，客户端用浏览器，什么软件也不用安装，系统修改和升级在服务器端，用户不用升级本地的软件，所以才打败了C/S方式，成为主流的软件模式。

     当你厌倦了B/S方式的慢条斯理，尤其是数据量很大的时候，是否也怀念以前的C/S模式，海量数据上下一拉，随意浏览，真叫痛快。

    你使用过VUE以后，就能体会到，VUE真是一个绝妙的创造。这个多说一句VUE的作者尤雨溪，大学专业是室内艺术和艺术史，硕士是美术设计和技术。在读硕士期间，他偶然接触到了JavaScript ，被这门编程语言深深吸引，开发了一个前端开发库Vue.js。说明计算机编程是多么美妙，兴趣在其中起到很大的作用，即使你的专业不是计算机，也不妨碍在兴趣推定下，你也能做出意想不到的成绩，顺便也帮你完成养家糊口的任务，甚至是财务自由。

   所以如何让软件学习者感受到软件技术的魅力，是一个重要的任务。因此，我们这个系列教程的思路，就是尽快用简短的方式让大家入门，然后尽快能让大家做出点什么，就是所谓的“Learning by Doing” ，通过“做中学”的方式来学习，可能起到更好的效果。

    扯得有点远了，让我们回归主题。VUE的出现，让我们在浏览器上实现了古老的C/S模式，就是所谓的B/S模式下的C/S模式实现。B/S模式是在客户端和服务器之间传递的是HTML页面，VUE在浏览器和服务器之间传递的是单纯的数据，页面是在浏览器上根据接收到的数据“画”出来的，这样就具有快速、流畅的体验，而避免了B/S模式的页面闪动。是否是跟以前的C/S模式非常类似，只是在浏览器上实现的，这样就巧妙避免了客户端电脑上安装软件这个C/S方式的很大的缺陷。

    前后端分离还有一个比较大的背景，由于手机对流量非常敏感（那都是真金白银啊），所以APP同服务器尽量传递最有用的数据，就是页面放到APP到装到用户端的手机上，APP页面上的数据从服务器获取，这样就最大限度节省流量。所以随着移动APP的发展，PC端从服务器端获取完成的动态页面（HTML），手机APP只获取数据，那要开发两套服务器端，非常麻烦。在这个大的背景下，PC端的页面设计也发生了变化，将前后端分离，前端只在服务器端读取数据，而页面部分由前端单独提供，就是现在的前后端分离的模式。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

   上面说这么多，只为了给大家解释一个概念，这个概念我认为很重要，否则你感觉VUE真是莫名其妙。VUE的页面分为两个主要的部分，一个是视图模板部分，就是将来显示出来成为页面给别人看到的部分，一个是数据部分，就是从服务器读取数据，以及对数据进行各种处理的部分，这部分不是给别人看的，是辅助视图模板部分，把数据在模板试图的相应位置显示数据，让模板视图成为有内容的页面。

   上面这段话有点专业，能不一定能理解，我给你举个例子。我们去教务处办理成绩单申请offer。工作的流程是服务窗口的老师去成绩岗位的老师办公室，把你的成绩单打印好以后盖章，拿到服务窗口给你，如果每天有50人申请成绩单，服务窗口的老师就需要来回跑50趟去拿完整的打印好的成绩单（这就是目前B/S方式，客户端和服务器端来回传输的是完整的HTML页面，数据和页面都在服务器端生成好，通过网络传到客户端的浏览器上显示）。后来服务窗口的老师突发奇想，我比照成绩单做一个模板文件，模板上需要填写姓名、专业、成绩的地方做个标记，然后有同学来申请成绩单，我打电话去成绩岗老师，只把个人信息和成绩这些数据要过来，在窗口把数据代替对应模板上的标记，直接在窗口打印盖章不就行了吗，为什么非要过去拿这个完整的成绩单呢？（这就是VUE实现的前后端分离，模板视图下载到客户端后，如果视图不变，只有数据变化，就可以只从服务器端获取数据，改变模板视图上的数据对应的标记就可以实现不同数据的页面了）。比如咱们学校很大，原来成绩岗老师打印成绩单，一天最多打印50份，现在放到服务窗口，我可以多设置服务窗口，成绩岗老师如果只提供数据，那一天是否就能办理好几个50份了？（这就是前后端分离项目可以应付更高的并发量，因为服务端只提供数据）。同学们在服务窗口也不会感觉到服务的老师一会在，一会离开的现象，而是一直在工作（前后端分离页面的流畅性更好）。

   如果你能坚持看到此处还没有晕的话，再返回头看看第一段那些比较唬人的专业人士说的话，是否对视图层，数据绑定这些概念有点理解了。下面让我们通过第一个VUE页面进行体验上面讲的这些概念。

2、第一个VUE页面-- Hello World！

新建一个目录demo1，右键，打开[cmder here]，打开命令窗口

首先我们安装一下cnpm，这样速度快一些

npm i -g cnpm --registry=https://registry.npm.taobao.org

 提示已经可以使用cnpm淘宝镜像了。

输入以下命令，安装vue脚手架构建工具

cnpm install -g vue-cli

输入以下命令，初始化一个项目vueDemo1

vue init webpack vueDemo1

其中webpack是构建工具，demo1是项目文件夹的名称，这个文件夹会自动生成

有提示，就是默认就可以，最终提示

表示创建成功了。

然后命令行进入vueDemo1目录  cd vueDemo1 

再运行   npm run dev

看到这个提示，就表示已经在本机的8080端口运行了。

 打开浏览器，地址栏输入

http://localhost:8080

就能看到我们创建VUE页面运行的结果了。

我们打开我们创建项目的目录vueDemo1，大概了解一下结构

我们的VUE源代码就在src中，这个目录也是我们将来经常关注的目录。

~~~下面的内容稍微有点难理解，我希望你还是能看一下，也可以跳过，过段时间再来看~~~

进入src，我们看一下目录结构

assets 文件夹：里面主要放置一些不变的资源文件。比如图片，样式css 之类的文件

components 文件夹：组件文件夹，vue项目经常使用大量的组件，有别人写好的，也有自己写的，例如著名的echat画图表的组件，让你的程序瞬间高大上，实现数据可视化。

router 文件夹：是vue项目的路由。为什么需要路由，因为vue 是单页面应用，不使用在浏览器打开新页面这种操作，所以流畅性好。所有的页面都是在浏览器的一个页面转来转去，这里面就是设置转移的所有页面的地址，这样可以通过地址就可以在不同的页面之间前后转换。 。

app.vue 文件 ：这个文件是整个项目的入口文件，可以说进入系统的第一个页面。

main.js 文件 ：全局的使用的各种变量、js、插件都在这里引入 、定义，带来的好处是这里定义了，其他地方就不用再定义了，但是注意是需要很多地方都用到的在这里定义，单个页面用到的，在单个页面上再定义，不要在这里定义。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

打开components目录，用记事本（sublime或者notepad更好）打开HelloWorld.vue文件

 把里面的内容清空，修改成下面这样

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Hello World！'
    }
  }
}
</script>

保存一下，浏览器上的页面会自动更新成下面这样

这就是我们的第一个VUE程序，Hello World！

我们下载一个图标放到assets目录下，代替logo.png ，感受一下assets目录的作用。

下面让我们分析一下VUE文件的结构。

上面部分是视图模板，以<template>开始，以</template>结束，内容用HTML语句编辑我们需要显示的内容，需要显示数据的地方，用{{ 变量名 }} 标记。

下面的部分是数据处理部分，以javascript语句编写，数据是在data部分的return中定义。你可以看到上面视图模板中有个meg变量，下面的数据部分初始化了这个变量是字符串“Hello World”，你可以修改一下这个字符串，看看浏览器的效果。

下面让我们做一下我们上面说的成绩单，先做一个成绩单的模板，这样

<template>
  <div >
    <h1>{{ name }} 同学成绩单</h1>
      {{ name }}同学，系我学校{{ major}} 专业学生，平均成绩为: {{ score}},特此证明！
  </div>
</template>

然后数据部分，这样定义

<script>
export default {
  name: 'score',
  data () {
    return {
      name: '张三',
      major: '计算机科学与技术',
      score: 75
    }
  }
}
</script>

把文件保存到components目录下，我们起个名字叫score。

然后还要把路由指到score，而不是helloworls，进入router目录，打开index.js

 分别import引入我们的score组件，以及在路由routes中将网站的根"/"映射到这个组件score上，以前这些地方都是HelloWorld组件，现在要做对应的修改。然后保存，看一下浏览器，就成了这样的效果了。

 通过这个例子，你能否大致了解了VUE页面的设计思路和工作方法， 以及设计的巧妙之处，是显示和数据分离，通过做一个模板，只有数据改变，就可以显示不同的页面，无需去服务器端获取页面，只在服务器端获取数据，在浏览器上根据不同的数据根据模板“绘制”页面，这样实现浏览器上的C/S模式的工作，是不是很奇妙的设计。

下面让我们用一个模板显示若干个同学的成绩单

首先，我们用<div> ...  </div>标签把我们模板中需要重复显示的部分前后包起来，里面放一个vue的循环结构  v-for="student in students"，就是说重复取变量叫students的数组变量的一个元素，这个元素我们起个名字叫student（注意不是students），直到数据的最后一个数值。然后在刚才数据显示的位置，修改成【元素.成员】这样的形式。

然后数据部分修改成数组

 注意数组是用"[   ]"前后起止的。数组中的元素用"{   }"起止。这样students就包括了三个同学的成绩。整个vue页面如下：

<template>
  <div>
    <div  v-for="student in students">
      <h1>{{ student.name }} 同学成绩单</h1>
        {{ student.name }}同学，系我学校{{ student.major}} 专业学生，平均成绩为: {{ student.score}},特此证明！
    </div>
  </div>
</template>

<script>
export default {
  name: 'score',
  data () {
    return {
       students :[
          { 
            name: '张三',
            major: '计算机科学与技术',
            score: 75
           },

           { 
            name: '李四',
            major: '通信工程',
            score: 80
           },
           { 
            name: '王五',
            major: '电子工程',
            score: 30
           },
     
        ]
     
    }
  }
}
</script>

保存一下，到浏览器观看，应该是这样的效果

 如果我们想把低于60分的同学的成绩显示不及格，这样如何处理呢？采用VUE的v-if和v-else

 注意，vue的条件要放到一对HTML标签中，我们选择了HTML的字体加粗标签strong，注意前后要配对<strong>....</strong>。这样我们添加了两个strong标签对，第一个加v-if，第二个加v-else，第一个满足条件显示，第二个不满足条件显示，最终的效果就成了这样

 完整的代码如下：

<template>
  <div>
    <div  v-for="student in students">
      <h1>{{ student.name }} 同学成绩单</h1>
        {{ student.name }}同学，系我学校{{ student.major}} 专业学生，平均成绩为: 
        <strong v-if ="student.score <60"> 不及格 </strong><strong v-else> {{ student.score}}</strong>,
        特此证明！
    </div>
  </div>
</template>

<script>
export default {
  name: 'score',
  data () {
    return {
       students :[
          { 
            name: '张三',
            major: '计算机科学与技术',
            score: 75
           },

           { 
            name: '李四',
            major: '通信工程',
            score: 80
           },
           { 
            name: '王五',
            major: '电子工程',
            score: 30
           },
     
        ]
     
    }
  }
}
</script>

VUE语法还有很多，你可以参考网上的教程，例如菜鸟教程 Vue.js 教程 | 菜鸟教程慢慢自己练习。我非常喜欢菜鸟教程，也向制作这个网站的无私奉献致敬。

 VUE入门今天就到这里，如果你能理解VUE的视图模板和数据配合的设计原理，就是最大的成功了，后续就会理解我们要讲的很多前端为什么要这样做。

本节的代码在

https://gitee.com/W2970/oneweek/tree/master

可以下载到，麻烦顺便帮我点赞

 感谢感谢。