vue+elementui（笔记）

vue+elementui

表格

 <div class="tableStyle">
            <el-table :data="pointsSettingsTableData" style="width: 70%" :stripe="true" size="mini"
              header-cell-class-name="headerClassName" :cell-style="{ 'text-align': 'center' }" :border="true"
              :fit="true">
              <el-table-column prop="id" label="ID">
              </el-table-column>
              <el-table-column prop="memberLevel" label="会员级别">
              </el-table-column>
              <el-table-column prop="projectName" label="项目名称">
              </el-table-column>
              <el-table-column prop="pointsRules" label="积分规则">
              </el-table-column>
              <el-table-column prop="integralNum" label="积分/次">
              </el-table-column>
              <el-table-column prop="amount" label="金额">
              </el-table-column>
              <el-table-column prop="integral" label="积分">
              </el-table-column>
              <el-table-column prop="multiplierOfPoints" label="积分倍数">
              </el-table-column>
              <el-table-column prop="是否累计" label="是否累计">
              </el-table-column>
              <el-table-column label="操作">
                <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-pagination background layout="prev, pager, next" :total="1000">
            </el-pagination>
          </div>

.tableStyle {
  padding: .125rem 0;
  display: flex;
  flex-direction: column;
  width: 80%;
}

.tableStyle .el-pagination {
  align-self: flex-start;
  margin: .125rem 0;
}

/*設置表头背景以及字体顏色*/
.headerClassName {
  font-weight: bold;
  color: black;
  background-color: rgb(226, 226, 226) !important;
  text-align: center !important;
}
.el-table__row--striped {
  background-color: rgb(242, 242, 242) !important;

}

划分线

 <el-divider content-position="left" class="poi_title">储值方式</el-divider>
      

.poi_title .el-divider__text.is-left {
  left: 0;
}

.poi_title .el-divider__text {
  font-weight: bold;
}

表单

  <el-form ref="form" :model="form" label-width="100px" style="width:50%" size="mini">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="储值方式：">
                <el-input v-model="form.name" placeholder="请输入储值方式："></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" size="mini"><i class="iconfont icon-tianjia1"></i>添加</el-button>
            </el-col>
          </el-row>
        </el-form>

dialog

<template>
    <div>
        <el-dialog :visible.sync="dialogVisible" :modal="true" :append-to-body="true" :close-on-click-modal="false">
            <el-tabs>
                <el-tab-pane label="赠送项目成本信息">
                    <el-form ref="form" :model="form" label-width="100px" size="mini">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="车辆品牌">
                                    <el-input v-model="initialMessage"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="车辆颜色">
                                    <el-input v-model="initialMessage"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="车辆系列">
                                    <el-input v-model="initialMessage"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="车辆型号">
                                    <el-input v-model="initialMessage"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="车辆产地">
                                    <el-input v-model="initialMessage"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="车辆用途">
                                    <el-input v-model="initialMessage"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <span slot="title" class="dialog-title">
                <span><i class="el-icon-warning"></i>会员审核</span>
            </span>
            <span slot="footer" class="dialog-footer">
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </div>
            </span>
        </el-dialog>
    </div>
</template>  
    
<script>
export default {
    props: {
        initialMessage: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            dialogVisible: false, // 控制弹出框的显示与隐藏  
            message: this.initialMessage // 初始化时接收父组件传递的参数  
        };
    },
    methods: {
        openDialog() {
            // 打开弹出框，并触发父组件的事件传递参数  
            this.dialogVisible = true;
            this.$emit('child-event', 'Hello from child');
        },
        closeDialog() {
            // 关闭弹出框  
            this.dialogVisible = false;
        }
    },
    watch: {
        initialMessage(newValue) {
            // 监听父组件传递的参数变化，并更新子组件的数据  
            this.message = newValue;
        }
    }
};
</script>
<style>
    /*以下是关于弹出框的样式*/

.dialog-footer {
  text-align: center;
}

/*dialog主体的宽*/
.el-dialog {
  width: 25vw !important;
  margin-top: 20vh !important;
  max-height: 85vh;
}

.dialog-title {
  width: 100%;
  font-size: .1875rem !important;
  color: white;
  font-weight: bold;

}

.el-dialog__header {
  padding-top: .125rem !important;
  background-image: linear-gradient(to right, rgb(254, 91, 75), rgb(249, 200, 38));
  border-radius: .125rem .125rem 0 0 !important;
}

