Element UI搭建首页导航和左侧菜单以及Mock.js和（组件通信）总线的运用

news2024/11/21 1:29:09

目录

前言

一、Mock.js简介及使用

1.Mock.js简介

1.1.什么是Mock.js

1.2.Mock.js的两大特性

1.3.Mock.js使用的优势

1.4.Mock.js的基本用法

1.5.Mock.js与前端框架的集成

2.Mock.js的使用

2.1安装Mock.js

2.2.引入mockjs

2.3.mockjs使用

2.3.1.定义测试数据文件

2.3.2.mock拦截ajax请求

​2.3.3.mock.js拦截ajax请求

2.4.数据模板定义规则

二、通信组件Bus（总线）的使用

1.首页导航栏与左侧菜单前端搭建

2.通过总线实现左侧组件的折叠与显示

前言

Mock.js是一个轻量级的JavaScript库，用于模拟数据和接口。它可以帮助开发人员在开发过程中快速创建虚拟数据和API响应，以便更好地测试和调试应用程序。而Bus总线则是一种设计模式，用于在应用程序的不同组件之间传递消息和事件。

一、Mock.js简介及使用

1.Mock.js简介

1.1.什么是Mock.js

        Mock.js是一个轻量级的JavaScript库，用于模拟和生成数据。它可以帮助你在开发过程中创建逼真的模拟数据，而无需依赖后端。Mock.js的核心API有两个：Mock.mock和Mock.Random。Mock.mock允许你定义数据类型和返回值，以及过滤和排序选项。Mock.Random允许你生成随机数据、数组和对象。

1.2.Mock.js的两大特性

  • 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

  • 拦截Ajax请求：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

1.3.Mock.js使用的优势

  1. 提高开发效率：通过使用Mock.js，前端开发人员可以在后端接口未完成之前，模拟数据进行开发和测试，从而提高开发效率。
  2. 减少对后端接口的依赖：Mock.js可以模拟接口请求，生成随机数据，减少对后端接口的依赖，使前端开发人员能够独立进行开发。
  3. 方便接口测试：Mock.js可以模拟各种接口请求，方便进行接口测试，验证前端代码的正确性和稳定性。
  4. 提供丰富的数据模板语法：Mock.js提供了丰富的数据模板语法，可以根据需求生成各种类型的数据，满足不同场景的开发需求。

1.4.Mock.js的基本用法

  1. 定义数据模板：使用Mock.js提供的语法定义数据模板，如Mock.mock('@string')可以生成一个随机字符串。
  2. 生成随机数据：使用Mock.js提供的方法，如Mock.mock('@string')可以生成一个随机字符串。
  3. 拦截请求：使用Mock.js提供的拦截器，可以拦截请求并返回模拟数据，实现前端与后端的解耦。

1.5.Mock.js与前端框架的集成

        Mock.js可以与主流的前端框架（如Vue、React等）无缝集成，方便开发人员进行接口测试和数据模拟。通过与前端框架的集成，可以更好地模拟真实的业务场景，提高开发效率和代码质量。

2.Mock.js的使用

2.1安装Mock.js

npm i mockjs -D

在SPA项目中，通过-G,-S,-D安装的区别

  1. 全局数据绑定（-g）：全局数据绑定是指将数据定义在Vue实例的data属性中，这样的数据可以在整个Vue实例中被访问和使用。全局数据绑定适用于多个组件之间需要共享的数据，可以在任何组件中直接使用该数据，无需传递或引入。

  2. 局部数据绑定（-s）：局部数据绑定是指将数据定义在组件的data属性中，这样的数据只能在当前组件内部被访问和使用。局部数据绑定适用于组件内部需要使用的数据，不会被其他组件访问到，可以避免数据冲突和污染。

  3. 动态数据绑定（-d）：动态数据绑定是指将数据通过props属性传递给子组件，在父组件中动态改变数据的值。动态数据绑定适用于父子组件之间需要传递数据的场景，父组件可以通过改变传递给子组件的数据来实现动态更新。

