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

目录

前言

一、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.mzph.cn/news/89154.shtml

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

相关文章

扫地机器人经营商城小程序的作用是什么

扫地机器人经营商城小程序的作用是什么

扫地机器人对人们生活大有帮助&#xff0c;近些年也有不少企业开创品牌&#xff0c;在电商平台每年销量也非常高&#xff0c;同行竞争激烈及私域化程度加深情况下&#xff0c;虽然第三方平台或线下方式也有生意&#xff0c;但互联网电商发展也为商家们带来了诸多痛点。 那么通…
阅读更多...
【图像去噪】【TGV 正则器的快速计算方法】通过FFT的总（广义）变化进行图像去噪（Matlab代码实现）

【图像去噪】【TGV 正则器的快速计算方法】通过FFT的总（广义）变化进行图像去噪（Matlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f308;4 Matlab代码实现 &#x1f4a5;1 概述 【图像去噪】【TGV 正则化器的快速计算方法】通过FFT的总&#xff08;广义&#xff09;变换进行图像去噪&#xff0c;可提供更自然的恢复图像。…
阅读更多...
uniapp：不同权限设置不同的tabBar

uniapp：不同权限设置不同的tabBar

1、在pages.json里&#xff0c;将所有tabBar涉及的页面都加进来。 我这里使用username来动态显示tabBar。 jeecg用户显示&#xff1a;首页&#xff0c;订单&#xff0c;消息&#xff0c;发现&#xff0c;我的&#xff0c;一共5个tabBar。 admin用户显示&#xff1a;首页&…
阅读更多...
青大数据结构【2022】

青大数据结构【2022】

关键字&#xff1a; next数组、下三角矩阵、完全二叉树结点、静态分布动态分布、迪杰斯特拉最短路径、二叉排序树失败ASL、排序比较、二叉排序树中序遍历、链表删除最大值 一、单选 二、简答 三、应用 四、算法分析 五、算法设计
阅读更多...
「Go框架」gin框架是如何处理panic的？

「Go框架」gin框架是如何处理panic的？

本文我们介绍下recover在gin框架中的应用。 首先&#xff0c;在golang中&#xff0c;如果在子协程中遇到了panic&#xff0c;那么主协程也会被终止。如下&#xff1a; package mainimport ("github.com/gin-gonic/gin" )func main() {r : gin.Default()// 在子协程中…
阅读更多...
轻松使用androidstudio交叉编译libredwg库

轻松使用androidstudio交叉编译libredwg库

对于安卓或嵌入式开发者而言，交叉编译是再熟悉不过的操作了，可是对于一些刚入门或初级开发者经常会遇到这样的问题：如何交叉编译C++库来生成安卓下的so库呢？ 最近有一些粉丝找到我求救，那么我最近刚好有空大致研究了下，帮他们成功编译了其中一个libredwg的C++库，这篇文章…
阅读更多...
LeetCode01

LeetCode01

LeetCode01 两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和 为目标值 target 的那两个整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你…
阅读更多...
Lua多脚本执行

Lua多脚本执行

--全局变量 a 1 b "123"for i 1,2 doc "Holens" endprint(c) print("*************************************1")--本地变量&#xff08;局部变量&#xff09; for i 1,2 dolocal d "Holens2"print(d) end print(d)function F1( ..…
阅读更多...
Java中的IO流的缓冲流

Java中的IO流的缓冲流

不爱生姜不吃醋⭐️ 如果本文有什么错误的话欢迎在评论区中指正 与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 &#x1f334;IO流体系结构&#x1f334;缓冲流1.提高效率的原理2.缓冲流的类型3.字符缓冲流两个特有方法 &#x1f334;总结 &#x1f334;IO流体系…
阅读更多...
git学习使用

git学习使用

git使用 1、cmd #查看版本 git version2、初识 Git GUI: Git提供的图形界面工具 Git Bash: Git提供的命令行工具 1.打开Git Bash2.设置自己的用户名和邮箱地址git config --global user.name "xxx"git config --global user.email "123456789163.com"查…
阅读更多...
基于jenkins+k8s实现devops

基于jenkins+k8s实现devops