/*改变dialog高度*/
.dialogContent {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.el-dialog {
  border-radius: .125rem !important;
}

.el-dialog__body {
  padding: .25rem;
}
</style>
  

<AddCarModal ref="addCarModal" :initial-message="addCarMessage" @child-event="handleChildEvent" />

<el-button type="primary" @click="openAddCarDialog"><i class="iconfont icon-tianjia1"></i>添加</el-button>

handleChildEvent(childMessage) {
      // 处理子组件传递的事件和参数
      console.log('Received message from child:', childMessage)
      // 可以在这里执行其他逻辑或更新父组件的数据
    },

 openAddCarDialog() {
      this.$refs.addCarModal.openDialog()
    },

给dialog添加样式

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

下拉框

<el-select placeholder="请选择" v-model="value" size="small">
      <el-option label="区域一" value="shanghai"></el-option>
       <el-option label="区域二" value="beijing"></el-option>
</el-select>

删除操作

上传图片

 <el-upload class="upload-demo" ref="upload" :data="form" :on-preview="handlePreview"
                                :auto-upload="false" :on-success="handleUploadSuccess">
                                <i class="el-icon-camera avatar-uploader-icon"></i>
                                <div slot="tip" class="el-upload__tip"> 图片上传 </div>
</el-upload>

/*上传图片样式*/
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: .875rem;
    height: .875rem;
    line-height: .875rem;
    text-align: center;
}

.el-upload {
    border: 1px solid rgb(203, 203, 203);
}

.el-upload__tip {
    width: .875rem;
    text-align: center;
}

input后面提示的小字

<span class="note">JSAPI支付授权目录: https://kangyishequ.kangyishequ.com/</span>

.note {
    font-size: 12px;
    color: rgb(124, 136, 169);
}

el-menu

<template>
   <el-menu :default-active="plat_defaultIndex" class="el-menu-demo" mode="horizontal" @select="plat_handleSelect">
                <el-menu-item index="plat_tag1">基础设置</el-menu-item>
                <el-menu-item index="plat_tag2">注册协议</el-menu-item>
                <el-menu-item index="plat_tag3">短信设置</el-menu-item>
                <el-menu-item index="plat_tag4">支付设置</el-menu-item>
            </el-menu>
 <div class="platformMain" v-if="plat_activeIndex === 'plat_tag3'">
            <el-divider content-position="left" class="plat_title">短信设置</el-divider>
            <el-form ref="form" :model="form" label-width="160px" style="width:30%" size="mini">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="短信状态：">
                            <el-radio v-model="radio" label="1">开启</el-radio>
                            <el-radio v-model="radio" label="0">关闭</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="短信接口：">
                            <el-select placeholder="请选择活动区域">
                                <el-option label="1位数" value="1"></el-option>
                                <el-option label="2位数" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="AccessKey ID">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="AccessKey Secret">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="短信签名">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="saveStyle">
                <el-button type="primary">保存</el-button>
            </div>
        </div>
</template>
<script>
export default {
    data() {
        return {
            plat_defaultIndex: 'plat_tag1',
            plat_activeIndex: 'plat_tag1',
        }
    },
    methods: {
        plat_handleSelect(key, keyPath) {
            this.plat_activeIndex = key
        }
    },
  
}
</script> 
<style>
    .platformMain {
    background-color: #fff;
    width: 100%;
    padding: .125rem .25rem;
    flex: 1;
    margin-top: .25rem;
}
</style>

emit

openDialog() {
            // 打开弹出框，并触发父组件的事件传递参数  
            this.dialogVisible = true;
            this.$emit('child-event', 'Hello from child');
        },

<OpenAddDepartmentDialog ref="addDepartMentModal" :initial-message="addDepartMentMessage"
            @child-event="handleChildEvent" />

handleChildEvent(childMessage) {
      // 处理子组件传递的事件和参数
      console.log('Received message from child:', childMessage)
      // 可以在这里执行其他逻辑或更新父组件的数据
    }

描述

消除两个相邻边框重合的边框

border-collapse: collapse;

切换栏

