Vue虽然会帮我们进行视图的渲染，但样式还是由我们自己来完成。开发人员一般都喜欢使用一些现成的UI组件，拿来即用，常见的例如：
-
BootStrap
-
LayUI
-
EasyUI
-
ZUI
然而这些UI组件的基因天生与Vue不合，因为他们更多的是利用DOM操作，借助于jQuery实现，而不是MVVM的思想。
而目前与Vue吻合的UI框架也非常的多，国内比较知名的如：
-
element-ui：饿了么出品
-
i-view：某公司出品
然而我们都不用，我们今天推荐的是一款国外的框架：Vuetify
官方网站：https://vuetifyjs.com/zh-Hans/
Vue虽然会帮我们进行视图的渲染，但样式还是由我们自己来完成。这显然不是我们的强项，因此后端开发人员一般都喜欢使用一些现成的UI组件，拿来即用，常见的例如：
-
BootStrap
-
LayUI
-
EasyUI
-
ZUI
然而这些UI组件的基因天生与Vue不合，因为他们更多的是利用DOM操作，借助于jQuery实现，而不是MVVM的思想。
而目前与Vue吻合的UI框架也非常的多，国内比较知名的如：
-
element-ui：饿了么出品
-
i-view：某公司出品
然而我们都不用，我们今天推荐的是一款国外的框架：Vuetify
官方网站：https://vuetifyjs.com/zh-Hans/
原因如下：
-
Vuetify几乎不需要任何CSS代码，而element-ui许多布局样式需要我们来编写
-
Vuetify从底层构建起来的语义化组件。简单易学，容易记住。
-
Vuetify基于Material Design（谷歌推出的多平台设计规范），更加美观，动画效果酷炫，且风格统一
这是官网的说明：
缺陷：
-
目前官网虽然有中文文档，但因为翻译问题，几乎不太能看。
基于官方网站的文档进行学习：
我们重点关注即可，里面有大量的UI组件，我们要用的时候再查看，不用现在学习，先看下有什么：
以后用到什么组件，就来查询即可。
开始编码前，我们先了解下项目的结构。
首先是目录结构图：
我们最主要理清index.html、main.js、App.vue之间的关系：
理一下：
-
index.html：html模板文件。定义了空的，其id为。
-
main.js：实例化vue对象，并且绑定通过id选择器，绑定到index.html的div中，因此main.js的内容都将在index.html的div中显示。main.js中使用了App组件，即App.vue，也就是说index.html中最终展现的是App.vue中的内容。index.html引用它之后，就拥有了vue的内容（包括组件、样式等），所以，main.js也是webpack打包的入口。
-
index.js：定义请求路径和组件的映射关系。相当于之前的
-
App.vue中也没有内容，而是定义了vue-router的锚点：,我们之前讲过，vue-router路由后的组件将会在锚点展示。
-
最终结论：一切路由后的内容都将通过App.vue在index.html中显示。
-
访问流程：用户在浏览器输入路径，例如：http://localhost:9001/#/item/brand --> index.js(/item/brand路径对应pages/item/Brand.vue组件) --> 该组件显示在App.vue的锚点位置 --> main.js使用了App.vue组件，并把该组件渲染在index.html文件中（id为“app”的div中）
接下来我们一起看下页面布局。
Layout组件是整个页面的布局组件：
一个典型的三块布局。包含左，上，中三部分：
里面使用了Vuetify中的2个组件和一个布局元素：
-
：导航抽屉，主要用于容纳应用程序中的页面的导航链接。
-
：工具栏通常是网站导航的主要途径。可以与导航抽屉一起很好地工作，动态选择是否打开导航抽屉，实现可伸缩的侧边栏。
-
-
：并不是一个组件，而是标记页面布局的元素。可以根据您指定的app组件的结构动态调整大小，使得您可以创建高度可定制的组件。
那么问题来了：中的内容来自哪里？
-
Layout映射的路径是
-
除了Login以为的所有组件，都是定义在Layout的children属性，并且路径都是的下面
-
因此当路由到子组件时，会在Layout中定义的锚点中显示。
-
并且Layout中的其它部分不会变化，这就实现了布局的共享。
我们现在访问页面使用的是：http://localhost:9001
有没有什么问题？
实际开发中，会有不同的环境：
-
开发环境：自己的电脑
-
测试环境：提供给测试人员使用的环境
-
预发布环境：数据是和生成环境的数据一致，运行最新的项目代码进去测试
-
生产环境：项目最终发布上线的环境
如果不同环境使用不同的ip去访问，可能会出现一些问题。为了保证所有环境的一致，我们会在各种环境下都使用域名来访问。
但是最终，我们希望这些域名指向的还是我们本机的某个端口。
那么，当我们在浏览器输入一个域名时，浏览器是如何找到对应服务的ip和端口的呢？
一个域名一定会被解析为一个或多个ip。这一般会包含两步：
-
本地域名解析
浏览器会首先在本机的hosts文件中查找域名映射的IP地址，如果查找到就返回IP ，没找到则进行域名服务器解析，一般本地解析都会失败，因为默认这个文件是空的。
-
Windows下的hosts文件地址：C:/Windows/System32/drivers/etc/hosts
-
Linux下的hosts文件所在路径： /etc/hosts
样式：
-
-
域名服务器解析
本地解析失败，才会进行域名服务器解析，域名服务器就是网络中的一台计算机，里面记录了所有注册备案的域名和ip映射关系，一般只要域名是正确的，并且备案通过，一定能找到。
我们通过修改host文件，然后通过域名访问
通过域名访问：
原因：我们配置了项目访问的路径，虽然manage.leyou.com映射的ip也是127.0.0.1，但是webpack会验证host是否符合配置。
在webpack.dev.conf.js中取消host验证：
重新执行，刷新浏览器：
OK！
域名问题解决了，但是现在要访问后台页面，还得自己加上端口：。
这就不够优雅了。我们希望的是直接域名访问：。这种情况下端口默认是80，如何才能把请求转移到9001端口呢？
这里就要用到反向代理工具：Nginx
4.4.1.什么是Nginx
nginx可以作为web服务器，但更多的时候，我们把它作为网关，因为它具备网关必备的功能：
-
反向代理
-
负载均衡
-
动态路由
-
请求过滤
4.4.2.nginx作为web服务器
Web服务器分2类：
-
web应用服务器，如：
-
tomcat
-
resin
-
jetty
-
-
web服务器，如：
-
Apache 服务器
-
Nginx
-
IIS
-
区分：web服务器不能解析jsp等页面，只能处理js、css、html等静态资源。 并发：web服务器的并发能力远高于web应用服务器。
4.4.3.nginx作为反向代理
什么是反向代理？
-
代理：通过客户机的配置，实现让一台服务器(代理服务器)代理客户机，客户的所有请求都交给代理服务器处理。
-
反向代理：用一台服务器，代理真实服务器，用户访问时，不再是访问真实服务器，而是代理服务器。
nginx可以当做反向代理服务器来使用：
-
我们需要提前在nginx中配置好反向代理的规则，不同的请求，交给不同的真实服务器处理
-
当请求到达nginx，nginx会根据已经定义的规则进行请求的转发，从而实现路由功能
利用反向代理，就可以解决我们前面所说的端口问题，如图
4.4.4.安装和使用
安装
安装非常简单，直接解压即可，绿色免安装
我们在本地安装一台nginx：
解压后，目录结构：
-
conf：配置目录
-
contrib：第三方依赖
-
html：默认的静态资源目录，类似于tomcat的webapps
-
logs：日志目录
-
nginx.exe：启动程序。可双击运行，但不建议这么做。
反向代理配置
示例：
nginx中的每个server就是一个反向代理配置，可以有多个server
完整配置：
使用
nginx可以通过命令行来启动，操作命令：
-
启动：
-
停止：
-
重新加载：
启动过程会闪烁一下，启动成功后，任务管理器中会有两个nginx进程：
启动nginx，然后用域名访问后台管理系统：
现在实现了域名访问网站了，中间的流程是怎样的呢？
-
浏览器准备发起请求，访问http://mamage.leyou.com，但需要进行域名解析
-
优先进行本地域名解析，因为我们修改了hosts，所以解析成功，得到地址：127.0.0.1
-
请求被发往解析得到的ip，并且默认使用80端口：http://127.0.0.1:80
本机的nginx一直监听80端口，因此捕获这个请求
-
nginx中配置了反向代理规则，将manage.leyou.com代理到127.0.0.1:9001，因此请求被转发
-
后台系统的webpack server监听的端口是9001，得到请求并处理，完成后将响应返回到nginx
-
nginx将得到的结果返回到浏览器
商城的核心自然是商品，而商品多了以后，肯定要进行分类，并且不同的商品会有不同的品牌信息，其关系如图所示：
-
一个商品分类下有很多商品
-
一个商品分类下有很多品牌
-
而一个品牌，可能属于不同的分类
-
一个品牌下也会有很多商品
因此，我们需要依次去完成：商品分类、品牌、商品的开发。
我们先看商品分类表：
因为商品分类会有层级关系，因此这里我们加入了字段，对本表中的其它分类进行自关联。
页面模板：
-
：卡片，是vuetify中提供的组件，提供一个悬浮效果的面板，一般用来展示一组数据。
-
-
：布局容器，用来控制响应式布局。与BootStrap的栅格系统类似，整个屏幕被分为12格。我们可以控制所占的格数来控制宽度：
-
本例中，我们用控制在小屏幕及以上时，显示宽度为10格
-
：树组件。Vuetify并没有提供树组件，这个是我们自己编写的自定义组件：
-
里面涉及一些vue的高级用法，大家暂时不要关注其源码，会用即可。
5.2.2.树组件的用法
这里我贴出树组件的用法指南。
属性列表：
这里推荐使用url进行延迟加载，每当点击父节点时，就会发起请求，根据父节点id查询子节点信息。
当有treeData属性时，就不会触发url加载
远程请求返回的结果格式：
事件：
完整node的信息
回调函数中返回完整的node节点会包含以下数据：
5.3.1.url异步请求
给大家的页面中，treeData是假数据，我们删除数据treeData属性，只保留url看看会发生什么：
刷新页面，可以看到：
页面中的树没有了，并且发起了一条请求：http://localhost/api/item/category/list?pid=0
大家可能会觉得很奇怪，我们明明是使用的相对路径，讲道理发起的请求地址应该是：
http://manage.leyou.com/item/category/list
但实际却是：
http://localhost/api/item/category/list?pid=0
这是因为，我们有一个全局的配置文件，对所有的请求路径进行了约定：
路径是localhost，并且默认加上了/api的前缀，这恰好与我们的网关设置匹配，我们只需要把地址改成网关的地址即可,因为我们使用了nginx反向代理，这里可以写域名。
接下来，我们要做的事情就是编写后台接口，返回对应的数据即可。
5.3.2.实体类
在中添加category实体类：
内容：
需要注意的是，这里要用到jpa的注解，因此我们在项目中添加jpa依赖
5.3.3.controller
编写一个controller一般需要知道四个内容：
-
请求方式：决定我们用GetMapping还是PostMapping
-
请求路径：决定映射路径
-
请求参数：决定方法的参数
-
返回值结果：决定方法的返回值
在刚才页面发起的请求中，我们就能得到绝大多数信息：
-
请求方式：Get
-
请求路径：/api/item/category/list。其中/api是网关前缀，/item是网关的路由映射，真实的路径应该是/category/list
-
请求参数：pid=0，根据tree组件的说明，应该是父节点的id，第一次查询为0，那就是查询一级类目
-
返回结果：？？
根据前面tree组件的用法我们知道，返回的应该是json数组：
对应的java类型可以是List集合，里面的元素就是类目对象了。也就是
添加Controller：
controller代码：
5.3.4.service
一般service层我们会定义接口和实现类，不过这里我们就偷懒一下，直接写实现类了：
5.3.5.mapper
我们使用通用mapper来简化开发：
要注意，我们并没有在mapper接口上声明@Mapper注解，那么mybatis如何才能找到接口呢？
我们在启动类上添加一个扫描包功能：
5.3.6.启动并测试
我们不经过网关，直接访问：http://localhost:8081/category/list
然后试试网关是否畅通：http://api.leyou.com/api/item/category/list
一切OK！
然后刷新后台管理页面查看：
以上就是本篇文章【前端框架UI之Vuetify框架介绍及前端项目框架介绍】的全部内容了，欢迎阅览 ！ 文章地址：http://sicmodule.glev.cn/news/245.html 资讯 企业新闻 行情 企业黄页 同类资讯 首页 网站地图 返回首页 歌乐夫资讯移动站 http://sicmodule.glev.cn/mobile/ , 查看更多