第八节：导入 web 层和实现商品分类查询

此博客用于个人学习，来源于网上，对知识点进行一个整理。

1. 搭建后台管理前端：

1.1 导入项目并且安装依赖：

先将项目压缩包解压缩，放到工作目录中，package.json 中依然定义了我们所需的一切依赖，我们只需要打开终端，进入项目目录，输入：npm install 命令，即可安装这些依赖。在 package.json 文件中有 scripts 启动脚本配置，可以输入命令： npm run dev 或者 npm start。

1.2 目录结构：

webpack：是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。并且提供了前端项目的热部署插件。

1.3 调用关系：

理清 index.html、main.js、App.vue 之间的关系：

• index.html：html 模板文件。定义了空的 div ，其 id 为 app 。
• 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：定义请求路径和组件的映射关系，相当于 <vue-router>。
• App.vue 中也没有内容，而是定义了 vue-router 的锚点： <router-view> ，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 中）

2. Vuetify 框架：

2.1 学习 UI 框架的原因：

Vue 虽然会帮我们进行视图的渲染，但样式还是由我们自己来完成。这显然不是我们的强项，因此后端开发人员一般都喜欢使用一些现成的 UI 组件，拿来即用，常见的例如：

• BootStrap
• LayUI
• EasyUI
• ZUI

然而这些 UI 组件更多的是利用 DOM 操作，借助于 jQuery 实现，而不是 MVVM 的思想。

2.2 Vuetify 的优点：

• Vuetify 几乎不需要任何 CSS 代码，而其他的 UI 框架例如 element-ui 许多布局样式需要我们来编写。
• Vuetify 从底层构建起来的语义化组件，简单易学，容易记住。
• Vuetify 基于 Material Design（谷歌推出的多平台设计规范），更加美观，动画效果酷炫，且风格统一。

重点关注 UI components 即可，里面有大量的 UI 组件。

2.3 项目页面布局：

Layout 组件是我们的整个页面的布局组件，一个典型的三块布局。包含左，上，中三部分：左侧导栏，顶部工具条，中间为主体内容。

里面使用了 Vuetify 中的2个组件和一个布局元素：

• 组件：
  • v-navigation-drawer ：导航抽屉，主要用于容纳应用程序中的页面的导航链接。
  • v-toolbar ：工具栏通常是网站导航的主要途径。可以与导航抽屉一起很好地工作，动态选择是否打开导航抽屉，实现可伸缩的侧边栏。
• 布局元素：
  • v-content ：标记页面布局的元素，可以根据我们指定的app组件的结构动态调整大小，使得可以创建高度可定制的组件。

• Layout 映射的路径是 /
• 除了 Login 以外的所有组件，都是定义在 Layout 的 children 属性，并且路径都是 / 的下面
• 因此当路由到子组件时，会在 Layout 中定义的锚点中显示
• 并且 Layout 中的其它部分不会变化，这就实现了布局的共享

3. 使用域名访问本地项目：

3.1 统一环境：

实际开发中，会有不同的环境：

• 开发环境：自己的电脑
• 测试环境：提供给测试人员使用的环境
• 预发布环境：数据是和生成环境的数据一致，运行最新的项目代码进去测试
• 生产环境：项目最终发布上线的环境

如果不同环境使用不同的 ip 去访问，可能会出现一些问题。为了保证所有环境的一致，我们会在各种环境下都使用域名来访问。

我们将使用以下域名：

• 主域名是：www.leyou.com，leyou.com
• 管理系统域名：manage.leyou.com
• 网关域名：api.leyou.com
• …

但是最终，我们希望这些域名指向的还是我们本机的某个端口。

3.2 域名解析：

一个域名一定会被解析为一个或多个 ip。这一般会包含两步：

• 本地域名解析：

  浏览器会首先在本机的 hosts 文件中查找域名映射的 IP 地址，如果查找到就返回 IP ，没找到则进行域名服务器解析，一般本地解析都会失败，因为默认这个文件是空的。

  • Windows 下的 hosts 文件地址：C:/Windows/System32/drivers/etc/hosts
  • Linux 下的 hosts 文件所在路径： /etc/hosts

样式：

# My hosts
127.0.0.1 localhost

• 域名服务器解析：

  本地解析失败，才会进行域名服务器解析，域名服务器就是网络中的一台计算机，里面记录了所有注册备案的域名和 ip 映射关系，一般只要域名是正确的，并且备案通过，一定能找到。

3.3 解决域名解析问题：

可以修改本地的 hosts 文件，实现对域名的解析。修改本地的 host 为：

127.0.0.1 api.leyou.com
127.0.0.1 manage.leyou.com

这样就实现了域名的关系映射了。

但还有更好的方案，通过 switchhosts 软件去修改我们的本地 host 文件。

添加了两个映射关系（中间用空格隔开，其他映射关系是后面功能的内容）：

• 127.0.0.1 api.leyou.com ：我们的网关 Zuul
• 127.0.0.1 manage.leyou.com：我们的后台系统地址

原因：我们配置了项目访问的路径，虽然 manage.leyou.com 映射的 ip 也是127.0.0.1，但是 webpack 会验证 host 是否符合配置。

在 webpack.dev.conf.js 中取消 host 验证：disableHostCheck: true。

3.4 解决端口问题：

域名问题解决了，但是现在要访问后台页面，还得自己加上端口： http://manage.leyou.com:9001 。我们希望的是直接域名访问： http://manage.leyou.com 。这种情况下端口默认是80，如何才能把请求转移到9001端口呢？

这里就要用到反向代理工具：Nginx。

nginx 可以作为web服务器，但更多的时候，我们把它作为网关，因为它具备网关必备的功能：

• 反向代理
• 负载均衡
• 动态路由
• 请求过滤

1）作为 Web 服务器：

Web 服务器分2类：

• web 应用服务