目前流行的“前后端分离”技术足够简单，足够方便，足够易学，也足够完善。

    项目所使用的前端技术是：element-ui，文档地址是：http://element.eleme.io/#/zh-CN

一、spring boot

spring boot是一种框架。它默认配置了很多框架的使用方式。spring boot整合了所有的框架。

使用spring boot可以方便、快速搭建项目，使我们不用关心框架之间的兼容性和适用版本等各种问题，我们想使用任何东西，仅仅添加一个配置就可以，所以使用spring boot非常适合构建微服务。

二、vue

vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，vue采用自底向上增量开发的设计。vue的核心库只关注视图层，并且非常容易学习，非常容易与其他库或已有项目整合。vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

三、element-ui

element-ui是一款功能强大的前端UI框架。element-ui可以基于vue框架的版本，还有基于react和angular的版本。

四、零碎知识点

1、form中,model属性,为表单数据对象,在其他地方,如果想要得到表单中的数据,都可以从该对象中获取.例如:

<el-form :model="authorizeForm" ref="authorizeForm" :rules="rules">

2、要显示固定内容用<el-tag>,例如:

<el-tag type="info">聚合方式:{{this.outputForm.defaultFunction}}</el-tag>

3、要在组件中取属性值,应该怎么办?

可以利用两个大括号将属性值扩住.例如:

<el-tag type="info">聚合方式:{{this.outputForm.defaultFunction}}</el-tag>

4、v-model属性

例如: <input v-model="test">

监听input的输入事件,并获取input中的数据,并且获取的数据是实时的.

5、ref属性

有时候我们也要获取dom元素的需求，我们可以用vue的ref引用属性；

有时候我们也要获取dom元素的需求，我们可以用vue的ref引用属性；

例：<div ref="hello" @click="fun">hello</div>

methods：{

         fun:function(){

                    console.log(this.$refs.hello);        //这里返回的的这个div的元素标签节点，

                     console.log(this.$refs.hello.innerHTML); //这里返回的的这个div的元素标签节点里面的内容，

        }

}

如果ref属性定义在一个组件上，那么它返回的是这个组件的实例引用，这样可以获取到组件里面定义的数据，甚至其他的.

6、prop 属性

prop可以和rules组合在一起进行表单验证.

例如:

<el-form :model="authorizeForm" ref="authorizeForm" :rules="rules">

  <el-form-item label="任务" prop="resourceId" :label-width="formLabelWidth">

  </el-form-item>

</el-form>

7、watch

   watch所观测的变量必须在data中进行定义。

vue中的watch是一个比较重要的概念，通过他我们可以检测data的变化
键是一个字符串，它是被观测的对象。
值可以是一个字符串，这个字符串是方法名。
例如:
watch: {
  'authorizeForm.receiver': 'searchSugUsers'
}

其中,authorizeForm.receiver是被观测的对象.

searchSugUsers : 是随searchSugUsers2而变化的值.

8、要使组件隐藏或者显示,用v-show属性,例如:

<el-button v-show="typeFlag" size="mini" @click="newAuthorize" type="primary">新增授权</el-button>

其中,typeFlag直接在data的return中定义即可.

9、要想要组件都在同一行，或者要组件单独一行，用<el-row>就行。例如：

<el-row>
<el-form-item label="负责人" prop="cuser">
  <el-input v-model="outputForm.cuser" style="width: 250px"></el-input>
  <el-button v-show="typeFlag" size="mini" @click="newAuthorize" type="primary">新增授权</el-button>
</el-form-item>
</el-row>
<el-row>

这样，输入框和按钮两个组件便在同一行。

10、html中width="80%"和width="80"有什么不同?

width="80%" 是针对它父容器宽度的百分之80，而width="80"是宽度就是80px（像素）。实际用例如下：

<el-form  label-position="right" :model="jobForm" :rules="rules" ref="jobForm" size="mini" label-width="150px">
   <el-form-item label="topic：" style="width: 80%" prop="topicId">
   </el-form-item>
</el-form>

11、computed

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；例如：

computed: {
    age: function() {
        return this.childrens.age +10;
    }
}
data.childrens.age这个值改变的时候，动态触发computed里的age属性计算，最后显示到页面的结果是：60。