当前位置: 首页 > news >正文

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.jsprod.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';});}

效果演示

相关文章:

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…...

What is an HTTP Flood DDoS attack?

HTTP 洪水攻击是一种针对 Web 和应用程序服务器的第 7 层分布式拒绝服务 &#xff08;DDoS&#xff09; 攻击。HTTP 洪水攻击通过使用 HTTP GET 或 HTTP POST 请求执行 DDoS 攻击。这些请求是有效的&#xff0c;并且针对可用资源&#xff0c;因此很难防范 HTTP 洪水攻击。 匿名…...

第 114 场 LeetCode 双周赛题解

A 收集元素的最少操作次数 模拟: 反序遍历数组&#xff0c;用一个集合存当前遍历过的不超过 k k k 的正数 class Solution { public:int minOperations(vector<int> &nums, int k) {unordered_set<int> vis;int n nums.size();int i n - 1;for (;; i--) {if…...

[Java框架] Java常用爬虫框架推荐

Selenium GitHub 截止 2023年9月份 Star数量27.7K Selenium是一款基于浏览器自动化的工具&#xff0c;它可以模拟用户在浏览器上的操作行为&#xff0c;并获取网页上的内容。Selenium支持多种浏览器&#xff0c;可以很好地处理JavaScript生成内容。但是Selenium相较于其他框架而…...

Kafka:安装与简单使用

文章目录 下载安装windows安装目录结构启动服务器创建主题发送一些消息启动消费者设置多代理集群常见问题 工具kafka tool 常用指令topic查看topic删除topic 常见问题参考文献 下载安装 下载地址&#xff1a;kafka-download windows安装 下载完后&#xff0c;找一个目录解压…...

029-从零搭建微服务-消息队列(一)

写在最前 如果这个项目让你有所收获&#xff0c;记得 Star 关注哦&#xff0c;这对我是非常不错的鼓励与支持。 源码地址&#xff08;后端&#xff09;&#xff1a;mingyue: &#x1f389; 基于 Spring Boot、Spring Cloud & Alibaba 的分布式微服务架构基础服务中心 源…...

Python2020年06月Python二级 -- 编程题解析

题目一 数字转汉字 用户输入一个1~9&#xff08;包含1和9&#xff09;之间的任一数字&#xff0c;程序输出对应的汉字。 如输入2&#xff0c;程序输出“二”。可重复查询。 答案: 方法一 list1[一,二,三,四,五,六,七,八,九] while True:n int(input(请输入1~9之间任意一个数字…...

差分放大器的精髓:放大差模信号 抑制共模信号

参考如图基本的差分放大电路&#xff0c;在R1R2 R3R4的条件下&#xff0c;其输出与输入的关系为 &#xff1a; 具体推导过程参考&#xff1a;差分运算放大器的放大倍数的计算及结论_正在黑化的KS的博客-CSDN博客 由这个式子我们可以发现&#xff0c;差分放大器放大的是同相端与…...

蓝桥等考Python组别九级006

第一部分&#xff1a;选择题 1、Python L9 &#xff08;15分&#xff09; 运行下面程序&#xff0c;可以输出几行“*”&#xff1f;&#xff08; &#xff09; for i in range(6): for j in range(7): print(*, end ) print() 5678 正确答案&#xff1a;B 2、Python …...

初级篇—第五章子查询

文章目录 什么是子查询需求分析与问题解决子查询的基本语法结构子查询的分类 单行子查询单行比较操作符代码示例HAVING 中的子查询CASE中的子查询子查询中的空值问题非法使用子查询 多行子查询多行比较操作符代码示例空值问题 相关子查询代码示例在ORDER BY 中使用子查询EXISTS…...

【AntDesign】封装全局异常处理-全局拦截器

[toc] 场景 本文前端用的是阿里的Ant-Design框架&#xff0c;其他框架也有全局拦截器&#xff0c;思路是相同&#xff0c;具体实现自行百度下吧 因为每次都需要调接口&#xff0c;都需要单独处理异常情况&#xff08;code !0&#xff09;&#xff0c;因此前端需要对后端返回的…...

Visual Studio 代码显示空格等空白符

1.VS2010: 快捷键&#xff1a;CtrlR,W 2.VS2017、VS2019、VS2022&#xff1a; 工具 -> 选项 -> 文本编辑器 -> 显示 -> 勾选查看空白...

紫光同创FPGA图像视频采集系统,基于OV7725实现,提供工程源码和技术支持