2.2.引入mockjs

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在config目录中的dev.env.js和prod.env.js做一个配置，如下：

dev.env.js---开发环境

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
	MOCK: 'true'
})

prod.env.js---生产环境

module.exports = {
  NODE_ENV: '"production"',
	MOCK: 'false'
}

main.js---动态加载Mock.js

//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock')

2.3.mockjs使用

2.3.1.定义测试数据文件

为每个*.vue定义单独的xxx-mock.js文件，并在其中添加自定义的json数据，还可以通过mockjs的模块生成随机数据信息，动态测试ajax请求效果。

创建src/mock/json目录，定义登录测试数据文件login-mock.js：

//定义静态json数据
/* const loginInfo={
	success:false,
	msg:'账号或者密码错误'
} */

//通过mockjs生成随机json数据
const loginInfo={
	'success|1':true,
	'msg|3-10':'msg'
}

export default loginInfo;
2.3.2.mock拦截ajax请求

在src/mock目录下创建index.js，定义拦截路由配置：

import Mock from 'mockjs' 		  //引入mockjs，npm已安装
import action from '@/api/action' //引入封装的请求地址

//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
	// timeout: 400    //延时400s请求到数据
	timeout: 200 - 400 //延时200-400s请求到数据
})

//引入登录的测试数据，并添加到mockjs
import loginInfo from '@/mock/json/login-mock.js'

//数据请求地址
let url = action.getFullPath('SYSTEM_USER_DOLOGIN');

//使用mockjs模拟发送请求
// Mock.mock(url,'post',loginInfo);
Mock.mock(url,/post|get/i,loginInfo);
/* Mock.mock(url, /post|get/i, (options) => {
	// 最佳实践，
	console.debug(url, options);
	return Mock.mock(loginInfo);
}); */

配置完成之后，直接使用axios配置post或get请求，模拟测试效果。  

2.3.3.mock.js拦截ajax请求

先在Login.vue中导入Mock模块

import Mock from 'mockjs'

Login.vue---模拟数据随机测试

 //post请求
      axios.post(url,params).then(r => {
        console.log(r);
        // if (r.data.success) {
        //   this.$message({
        //     message: r.data.msg,
        //     type: 'success'
        //   });
        // } else {
        //   this.$message.error(r.data.msg);
        // }
        this.$message({
          message: r.data.message,
          type: r.data.code == 0 ? 'success' : 'error',
          });
      }).catch(e => {
      });

2.4.数据模板定义规则

在使用的Vue组件中，先导入Mock模块

import Mock from 'mockjs'

  • 生成随机id值

使用Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数])

let uid1 = Mock.Random.guid();
//使用占位符的方式
let uid2 = Mock.mock("@guid");
console.log(uid1);
console.log(uid2);

  • string

let obj1 = Mock.mock({
  'star|1-5':"★",//生成指定范围长度的字符串
  info:'静态的字符串',//静态字符串
  name:'@cname'//使用规定占位符@cname，随机生成中国人的名字
})
console.log(obj1);

  • number 自增

+1 是指，在id的起始值每次调用+1

// +1 是指，在id的起始值每次调用+1
let temp = {
    "id|+1":1000001
}
console.log(Mock.mock(temp)); // 1000001
console.log(Mock.mock(temp)); // 1000002
console.log(Mock.mock(temp)); // 1000003
console.log(Mock.mock(temp)); // 1000004
console.log(Mock.mock(temp)); // 1000005
console.log(Mock.mock(temp)); // 1000006

  • number随机生成

小数生成 |min-max.dmin(小数最小位数)-dmax(小数最大位数)