<template>
    <div class="adminSettingContainer">
        <div class="adminSettingNav">
            <el-menu :default-active="admin_defaultIndex" class="el-menu-demo" mode="horizontal"
                @select="admin_handleSelect">
                <el-menu-item index="admin_tag1">管理员配置</el-menu-item>
                <el-menu-item index="admin_tag2">角色配置</el-menu-item>
            </el-menu>
        </div>
        <div class="adminSettingMain" v-if="admin_activeIndex === 'admin_tag1'">
            <el-button type="primary" @click="openAddAdminDialog">添加管理员</el-button>
            <div class="tableStyle">
                <el-table :data="pointsSettingsTableData" style="width: 100%" :stripe="true" size="mini"
                    header-cell-class-name="headerClassName" :cell-style="{ 'text-align': 'center' }" :border="true"
                    :fit="true">
                    <el-table-column prop="id" label="编号">
                    </el-table-column>
                    <el-table-column prop="account" label="账号">
                    </el-table-column>
                    <el-table-column prop="type" label="所属类型">
                    </el-table-column>
                    <el-table-column prop="role" label="所属角色">
                    </el-table-column>
                    <el-table-column prop="stores" label="所属门店">
                    </el-table-column>
                    <el-table-column prop="affiliation" label="所属部门">
                    </el-table-column>
                    <el-table-column prop="materialDiscountRange" label="材料折扣区间">
                    </el-table-column>
                    <el-table-column prop="timeDiscountRange" label="工时折扣区间">
                    </el-table-column>
                    <el-table-column prop="founder" label="创始人">
                    </el-table-column>
                    <el-table-column prop="creationTime" label="创建时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <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-pagination background layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </div>
        <div class="adminSettingMain" v-if="admin_activeIndex === 'admin_tag2'">
            <el-button type="primary">添加角色</el-button>
            <div class="tableStyle">
                <el-table :data="pointsSettingsTableData" style="width: 50%" :stripe="true" size="mini"
                    header-cell-class-name="headerClassName" :cell-style="{ 'text-align': 'center' }" :border="true"
                    :fit="true">
                    <el-table-column prop="id" label="编号">
                    </el-table-column>
                    <el-table-column prop="permissionGroupName" label="权限组名称">
                    </el-table-column>
                    <el-table-column prop="founder" label="创始人">
                    </el-table-column>
                    <el-table-column prop="creationTime" label="创建时间">
                    </el-table-column>
                    <el-table-column prop="remark" label="备注">
                    </el-table-column>
                    <el-table-column label="操作">
                        <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-pagination background layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </div>
        <AddAdminModal ref="addAdminModal" :initial-message="addAdminMessage" @child-event="handleChildEvent" />
    </div>
</template>
<script>
import AddAdminModal from '../adminSettingModal/AddAdminModal.vue'
export default {
    data() {
        return {
            admin_defaultIndex: 'admin_tag1',
            admin_activeIndex: 'admin_tag1',
            addAdminMessage:''
        }
    },
    methods: {
        admin_handleSelect(key, keyPath) {
            this.admin_activeIndex = key
        },
        openAddAdminDialog(){
            this.$refs.addAdminModal.openDialog()
        }
    },
    components:{
        AddAdminModal
    }
}
</script>
<style>
.adminSettingContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.adminSettingMain {
    background-color: #fff;
    width: 100%;
    padding: .125rem .25rem;
    flex: 1;
    margin-top: .25rem;
}

.tableStyle {
    padding: .125rem 0;
    display: flex;
    flex-direction: column;
    width: 80%;
}

.tableStyle .el-pagination {
    align-self: flex-start;
    margin: .125rem 0;
}

/*設置表头背景以及字体顏色*/
.headerClassName {
    font-weight: bold;
    color: black;
    background-color: rgb(226, 226, 226) !important;
    text-align: center !important;
}

.el-table__row--striped {
    background-color: rgb(242, 242, 242) !important;

}
</style>

上传图片

<el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="商家LOGO：">
                            <el-upload class="upload-demo" ref="upload" :data="form" :on-preview="handlePreview"
                                :auto-upload="false" :on-success="handleUploadSuccess">
                                <i class="el-icon-camera avatar-uploader-icon"></i>
                                <div slot="tip" class="el-upload__tip"> 图片上传 </div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>

富文本框

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

//引入以及工具栏配置
import { quillEditor } from "vue-quill-editor";

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";


// 工具栏配置

const toolbarOptions = [
    ['bold', 'italic'], // 加粗 斜体 下划线 删除线
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
    [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ align: [] }], // 对齐方式
    ['clean'], // 清除文本格式
]

