day06-初识Vuetify框架UI框架和使用域名访问本地项目

本项目的笔记和资料的Download,请点击这一句话自行获取。

day01-springboot(理论篇) ;day01-springboot(实践篇)

day02-springcloud(理论篇一)  ;day02-springcloud(理论篇二)  ;day02-springcloud(理论篇三) ;day02-springcloud(理论篇四) ;

day03-springcloud(Hystix,Feign)  ;day03-springcloud(Zuul网关)

day04-项目搭建(一) ; day04-项目搭建(二) day04-ES6语法入门

day05-Vue入门学习

day06-了解vue-router和webpack的使用  ; day06-初识Vuetify框架UI框架和使用域名访问本地项目 ;  day06-使用nginx反向代理并掌握cors解决跨域 

day06-使用vue-cli搭建项目:搭建后台管理系统


0.学习目标

  • 了解vue-router使用
  • 了解webpack使用
  • 会使用vue-cli搭建项目
  • 使用资料搭建后台系统
  • 会使用nginx进行反向代理

3.vue-cli

3.1.介绍和安装

在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一 一去添加就会比较麻烦。

幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli

使用它能快速的构建一个web工程模板。

官网:https://github.com/vuejs/vue-cli

已安装Node.js在cmd窗口下输入)安装命令:

npm install -g vue-cli


3.2.快速上手

我们新建一个module:

 

 打开终端并进入目录:

 

用vue-cli命令,快速搭建一个webpack的项目:vue init webpack

 

前面几项都走默认或yes

下面这些我们选no

 

 最后,再选yes,使用 npm安装

3.3.项目结构

安装好的项目结构:

 入口文件:

3.4.单文件组件

需要注意的是,我们看到有一类后缀名为.vue的文件,我们称为单文件组件

每一个.vue文件,就是一个独立的vue组件。类似于我们刚才写的loginForm.js和registerForm.js

只不过,我们在js中编写 html模板和样式非常的不友好,而且没有语法提示和高亮。

而单文件组件中包含三部分内容:

  • template:模板,支持html语法高亮和提示
  • script:js脚本,这里编写的就是vue的组件对象,看到上面的data(){}了吧
  • style:样式,支持CSS语法高亮和提示

每个组件都有自己独立的html、JS、CSS,互不干扰,真正做到可独立复用。

3.5.运行

看看生成的package.json:

  • 可以看到这引入了非常多的依赖,绝大多数都是开发期依赖,比如大量的加载器。
  • 运行时依赖只有vue和vue-router
  • 脚本有三个
    • dev:使用了webpack-dev-server命令,开发时热部署使用
    • start:使用了npm run dev命令,与上面的dev效果完全一样
    • build:等同于webpack的打包功能,会打包到dist目录下。

我们执行npm run dev 或者 npm start 都可以启动项目:

页面:

 

1.搭建后台管理前端

1.1.导入已有资源

后台项目相对复杂,为了有利于教学,我们不再从0搭建项目,而是直接使用课前资料中给大家准备好的源码:

 

 我们解压缩,放到IDEA的工作目录中:

 

然后在Intellij idea中导入新的工程:

选中我们的工程:

 这正是一个用vue-cli构建的webpack工程,是不是与之前见过的结构一样:

1.2.安装依赖

你应该注意到,这里并没有node_modules文件夹,方便给大家下发,已经把依赖都删除了。不过package.json中依然定义了我们所需的一切依赖:

 我们只需要打开IDEA的终端窗口,进入项目目录,输入:npm install命令,即可安装这些依赖。

 

 如果安装过程出现以下问题

 建议删除node_modules目录,重新安装。

1.3.运行一下看看

输入命令:npm run dev

发现默认的端口是9001。访问:http://localhost:9001

会自动进行跳转:

 

2.Vuetify框架

2.1.为什么要学习UI框架

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

  • BootStrap
  • LayUI
  • EasyUI
  • ZUI

然而这些UI组件的基因天生与Vue不合,因为他们更多的是利用DOM操作,借助于jQuery实现,而不是MVVM的思想。

而目前与Vue吻合的UI框架也非常的多,国内比较知名的如:

  • element-ui:饿了么出品
  • i-view:某公司出品

然而我们都不用,我们今天推荐的是一款国外的框架:Vuetify

官方网站:https://vuetifyjs.com/zh-Hans/

2.2.为什么是Vuetify

有中国的为什么还要用外国的?原因如下:

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

这是官网的说明:

2.3.怎么用?

基于官方网站的文档进行学习:

我们重点关注UI components即可,里面有大量的UI组件,我们要用的时候再查看,不用现在学习,先看下有什么:

 

 

以后用到什么组件,就来查询即可。

3.项目结构

开始编码前,我们先了解下项目的结构。

3.1.目录结构

首先是目录结构图:

3.2.调用关系

我们最主要理清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中)

3.3.页面布局