let obj2 = Mock.mock({
    'age|1-100':0,//随机生成0-100整数
    'price|1-100.1-4':0,//随机生成整数部分1-100，小数位数1-4位
    'num|.2-4':0,//整数部分省略不写，默认是0(js的默认规则)
    'num2|100.3-3':0//整数部分保持100不变，小数位数恒定3位数，小数值随机生成
})
console.log(obj2);
  • boolean值
let flag = {
    'flag1|0':true, //模板规则：0数值是0时，表示布尔值恒定是false
    'flag2|1':false,//值位>=1时，boolean随机取值
    "flag3|1-2":true
}
console.log(Mock.mock(flag));

  • 城市随机取值

let city = Mock.mock({
    "city1|2":{//数字2表示随机取2个值
        addr1:'@city',//占位符@city表示随机生成城市
        addr2:'@city',//占位符@city表示随机生成城市
        addr3:'@city',//占位符@city表示随机生成城市
        addr4:'@city',//占位符@city表示随机生成城市
    },
    "city2|1-3":{//数字1-3表示随机取1-3个值
        addr1:'@city',//占位符@city表示随机生成城市
        addr2:'@city',//占位符@city表示随机生成城市
        addr3:'@city',//占位符@city表示随机生成城市
        addr4:'@city',//占位符@city表示随机生成城市
    }
})
console.log(city);

  • 枚举取值,从数组中随机取值

let gender = Mock.mock({
    'sex|1':['男','女','不知道'],//数字1表示随机取数组中的一个值
    'sex2|+1':['男','女','不知道']//+1表示循环一次取数组中的值
})
console.log(gender);

  • 正则表达式规则

let obj7 = Mock.mock({
    user:{
        name:'@cname',
    },
    tel:/1[0-9]{10}/,
    //正则表达式可以使用插件
    email:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
    //函数表达式
    info:function(){
        //注意：这里的this指向是数据模板对象，所以可以在函数表达式里使用this来获取已有值；
        return `我的手机号码是:${this.tel},我的邮箱是:${this.email},我的身份证号码是:${this.cardId}`
    },
    // (8)路径规则中： @表示启动关键字(注意：@前面不能有除了空格的任何其他字符)
    //          ==>   / 表示在模板数据中的层级关系，上下级
    message:"我的名字是: @/user/name ,我的手机号码是: @/tel,我的邮箱是: @/email,我的身份证号码是: @/cardId"
})
console.log(obj7);
  • 日期生成
let timer = Mock.mock({
    day1:'@date',// @date占位符表示随机生成mock默认格式的年月日
    day2:'@date("yyyy年MM月dd日")',//@date()可以传参，自定义时间格式,
    time1:'@time',//@time占位符可以随机生成mock格式的时分秒
    time2:'@time("HH时mm分ss秒SS毫秒")',//同样可以在@time()中传参数自定义格式
    daytime1:'@datetime("yyyy年MM月dd日 HH:mm:ss:SS")',//@daytime生成完整的时间
    nowTime:'@now'
})
console.log(timer);

  • 图片生成

生成的是带参数的图片地址，可以根据地址获取图片

let imgs = Mock.mock({
    img:"@image('200x100', '#894FC4', '#FFF', 'png', '!')",
    img1:"@image('200x100', '#aaaaa', '#FFF', 'png', '!')",
    img2:"@image('200x100', '#bbbbb', '#FFF', 'png', '!')",
    // mock占位符调用时，需要传递参数，参数也可以是占位符
    img3:"@image('200x100', '@color', '#FFF', 'png', '!')",
    //可以使用随机生成图片的网址，但是注意，统一网址的请求图片地址时，如果不加参数，那么浏览器默认地址一样的会使用浏览器的缓存，那么所请求的图片只有一种；一般加一个时间戳作为参数，保持参数的唯一，图片可以请求到不同的值
    img4:"https://api.ixiaowai.cn/mcapi/mcapi.php?_=@time('T')"
});
console.log(imgs);

二、通信组件Bus（总线）的使用

1.首页导航栏与左侧菜单前端搭建

AppMain.vue---首页