目录 1、前言免责声明 2、设计思路框架视频源选择OV7725摄像头配置及采集动态彩条HDMA图像缓存输入输出视频HDMA缓冲FIFOHDMA控制模块HDMI输出 3、PDS工程详解4、上板调试验证并演示准备工作静态演示动态演示 5、福利&#xff1a;工程源码获取 紫光同创FPGA图像视频采集系统&am…...

京东大型API网关实践之路

概述 1、背景 京东作为电商平台&#xff0c;近几年用户、业务持续增长&#xff0c;访问量持续上升&#xff0c;随着这些业务的发展&#xff0c;API网关应运而生。 API网关&#xff0c;就是为了解放客户端与服务端而存在的。对于客户端&#xff0c;使开放给客户端的接口标准统…...

图像处理: 马赛克艺术

马赛克 第一章 马赛克的历史渊源 1.1 马赛克 艺术中的一种表面装饰&#xff0c;由紧密排列的、通常颜色各异的小块材料&#xff08;如石头、矿物、玻璃、瓷砖或贝壳&#xff09;组成。与镶嵌不同的是&#xff0c;镶嵌是将要应用的部件放置在已挖空以容纳设计的表面中&#xff0…...

postgresql-管理数据表

postgresql-管理数据表 创建表数据类型字段约束表级约束模式搜索路径 修改表添加字段删除字段添加约束删除约束修改字段默认值修改字段数据类型重命名字段重命名表 删除表 创建表 在 PostgreSQL 中&#xff0c;使用 CREATE TABLE 语句创建一个新表&#xff1a; CREATE TABLE …...

Llama2-Chinese项目:3.1-全量参数微调

提供LoRA微调和全量参数微调代码&#xff0c;训练数据为data/train_sft.csv&#xff0c;验证数据为data/dev_sft.csv&#xff0c;数据格式如下所示&#xff1a; "<s>Human: "问题"\n</s><s>Assistant: "答案举个例子&#xff0c;如下所…...

蓝桥等考Python组别十级001

第一部分:选择题 1、Python L10 (15分) 已知s = Hello!,下列说法正确的是( )。 s[1]对应的字符是Hs[2]对应的字符是ls[-1]对应的字符是os[3]对应的字符是o正确答案:B 2、Python L10 (15分) 运行下面程序,输入字符串“Banana”,输出的结果是&#x...

记录 Git 操作时遇到的问题及解决方案

目录 问题&#xff1a;git pull 时报错报错内容&#xff1a; ! [rejected] v1.0.3 -> v1.0.3 (would clobber existing tag)原因&#xff1a;本地 Git 仓库中已经存在名为 v1.0.3 和 v1.0.6 的标签了&#xff0c;而尝试从远程仓库&#xff08;GitHub&#xff09;拉取这些标签…...

第一届“龙信杯”电子数据取证竞赛Writeup

目录 移动终端取证 请分析涉案手机的设备标识是_______。&#xff08;标准格式&#xff1a;12345678&#xff09; 请确认嫌疑人首次安装目标APP的安装时间是______。&#xff08;标准格式&#xff1a;2023-09-13.11:32:23&#xff09; 此检材共连接过______个WiFi。&#x…...

Vue与React//双绑问题

Vue和React是两个目前最流行的前端框架&#xff0c;它们有一些区别主要区别如下&#xff1a; 响应式原理&#xff1a;Vue使用基于模板的方式进行双向绑定&#xff0c;其中使用了Vue自己实现的响应式系统。Vue能够通过追踪数据的依赖关系&#xff0c;自动更新DOM元素。而React采…...

信息安全第四周

社会工程学 社会工程学主要研究如何操纵人的心理和情感来获取机密信息或其他目标。它主要不是通过技术手段攻击计算机系统&#xff0c;而是通过心理学和人际交往技巧来欺骗人&#xff0c;使他们泄露密码、安全代码或其他敏感信息。社会工程学主要是一种安全风险&#xff0c;主要…...

机器学习基础概念与常见算法入门【机器学习、常见模型】

机器学习基础概念与算法 机器学习是计算机科学领域的一个分支&#xff0c;它致力于让计算机系统具备从数据中学习和改进的能力&#xff0c;而不需要显式地进行编程。与传统编程相比&#xff0c;机器学习有着根本性的不同之处。 机器学习与传统编程的不同 传统编程&#xff1…...

移动端 [Android iOS] 压缩 ECDSA PublicKey

移动端 [Android & iOS] 压缩 ECDSA PublicKey AndroidiOS 使用 Android KeyStore 和 iOS 的 Secure Enclave 提供的安全能力使用 P-256 来对 API 请求进行签名&#xff0c;服务器端再进行验证。 但是发现不论是 iOS 还是安卓都没有提供一个便捷的方式从 iOS 的SecKeyCopyE…...

