分布思想和组件化系统

最新推荐文章于 2024-10-11 14:37:32 发布

编程小黎

最新推荐文章于 2024-10-11 14:37:32 发布

阅读量118

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html 文章标签： vue.js css html

本文链接：https://blog.youkuaiyun.com/qq_52807480/article/details/119885377

html 专栏收录该内容

2 篇文章

订阅专栏

分布式思想：

（前端和后端设计思想）

1.分布式计算（拆）

说明：将一项任务拆分，由多个线程（机制）共同完成
实际处理：大数据处理方式
大数据的方式处理：
   1.将大型任务拆分为小型任务（拆包）1个包1M
   2.分配任务 1000包
   3.将各个线程进行计算后将数据进行合并，等待二次处理
   4.将数据进行清洗，整理最终得到最终结果 2-10G 日志记录

2.分布式系统

按照特定的方式，将大型的项目拆分为若干小型模块
作用：降低系统架构的耦合性
先拆模块，再拆层级（合理就好，不求顺序）拆分是为业务/架构服务的合理即可
2.1按照模块拆分
一、模块拆分
单体项目存在的问题：一个模块出现问题影响整个项目的执行
2.2按照层级拆分
层之间面向接口编程
二、层级拆分
vo层：后端页面交互的媒介
controller:（调用s）
|-service接口
service:(调用M)
|-mapper接口
Mapper:

组价系统Vue重要概念
几乎任意类型的应用界面都可以抽象成一个组件树，使用组件可以将一些重复的内容进行封装.各个组件单独维护.体现了分治的思想(分布式思想)
为了保证组件化相互之间互不干扰,则应该在组件内部单独定义html/js/css.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件化思想</title>
	</head>
	<body>
		<div id="app">
			<!-- 通过组件的名称利用标签来调用 -->
			<!-- 驼峰规则 使用 - 分隔 ， 全部小写 -->
			<add-num-com></add-num-com>
		</div>
		<template id="addNumTem">
			<div>
				<!-- 不能缺少根标签div -->
				<!-- 缺少是报错 -->
				<!-- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. -->
				<h1>定义组件</h1>
				<h3>数值:{{sum}}</h3>
				<button @click="addSum">增加</button>
			</div>
		</template>
		<script src="../js/vue.js"></script>
		<script>
		// 全局组件  定义组件
		Vue.component('addNumCom',{
			// 定义组件内部结构
			// data函数 有返回值
			data() {
				// 有返回值对象 k:v
				return{
					num: 2,
					sum: 1,
				}
			},
			// 定义组件标签 
			// 模板 注意使用选择器
			// 方式1：字符串拼接template: "<div>{{sum}}<button @click="addSum"></button<div>",
			// 方式2： 模板字符串(块级作用域)：template: `<div>{{sum}}<button @click="addSum"></button<div>`
			// :方式3：模板语法：
			template: "#addNumTem",
			// Component template requires a root element, rather than just text.选择器书写不正确的错误
			methods:{
				addSum(){
					this.sum+=this.num+1
				}
			}
		})
		const app = new Vue({
			el: "#app",
			data:{
				
			}
		})
		</script>
	</body>
</html>

简单综合应用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<router-link to="/tables">展现</router-link>
			<router-view></router-view>
		</div>
		<template id="myTem">
			<div>
				
				<table border="1px" align="center" id="table1" width="700px" >
								<thead>
								<tr align="center"><th colspan="6"><h2>图书管理系统</h2></th></tr>
								<tr align="center">
									<th ><button  id="but">反选</button></th>
									<th>ID编号</th>
									<th>图书名称</th>
									<th>图书作者</th>
									<th>图书价格</th>
									<th>按钮
									<button @click="addBtn()" id="but">增加</button></th>
								</tr>
								</thead>
								<tbody>
								<tr align="center" v-for="books in booklist"  v-cloak id="cols">
									<td ><input type="checkbox"   name="ones"/></td>
									<td v-text="books.id"></td>
									<td v-text="books.name"></td>
									<td v-text="books.author"></td>
									<td v-text="books.price"></td>
									<td >
										<!-- 没有数据来源需要手动添加来源 -->
											<button @click="updateBtn(books)" id="but">修改</button>
											<button @click="deleteBook(books.id)" id="but">删除</button>
											
									</td>
								</tr>
								</tbody>
							</table>
								<div id="contextupdata" style="width: 300px; height: 300px;position: fixed;" v-cloak>
									ID:<input type="text" v-model.lazy="book.id" disabled/><br />
									图书名称:<input type="text" v-model.lazy="book.name" /><br />
									图书作者:<input type="text" v-model.lazy="book.author" /><br />
									图书价格:<input type="text" v-model.lazy="book.price" /><br />
									<button @click="updateBook()">更新</button>
									<button type="reset" >重置</button>
								</div>
								<br />
								<div id="contextadd" style="width: 300px; height: 300px;position: fixed;" v-cloak>
									图书名称:<input type="text" v-model.lazy="book.name" id="name"/><br />
									图书作者:<input type="text" v-model.lazy="book.author" id="author"/><br />
									图书价格:<input type="text" v-model.lazy="book.price" id="price"/><br />
									<button @click="addBook()">新增</button>
								</div>
			</div>
		</template>
		<script src="js/vue.js"></script>
		<script src="./js/vue-router.js"></script>
		<script src="./js/axios.js"></script>
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
		axios.defaults.baseURL = "http://localhost:8090"
		let tables = {
			data(){return{
				booklist: [],
				book:{
					id: '',
					name: '',
					author: '',
					price: ''
				}
			}},
			template : "#myTem",
			methods:{
				async  getAll(){
						let {data: result} = await axios.get("book/all")
						// console.log(result)
						this.booklist = result
					},
				   updateBtn(book){
						this.book = book
						$("#contextupdata").show()
						$("#contextadd").hide()
					},
					async updateBook(){
					let{data: value} = await axios.put("book/update",this.book)
					alert("修改成功")
					this.getAll();
						$("#contextupdata").hide()
					},
					async deleteBook(id){
						$("#contextadd").hide()
						$("#contextupdata").hide()
					var flag = confirm();
					if(flag){
						let{data: value} = await axios.delete("book/delete/"+id)
						alert("删除成功")
					}else{
						alert("取消删除")
					}				
						this.getAll()
					},
					addBtn(){
						$("#contextadd").show()
						$("#contextupdata").hide()
					},
					async addBook(){
						let{data: value} = await axios.post("book/add",this.book)
						alert("增加成功")
						$("#contextadd").hide()
						this.getAll()
				}
			},
			mounted() {
				this.getAll(),
				$("#contextupdata").hide()
				$("#contextadd").hide()
			}
		}
		const router = new VueRouter({
			routes:[
				{path:"/tables",component:tables}
			]
		})
		const app = new Vue({
			el: "#app",	
			components:{
				tableCom: tables
			},
			router,
			
		})
		</script>
	</body>
</html>