day09

1.VUE中组件化思想

1.1 分布式思想

1.1.1 传统项目设计思想

说明: 单体项目架构设计 在同一个tomcat服务器中. 如果一个模块出现问题,则直接影响整个tomcat服务器运行.项目架构设计耦合性高.
在这里插入图片描述

1.2 分布式思想

核心理念: 根据特定的规则,将程序进行分. 未来学习微服务架构的设计思想.

1.2.1 根据模块拆分

说明: 根据项目中不同的模块,拆分为不同的tomcat服务器. 如果某台tomcat服务器发送异常,则不影响整个项目的运行.
在这里插入图片描述

1.2.2 根据层级拆分

在这里插入图片描述

1.2.3 分布式总结

核心理念: 采用分布式架构设计主要解决了系统架构设计的耦合性(架构师+压测+后台监控).

1.3 组件化思想
 

组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树.
使用组件可以将一些重复的内容进行封装.各个组件单独维护.体现了分治的思想(分布式思想)
补充知识: 为了保证组件化 相互之间互不干扰,则应该在组件内部 单独定义html/js/css.

在这里插入图片描述

 

1.4 组件化入门案例-全局组件

1.4.1 步骤

1.组件中的data 是一个函数() 必须有返回值.
2.组件的模版必须有一个根目录.
3.如果组件的名称采用驼峰规则的命名,则标签引用时需要使用-线进行关联.

 

1.4.2 定义组件

在这里插入图片描述

1.4.3 定义模版

在这里插入图片描述

1.4.4 整体代码

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>全局组件定义</title>
    <body>
        <div id="app">
            <!-- 2.3 引用组件  通过标签页面html解析标签之后
             都变为小写字母. 如果使用驼峰规则使用-线连接  -->
            <add-num-com></add-num-com>
        </div>
        
        <!-- 2.2 定义模版html 模版必须有根目录 -->
        <template id="addNumTem">
            <div>
                <h3>测试组件用法</h3>
                数据: {{num}}
                <button @click="addNum">自增</button>
            </div>
        </template>
        
        
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <script>
            //2.定义全局组件 Vue.component("组件名称","组件内容")
            Vue.component("addNumCom",{
                //2.1 定义属性
                data(){
                    return {
                        num: 1
                    }
                },
                //2.2 定义组件模版 编辑html/js/css
                template: "#addNumTem",
                methods: {
                    addNum(){
                        this.num ++
                    }
                }
            })
            
            //1.定义vue对象
            const app = new Vue({
                el: "#app",
                data: {
                },
                methods: {}
            })
        </script>
    </body>
</html> 

 

 

1.4.5 学习重点

说明: 组件定义在未来由前端框架node.js提供的脚手架完成. 现阶段主要学习组件中语法结构
掌握: data 数据的写法, template 注意事项, methods写法.

在这里插入图片描述

1.5 组件化-局部组件

1.5.1 定义局部组件

在这里插入图片描述

1.5.2 定义局部对象

在这里插入图片描述

1.5.3 定义模版

在这里插入图片描述

 

 

1.5.4 局部组件测试

在这里插入图片描述

2.路由机制

2.1 VUE Router介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为

 

2.2 VUE Router存在意义

2.2.1 传统页面跳转

 

在之前所有的页面都是由后端服务器进行页面跳转.所有的请求都会经过后端.导致后端服务器压力过大.
这种 用户只有通过后端服务器才能获取页面相关信息的方式 称之为 后端路由/服务器端路由.
弊端: 这种方式是一种集中式的管理. 性能瓶颈在服务器端.
在这里插入图片描述 

 

2.2.2 解决策略

将所有的路由的配置生成JS,保存到浏览器中.当用户发起某个请求时,自己映射对应的请求页面信息(组件),之后直接访问静态资源.这样的方式速度更快.
将上述的方式称之为: 前端路由/客户端路由
在这里插入图片描述

 

 