Layout组件是我们的整个页面的布局组件:

 一个典型的三块布局。包含左,上,中三部分:

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

  • v-navigation-drawer :导航抽屉,主要用于容纳应用程序中的页面的导航链接。

    ![1530380237867](assets/1530380237867.png)
    
  • v-toolbar:工具栏通常是网站导航的主要途径。可以与导航抽屉一起很好地工作,动态选择是否打开导航抽屉,实现可伸缩的侧边栏。

  • v-content:并不是一个组件,而是标记页面布局的元素。可以根据您指定的app组件的结构动态调整大小,使得您可以创建高度可定制的组件。

那么问题来了:v-content中的内容来自哪里?

 

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

 

4.使用域名访问本地项目

4.1.统一环境

我们现在访问页面使用的是:http://localhost:9001

有没有什么问题?

实际开发中,会有不同的环境:

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

如果不同环境使用不同的ip去访问,可能会出现一些问题。因此,我们会在各种环境下都使用域名来访问。

我们将使用以下域名:

  • 主域名是:www.leyou.com,
  • 管理系统域名:manage.leyou.com
  • 网关域名:api.leyou.com
  • ...

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

那么,当我们在浏览器输入一个域名时,浏览器是如何找到对应服务的ip和端口的呢?

4.2.域名解析

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

  • 本地域名解析

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

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

    样式:

# My hosts
127.0.0.1 www.xmind.com
127.0.0.1 xmind.com
127.0.0.1 www.xmind.net
127.0.0.1 xmind.net
  • 域名服务器解析

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

4.3.解决域名解析问题

我们不可能去购买一个域名,因此我们可以伪造本地的hosts文件,实现对域名的解析。修改本地的host为:

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

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

BlueLife Hosts Editor v1.2 是一款windows操作系统下修改host文件的软件。

每次在C盘寻找hosts文件并修改是非常麻烦的,给大家推荐一个快捷修改host的工具,在课前资料中可以找到:

win10系统请先切换到目录下,给自己的登录账户设定hosts文件的写入权限

C:\Windows\System32\drivers\etc

 

初次运行还需要找到Switch Hosts这个应用或桌面快捷方式,右键选择以管理员身份运行。

 解压,运行exe文件,效果:

我们添加了两个映射关系(中间用空格隔开):

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

现在,ping一下域名试试是否畅通:

OK!通过域名访问:

 

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

 在build目录下webpack.dev.conf.js中取消host验证:

disableHostCheck: true

 重新执行npm run dev,刷新浏览器即可访问

http://manage.leyou.com:9001/#/index/dashboard

 

针对苹果版的课堂录像,我们的leyou项目的父工程的pom.xml里添加lombok的依赖坐标。并且还需要IDEA安装lombok的插件。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <!--
        子模块天生继承父工程,可以使用父工程所有资源。
        子模块之间天生是没有任何关系的。

        父子工程直接不用建立关系,继承关系是先天的,不需要手动建立。
        平级直接的引用叫依赖,依赖不是先天的,依赖是需要后天建立的。
        -->
    <groupId>com.leyou.parent</groupId>
    <artifactId>leyou</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <packaging>pom</packaging>
    <modules>
        <module>leyou-registry</module>
        <module>leyou-gateway</module>
        <module>leyou-item</module>
        <module>leyou-common</module>
    </modules>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.8.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <spring-cloud.version>Finchley.SR4</spring-cloud.version>
        <!--DAO持久层的依赖版本控制开始-->
        <mybatis.starter.version>1.3.5</mybatis.starter.version>
        <mapper.starter.version>2.1.5</mapper.starter.version>
        <pageHelper.starter.version>1.2.12</pageHelper.starter.version>
        <mysql.version>5.1.45</mysql.version>
        <!--DAO持久层的依赖版本控制结束-->
        <leyou.latest.version>1.0.0-SNAPSHOT</leyou.latest.version>
        <fastDFS.client.version>1.26.1-RELEASE</fastDFS.client.version>
    </properties>

    <dependencyManagement>
        <dependencies>
            <!-- springCloud -->
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>${spring-cloud.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
            <!-- mybatis启动器 -->
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>${mybatis.starter.version}</version>
            </dependency>
            <!-- 通用Mapper启动器 -->
            <dependency>
                <groupId>tk.mybatis</groupId>
                <artifactId>mapper-spring-boot-starter</artifactId>
                <version>${mapper.starter.version}</version>
            </dependency>
            <!-- 分页助手启动器 -->
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper-spring-boot-starter</artifactId>
                <version>${pageHelper.starter.version}</version>
            </dependency>
            <!-- mysql驱动 -->
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>${mysql.version}</version>
            </dependency>
            <!--FastDFS客户端-->
            <dependency>
                <groupId>com.github.tobato</groupId>
                <artifactId>fastdfs-client</artifactId>
                <version>${fastDFS.client.version}</version>
            </dependency>
        </dependencies>
    </dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.6</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

 

 

 

==================================================

参考资料:

请先安装IntelliJ IDEA 2019.2.3的插件:File-->Settings-->Plugins-->Vue.js

运行switchhosts修改host文件提示please run SwitchHosts as Administrator

 

end

posted @ 2019-10-09 22:57  Marlon康  阅读(1499)  评论(0编辑  收藏  举报