<template>
  <el-container class="main-container">
    <el-aside v-bind:class="asideClass">
      <LeftNav></LeftNav>
    </el-aside>
    <el-container>
      <el-header class="main-header">
        <TopNav></TopNav>
      </el-header>
      <el-main class="main-center">我是首页</el-main>
    </el-container>
  </el-container>
</template>

<script>
  // 导入组件
  import TopNav from '@/components/TopNav.vue'
  import LeftNav from '@/components/LeftNav.vue'

  // 导出模块
  export default {
    components: {
      TopNav,LeftNav
    },data() {
      return {
        asideClass: "main-aside"
      }
    }
  };
</script>
<style scoped>
  .main-container {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .main-aside-collapsed {
    /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    width: 64px !important;
    height: 100%;
    background-color: #334157;
    margin: 0px;
  }

  .main-aside {
    width: 240px !important;
    height: 100%;
    background-color: #334157;
    margin: 0px;
  }

  .main-header,
  .main-center {
    padding: 0px;
    border-left: 2px solid #333;
  }
</style>

LeftNav.vue---左侧菜单

<template>
	<el-menu default-active="2" class="el-menu-vertical-demo"  background-color="#334157"
	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >
		<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
		<div class="logobox">
			<img class="logoimg" src="../assets/img/logo.png" alt="">
		</div>
		<el-submenu index="1">
			<template slot="title">
				<i class="el-icon-location"></i>
				<span>导航一</span>
			</template>
			<el-menu-item-group>
				<template slot="title">分组一</template>
				<el-menu-item index="1-1">选项1</el-menu-item>
				<el-menu-item index="1-2">选项2</el-menu-item>
			</el-menu-item-group>
			<el-menu-item-group title="分组2">
				<el-menu-item index="1-3">选项3</el-menu-item>
			</el-menu-item-group>
			<el-submenu index="1-4">
				<template slot="title">选项4</template>
				<el-menu-item index="1-4-1">选项1</el-menu-item>
			</el-submenu>
		</el-submenu>
		<el-menu-item index="2">
			<i class="el-icon-menu"></i>
			<span slot="title">导航二</span>
		</el-menu-item>
		<el-menu-item index="3" disabled>
			<i class="el-icon-document"></i>
			<span slot="title">导航三</span>
		</el-menu-item>
		<el-menu-item index="4">
			<i class="el-icon-setting"></i>
			<span slot="title">导航四</span>
		</el-menu-item>
	</el-menu>
</template>
<script>
	export default {
		data(){
		  return{
		    collapsed:false
		  }
		}
	}
</script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 240px;
		min-height: 400px;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
		text-align: left;
	}

	.el-menu-item-group__title {
		padding: 0px;
	}

	.el-menu-bg {
		background-color: #1f2d3d !important;
	}

	.el-menu {
		border: none;
	}

	.logobox {
		height: 40px;
		line-height: 40px;
		color: #9d9d9d;
		font-size: 20px;
		text-align: center;
		padding: 20px 0px;
	}

	.logoimg {
		height: 40px;
	}
</style>

TopNav.vue---顶部导航栏

<template>
	<!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
	 text-color="#fff" active-text-color="#ffd04b">
		<el-menu-item index="1">处理中心</el-menu-item>
		<el-submenu index="2">
			<template slot="title">我的工作台</template>
			<el-menu-item index="2-1">选项1</el-menu-item>
			<el-menu-item index="2-2">选项2</el-menu-item>
			<el-menu-item index="2-3">选项3</el-menu-item>
			<el-submenu index="2-4">
				<template slot="title">选项4</template>
				<el-menu-item index="2-4-1">选项1</el-menu-item>
				<el-menu-item index="2-4-2">选项2</el-menu-item>
				<el-menu-item index="2-4-3">选项3</el-menu-item>
			</el-submenu>
		</el-submenu>

		<el-menu-item index="3" disabled>消息中心</el-menu-item>
		<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
	</el-menu> -->
	<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
		<el-button class="buttonimg">
			<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
		</el-button>
		<el-submenu index="2" class="submenu">
			<template slot="title">超级管理员</template>
			<el-menu-item index="2-1">设置</el-menu-item>
			<el-menu-item index="2-2">个人中心</el-menu-item>
			<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
		</el-submenu>
	</el-menu>
