投票项目 - 前端设计与Vuetify库
前端

投票项目 - 前端设计与Vuetify库

一上来其实我前端是有点懵逼的，压根没想好怎么写。 倒不是懵逼在项目的样式怎么配，好看不好看这种问题，而是Vue才刚刚看完，还没有写过什么实际项目，这次就要直接上了，逻辑有点混乱，不过确实刺激。 想了一下，既然逻辑还不是很清晰，就先从最简单的入手，想象一下页面进来以后会发生什么事情，然后一点一点实现就

一上来其实我前端是有点懵逼的，压根没想好怎么写。 倒不是懵逼在项目的样式怎么配，好看不好看这种问题，而是Vue才刚刚看完，还没有写过什么实际项目，这次就要直接上了，逻辑有点混乱，不过确实刺激。 想了一下，既然逻辑还不是很清晰，就先从最简单的入手，想象一下页面进来以后会发生什么事情，然后一点一点实现就可以了。
  1. 前端设计
  2. Vuetify学习
  3. Vuetify安装
  4. FLEX BOX学习
  5. FLEX容器
  6. FLEX项目

前端设计

简单想了一下流程，分开两个视图，一个是登录视图（路径为/login)，组件为登录表单；一个是展示投票页面的视图(路径为是根路径)，组件是投票表单+登录展示。 主要业务逻辑如下：
  1. 项目初始化
    1. vuex从尝试从本地加载TOKEN和用户名
  2. 用户访问首页
    1. before导航守卫判断vuex中是否有TOKEN，没有则转至登录视图
    2. 如果有TOKEN，向后端发送TOKEN获取投票信息
      1. 正常获得响应，使用vote中的数据进行渲染--正常进入投票视图
      2. 出现401错误，表示TOKEN认证失败--转至登录视图
      3. 出现404错误，表示用户没有投过票。此时只渲染投票组件中投票部分，不展示投票数量，让用户进行投票之后再展示投票结果。
  3. 用户访问登录视图
    1. 导航守卫不做任何验证-->所有用户都可以访问登录视图
    2. 用户发送登录请求-->成功取得200响应-->将TOKEN和用户名，是否投票，上次投票日期等信息加载至Vuex并存储到本地存储中，然后转至首页。
    3. 用户发送登录请求-->返回任何错误代码-->依然返回登录视图，但是需要通过SLOT插入错误信息。
  4. 用户选择了组件之后点击发送按钮
    1. 如果获取201响应，则表示成功进行投票。
    2. 如果获取406页面，想办法在页面上提示每24小时只能投一次票，什么也不做，还是留在当前页面。
    3. 如果获取401响应，表示TOKEN出现问题，将用户转至登录页面。
这样设计之后，Vue开发的过程在我脑子里基本形成了URL--》视图逻辑--》载入数据--》分发给组件。仔细想了一下，其实和后端有异曲同工之妙，因为前端切换视图在传统后端里等于访问不同的URL，自然就是加载数据的过程，然后把数据放到页面上渲染出来的过程，就是载入数据然后分发给组件进行渲染的过程。 一对比，前端的逻辑就清晰好多了。 不过实际编写的时候，发现细节问题还是很多，所以决定重构一下后端，将所有的请求放行到控制器中来进行处理，这样可以比较方便的处理跨域问题，同时使用Spring Security来简单允许跨域。

Vuetify

看了刘架构分享的尤雨溪6月4日的Vue技术分享，其中提到的Vuetify库，扁平化风格，很对我口味。真的不想再对着BootStrap那套玩意了。决定借写前端的机会也用一下这个库。

vuetify安装

Vuetify的文档在这里，还有中文文档，算是比较方便。 我采用的方法是使用vue ui生成项目，在项目生成之后，点击左侧的插件，然后右上角添加插件，搜索vuetify，是0.5版。点击然后点右下角的安装，然后会弹出通知说插件安装好。 之后还有三个选项，由于是新项目之间安装，选默认就可以了。 剩下就可以使用了。 快速指南里还有其他方法，都比较简便。

Flex Box 学习

这里有一篇A Complete Guide to Flexbox讲的相当不错。 把Flex Box的内容总结一下：

FLEX容器

设置了属性display:flex的都是FLEX容器，容器的作用是决定其中内部的FLEX项目的排布。可以设置的属性如下
  1. flex-direction，决定主轴方向，可选row | row-reverse | column | column-reverse
  2. flex-wrap，要不要强制显示在一行中，可选nowrap | wrap | wrap-reverse，nowrap表示不允许换行，wrap表示换行。
  3. flex-flow，前两个属性的简写，默认是row nowrap。
  4. justify-content，决定其中项目沿主轴的对齐方式，可选flex-start | flex-end | center | space-between | space-around | space-evenly，分别表示靠近头，靠近尾，居中，两端对齐，平均分布（每个项目自带一个左右两侧相等的空白部分），所有项目之间和到两侧的空白相等
  5. align-items，决定其中项目沿交叉轴的对齐方式，可选flex-start | flex-end | center | baseline | stretch，分别表示靠近头，靠近尾，居中，对齐其中文字的基线，拉伸到适合整个交叉轴
  6. align-content，决定多行的对齐方式，flex-start | flex-end | center | space-between | space-around | stretch，这个的居中是将一个容器的所有东西向中间排布，其他和单主轴对齐差不多。
通过主轴和交叉轴对齐方式，其实很容易就可以排布其中内部的元素，比如很简单就可以排成水平居中和垂直居中：
  • item

FLEX项目

在FLEX容器内包裹的内容，自动成为FLEX项目。可以设置的属性如下：
  1. order，一个整数值，决定排列顺序，默认为0，要设置就一起设置，不然0总会排在正数的前边
  2. flex-grow，表示项目是否放大，默认是0，表示不放大，如果都是1，会等分空间，如果数字不相同，会加总然后计算各自占的比例。
  3. flex-shrink，表示项目是否缩小，默认为1，表示会缩小；如果设置为0表示不缩小；如果很多项目都是1，会同比例等分缩小。这个属性设置成负数无效。
  4. flex-basis，表示在分配多余空间之前，项目占据的主轴大小，默认是auto，即项目的本来大小。可以设置成具体的长度，项目就会占据固定空间。
  5. flex，上边三个属性按照flex-grow, flex-shrink和flex-basis顺序的简写。有两个快捷值auto(1 1 auto)和none(0 0 auto)。
  6. align-self，表示这个属性所在的项目自己的对齐方式，会覆盖FLEX容器的align-items属性。默认为auto，即继承父元素的设置。可以设置为auto | flex-start | flex-end | center | baseline | stretch；其意义与FLEX容器的属性一样。
可见FLEX项目的属性，主要是负责自己的缩放，大小，以及必要的时候跳出来改变一下自己的排布，下边这个例子和上边完全一样，只是让中间的方框自己设置自己的对齐方式为align-self: flex-end。
  • item

FLEX嵌套

FLEX容器是可以嵌套的，一个FLEX项目既可以控制自己的排布，也可以成为一个容器继续控制其内部的排布。 比如如果将上边的例子里的文字也居中，只需要把文字再套在一个元素里，然后把内部的FLEX项目同时设置为一个FLEX容器：
  • item
不得不说Flex Box确实好用啊，比原来基于宽度计算和浮动的网格系统要好太多了。之后就来仔细的学习Vuetify啦，做出的页面应该不会让老婆说丑了。
LICENSED UNDER CC BY-NC-SA 4.0
Comment