export default {
    components: {
        quillEditor
    },
    data() {
        return {
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions, //工具栏相关配置
                    },
                },
            }
        }
    },
}

使用

<el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item>
                            <quill-editor class="editor" v-model="content" ref="customQuillEditor" :options="editorOption">
                            </quill-editor>
                        </el-form-item>
                    </el-col>
                </el-row>

日期

  <el-descriptions-item label="生日截止:">
                        <el-date-picker type="date" placeholder="选择日期" :size="size" v-model="form.date1"
                            style="width: 100%;"></el-date-picker>
                    </el-descriptions-item>

iconfont

@font-face {
  font-family: "iconfont";
  /* Project id 4506265 */
  src:
  /* 文件下载到本地，且换成相对路径 */
    url('./iconfont/iconfont.woff2') format('woff2'),
    url('./iconfont/iconfont.woff') format('woff'),
    url('./iconfont/iconfont.ttf') format('truetype'),
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 用户 */
.icon-yonghu:before {
  content: "\e639";
}

/* 系统挂起 */
.icon-xitong:before {
  content: "\e618";
}


/* 密码修改 */
.icon-yuechi:before {
  content: "\e791";
}

/* 退出 */
.icon-tuichu:before {
  content: "\e62c";
}

表格背景颜色改变


::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: transparent;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
    background: blue;
}

tooltip文字超出换行显示

::v-deep .tooltipStyle {
    display: block;
    max-width: 180px;
    max-height: 200px;
    word-wrap: break-word;
    word-break: normal;
    white-space: normal;
}

滚动的表格

  <div class="rail_right">
                <div class="checkNum">
                    <div class="chart_title">实时检测数量</div>
                    <div class="table">
                        <el-table :header-cell-style="headerCellStyle">
                            <el-table-column prop="proName" label="项目" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="major" label="专业" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="bridge" label="隧道/桥梁" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="state" label="状态">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="chart_table">

                        <vueSeamless class="seamStyle" :data="tableData" :class-option="seamlessScrollOption">
                            <el-table :show-header="false" :data="tableData" stripe :row-class-name="onTableRowClassName">
                                <el-table-column prop="proName" label="项目" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="major" label="专业" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="bridge" label="隧道/桥梁" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="state" label="状态">
                                    <template slot-scope="scope">
                                        <span style="font-weight:bold;color: yellow;" v-if="scope.row.state == 1">待检测</span>
                                        <span style="font-weight:bold;color: red;"
                                            v-else-if="scope.row.state == 2">未达标</span>
                                        <span style="font-weight:bold;color: #00FF00;"
                                            v-else-if="scope.row.state == 3">合格</span>
                                        <span style="font-weight:bold;color: rgb(48, 48, 250);"
                                            v-else-if="scope.row.state == 5">已移交</span>
                                        <span style="font-weight:bold;color: grey;" v-else>空</span>

                                    </template>
                                </el-table-column>
                            </el-table>
                        </vueSeamless>
                    </div>
                </div>
                <div class="analysis">
                    <div class="chart_title">每日检测数量分析</div>
                    <div class="detection_chart">
                        <detectionAnalysis :opinionData="analysisData" ref="analysisChart" />
                    </div>
                </div>
            </div>

插件引入

import vueSeamless from 'vue-seamless-scroll'
  components: {  vueSeamless },
      
       computed: {
        seamlessScrollOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        }
    },

给父组件一个高度 子组件一个高度，且超出部分隐藏

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Llama3 在线试用与本地部署

Llama3 在线试用与本地部署

美国当地时间4月18日&#xff0c;Meta 开源了 Llama3 大模型&#xff0c;目前开源版本为 8B 和 70B 。Llama 3 模型相比 Llama 2 具有重大飞跃&#xff0c;并在 8B 和 70B 参数尺度上建立了 LLM 模型的新技术。由于预训练和后训练的改进&#xff0c;Llama3 模型是目前在 8B 和 …
阅读更多...
应急响应-webserver

应急响应-webserver

一.环境准备 1.镜像文件 2.任务说明 3.用户密码 二.应急响应 环境启动 1.导入镜像文件并修改网络 2.远程连接 ss -ntl #列出系统中运行的所有进程 用远程连接工具连接 任务一 Linux 服务日志默认存储在/var/log目录下 默认网站根目录&#xff1a;/var/www/html/ 1.查看…
阅读更多...
【Doris系列】 SQL 多方言兼容