</template>

<script>
	export default {
		data(){
		  return{
		    collapsed:false,
        imgshow:require('@/assets/img/show.png'),
         imgsq:require('@/assets/img/sq.png')
		  }
		}
	}
</script>

<style scoped>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
	}

	.submenu {
		float: right;
	}

	.buttonimg {
		height: 60px;
		background-color: transparent;
		border: none;
	}

	.showimg {
		width: 26px;
		height: 26px;
		position: absolute;
		top: 17px;
		left: 17px;
	}

	.showimg:active {
		border: none;
	}
</style>

定义首页导航栏与左侧菜单组件与路由的对应关系 ---router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
 
import Login from '@/views/Login'
import Registered from '@/views/Registered'
 
 
Vue.use(Router)
 
export default new Router({
  routes: [{
    path: '/',
    name: 'Login',
    component: Login
  }, {
    path: '/Registered',
    name: 'Registered',
    component: Registered
  }, {
    path: '/AppMain',
    name: 'AppMain',
    component: AppMain,
    children: [{
      path: '/LeftNav',
      name: 'LeftNav',
      component: LeftNav
    }, {
      path: '/TopNav',
      name: 'TopNav',
      component: TopNav
    }]
  }]
})

2.通过总线实现左侧组件的折叠与显示

通过定义总线将父组件（AppMain）与子组件进行通信

在main.js中定义Bus总线

new Vue({
  el: '#app',
  data(){
    return{
      Bus:new Vue()
    }
  },
  router,
  components: { App },
  template: '<App/>'
})

TopNav.vue

collapsed默认flase,当我们点击的时候改变它的值，flase变为true,并把是否折叠的变量放入总线中方便其他组件调取。

methods:{
          doToggle(){//收起左侧菜单事件
            this.collapsed=!this.collapsed;
            //将是否折叠的变量放入总线
            this.$root.Bus.$emit('aaa',this.collapsed);
          },
          exit(){//退出事件
            this.$router.push("/")
          }
        }

LeftNav.vue 

在组件创建后定义了一个名为 'aaa' 的事件，并在事件触发时将接收到的数据赋值给 collapsed 属性。

created(){
          this.$root.Bus.$on('aaa',r=>{
            this.collapsed=r;
          });
        }

AppMain.vue

在组件创建后定义了一个名为 'aaa' 的事件，并在事件触发时将接收到的数据赋值给 asideClass属性（通过true或false赋予相应的样式）。

 created(){
          this.$root.Bus.$on('aaa',r=>{
            this.asideClass=r ? 'main-aside-collapsed':'main-aside';
          });
        }

效果演示

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1046093.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

多元异构、绿色节能，揭秘浪潮计算机基础技术研究与整机柜设计思路

多元异构、绿色节能，揭秘浪潮计算机基础技术研究与整机柜设计思路

出品 | CSDN 云计算 数字化转型、云计算 技术与应用的爆发&#xff0c;数据中心从传统 CPU 为核心&#xff0c;变为 CPU、GPU、ASIC、FPGA、DPU 等等多种硬件与芯片架构、多元算力并存的阶段。对于企业来说&#xff0c;数字化转型中算力就是生产力&#xff0c;底层算力底座可能…
阅读更多...
可信执行环境（Tee）入门综述

可信执行环境（Tee）入门综述