2.3 VUE Router入门案例 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue路由机制</title>
    <body>
        <div id="app">
            <!-- 2.定义路由链接
                router-link 解析之后,变为a标签.
                to 解析之后, 变为href属性
             -->
            <router-link to="/user">用户</router-link>
            
            <!-- 3.定义路由填充位 该位置用来展现具体页面(组件) -->
            <router-view></router-view>
            
            
        </div>
        
        <!-- 4.2 定义组件模版 -->
        <template id="userTem">
            <div>
                <h1>我是组件的内容!!!!!</h1>
            </div>
        </template>
        
        
        <!-- 1.引入vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <!-- 1.导入路由JS 注意顺序-->
        <script src="../js/vue-router.js"></script>
        <script>
            //4.定义组件
            let user = {
                //4.1定义页面
                template: "#userTem"
            }
            
            //5.创建路由对象,定义路由规则
            let router = new VueRouter({
                //定义路由规则
                routes: [{path: "/user", component: user}]
            })
            
            //6.将路由对象交给Vue对象管理
            const vue = new Vue({
                el: "#app",
                //绑定路由
                //router: router  名称一致时,可以简化
                router
            })
            
        </script>
    </body>
</html> 

 

2.4 路由重定向

2.4.1 需求说明

当访问默认页面时(A页面),由于业务需要,要求用户看到其他页面(B页面) 则需要使用Vue的路由重定向机制. 自动跳转.
解决策略: redirect 关键字

 

2.4.2 重定向说明 

特点:
1.重定向时URL中的请求地址发生变化.
2.重定向时请求发送了多次. 多次请求/多次响应.
3. 重定向是服务器行为
4. 重定向时不能传递参数.
在这里插入图片描述 

 

2.5 路由嵌套机制(children)

2.5.1 组件嵌套结构

在这里插入图片描述

2.5.2 children属性特点

说明: children属性可以实现路由的嵌套. 通过父子关系,.则子组件的渲染,在父组件定义的router-view标签中展现.

  1. 路由定义
    在这里插入图片描述
  2. 组件内部结构
    在这里插入图片描述
  3. 整体代码结构

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue路由机制</title>
    <body>
        <div id="app">
            <!-- 2.定义路由链接
                router-link 解析之后,变为a标签.
                to 解析之后, 变为href属性
             -->
            <router-link to="/user">用户</router-link>
            <router-link to="/dog">狗狗</router-link>
            
            <!-- 3.定义路由填充位 该位置用来展现具体页面(组件) -->
            <router-view></router-view>
            
            
        </div>
        
        <!-- 4.2 定义组件模版 -->
        <template id="userTem">
            <div>
                <h1>我是组件的内容!!!!!</h1>
            </div>
        </template>
        
        <template id="dogTem">
            <div>
                <h1>养只宠物狗</h1>
                <!-- 定义子组件路由 -->
                <router-link to="/dog/samo">萨摩耶</router-link>
                <router-link to="/dog/hsq">哈士奇</router-link>
                <!-- 定义子组件占位符 -->
                <router-view></router-view>
            </div>
        </template>
        
        <!-- 1.引入vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <!-- 1.导入路由JS 注意顺序-->
        <script src="../js/vue-router.js"></script>
        <script>
            //4.定义组件
            let user = {
                //4.1定义页面
                template: "#userTem"
            }
            
            let dog = {
                template: "#dogTem"
            }
            
            let samo = {
                template: `<h1>通体雪白的神兽</h1>`
            }
            
            let hsq = {
                template: `<h1>拆家狂魔</h1>`
            }
            
            
            
            
            
            //5.创建路由对象,定义路由规则
            let router = new VueRouter({
                //定义路由规则
                routes: [
                        /* 
                            利用redirect实现路由重定向
                         */
                        {path: "/", redirect: "/dog"},
                        {path: "/user", component: user},
                        {path: "/dog", component: dog, children: [
                            {path: "/dog/samo", component: samo},
                            {path: "/dog/hsq", component: hsq}
                        ]},
                        /*该请求是/目录下的请求,所以组件渲染也在根组件 */
                        /* {path: "/dog/samo", component: samo},
                        {path: "/dog/hsq", component: hsq}, */
                        
                ]
            })
            
            //6.将路由对象交给Vue对象管理
            const vue = new Vue({
                el: "#app",
                //绑定路由
                //router: router  名称一致时,可以简化
                router
            })
            
        </script>
    </body>
</html> 

 

 

 

3 搭建京淘前端框架

3.1 前端启动

3.1.1 启动命令

在这里插入图片描述

3.1.2 前端启动

在这里插入图片描述
在这里插入图片描述

3.1.3 前端环境准备

1).检查前端路径
在这里插入图片描述
2).利用hbuilder 打开目录
在这里插入图片描述

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值