【Doris系列】 SQL 多方言兼容

目前 Doris 引擎提供了两种方式实现对 sql 多方言的支持。即&#xff0c;提交指定方言的 sql&#xff0c;Doris 可以成功解析&#xff0c;并返回正确的计算结果。本文就简单来测试验证下这两种方式的效果。 一、Doris Sql Convertor Doris 官方提供了一个 sql convertor 工具…
阅读更多...
ES全文检索支持拼音和繁简检索

ES全文检索支持拼音和繁简检索

ES全文检索支持拼音和繁简检索 1. 实现目标2. 引入pinyin插件2.1 编译 elasticsearch-analysis-pinyin 插件2.2 安装拼音插件 3. 引入ik分词器插件3.1 已有作者编译后的包文件3.2 只有源代码的版本3.3 安装ik分词插件 4. 建立es索引5.测试检索6. 繁简转换 1. 实现目标 ES检索时…
阅读更多...
力扣33. 搜索旋转排序数组

力扣33. 搜索旋转排序数组

Problem: 33. 搜索旋转排序数组 文章目录 题目描述思路复杂度Code 题目描述 思路 1.初始化左右指针&#xff1a;首先&#xff0c;定义两个指针left和right&#xff0c;分别指向数组的开始和结束位置。 2.计算中间值&#xff1a;在left和right之间找到中间位置mid。 3.比较中间值…
阅读更多...
使用Python爬取淘宝商品并做数据分析

使用Python爬取淘宝商品并做数据分析

使用Python爬取淘宝商品并做数据分析&#xff0c;可以按照以下步骤进行操作&#xff1a; 确定需求&#xff1a;确定要爬取的淘宝商品的种类、数量、关键词等信息。 编写爬虫程序&#xff1a;使用Python编写爬虫程序&#xff0c;通过模拟浏览器请求&#xff0c;获取淘宝商品的页…
阅读更多...
ffmpeg音视频裁剪

ffmpeg音视频裁剪

音视频裁剪&#xff0c;通常会依据时间轴为基准&#xff0c;从某个起始点到终止点的音视频截取出来&#xff0c;当然音视频文件中存在多路流&#xff0c;所对每一组流进行裁剪 基础概念&#xff1a; 编码帧的分类&#xff1a; I帧(Intra coded frames): 关键帧&#xff0c;…
阅读更多...
SpringCloud学习笔记(一)微服务介绍、服务拆分和RestTemplate远程调用、Eureka注册中心

SpringCloud学习笔记(一)微服务介绍、服务拆分和RestTemplate远程调用、Eureka注册中心

文章目录 1 认识微服务1.1 单体架构1.2 分布式架构1.3 微服务1.4 SpringCloud1.5 总结 2 服务拆分与远程调用2.1 服务拆分原则2.2 服务拆分示例2.2.1 搭建项目2.2.2 创建数据库和表2.2.3 实现远程调用2.2.3.1 需求描述2.2.3.2 注册RestTemplate2.2.3.3 实现远程调用 2.2.4 提供…
阅读更多...
【网络】HTTP协议

【网络】HTTP协议

文章目录 一. 认识 URL1. URL 初识2. URL 的组成① 协议名称② 域名③ 端口号④ 文件路径⑤ 查询参数 3. URL中的字符3.1 合法字符3.2 保留字符3.3 其他字符3.4 URL中的字符总结 二. HTTP 协议1. HTTP 介绍2. 请求报文2.1 请求报文的格式2.2 请求方法介绍2.3 请求报文中常见的 …
阅读更多...
【LeetCode:1103. 分糖果 II + 模拟】

【LeetCode:1103. 分糖果 II + 模拟】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
CUDA架构介绍与设计模式解析

CUDA架构介绍与设计模式解析

文章目录 **CUDA**架构介绍与设计模式解析**1** CUDA 介绍CUDA发展历程CUDA主要特性CUDA系统架构CUDA应用场景编程语言支持CUDA计算过程线程层次存储层次 **2** CUDA 系统架构分层架构并行计算模式生产-消费者模式工作池模式异步编程模式 **3** CUDA 中的设计模式工厂模式策略模…
阅读更多...
电脑技巧：推荐一款非常好用的媒体播放器PotPlayer