SoK: Hardware-supported Trusted Execution Environments [ArXiv22] 摘要引言贡献 范围系统和威胁模型系统模型威胁模型共存飞地对手无特权软件对手系统软件对手启动对手外围对手结构对手侵入性对手 关于侧信道攻击的一点注记 VERIFIABLE LAUNCH信任根&#xff08;RTM&#xf…
阅读更多...
jvm深入研究文档--jvm分区以及职责

jvm深入研究文档--jvm分区以及职责

Java虚拟机&#xff08;JVM&#xff09;主要包括以下几个区域&#xff1a; 方法区&#xff08;Method Area&#xff09;&#xff1a;这个区域存储已被加载的类信息&#xff0c;常量&#xff0c;静态变量&#xff0c;即时编译器编译后的代码等数据。方法区是所有线程共享的。在…
阅读更多...
C. Card Game

C. Card Game

题目&#xff1a;样例&#xff1a; 输入 4 4 -4 1 -3 5 4 1 -2 3 -4 3 -1 3 -5 1 -1输出 5 4 2 0 思路&#xff1a; 这里的题意就是&#xff0c; 当我们 i 取奇数的时候&#xff0c;可以获得该奇数 i 的值&#xff0c;并去掉当前卡牌。 当我们 i 取偶数的时候&#xff0c;去掉当…
阅读更多...
钢轨长度及允许偏差

钢轨长度及允许偏差

声明 本文是学习GB-T 2585-2021 铁路用热轧钢轨. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了铁路用钢轨的订货内容、分类、尺寸、外形、质量及允许偏差、技术要求、试验方法、检 验规则、标志及质量证明书。 本标准适用于3…
阅读更多...
【斯坦福cs324w】中译版 大模型学习笔记九 大模型之Adaptation

【斯坦福cs324w】中译版 大模型学习笔记九 大模型之Adaptation

文章目录 引言Adaptation的必要性从llm的训练过程分析从下游任务和原始训练任务之间的差异分析 通用的Adaptation配置 当前主流的Adaptation方法ProbingFine-tuningLightweight Fine-tuningPrompt TuningPrefix TuningAdapter Tuning 参考资料 在特定领域的下游任务中&#xff…
阅读更多...
【Git】轻松学会 Git（一）：掌握 Git 的基本操作

【Git】轻松学会 Git（一）：掌握 Git 的基本操作

文章目录 前言一、创建 Git 本地仓库1.1 什么是仓库1.2 创建本地仓库1.3 .git 目录结构 二、配置 Git三、认识 Git 的工作区、暂存区和版本库3.1 什么是 Git 的工作区、暂存区和版本库3.2 工作区、暂存区和版本库之间的关系 四、添加文件4.1 添加文件到暂存区和版本库中的命令4…
阅读更多...
面试官：Redis基本命令有哪些，Redis怎么实现分布式锁？

面试官：Redis基本命令有哪些，Redis怎么实现分布式锁？

哈喽&#xff01;大家好&#xff0c;我是奇哥&#xff0c;一位专门给面试官添堵的职业面试员 文章持续更新&#xff0c;可以微信搜索【小奇JAVA面试】第一时间阅读&#xff0c;回复【资料】更有我为大家准备的福利哟&#xff01; 文章目录 一、Redis基本数据类型与使用场景1、S…
阅读更多...
IP地址定位的特点

IP地址定位的特点

IP地址定位是一种广泛应用于网络领域的技术&#xff0c;它允许我们确定特定设备或用户在互联网上的位置。这项技术在很多方面都具有重要的特点&#xff0c;本文将深入探讨这些特点。 1.全球性覆盖&#xff1a; IP地址定位IP66_ip归属地在线查询_免费ip查询_ip精准定位平台具有全…
阅读更多...
macOS Sonoma 14 正式版（23A344）发布，附黑/白苹果镜像下载地址

macOS Sonoma 14 正式版（23A344）发布，附黑/白苹果镜像下载地址

