day05 Router、vuex、axios
配置
router和vuex需要在创建vue项目的时候,开始的时候选择Manually select features,于是就可以在下一个创建配置讯问中选择router和vuex。
axios则需要执行命令行:
npm install axios -S
之后再在需要发送请求的view导入即可。
router实现左边点击右边打开
首先需要安装ElementUI,方法见day4 vue2以及ElementUI-CSDN博客。
在App.vue中导入框架,将<nav>、<router-view>标签移动到对应位置。其中to配置相当于servlet请求的路径。
<template><div id="app"><el-container><el-header>欢迎你</el-header><el-container><el-aside width="200px"><nav><ul><li><router-link to="/">Home</router-link></li><li><router-link to="/about">About</router-link></li><li><router-link to="/question">问题管理</router-link></li><li><router-link to="/new">新页面</router-link></li></ul></nav></el-aside><el-main><router-view/></el-main></el-container></el-container></div>
</template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>
并在router的 index.js中配置请求路径对应的view们,相当于web.xml。其中有两种方式导入view,第一种可以直接开头import,在routers中的component中就只用写出你的模块名即可,这是静态导入,其实相当于js中的include编译指令,开始就导入自然加载速度会变快,但是动态导入往往常见一些,就比如这里可以直接在component中 ()=>import ('路径'),这样是动态导入,请求该view的时候才会加载,更灵活。
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
// 路由的配置
Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')},{path:'/question',name:'question',component:() => import(/* webpackChunkName: "about" */ '../views/QuestionView.vue')},{path:'/new',name:'new',component:() => import(/* webpackChunkName: "about" */ '../views/NewView.vue')}
]
// js文件中导出一个 router 实例
const router = new VueRouter({routes
})export default router
使用vuex处理用户的动作
vuex主要往外导出五个属性,在store的index.js中,state用于储存页面共享的数据,actions用于处理发出的动作,mutations用于直接操纵state中的数据,getters中对state中的数据进行再次加工,类似vue中计算属性computed。
就如图片中一样,view中用dispatch发出动作,actions使用commit将动作处理,转给mutations对state进行直接操作,前端可以直接调用state中的数据,来实现数据更新。getters的处理则直接可以前端执行{{$store.getters.方法名}}。
store中的index.js:
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {// 共享数据count: 0, // 初值为零myNewList:[]},getters: { // 对state中的数据进行再次加工,类似vue中计算属性computedupdate(state) {return state.count * 10;}},mutations: { // 修改state数据change(state, value) {state.count += value;},sub(state, value) {state.count -= value;}},actions: { // 相应动作处理// 必须与dispatch中的时间名一致sum(context, value) {context.commit('change', value);},sub(context, value) {context.commit('sub', value);}},modules: { // 分模块化开发,一个模块可以有自己的state,getters,mutations,actions}
})
前端调用:
<template><div class="about"><h1>This is an about page</h1><h2>当前计算的和为:{{$store.state.count}}</h2><h2>当前计算的和 ✖ 10 为:{{$store.getters.update}}</h2><el-button @click="add" type="primary" round>我猜你不会点击我</el-button><br/><br/><el-button @click="sub" type="primary" round>我可以回去哦</el-button></div>
</template>
<script>
export default{name: "AboutView",methods:{// 求和时间处理add(){// 进行dispatchthis.$store.dispatch("sum",5);},sub(){this.$store.dispatch("sub",10);}}
}
</script>
使用axios实现前后端连接
其原理是可以使用axios访问不同端口,向不同端口发送请求,有两种方式发送请求:
可以直接在view中导入axios包,直接发送请求,但是因为请求的地址往往容易变化,所以需要用第二种方式来发送请求,首先在util包中创建js页面配置baseUrl(在此导入axios包),也就是端口号,然后在api包中创建针对不同view的不同请求url,也就是请求的具体地址和请求方法以及可能的参数,将方法配置可以其他文件访问(export default),这时候就需要将配置好的js文件直接导入到view中,然后再调用方法即可。
url在view中(第一种):
<template><div class="home"><img alt="Vue logo" src="../assets/logo.png" /><HelloWorld msg="Welcome to Your Vue.js App" /><br/><el-button @click="sendRequest()" type="primary">发送axios请求,进行调用springboot项目</el-button><br/><br/><br/><el-table :data="this.$store.state.myNewList" border style="width: 100%"><el-table-column fixed prop="id" label="编号" width="150"></el-table-column><el-table-column prop="expertName" label="专家姓名" width="120"> </el-table-column><el-table-column prop="questioner" label="提问人" width="120"></el-table-column><el-table-column prop="phone" label="电话" width="120"> </el-table-column><el-table-column prop="plantName" label="农作物名称" width="300"></el-table-column><el-table-column prop="question" label="问题" width="120"> </el-table-column><el-table-column prop="answer" label="回答" width="120"> </el-table-column><el-table-column prop="status" label="状态" width="120"> </el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table></div>
</template><script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import axios from "axios"; // 引入axios库export default {name: "HomeView",components: {HelloWorld,},methods: {sendRequest() {axios.get("http://localhost:8888/question/findAll").then(response => {this.questonList = response.data.data;this.$store.state.myNewList = response.data.data;});},},data(){return {questonList: []}}
};
</script>
url在js文件中(第二种):
<template><div class="home"><img alt="Vue logo" src="../assets/logo.png" /><br /><el-button @click="search" type="primary">search</el-button><el-button @click="add()" type="primary">add</el-button><br /><br /><br /><el-input v-model="inputValue" placeholder="请输入id或专家姓名"></el-input><br /><br /><el-table :data="questionList" border style="width: 100%"><el-table-column fixed prop="id" label="编号" width="150"></el-table-column><el-table-column prop="expertName" label="专家姓名" width="120"></el-table-column><el-table-column prop="questioner" label="提问人" width="120"></el-table-column><el-table-column prop="phone" label="电话" width="120"> </el-table-column><el-table-column prop="plantName" label="农作物名称" width="300"></el-table-column><el-table-column prop="question" label="问题" width="120"></el-table-column><el-table-column prop="answer" label="回答" width="120"></el-table-column><el-table-column prop="status" label="状态" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table></div>
</template><script>
// @ is an alias to /src
import queApi from "@/api/question"; // 导入封装后的axios请求,具体见src/api/question.jsexport default {name: "HomeView",methods: {sendRequest() {queApi.getQuestionList().then((res) => {this.questionList = res.data.data;this.$store.state.myNewList = this.questionList; // 数据共享});}},data() {return {questionList: [],inputValue: "",};},
};
</script>
api文件中配置:
import request from '../utils/request'; // 导入axios实例/*** 调用boot端,进行/question/findAll查询* @returns {Promise}*/
function getQuestionList() { // 获取问题列表return request({url: '/question/findAll',method: 'get'});
}export default {getQuestionList, // 导出函数
} // 导出对象
除了findAll方法之外,还可以其他方法:
后端
注意axios支持get、post、put、delete等请求,所以可以直接按照swagger的请求规范做,还有一点要注意,需要配置后端可以接受并处理其他端口发出的各种请求,也就需要配置CorsConfig文件:
package com.zheng.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {// 添加映射路径registry.addMapping("/**")// .allowedOrigins("*") //.allowedOriginPatterns("*") //允许哪些域的请求,星号代表允许所有.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // 允许的方法.allowedHeaders("*") // 允许的头部设置.allowCredentials(true) // 是否发送cookie.maxAge(168000); // 预检间隔时间}}
除此之外,如果发送的是post、put请求,也就是要将传递的参数放到请求体中的,需要在获得形参之前加@RequestBody,才能将传递的参数和需要的参数一一对应。
package com.zheng.controller;import com.zheng.entity.Question;
import com.zheng.model.Result;
import com.zheng.service.QuestionService;
import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.tags.Tag;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.List;/*** Controller整合Swagger*/
@RestController
@RequestMapping("/question")
@Tag(name="question",description = "tb_question控制层") // swagger标签
public class QuestionController {@Autowiredprivate QuestionService questionService;@Operation(description = "question查询全部") // swagger 标签@GetMapping("/findAll")
// public List<Question> findAll() {
// return questionService.findAll();
// }public Result<List<Question>> findAll() {return Result.ok(questionService.findAll());}/*** findById?id=10* @param id* @return*/@Operation(description = "question根据主键查询") // swagger 标签@GetMapping("findById")
// public Question findById(@RequestParam("id") int id) {
// return questionService.findById(id);
// }public Result<Question> findById(@RequestParam("id") int id) {return Result.ok(questionService.findById(id));}@Operation(description = "根据专家名字查询")@GetMapping("/findByExpertName/{expertName}")public Result<List<Question>> findByExpertName(@PathVariable("expertName") String expertName) {return Result.ok(questionService.findByExpertName(expertName));}@PostMapping("/save")@Operation(description = "添加question")public Result<Integer> save(@RequestBody Question question) {return Result.ok(questionService.save(question));}@PutMapping("/update") // 修改只能用put请求,删除只能用delete请求@Operation(description = "修改question")public Result<Integer> update(Question question) {return Result.ok(questionService.update(question));}/*** /delete/10* @param id* @return*/@DeleteMapping("/delete/{qid}")@Operation(description = "按照编号删除question")public Result<Integer> delete(@PathVariable("qid") int id) {return Result.ok(questionService.delete(id));}
}
一个好习惯是将返回的数据封装成一个Result<T>类(这也相当于一个特殊的实体类)来处理,这样当面对不同的数据类型的时候才能正常处理:
package com.zheng.model;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class Result<T> {private Integer code; // 编码 ;200 404 500private String msg; // 消息内容private T data; // 真正的数据public Result(Integer code, T data) {this.code = code;this.data = data;}public Result(String msg, T data) {this.msg = msg;this.data = data;}public Result(T data){this.data = data;}public static<T> Result<T> ok(T data){return new Result(200,"success",data);}public static<T> Result<T> fail(Integer code){return new Result(500,"fail",null);}
}
前端
对于前端如何链接这么多方法呢:
如果是get、delete请求并将传递的参数直接拼接在路径中,而非键值对的形式,那么在前端也可以直接拼接在url中,不能使用参数params,否则404:
function findByExpertName(expertName) {return request({url:'/question/findByExpertName/' + expertName,method:'get'})
}
对于post请求可以直接这样传递参数(在控制层是直接接受一个对象的类型,所以传入的也是一个对象类型,直接使用data列出要传递的参数即可),对于get、delete请求参数必须params,而post、put请求必须data传递数据:
function addQuestion(data) { // 新增问题return request({url: '/question/save',method: 'post', // post 请求执行添加操作data: data // 发送数据})
}
最后,做的小项目:实现findById以及findByExpertName以及add方法
<template><div class="home"><img alt="Vue logo" src="../assets/logo.png" /><br /><el-button @click="search" type="primary">search</el-button><el-button @click="add()" type="primary">add</el-button><br /><br /><br /><el-input v-model="inputValue" placeholder="请输入id或专家姓名"></el-input><br /><br /><el-table :data="questionList" border style="width: 100%"><el-table-column fixed prop="id" label="编号" width="150"></el-table-column><el-table-column prop="expertName" label="专家姓名" width="120"></el-table-column><el-table-column prop="questioner" label="提问人" width="120"></el-table-column><el-table-column prop="phone" label="电话" width="120"> </el-table-column><el-table-column prop="plantName" label="农作物名称" width="300"></el-table-column><el-table-column prop="question" label="问题" width="120"></el-table-column><el-table-column prop="answer" label="回答" width="120"></el-table-column><el-table-column prop="status" label="状态" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table><!-- 添加的对话框--><el-dialog title="问题信息" :visible.sync="dialogFormVisible"><el-form :model="form" :rules="rules" ref="questionForm"><el-form-itemlabel="expertName":label-width="formLabelWidth"prop="expertName"><el-input v-model="form.expertName" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="questioner":label-width="formLabelWidth"prop="questioner"><el-input v-model="form.questioner" autocomplete="off"></el-input></el-form-item><el-form-item label="phone" :label-width="formLabelWidth" prop="phone"><el-input v-model="form.phone" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="plantName":label-width="formLabelWidth"prop="plantName"><el-input v-model="form.plantName" autocomplete="off"></el-input></el-form-item><el-form-item label="title" :label-width="formLabelWidth" prop="title"><el-input v-model="form.title" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="question":label-width="formLabelWidth"prop="question"><el-input v-model="form.question" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="answer":label-width="formLabelWidth"prop="answer"><el-input v-model="form.answer" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="status":label-width="formLabelWidth"prop="status"><el-input v-model="form.status" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="cancel">取 消</el-button><el-button type="primary" @click="save">保 存</el-button></div></el-dialog></div>
</template><script>
// @ is an alias to /src
import queApi from "@/api/question"; // 导入封装后的axios请求,具体见src/api/question.jsexport default {name: "HomeView",methods: {sendRequest() {queApi.getQuestionList().then((res) => {this.questionList = res.data.data;this.$store.state.myNewList = this.questionList;});},isNumber(value) {return /^\d+$/.test(value) && value !== '';},search() {if (this.inputValue == "") {this.sendRequest();} else {if (this.isNumber(this.inputValue)) {this.findById();} else {this.findByExpertName();}}// this.sendRequest();},findById() {queApi.findById(this.inputValue).then((res) => {this.question = res.data.data;if (this.question != null) {this.$set(this, "questionList", []); // 清空原有数据this.questionList.push(this.question);} else {alert("未查询到数据");}});},add() {this.dialogFormVisible = true;},cancel() {this.dialogFormVisible = false;this.form = {expertName: "",questioner: "",phone: "",plantName: "",title: "",question: "",answer: "",status: "",};},save() {// 验证表单this.$refs.questionForm.validate((validate) => {if (validate) {// 验证通过,可以提交数据// alert(this.form.expertName);queApi.addQuestion(this.form).then((res) => {if (res.data.code == 200) {alert("添加了" + res.data.data + "条数据");this.sendRequest();} else {alert(res.data.msg);}});this.dialogFormVisible = false;this.form = {expertName: "",questioner: "",phone: "",plantName: "",title: "",question: "",answer: "",status: "",};}});},findByExpertName() {queApi.findByExpertName(this.inputValue).then((res) => {if (res.data.data == null) {alert("未查询到数据");} else {this.questionList = res.data.data;}});},},data() {return {questionList: [],question: {},inputValue: "",dialogFormVisible: false, // 控制添加的对话框是否可见form: {expertName: "",questioner: "",phone: "",plantName: "",title: "",question: "",answer: "",status: "",},formLabelWidth: "100px",rules: {expertName: [{ required: true, message: "请输入专家姓名", trigger: "blur" },],questioner: [{ required: true, message: "请输入提问人", trigger: "blur" },],phone: [{ required: true, message: "请输入电话", trigger: "blur" },// {// pattern: /^1[34578]\d{9}$/,// message: "请输入正确的手机号",// trigger: "blur",// },],plantName: [{ required: true, message: "请输入农作物名称", trigger: "blur" },],title: [{ required: true, message: "请输入标题", trigger: "blur" }],question: [{ required: true, message: "请输入问题", trigger: "blur" }],answer: [{ required: true, message: "请输入回答", trigger: "blur" }],status: [{ required: true, message: "请输入状态", trigger: "blur" }],},};},
};
</script>
相关文章:
day05 Router、vuex、axios
配置 router和vuex需要在创建vue项目的时候,开始的时候选择Manually select features,于是就可以在下一个创建配置讯问中选择router和vuex。 axios则需要执行命令行: npm install axios -S 之后再在需要发送请求的view导入即可。 router…...
yolov5-7在opencv里跑自己的onnx模型
先把模型放在如下目录 运行如下代码 import cv2 import numpy as npclass Onnx_clf:def __init__(self, onnx:strdnn_model1/plane02.onnx, img_size640, classlist:list[plane]) -> None: func: 读取onnx模型,并进行目标识别para onnx:模型路径img_size:输出图片大小,和模…...
JVM 11 的优化指南:如何进行JVM调优,JVM调优参数有哪些
这篇文章将详细介绍如何进行JVM 11调优,包括JVM 11调优参数及其应用。此外,我将提供12个实用的代码示例,每个示例都会结合JVM启动参数和Java代码。 本文已收录于,我的技术网站 java-broke.site,有大厂完整面经&#x…...
nginx的配置和使用
一、nginx支持win和linux版本的下载,选择合适的版本进行安装 二、配置文件注解 重点的几个参数进行注释: 1、listen 要监听的服务的端口,符合这个端口的才会被监听 server_name要监听的服务地址,可能是ip,也可能是域名…...
mysql面试(六)
前言 本章节详细讲解了一下mysql执行计划相关的属性释义,以及不同sql所出现的不同效果 执行计划 一条查询语句经过mysql查询优化器的各种基于成本和各种规则优化之后,会生成一个所谓的 执行计划,这个执行计划展示了这条查询语句具体查询方…...
6.乳腺癌良性恶性预测(二分类、逻辑回归、PCA降维、SVD奇异值分解)
乳腺癌良性恶性预测 1. 特征工程1.1 特征筛选1.2 特征降维 PCA1.3 SVD奇异值分解 2. 代码2.1 逻辑回归、二分类问题2.2 特征降维 PCA2.3 SVD奇异值分解 1. 特征工程 专业上:30个人特征来自于临床一线专家,每个特征和都有医学内涵;数据上&…...
Vue3响应式高阶用法之markRaw()
Vue3响应式高阶用法之markRaw() 文章目录 Vue3响应式高阶用法之markRaw()一、简介二、使用场景2.1 避免性能开销2.2 防止意外修改 三、基本使用3.1 标记对象 四、功能详解4.1 markRaw与reactive的区别4.2 markRaw与ref的区别 五、最佳实践及案例5.1 使用大型第三方库对象5.2 静…...
免费SSL证书的安全性与获取指南
SSL证书是一种数字凭证,用于加密用户与网站之间的信息交换,以确保传输的数据不被第三方窃取。它像是一个数字版的密封印章,为数据的传输过程提供了一层保护膜。 免费的SSL证书通常由CA机构提供,它们同样可以提供基础数据的加密服…...
【CN】Argo 持续集成和交付(一)
1.简介 Argo 英 [ˈɑ:ɡəu] 美 [ˈɑrˌɡo] Kubernetes 原生工具,用于运行工作流程、管理集群以及正确执行 GitOps。 Argo 于 2020 年 3 月 26 日被 CNCF 接受为孵化成熟度级别,然后于 2022 年 12 月 6 日转移到毕业成熟度级别。 argoproj.github.i…...
Unity3D 自定义Debug双击溯源问题详解
前言 在Unity3D的开发过程中,经常需要处理各种交互和事件,其中双击事件是常见的需求之一。然而,由于Unity自带的双击检测机制并不完善,开发者往往需要自定义实现以满足特定需求。本文将详细介绍如何在Unity3D中自定义Debug双击溯…...
环境搭建-Docker搭建ClickHouse
Docker搭建ClickHouse 一、前言二、ClickHouse安装2.1 拉取镜像运行ClickHouse服务 三、测试安装3.1 进入clickhouse容器3.2 命令补充说明 四、测试连接五、设置CK的用户名密码 一、前言 本文使用的Docker使用Windows搭建,Linux版本的搭建方式一样。 Windows系统搭…...
深入理解CSS中的变量(概念篇)
CSS变量,也称为自定义属性,是一种在CSS中定义和重用值的方式。它们允许开发者在一个地方定义样式值,然后在整个样式表中引用这些值,从而提高代码的可维护性和可读性。 1、定义和使用CSS变量 CSS变量的定义和使用非常简单。变量名以两个连字符开头,变量值为任何有效的CSS…...
Prometheus 监控Tomcat等java应用的状态
5月应用服务出现问题,当别的小伙伴问我,有没有Tomcat等应用状态的监控的时候,我有点儿尴尬。所以赶紧抽空部署一下。 在配置之前,就当已经会安装jdk和tomcat了。 一、下载jmx_exporter #linux下 cd /usr/local/prometheus wget …...
c++中的斐波那契数列(Fibonacci Sequence)和背包问题(Knapsack Problem)
前言 hello,大家好啊,我是文宇,不是文字,是文宇哦。 斐波那契数列(Fibonacci Sequence) 斐波那契数列(Fibonacci Sequence)是一个经典的数学问题,其中每个数都是前两个…...
connect的非阻塞模式
本文参考:connect 函数在阻塞和非阻塞模式下的行为 一般情况下,在使用connect连接服务端时,需要等待一会儿才会函数才会返回,导致程序阻塞。为了降低阻塞的影响,我们可能会单独开个线程处理connect请求,例…...
jenkins面试题全集
1. 简述什么是Jenkins ? Jenkins是一个开源的持续集成的服务器,Jenkins开源帮助我们自动构建各类项目。 Jenkins强大的插件式,使得Jenkins可以集成很多软件,可以帮助我们持续集成我们的工程项目,对于我们测试来说&…...
Python中最好学和最实用的有哪些库和框架
Python拥有丰富的库和框架,这些库和框架覆盖了从数据处理、科学计算、Web开发到机器学习等多个领域。以下是一些值得学习的Python库和框架: 数据处理与科学计算 NumPy 描述:NumPy是Python中用于科学计算的一个库,它提供了一个强…...
文件解析的终极工具:Apache Tika
文件解析的终极工具:Apache Tika Apache Tika 简介 Apache Tika 是一个开源的、跨平台的库,用于检测、提取和解析各种类型文件的元数据。 它支持多种文件格式,包括文档、图片、音频和视频。 Tika是一个底层库,经常用于搜索引擎…...
Hadoop 重要监控指标
某安卓逆向课程打包下载(92节课) https://pan.quark.cn/s/53cec8b8055a 某PC逆向课程(100节课打包下载) https://pan.quark.cn/s/e38f2b24f36c Hadoop 是一个开源的分布式存储和计算框架,广泛应用…...
oracle 查询锁表
oracle 查询锁表 SELECT o.object_name, s.sid, s.serial#, p.spid, s.username, s.program FROM v l o c k e d o b j e c t l J O I N d b a o b j e c t s o O N l . o b j e c t i d o . o b j e c t i d J O I N v locked_object l JOIN dba_objects o ON l.object_id …...
进程概念(三)----- fork 初识
目录 前言1. pid && ppid2. forka. 为什么 fork 要给子进程返回 0, 给父进程返回子进程的 pid ?b. 一个函数是如何做到两次的?c. fork 函数在干什么?d. 一个变量怎么做到拥有不同的内容的?e. 拓展:…...
huawei 路由 RIP 协议中三种定时器的工作原理
RFC2453 定义的三种 RIP 协议定时器 更新定时器(Update Timer):用于触发更新报文的发送,超时时间为 30 秒。老化定时器(Age Timer):如果在老化时间内没有收到邻居发送的响应报文,则…...
HTML常见标签——超链接a标签
一、a标签简介 二、a标签属性 href属性 target属性 三、a标签的作用 利用a标签进行页面跳转 利用a标签返回页面顶部以及跳转页面指定区域 利用a标签实现文件下载 一、a标签简介 <a>标签用于做跳转、导航,是双标签,记作<a></a>&#…...
Python 爬虫入门(一):从零开始学爬虫 「详细介绍」
Python 爬虫入门(一):从零开始学爬虫 「详细介绍」 前言1.爬虫概念1.1 什么是爬虫?1.2 爬虫的工作原理 2. HTTP 简述2.1 什么是 HTTP?2.2 HTTP 请求2.3 HTTP 响应2.4 常见的 HTTP 方法 3. 网页的组成3.1 HTML3.2 CSS3.…...
Linux嵌入式学习——数据结构——概念和Seqlist
数据结构 相互之间存在一种或多种特定关系的数据元素的集合。 逻辑结构 集合,所有数据在同一个集合中,关系平等。 线性,数据和数据之间是一对一的关系。数组就是线性表的一种。 树, 一对多 图,多对多 …...
iOS ------ Block的相关问题
Block的定义 Block可以截获局部变量的匿名函数, 是将函数及其执行上下文封装起来的对象。 Block的实现 通过Clang将以下的OC代码转化为C代码 // Clang xcrun -sdk iphoneos clang -arch arm64 -rewrite-objc main.m//main.m #import <Foundation/Foundation.…...
conda issue
Conda 是一个跨平台、通用的二进制包管理器。它是 Anaconda 安装使用的包管理器,但它也可能用于其他系统。Conda 完全用 Python 编写,并且是 BSD 许可的开源。通用意味着大部分的包都可以用它进行管理,很像一个跨平台版本的apt或者yum&#x…...
为了解决地图引入鉴权失败的解决方案
在以下文件中需要添加相应代码 app/controller/CollageProduct.php app/view/designer_page/designer_editor.html app/view/designer_page/designer.html app/controller/Freight.php app\controller\Business.php app\controller\DesignerPage.php 只有这样才能保证htt…...
[ptrade交易实战] 第十八篇 期货查询类函数和期货设置类函数
前言 今天主要和大家分享的是期货查询类的函数和期货设置类的函数! 具体的开通渠道可以看文章末尾! 一、get_margin_rate—— 获取用户设置的保证金比例 保证金是期货交易中的一个重点,这个函数就是用来获取我们设置的保证金比例的&#…...
STM32智能家居控制系统教程
目录 引言环境准备智能家居控制系统基础代码实现:实现智能家居控制系统 4.1 数据采集模块 4.2 数据处理与分析模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景:家居监测与优化问题解决方案与优化收尾与总结 1. 引言 智能家居控制系统通…...
FPGA 中的 IOE与IO BANK
IO bank(输入/输出bank) 定义:IO bank 是 FPGA 中一组 IOE 的集合,通常共享相同的电源电压、时钟域和时序管理。每个 IO bank 包含多个 IOE,它们可以根据需要分配给不同的信号处理任务。作用:IO bank 的存…...
ADetailer模型+Stable Diffusion的inpainting功能是如何对遮罩区域进行修复生成的ADetailer
模型选则: face_yolov8n.pt 和 face_yolov8s.pt: 用途:用于人脸检测。特点:YOLOv8n 是轻量级版本,适合资源有限的设备;YOLOv8s 是标准版本,检测精度更高。 hand_yolov8n.pt: 用途&am…...
【博士每天一篇文献-综述】2024机器遗忘最新综述之一:An overview of machine unlearning
1 介绍 年份:2024 作者: 期刊: High-Confidence Computing(2区) 引用量:0 Li C, Jiang H, Chen J, et al. An overview of machine unlearning[J]. High-Confidence Computing, 2024: 100254 本文详细提供…...
【机器学习】Jupyter Notebook如何使用之基本步骤和进阶操作
引言 Jupyter Notebook 是一个交互式计算环境,它允许创建包含代码、文本和可视化内容的文档 文章目录 引言一、基本步骤1.1 启动 Jupyter Notebook1.2 使用 Jupyter Notebook 仪表板1.3 在笔记本中工作1.4 常用快捷键1.5 导出和分享笔记本 二、进阶用法2.1 组织笔…...
C++ | Leetcode C++题解之第279题完全平方数
题目: 题解: class Solution { public:// 判断是否为完全平方数bool isPerfectSquare(int x) {int y sqrt(x);return y * y x;}// 判断是否能表示为 4^k*(8m7)bool checkAnswer4(int x) {while (x % 4 0) {x / 4;}return x % 8 7;}int numSquares(i…...
Vue 3 响应式高阶用法之 `shallowRef()` 详解
Vue 3 响应式高阶用法之 shallowRef() 详解 文章目录 Vue 3 响应式高阶用法之 shallowRef() 详解简介一、使用场景1.1 深层嵌套对象的性能优化1.2 需要部分响应式的场景 二、基本使用2.1 引入 shallowRef2.2 定义 shallowRef 三、功能详解3.1 浅层响应式3.2 与 ref 的对比 四、…...
流量录制与回放:jvm-sandbox-repeater工具详解
在软件开发和测试过程中,流量录制与回放是一个非常重要的环节,它可以帮助开发者验证系统在特定条件下的行为是否符合预期。本文将详细介绍一款强大的流量录制回放工具——jvm-sandbox-repeater,以及如何利用它来提高软件测试的效率和质量。 …...
内网渗透—内网穿透工具NgrokFRPNPSSPP
前言 主要介绍一下常见的隧道搭建工具,以此来达到一个内网穿透的目的。简单说一下实验滴环境吧,kali作为攻击机,winserver2016作为目标靶机。 kali 192.168.145.171 winserver2016 10.236.44.127 显然它们处于两个不同的局域网,…...
嵌入式中传感器数据处理方法
大家好,在传感器使用中,我们常常需要对传感器数据进行各种整理,让应用获得更好的效果,以下介绍几种常用的简单处理方法: 加权平滑:平滑和均衡传感器数据,减小偶然数据突变的影响。 抽取突变:去除静态和缓慢变化的数据背景,强调瞬间变化。 简单移动平均线:保留数据流最…...
生成式 AI 的发展方向,是 Chat 还是 Agent?
据《福布斯》报道,商业的未来是自动化。他们报告说,自动化的应用是不可避免的,“工人们即将被一个圈子和一套规则包围,要严格遵守,不能偏离。得益于聊天机器人ChatGPT于2022年11月推出所带来的强劲加持,202…...
金字塔监督在人脸反欺骗中的应用
介绍 论文地址:https://arxiv.org/pdf/2011.12032.pdf 近年来,人脸识别技术越来越普及。在智能手机解锁和进出机场时,理所当然地会用到它。人脸识别也有望被用于管理今年奥运会的相关人员。但与此同时,人们对人脸欺骗的关注度也…...
vue3——两种利用自定义指令实现防止按钮重复点击的方法
方法一:利用定时器设置时间,下方代码设置时间为1秒 但是有个缺点:请求如果很慢,1秒钟还没有好,那么该方法就没用了 // 利用定时器:1秒之后才能再次点击app.directive(preventReClick, {mounted: (el, bind…...
Chrome谷歌浏览器Console(控制台)显示文件名及行数
有没有这样的困扰?Chrome谷歌浏览器console(控制台)不显示编译文件名及行数? 设置(Settings)- > 忽略列表(lgnore List)-> 自定义排除规则(Custom exclusion rules) 将自定义排除规则…...
Vue3+Element Plus 实现table表格中input的验证
实现效果 html部分 <template><div class"table"><el-form ref"tableFormRef" :model"form"><el-table :data"form.detailList"><el-table-column type"selection" width"55" align&…...
安宝特方案|解放双手,解决死角,AR带来质量监督新体验
AR质量监督 解放双手,解决死角 在当今制造业快速发展的背景下,质量监督成为确保产品高质量和完善的管理制度的关键环节。然而,传统的质量监督方式存在诸多挑战,如人工操作带来的效率低下、查岗不及时、摄像头死角等问题。 为了解…...
Django教程(005):基于ORM操作数据库的部门管理系统
文章目录 1、功能介绍2、新建项目3、创建app4、 表结构创建6、生成表7、静态文件管理8、部门管理8.1、部门列表8.2、添加部门8.3、删除部门8.4、编辑部门9、员工管理9.1、员工列表9.2、使用ModelForm添加员工9.3、编辑员工9.4、删除员工10、完整代码下载地址1、功能介绍 部门添…...
git等常用工具以及cmake
一、将git中的代码克隆进电脑以及常用工具介绍 1.安装git 首先需要安装git sudo apt install git 注意一定要加--recursive,因为文件中有很多“引用文件“,即第三方文件(库),加入该选项会将文件中包含的子模…...
Mybatis(四)特殊SQL的查询:模糊查询、批量删除、动态设置表明、添加功能获取自增的主键
实体类: 数据库: 1、模糊查询 方案一: 不适用#{ },’%?%‘ 问号是属于字符串的一部分 不会被解析成占位符,会被当作是我们字符串的一部分来解析,所以我们执行的语句中找不到占位符,但是我们却…...
JS原型与原型链
JS原型与原型链 JavaScript中一切引用类型都是对象,对象就是属性的集合。 Array类型、Function类型、Object类型、Date类型、RegExp类型等都是引用类型。 原型是什么 总计一句话就是(继承里的父亲,你可以使用你的原型里的函数)…...
Python编程学习第一篇——Python零基础快速入门(六)(4)异常处理
我们已经了解了Python的基本数据类型、变量和基本的逻辑控制语句,基于这些基础知识可以编写一些小程序了,但是在写程序的时候我们会发现,有时候程序并不是按我们预期的方向执行,有的直接报错,有的没有报错,…...