电脑技巧：推荐一款非常好用的媒体播放器PotPlayer

目录 一、 软件简介 二、功能介绍 2.1 格式兼容性强 2.2 高清播放与硬件加速 2.3 自定义皮肤与界面布局 2.4 多音轨切换与音效增强 2.5 字幕支持与编辑 2.6 视频截图与录像 2.7 网络流媒体播放 三、软件特色 四、使用技巧 五、总结 一、 软件简介 PotPlayer播放器 …
阅读更多...
【MATLAB源码-第201期】基于matlab的黏菌群优化算法(SMA)无人机三维路径规划，输出做短路径图和适应度曲线

【MATLAB源码-第201期】基于matlab的黏菌群优化算法(SMA)无人机三维路径规划，输出做短路径图和适应度曲线

操作环境&#xff1a; MATLAB 2022a 1、算法描述 黏菌优化算法&#xff08;Slime Mould Algorithm, SMA&#xff09;是一种新颖的启发式优化方法&#xff0c;其灵感来源于自然界中的真菌——黏菌。这种算法模拟了黏菌在寻找食物时的行为和网络形成策略。在本文中&#xff0c…
阅读更多...
【Linux】yum、vim

【Linux】yum、vim

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/qinjh_/category_12625432.html 目录 Linux 软件包管理器 yum 什么是软件包 查看软件包 如何安装软件 如何卸载软…
阅读更多...
网络安全的重要性及人才需求

网络安全的重要性及人才需求

安全现在是大趋势&#xff0c;说是铁饭碗也不为过&#xff0c;就业前景好&#xff0c;方向多比传统计算机行业就业舒服点。但是大厂依然是985&#xff0c;211的天下&#xff0c;是双非能进大厂的&#xff0c;只是凤毛麟角。前提是你的能力可以让公司忽略你的学历。 以2023年为…
阅读更多...
【华为】VRRP的实验配置

【华为】VRRP的实验配置

【华为】VRRP的实验配置 实验需求拓扑LSW 3LSW 1基础配置VRRPDHCPOSPF默认路由 LSW 2基本配置VRRPDHCPOSPF默认路由 R1ISPPC1PC2 测试上网VRRP实验需求监视端口 配置文档 实验需求 ① 该公司有市场部和技术部&#xff0c;分别划在VLAN 10 和 VLAN 20里面 ② 此时为了网络的稳…
阅读更多...
万兆以太网MAC设计（12）万兆UDP协议栈上板与主机网卡通信

万兆以太网MAC设计（12）万兆UDP协议栈上板与主机网卡通信

文章目录 一、设置IP以及MAC二、上板效果2.1、板卡与主机数据回环测试2.2、板卡满带宽发送数据 一、设置IP以及MAC 顶层模块设置源MAC地址 module XC7Z100_Top#(parameter P_SRC_MAC 48h01_02_03_04_05_06,parameter P_DST_MAC 48hff_ff_ff_ff_ff_ff )(input …
阅读更多...
双目深度估计原理立体视觉

双目深度估计原理立体视觉

双目深度估计原理&立体视觉 0. 写在前面1. 双目估计的大致步骤2. 理想双目系统的深度估计公式推导3. 双目标定公式推导4. 极线校正理论推导 0. 写在前面 双目深度估计是通过两个相机的对同一个点的视差来得到给该点的深度。 标准系统的双目深度估计的公式推导需要满足:1)两…
阅读更多...
ASR语音转录Prompt优化

ASR语音转录Prompt优化

ASR语音转录Prompt优化 一、前言 在ASR转录的时候&#xff0c;我们能很明显的感受到有时候语音识别不是很准确&#xff0c;这过程中常见的文本错误主要可以归纳为以下几类&#xff1a; 同音错误&#xff08;Homophone Errors&#xff09; 同音错误发生在不同词语发音相似或相…
阅读更多...
Modelsim自动仿真平台的搭建

Modelsim自动仿真平台的搭建

Modelsim自动仿真平台的搭建 如果要搭建自动仿真平台脚本那就需要更改下面3个文件。run_simulation.bat、complie.do和wave.do文件。注&#xff1a;前提是安装了modulsim并且配置好了环境变量&#xff0c;这里不过多介绍。 一、下面是run_simulation.bat文件的内容 : 注释的…
阅读更多...
最新文章

Copyright @ 2022~2023