本文探讨了分布式思想如何在后端提升系统解耦性，通过模块和层级拆分降低耦合度，以及组件化思想在前端的实践，如Vue组件系统实现代码复用和分治。此外，还介绍了Vue Router在前端路由管理中的作用，包括重定向和嵌套路由，以实现更高效、灵活的页面跳转。
分布式思想体现在了后端服务器（解耦性），而组件化思想体现在了前端（解耦性）
分布式思想
传统项目设计思想（单体架构的思想），就是将所有的代码都写在一个服务器中；
说明: 单体项目架构设计 在同一个tomcat服务器中. 如果一个模块出现问题,则直接影响整个tomcat服务器运行.项目架构设计耦合性高.
分布式架构的思想（可根据模块和层级拆分）
核心理念: 根据特定的规则,将程序进行拆分. 未来学习微服务架构的设计思想.
根据模块拆分
就比如将不同部门分布在不同服务器上，这就是按模块进行拆分；
说明: 根据项目中不同的模块,拆分为不同的tomcat服务器. 如果某台tomcat服务器发送异常,则不影响整个项目的运行.
按照层级进行进行拆分
就是通过每一层级进行拆分
分布式的总结
实现了模块和层级代码的解耦性，采用分布式架构设计主要解决了系统架构设计的耦合性(架构师+压测+后台监控).
组件化思想
就是将一个大的页面分成很多个小页面进行写代码，即使在某一小块异常进行维护，就比较方便（体现了解耦性），同时还可以将公共的代码写到一个模块里，然后那个模块使用就只需要将这个模块的代码进行引用即可；
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树.
使用组件可以将一些重复的内容进行封装.各个组件单独维护.体现了分治的思想(分布式思想)
补充知识: 为了保证组件化 相互之间互不干扰,则应该在组件内部 (就是小方块在小方块里写入html ，js，css代码)单独定义html/js/css.
组件化入门案例-全局组件
步骤
1）：组件中的data 是一个函数() 必须有返回值.使用return作为返回值
2）：组件的模版必须有一个根目录.
3）：如果组件的名称采用驼峰规则的命名,则标签引用时需要使用横线（ - ）进行关联.
组件化 的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<div id="app">
<hello1></hello1>
</div>
<div id="app2">
<hello1></hello1>
</div>
<body>
<template id="addTemCcc">
<div>
<h1>我是组件化</h1>
数据:{{msg}}
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
let hello1={
data(){
return{
msg:"woshi zujian"
}
},
template:"#addTemCcc"
}
const app=new Vue({
el:"#app",
components:{
hello1
}
})
const app2=new Vue({
el:"#app2"
})
</script>
</body>
</html>
定义局部组建
局部组件和全局组件的区别
全局组件是 : 声明几个就会展示几个组件的内容
局部组件是 : 无论声明几个 , 只能展现一个组件的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局组件定义</title>
<body>
<div id="app">
<!-- 局部组件使用 -->
<hello1></hello1>
</div>
<div id="app2">
<!-- 第二个局部组件的作用域,没有声明的局部组件不能直接调用!!!! -->
<hello1></hello1>
</div>
<!-- 3.定义模版标签 -->
<template id="hello1Tem">
<div>
<h3>我是局部组件A</h3>
数据信息: {{msg}}
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
//2.定义局部组件实体
let hello1 = {
//2.1属性属性
data(){
return {
msg: "我是组件A--hello"
}
},
template: "#hello1Tem"
}
//1.定义vue对象
const app = new Vue({
el: "#app",
//在app对象内部定义局部组件, 只能在app对象内部使用.
components: {
//定义组件的名称 : 定义组件的内容
//hello1: hello1,
hello1
//k-v 字符相同 只写一个.
}
})
//定义第二个vue对象 第二个局部组件作用域
const app2 = new Vue({
el: "#app2"
})
</script>
</body>
</html>
路由
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
VUE Router存在意义
传统页面跳转
在之前所有的页面都是由后端服务器进行页面跳转.所有的请求都会经过后端.导致后端服务器压力过大.
这种 用户只有通过后端服务器才能获取页面相关信息的方式 称之为 后端路由/服务器端路由.
弊端: 这种方式是一种集中式的管理. 性能瓶颈在服务器端.
解决策略
将所有的路由的配置生成JS,保存到浏览器中.当用户发起某个请求时,自己映射对应的请求页面信息(组件),之后直接访问静态资源.这样的方式速度更快.
将上述的方式称之为: 前端路由/客户端路由**(就是加一个前端服务器 , 用户直接前端服务器)**
VUE Router入门案例
在粘贴复制时要注意引用vue和vue-router 的包路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<div id="app">
<!-- 定义路由链节 router-link 相当于a标签 to相当于href
就是跳转到哪个页面
-->
<router-link to="/user">用户</router-link>
<!-- 此地方的 路径和下面的 routes里的路径保持一致 -->
<router-link to="/dog">狗狗</router-link>
<!-- 路由填充位 -->
<router-view></router-view>
</div>
<template id="userTem">
<div>
<h1>我是定义组件的内容!!!</h1>
</div>
</template >
<template id="dogTem">
<div>
<h1>没有公共</h1>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 导入路由 顺序不能反-->
<script src="./js/vue-router.js"></script>
<script>
/* 定义路由组件 */
let user= {
template:"#userTem"
}
let dog= {
template:"#dogTem"
}
//创路由对象
let router = new VueRouter({
routes:[
{path:"/" , redirect:"/user"},/* */
{ path:"/user" , component: user},
{path:"/dog", component:dog},
{path:"/dog", redirect:"/user"}
]
})
//将路由交给vue管理
const app=new Vue({
el:"#app",
router
})
</script>
<body>
</body>
</html>
路由重定向
需求说明
当访问默认页面时(A页面),由于业务需要,要求用户看到其他页面(B页面) 则需要使用Vue的路由重定向机制. 自动跳转.
解决策略: redirect 关键字.
重定向说明
特点:
1.重定向时URL中的请求地址发生变化.
2.重定向时请求发送了多次. 多次请求/多次响应.
3. 重定向是服务器行为
4. 重定向时不能传递参数.
路由嵌套机制(关键字 : children)
组件嵌套结构
children属性特点
说明: children属性可以实现路由的嵌套. 通过父子关系,.则子组件的渲染,在父组件定义的router-view标签中展现.
路由的重定向代码
<!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>
3199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