Spring的配置Bean的方式

在Spring框架中&#xff0c;配置Bean有三种主要方式&#xff1a;自动装配、基于Java的显式配置和基于XML的显式配置。 1、自动装配&#xff1a; 自动装配是Spring容器根据Bean之间的依赖关系&#xff0c;自动将需要的Bean注入到目标Bean中。这是一种非常简便和快捷的配置方式&…...

安防监控/视频汇聚平台EasyCVR云端录像不展示是什么原因?该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…...

毛玻璃态登录表单

效果展示 页面结构组成 通过上述的效果展示可以看出如下几个效果 底部背景有三个色块并且效果是毛玻璃效果登录表单是毛玻璃效果登录表单的周围的小方块也是有毛玻璃效果并且与登录表单有层次效果 CSS3 知识点 filter 属性backdrop-filter 属性绝对定位属性动画属性 底部背…...

Java:使用 Graphics2D 类来绘制图像

目录 过程介绍创建一个 BufferedImage 对象创建一个 Graphics2D 对象绘制字符和干扰线将生成的图像保存到文件 示例代码 过程介绍 创建一个 BufferedImage 对象 首先创建一个 BufferedImage 对象来表示图像 创建一个 Graphics2D 对象 然后使用 createGraphics() 方法创建一…...

VUE2项目:尚品汇VUE-CLI脚手架初始化项目以及路由组件分析(一)

标题 环境VUE2目录publicassetscomponentsmain.jsbabel.config.jspackage.jsonvue.config.js 项目路由分析Header与Footer非路由组件完成Header示例 路由组件的搭建声明式导航编程式导航 Footer组件的显示与隐藏路由传递参数重写push和replace三级联动组件拆分附件 环境 前提要…...

输入网址input,提取标题和正文

https://m.51cmm.com/wz/WZnKubw1.html?share_token715beaff-33ef-466b-8b6c-092880b9a716&tt_fromcopy_link&utm_sourcecopy_link&utm_mediumtoutiao_android&utm_campaignclient_share - 【科学决策七步骤 - 希律心理】 - 今日头条 提取标题和正文input输…...

自己做的影视会员网站违法么/关键信息基础设施安全保护条例

RAM:主要做运行时数据存储器&#xff0c;FLASH主要是程序存储器&#xff0c;EERPOM主要是用以在程序运行时保存一些需要掉电不丢失的数据。 一些变量放到RAM中&#xff0c;一些初始化数据&#xff0c;比如液晶显示器要显示的内容界面&#xff0c;都是FLASH区&#xff08;原来的…...

建立网站的方案/seo优化的主要任务

R中的统计分析通过使用许多内置函数来执行。这些函数大多数是R基础包的一部分。这些函数将R向量作为输入和参数&#xff0c;并给出结果。我们在本章中讨论的功能是平均值&#xff0c;中位数和模式。Mean平均值通过求出数据集的和再除以求和数的总量得到平均值函数mean()用于在R…...

网站用哪些系统做的好处/站长统计app下载免费

当下物联网发展迅猛&#xff0c;物联网卡可以接受短信指令&#xff0c;实现千里之外尽可掌控。本人做过一个这类项目&#xff0c;把相关经验记录下来&#xff0c;分享给需要的人。 物联网卡通讯其实跟电话卡一样&#xff0c;可以使用CMPP协议。不过由于物联网卡位数为13位&…...

文化传媒有限公司网站建设/自己建网页

这个实现起来很简单&#xff0c;就两步&#xff0c;先读取excel文件单元格的值&#xff0c;然后插入SQL数据库中。下面我介绍一下如何从excel文件读取数据&#xff0c;并插入到mysql数据库中&#xff0c;主要用到openpyxl和pymysql这两个包&#xff0c;实验环境win7 python3.6 …...

网站开发开题报告范文/优化设计三年级上册答案

翻车 题目简介&#xff1a; 翻车 (rollover.cpp/c/pas)【问题描述】 有一天&#xff0c;小武找到了翻车王&#xff0c;给了他n个整数a1,a2,a3,…an&#xff0c;翻车王 需要选择其中的k个数&#xff0c;使得选出的k个数中任意两个的差都可以被m整除。 选出的数可以重复&#xff…...

教育类网站怎么做/国外seo工具

在这样一个「数据驱动」的时代&#xff0c;很多产品团队都选择在产品早期就引入或搭建数据分析平台&#xff0c;并希望能够通过数据驱动产品的快速成长&#xff0c;但即便如此&#xff0c;大多数的初创企业还是难逃失败的厄运。除去战略、经营等导致企业死亡的情况&#xff0c;…...