1、背景 由于jenkins运行在k8s上能够更好的利用动态agent进行构建。所以写了个部署教程&#xff0c;亲测无坑 2、部署 1、创建ns kubectl create namespace devops 2、kubectl apply -f jenkins.yml apiVersion: v1 kind: ServiceAccount metadata:name: jenkinsnamespace…
阅读更多...
OpenHarmony应用程序包整体说明

OpenHarmony应用程序包整体说明

用户应用程序泛指运行在设备的操作系统之上&#xff0c;为用户提供特定服务的程序&#xff0c;简称“应用”。一个应用所对应的软件包文件&#xff0c;称为“应用程序包”。 OpenHarmony提供了应用程序包开发、安装、查询、更新、卸载的管理机制&#xff0c;方便开发者开发和管…
阅读更多...
word中给公式加序号的方法

word中给公式加序号的方法

①首先&#xff0c;用word插入一个公式 然后呢&#xff0c;在公式后面敲上这个公式在整篇文章中的序号。我的这个公式在整篇文章中是第三号&#xff0c;所以就敲上(3),如下图所示&#xff1a; 然后&#xff0c;在公式和序号之间&#xff0c;按住shift3(#) 切忌&#xff0c;…
阅读更多...
UNITY—2D游戏制作入门！

UNITY—2D游戏制作入门！

Unity作为当今最流行的游戏引擎之一&#xff0c;受到各大厂商的喜爱。 像是炉石传说&#xff0c;以及逃离塔克夫&#xff0c;都是由unity引擎开发制作。 作为初学者的我们&#xff0c;虽然无法直接做出完成度那么高的作品&#xff0c;但每一个伟大的目标&#xff0c;都有一个…
阅读更多...
MySQL数据库的索引和事务

MySQL数据库的索引和事务

目录 一、索引 1.1Mysql索引 1.2索引的作用 1.3 创建索引的依据 1.4 普通索引 修改表方式创建索引 删除索引 1.5 唯一索引 修改表方式创建 删除索引 1.6 主键索引 修改表方式创建 1.7 组合索引 1.8 全文索引 1.9查看索引 二、事务 2.1事务概念 2.2事务的ACID特…
阅读更多...
软件测试一些常见的误区

软件测试一些常见的误区

摘要 随着市场对软件质量的不断提高&#xff0c;软件测试不断受到重视&#xff0c;但是由于总体上&#xff0c;国内软件项目过程不规范&#xff0c;导致重视编码和轻视测试的现象&#xff0c;对于软件测试的重要性、测试方法和流程等还存在很多错误的认识。根据作者的软件工作…
阅读更多...
(数组/字符串) 380. O(1) 时间插入、删除和获取随机元素 ——【Leetcode每日一题】

(数组/字符串) 380. O(1) 时间插入、删除和获取随机元素 ——【Leetcode每日一题】

❓ 380. O(1) 时间插入、删除和获取随机元素 难度&#xff1a;中等 实现 RandomizedSet 类&#xff1a; RandomizedSet() 初始化 RandomizedSet 对象bool insert(int val) 当元素 val 不存在时&#xff0c;向集合中插入该项&#xff0c;并返回 true &#xff1b;否则&#x…
阅读更多...
YUM 升级 PHP7

YUM 升级 PHP7

文章目录 YUM 升级 PHP71. 查看当前 PHP 信息2. YUM 安装 PHP73. 查看 PHP 版本4. 启动PHP-FPM YUM 升级 PHP7 参考地址&#xff1a;网站地址 参考地址&#xff1a;网站地址 1. 查看当前 PHP 信息 # 查看 PHP 版本信息 php -v# 查看 yum 源中 PHP 信息 yum list | grep php2. …
阅读更多...
Kafka-UI

Kafka-UI

有多款kafka管理应用&#xff0c;目前选择的是github上star最多的UI for Apache Kafka。 关于 To run UI for Apache Kafka, you can use either a pre-built Docker image or build it (or a jar file) yourself. UI for Apache Kafka is a versatile, fast, and lightweight…
阅读更多...
工作中Git管理项目和常见问题处理

工作中Git管理项目和常见问题处理

工作中Git管理项目和常见问题处理 Git仓库的管理方式为什么会出现无法push到线上处理方法 Git仓库的管理方式 共用统一仓库,不同开发人员使用不同分支 步骤 下载代码 git clone <url>查看分支 git branch创建并切换分支 git checkout -b dev分支名称保持和远程分支一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023