系统介绍&#xff08;系统下载地址&#xff1a;http://www.imacosx.cn/115300.html&#xff09; 黑果魏叔9 月 27日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS Sonoma 14 正式版&#xff08;23A344&#xff09;。 macOS 14正式版系统发布&#xff1a;全新功能与改…
阅读更多...
Linux：理解进程的多种状态

Linux：理解进程的多种状态

文章目录 理解状态运行状态阻塞状态挂起状态Linux系统下的进程状态的解析状态的查看 本篇总结的是进程的多种状态 对于进程的状态理解&#xff0c;在教材上通常是有下面的思维模式图 那么如何理解上面图片中的内容&#xff1f; 理解状态 如何理解状态&#xff1f;其实理解状…
阅读更多...
什么是HTTP头部（HTTP headers）？

什么是HTTP头部（HTTP headers）？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 理解 HTTP 头部&#xff08;HTTP Headers&#xff09;⭐ HTTP 头部的分类⭐ HTTP 头部的应用⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#x…
阅读更多...
基于Python Django的公务员考试信息管理系统

基于Python Django的公务员考试信息管理系统

文章目录 1 简介2. 技术栈3 功能分析4 功能具体设计4.1 软件功能模块设计4.2数据库设计与实现4.2.1概念模型设计4.2.2数据库逻辑结构设计 5系统详细设计5.1系统功能模块5.2管理员功能模块 六 源码咨询 1 简介 公务员考试信息管理系统的开发运用Python技术&#xff0c;MIS的总体…
阅读更多...
8月数据出炉！NOA与激光雷达「分道扬镳」？降本大战升级

8月数据出炉！NOA与激光雷达「分道扬镳」？降本大战升级

对于激光雷达赛道来说&#xff0c;如何在市场整体需求更加偏向强调性价比的背景下&#xff0c;继续维持前装出货的增速&#xff0c;已经成为新的考验。 进入2023年&#xff0c;高阶智驾&#xff08;中国市场以NOA为代表&#xff09;&#xff0c;继续保持向上势头。8月&#xff…
阅读更多...
Archlinux Timeshift的系统备份与还原

Archlinux Timeshift的系统备份与还原

服务器在滚挂或误删系统文件，timeshift系统备份与还原的情景： 安装 timeshif 1 yay -s timeshif 备份设置 选择快照类型 此处选择【RSYNC】 选择储存位置 每台设备安装分区不一样，大家安装实际情况选择，一般选择比较大的空间存储，并且最好是机械，这样不容易损坏 设置计…
阅读更多...
实战项目：VB实现小鸟快跑小游戏

实战项目：VB实现小鸟快跑小游戏

文章目录&#xff1a; 一&#xff1a;效果演示 二&#xff1a;实现思路 三&#xff1a;代码实现 form1 效果图 代码 form2 效果图 代码 一&#xff1a;效果演示 效果图◕‿◕✌✌✌ 代码下载 二&#xff1a;实现思路 窗口1 就是实现窗口的跳转和关闭窗口2 1.先添加背…
阅读更多...
【接口测试】Chrome浏览器F12调试工具抓包详细分析（超细）

【接口测试】Chrome浏览器F12调试工具抓包详细分析（超细）

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 调试时使用最多的…
阅读更多...
Docker网络+资源控制

Docker网络+资源控制

一、Docker网络 Docker 网络实现原理 Docker使用Linux桥接&#xff0c;在宿主机虚拟一个Docker容器网桥(docker0)&#xff0c;Docker启动一个容器时会根据Docker网桥的网段分配给容器一个IP地址&#xff0c;称为Container-IP&#xff0c;同时Docker网桥是每个容器的默认网关。…
阅读更多...
【计算机网络】IP数据报首部格式、最大传输单元MTU、最大分段大小MSS

【计算机网络】IP数据报首部格式、最大传输单元MTU、最大分段大小MSS

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 更多计算机网络知识专栏&#xff1a;计算机网络&#x1f525; 给大家跳段…
阅读更多...
【生育险报销】

【生育险报销】

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023