技术标签: wangeditor 音视频 富文本编辑器
wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用
一:项目需求:①角色为管理员可以新增编辑文章 + ②点击可以看文章详情 +③ 角色为管理员可以修改编辑文章
二:效果:
①角色为管理员可以新增编辑文章
步骤:
①下载安装相关依赖 npm i wangeditor --save
②引入
③初始化创建编辑器
代码中的initialEditor函数
④自定义上传附件按钮
主要思路:在编辑器上增加新的菜单按钮 --》实例化按钮 --》结合ant-vue中的上传文件的组件,点击上传附件的按钮点击上传附件
// 菜单 key ,各个菜单不能重复
const menuKey = 'alertMenuKey'
editor = new E('#editor')
// editor.txt.clear() //清空富文本的内容
editor.menus.extend(menuKey, AlertMenu)
editor.config.menus.push(menuKey)
// 菜单点击事件
clickHandler() {
// 做任何你想做的事情
document.getElementById("tiggerPick").click();
}
要点:①自定义上传图片和视频方法 ②如何判断Dom上编辑器是否被创建
具体代码:
Markup
<template>
<a-modal
title="新增知识库"
:width="900"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@cancel="handleCancel"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
label="标题"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
style="margin-left:-150px;"
>
<a-input placeholder="请输入标题" v-decorator="['title', {rules: [{required: true, message: '请输入标题!'}]}]" />
</a-form-item>
<a-form-item
label="来源"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
style="margin-left:-150px;"
>
<a-input placeholder="请输入来源" v-decorator="['source', {rules: [{required: true, message: '请输入来源!'}]}]" />
</a-form-item>
<a-form-item
label="摘要"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
style="margin-left:-150px;"
>
<a-textarea
placeholder="请输入摘要"
v-decorator="['summary', {rules: [{required: true, message: '请输入摘要!'}]}]"
:auto-size="{ minRows: 3}"
/>
</a-form-item>
<a-form-item
label="类型"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
style="margin-left:-150px;"
>
<a-select
style="width: 100%"
placeholder="请选择类型"
v-decorator="['type', {rules: [{ required: true, message: '请选择类型' }]}]">
<a-select-option v-for="(item,index) in typeData" :key="index" :value="item.code">{
{ item.name }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="封面"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
style="margin-left:-150px;"
>
<!-- <a-input placeholder="请输入封面" v-decorator="['coverimg']" /> -->
<div :key="imgKey">
<a-upload
list-type="picture-card"
:file-list="fileList"
@change="handleChange"
@preview="handlePreview"
:before-upload="beforeImg"
:customRequest="uploadMethod"
>
<div v-if="fileList.length < 1">
<a-icon type="plus" />
<div class="ant-upload-text">
上传封面
</div>
</div>
</a-upload>
</a-upload>
</div>
<a-modal :visible="previewVisible" :footer="null" @cancel="imghandleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
</a-form-item>
<a-form-item
label="内容"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
style="margin-left:-150px;"
>
<div id="editor" style="width:810px;"></div>
<div class="accessory" style="margin-left:-35px;position: relative;">
<span >附件: </span>
<a-upload
:file-list="refileList"
:before-upload="beforeUpload"
:customRequest="fileUpload"
:remove="handleRemove"
>
<a-button v-show="false" style="width: 220px;" id="tiggerPick"> <a-icon type="upload" /> 请选择文件资源 </a-button>
</a-upload>
</div>
</a-form-item>
<!-- <a-form-item
label="附件路径"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input placeholder="请输入附件路径" v-decorator="['filepath']" />
</a-form-item>
<a-form-item
label="排序"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input placeholder="请输入排序" v-decorator="['sort']" />
</a-form-item> -->
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import "@/components/bottomReset.less"
import "@/components/subfile.less"
import { knowledgeBaseAdd } from '@/api/modular/main/knowledgebase/knowledgeBaseManage'
import E from 'wangeditor'
const { BtnMenu } = E
// 自定义上传附件菜单
class AlertMenu extends BtnMenu {
constructor(editor) {
// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
const $elem = E.$(
`<div class="w-e-menu" data-title="上传附件">
<a-button style="width: 40px;height: 40px;">附件</a-button>
</div>`
)
super($elem, editor)
}
// 菜单点击事件
clickHandler() {
// 做任何你想做的事情
document.getElementById("tiggerPick").click();
}
// 菜单是否被激活(如果不需要,这个函数可以空着)
tryChangeActive() {
// 激活菜单
// 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
// 2. this.this.isActive === true
this.active()
}
}
/*封面上传图片预览 */
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
let editor;
export default {
data () {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
},
typeData: [],
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
/*封面上传参数 */
previewImage:'',//预览图片地址
previewVisible:false,//预览
fileList:[],
coverimg:'',//存放封面图片地址
/*附件上传参数 */
refileList:[],
/*富文本内容 */
content:'',
imgKey: '',
// 附件路径
filepath:'',
}
},
mounted(){
},
watch: {
visible() {
if (this.visible) {
this.imgKey = ''
} else {
this.imgKey = Math.random()
}
}
},
methods: {
// 初始化方法
add (record) {
this.visible = true
const typeOption = this.$options
this.typeData = typeOption.filters['dictData']('knowledge_type')
this.$nextTick(() =>{
if (editor==null){
this.initialEditor()
}else {
editor.destroy();//判断编辑器是否被创建,如果创建了就先销毁。
this.initialEditor()
}
})
},
/*富文本编辑器初始化 */
initialEditor(){
// 菜单 key ,各个菜单不能重复
const menuKey = 'alertMenuKey'
editor = new E('#editor')
// editor.txt.clear() //清空富文本的内容
editor.menus.extend(menuKey, AlertMenu)
editor.config.menus.push(menuKey)
editor.config.height = 300
const that = this;
// 图片
editor.config.customUploadImg = function (resultFiles, insertImgFn) {
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后,插入到编辑器的方法
console.log(resultFiles[0],'...');
const formData = new FormData();
formData.append('file', resultFiles[0]);
formData.append('type', 'image');
that.axios.post('/sysFileInfo/upload',formData)
.then(res => {
console.log(res);
if(res.success){
// 上传图片,返回结果,将图片插入到编辑器中
insertImgFn(res.data)
}
}).catch(err =>{
})
}
// 视频
editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
const formData = new FormData();
formData.append('file', resultFiles[0]);
formData.append('type', 'image');
console.log(formData);
that.axios.post('/sysFileInfo/upload',formData)
.then(res => {
if(res.success){
// 上传视频,返回结果,将图片插入到编辑器中
insertVideoFn(res.data)
}
}).catch(err =>{
})
}
editor.config.excludeMenus = ['link']
// 注意,先配置 height ,再执行 create()
editor.create()
},
/*
封面上传
*/
//控制图片预览显示
imghandleCancel() {
this.previewVisible = false;
},
// 在上传之前做出判断
beforeImg(file){
console.log('tupian',file);
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
this.$message.error('只能上传图片文件,请重新上传');
const index = this.fileList.indexOf(file);
const newFileList = this.fileList.slice();
newFileList.splice(index, 1);
this.fileList = newFileList;
return false
}
},
// 上传
uploadMethod(file){
let image = "image"
const formData = new FormData();
formData.append('file', file.file);
formData.append('type', image);
this.axios.post('/sysFileInfo/upload',formData)
.then(res => {
console.log(res);
if(res.success){
this.coverimg = res.data
file.onSuccess();
}
}).catch(err =>{
file.onError() //上传失败
})
},
// 预览
async handlePreview(file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
this.previewImage = file.url || file.preview;
this.previewVisible = true;
},
handleChange({ fileList }) {
this.fileList = fileList
},
/*附件上传*/
// 移除
handleRemove(file) {
const index = this.refileList.indexOf(file);
const newFileList = this.refileList.slice();
newFileList.splice(index, 1);
this.refileList = newFileList;
},
// 上传之前的限制
beforeUpload(file){
console.log('file',file);
if(this.refileList.length === 0){
this.refileList = [...this.refileList, file];
}else{
this.$message.error('仅支持上传一个文件');
}
},
//上传
fileUpload(){
const formData = new FormData();
if(this.refileList.length){
this.refileList.forEach(file => {
formData.append('file', file);
formData.append('type', 'image');
});
this.axios.post('/sysFileInfo/upload',formData)
.then(res => {
console.log(res);
if(res.success){
this.filepath = res.data
}
}).catch((err => {
this.$message.error('上传失败');
}))
}
},
/**
* 提交表单
*/
handleSubmit () {
const { form: { validateFields } } = this
this.confirmLoading = true
console.log('富文本内容',editor.txt.html());
this.content = editor.txt.html()
validateFields((errors, values) => {
if (!errors) {
for (const key in values) {
if (typeof (values[key]) === 'object') {
values[key] = JSON.stringify(values[key])
}
}
values.coverimg = this.coverimg
values.content = this.content
values.filepath = this.filepath
knowledgeBaseAdd(values).then((res) => {
if (res.success) {
this.$message.success('新增成功')
this.confirmLoading = false
this.$emit('ok', values)
this.handleCancel()
} else {
this.$message.error('新增失败')// + res.message
}
}).finally((res) => {
this.confirmLoading = false
})
} else {
this.confirmLoading = false
}
})
},
handleCancel () {
this.form.resetFields()
this.visible = false
this.refileList = []
this.fileList = []
}
}
}
</script>
<style lang="less" scoped>
.accessory-text{
position: absolute;
left: 0;
bottom: 0;
}
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.plus{
font-size: 100px;
color: #dfdfdf;
width: 20px;
height: 20px;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
</style>
②
具体代码:重点 v-html
Markup
<a-modal
title=""
:width="900"
:footer="null"
:visible="detailVisible"
:confirmLoading="confirmLoading"
@cancel="detailHandleCancel"
style="height: auto;"
>
<div class="content-box">
<h1>{
{headline}}</h1>
<div class="content-info">
<span>时间:{
{time}}</span>
<span>来源:{
{source}}</span>
<span>分类:{
{classify}}</span>
</div>
<div class="content" v-html="content"></div>
<div class="footer" v-show="accessory == '' ? false : true ">
<span>附件:<span class="sub" @click="fileDownLoad"><a-icon type="paper-clip" />{
{classify}}附件</span></span>
</div>
</div>
</a-modal>
③
具体代码:重点:初始化编辑器内容
editor.txt.html(this.content)
Markup
<template>
<a-modal
title="新增知识库"
:width="900"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@cancel="handleCancel"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item v-show="false">
<a-input v-decorator="['id']" />
</a-form-item>
<a-form-item
label="标题"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
style="margin-left:-150px;"
>
<a-input placeholder="请输入标题" v-decorator="['title', {rules: [{required: true, message: '请输入标题!'}]}]" />
</a-form-item>
<a-form-item
label="来源"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
style="margin-left:-150px;"
>
<a-input placeholder="请输入来源" v-decorator="['source', {rules: [{required: true, message: '请输入来源!'}]}]" />
</a-form-item>
<a-form-item
label="摘要"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
style="margin-left:-150px;"
>
<a-textarea
placeholder="请输入摘要"
v-decorator="['summary', {rules: [{required: true, message: '请输入摘要!'}]}]"
:auto-size="{ minRows: 3}"
/>
</a-form-item>
<a-form-item
label="类型"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
style="margin-left:-150px;"
>
<a-select
style="width: 100%"
placeholder="请选择类型"
v-decorator="['type', {rules: [{ required: true, message: '请选择类型' }]}]">
<a-select-option v-for="(item,index) in typeData" :key="index" :value="item.code">{
{ item.name }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="封面"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
style="margin-left:-150px;"
>
<!-- <a-input placeholder="请输入封面" v-decorator="['coverimg']" /> -->
<div :key="imgKey">
<a-upload
list-type="picture-card"
:file-list="fileList"
@change="handleChange"
@preview="handlePreview"
:before-upload="beforeImg"
:customRequest="uploadMethod"
>
<div v-if="fileList.length < 1">
<a-icon type="plus" />
<div class="ant-upload-text">
上传封面
</div>
</div>
</a-upload>
</a-upload>
</div>
<a-modal :visible="previewVisible" :footer="null" @cancel="imghandleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
</a-form-item>
<a-form-item
label="内容"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
style="margin-left:-150px;"
>
<div id="editor" style="width:810px;"></div>
<div class="accessory" style="margin-left:-35px;position: relative;">
<span >附件: </span>
<a-upload
:file-list="refileList"
:before-upload="beforeUpload"
:customRequest="fileUpload"
:remove="handleRemove"
>
<a-button v-show="false" style="width: 220px;" id="tiggerPick"> <a-icon type="upload" /> 请选择文件资源 </a-button>
</a-upload>
</div>
</a-form-item>
<!-- <a-form-item
label="附件路径"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input placeholder="请输入附件路径" v-decorator="['filepath']" />
</a-form-item>
<a-form-item
label="排序"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input placeholder="请输入排序" v-decorator="['sort']" />
</a-form-item> -->
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import "@/components/bottomReset.less"
import "@/components/subfile.less"
import { knowledgeBaseEdit } from '@/api/modular/main/knowledgebase/knowledgeBaseManage'
import E from 'wangeditor'
const { BtnMenu } = E
class AlertMenu extends BtnMenu {
constructor(editor) {
// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
const $elem = E.$(
`<div class="w-e-menu" data-title="上传附件">
<a-button style="width: 40px;height: 40px;">附件</a-button>
</div>`
)
super($elem, editor)
}
// 菜单点击事件
clickHandler() {
// 做任何你想做的事情
document.getElementById("tiggerPick").click();
}
// 菜单是否被激活(如果不需要,这个函数可以空着)
tryChangeActive() {
// 激活菜单
// 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
// 2. this.this.isActive === true
this.active()
}
}
/*封面上传图片预览 */
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
let editor;
export default {
data () {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
},
typeData: [],
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
/*封面上传参数 */
previewImage:'',//预览图片地址
previewVisible:false,//预览
fileList:[],
coverimg:'',//存放封面图片地址
/*附件上传参数 */
refileList:[],
/*富文本内容 */
content:'',
imgKey: '',
// 附件路径
filepath:'',
}
},
mounted(){
},
watch: {
visible() {
if (this.visible) {
this.imgKey = ''
} else {
this.imgKey = Math.random()
}
}
},
methods: {
// 初始化方法
edit (record) {
console.log(record);
this.visible = true
const typeOption = this.$options
this.typeData = typeOption.filters['dictData']('knowledge_type')
if(record.type == 1){
record.type = '危化百科'
}else if(record.type == 2){
record.type = '安全流程'
}else if(record.type == 3){
record.type = '企业安全制度管理模板'
}
setTimeout(() => {
this.form.setFieldsValue(
{
id: record.id,
title: record.title,
source: record.source,
summary: record.summary,
type: record.type,
coverimg: record.coverimg,
content: record.content,
filepath: record.filepath,
sort: record.sort
}
)
}, 100)
this.fileList.push(
{
uid: '-1',
name: 'image.png',
status: 'done',
url: record.coverimg
}
)
this.coverimg = record.coverimg
this.content = record.content
this.filepath = record.filepath
this.refileList.push(
{
uid: '-1',
name: 'file.doc',
status: 'done',
url: record.filepath
}
)
this.$nextTick(() =>{
if (editor==null){
this.initialEditor()
}else {
editor.destroy();//判断编辑器是否被创建,如果创建了就先销毁。
this.initialEditor()
}
})
},
/*富文本编辑器初始化 */
initialEditor(){
// 菜单 key ,各个菜单不能重复
const menuKey = 'alertMenuKey'
editor = new E('#editor')
// editor.txt.clear() //清空富文本的内容
editor.menus.extend(menuKey, AlertMenu)
editor.config.menus.push(menuKey)
editor.config.height = 300
const that = this;
// 图片
editor.config.customUploadImg = function (resultFiles, insertImgFn) {
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后,插入到编辑器的方法
console.log(resultFiles[0],'...');
const formData = new FormData();
formData.append('file', resultFiles[0]);
formData.append('type', 'image');
that.axios.post('/sysFileInfo/upload',formData)
.then(res => {
console.log(res);
if(res.success){
// 上传图片,返回结果,将图片插入到编辑器中
insertImgFn(res.data)
}
}).catch(err =>{
})
}
// 视频
editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
const formData = new FormData();
formData.append('file', resultFiles[0]);
formData.append('type', 'image');
console.log(formData);
that.axios.post('/sysFileInfo/upload',formData)
.then(res => {
if(res.success){
// 上传视频,返回结果,将图片插入到编辑器中
insertVideoFn(res.data)
}
}).catch(err =>{
})
}
editor.config.excludeMenus = ['link']
// 注意,先配置 height ,再执行 create()
editor.create()
editor.txt.html(this.content) // 初始化编辑器内容
},
/*
封面上传
*/
//控制图片预览显示
imghandleCancel() {
this.previewVisible = false;
},
// 在上传之前做出判断
beforeImg(file){
console.log('tupian',file);
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
this.$message.error('只能上传图片文件,请重新上传');
const index = this.fileList.indexOf(file);
const newFileList = this.fileList.slice();
newFileList.splice(index, 1);
this.fileList = newFileList;
return false
}
},
// 上传
uploadMethod(file){
let image = "image"
const formData = new FormData();
formData.append('file', file.file);
formData.append('type', image);
this.axios.post('/sysFileInfo/upload',formData)
.then(res => {
console.log(res);
if(res.success){
this.coverimg = res.data
file.onSuccess();
}
}).catch(err =>{
file.onError() //上传失败
})
},
// 预览
async handlePreview(file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
this.previewImage = file.url || file.preview;
this.previewVisible = true;
},
handleChange({ fileList }) {
this.fileList = fileList
},
/*附件上传*/
// 移除
handleRemove(file) {
const index = this.refileList.indexOf(file);
const newFileList = this.refileList.slice();
newFileList.splice(index, 1);
this.refileList = newFileList;
},
// 上传之前的限制
beforeUpload(file){
console.log('file',file);
if(this.refileList.length === 0){
this.refileList = [...this.refileList, file];
}else{
this.$message.error('仅支持上传一个文件');
}
},
//上传
fileUpload(){
const formData = new FormData();
if(this.refileList.length){
this.refileList.forEach(file => {
formData.append('file', file);
formData.append('type', 'image');
});
this.axios.post('/sysFileInfo/upload',formData)
.then(res => {
console.log(res);
if(res.success){
this.filepath = res.data
}
}).catch((err => {
this.$message.error('上传失败');
}))
}
},
/**
* 提交表单
*/
handleSubmit () {
const { form: { validateFields } } = this
this.confirmLoading = true
console.log('富文本内容',editor.txt.html());
this.content = editor.txt.html()
validateFields((errors, values) => {
if (!errors) {
for (const key in values) {
if (typeof (values[key]) === 'object') {
values[key] = JSON.stringify(values[key])
}
}
values.coverimg = this.coverimg
values.content = this.content
values.filepath = this.filepath
if(values.type == '危化百科'){
values.type = 1
}else if(values.type == '安全流程'){
values.type = 2
}else if(values.type == '企业安全制度管理模板'){
values.type = 3
}
delete values.createtime
knowledgeBaseEdit(values).then((res) => {
if (res.success) {
this.$message.success('新增成功')
this.confirmLoading = false
this.$emit('ok', values)
this.handleCancel()
} else {
this.$message.error('新增失败')// + res.message
}
}).finally((res) => {
this.confirmLoading = false
})
} else {
this.confirmLoading = false
}
})
},
handleCancel () {
this.form.resetFields()
this.visible = false
this.refileList = []
this.fileList = []
}
}
}
</script>
<style lang="less" scoped>
.accessory-text{
position: absolute;
left: 0;
bottom: 0;
}
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.plus{
font-size: 100px;
color: #dfdfdf;
width: 20px;
height: 20px;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
</style>
文章浏览阅读1.6k次,点赞5次,收藏20次。【有害垃圾】:电池(1 号、2 号、5 号)、过期药品或内包装等;【可回收垃圾】:易拉罐、小号矿泉水瓶;【厨余垃圾】:小土豆、切过的白萝卜、胡萝卜,尺寸为电池大小;【其他垃圾】:瓷片、鹅卵石(小土豆大小)、砖块等。文件结构|----classes.txt # 标签种类|----data-txt\ # 数据集文件集合|----images\ # 数据集图片|----labels\ # yolo标签。_垃圾回收数据集
文章浏览阅读272次。之前写到 通过封装的API 已经可以做到使用redis进行缓存天气信息但是这一操作每次都由客户使用时才进行更新 不友好 所以应该自己实现半小时的定时存入redis 使用quartz框架 首先添加依赖build.gradle中// Quartz compile('org.springframework.boot:spring-boot-starter-quartz'..._cityid=101280803
文章浏览阅读1.8k次,点赞2次,收藏8次。对于使用触发事件来反应的按钮传递参数如下:可以通过lambda对function的参数传递:t.Bind(wx.EVT_BUTTON, lambda x, textctrl=t: self.input_fun(event=x, textctrl=textctrl))前提需要self.input_fun(self,event,t):传入参数而同时两个Frame之间的参数传..._wxpython frame.bind
文章浏览阅读1.9k次。最近接到一个任务要开发消消乐小游戏,当然首先就想到乐cocosCreator来作为开发工具。开发本身倒没有多少难点。消消乐的开发官网发行的书上有专门讲到。下面主要总结一下开发中遇到的问题以及解决方法屏幕适配由于设计尺寸是750*1336,如果适应高度,则在iphonX下,内容会超出屏幕宽度。按宽适应,iphon4下内容会超出屏幕高度。所以就需要根据屏幕比例来动态设置适配策略。 onLoad..._750*1336
文章浏览阅读745次,点赞21次,收藏21次。web项目的框架,通常更简单的数据源。21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的管理,使信息存储达到准确、快速、完善,并能提高工作管理效率,促进其发展。论文主要是对银行贷款管理系统进行了介绍,包括研究的现状,还有涉及的开发背景,然后还对系统的设计目标进行了论述,还有系统的需求,以及整个的设计方案,对系统的设计以及实现,也都论述的比较细致,最后对银行贷款管理系统进行了一些具体测试。_vue3重构信贷管理系统
文章浏览阅读774次。题目描述原题目戳这里小明过生日的时候,爸爸送给他一副乌龟棋当作礼物。乌龟棋的棋盘是一行 NNN 个格子,每个格子上一个分数(非负整数)。棋盘第 111 格是唯一的起点,第 NNN 格是终点,游戏要求玩家控制一个乌龟棋子从起点出发走到终点。乌龟棋中 MMM 张爬行卡片,分成 444 种不同的类型( MMM 张卡片中不一定包含所有 444 种类型的卡片,见样例),每种类型的卡片上分别标有 1,2,3,41, 2, 3, 41,2,3,4 四个数字之一,表示使用这种卡片后,乌龟棋子将向前爬行相应的格子数
文章浏览阅读1.5k次。吐槽内存泄露 ? 内存暴涨 ? OOM ?首先提一下我自己曾经历过多次内存泄露,到底有几次? 我自己心里悲伤的回想了下,造成线上影响的内存泄露事件有将近5次了,没上线就查出内存暴涨次数可能更多。这次不是最惨,相信也不会是最后的内存的泄露。有人说,内存泄露对于程序员来说,是个好事,也是个坏事。 怎么说? 好事在于,技术又有所长进,经验有所心得…. 毕竟不是所有程序员都写过OOM的服务…. 坏事..._python内存泄露
文章浏览阅读747次。1.sensor typeTYPE_ACCELEROMETER=1 TYPE_MAGNETIC_FIELD=2 (what's value mean at x and z axis)TYPE_ORIENTATION=3TYPE_GYROSCOPE=4 TYPE_LIGHT=5(in )TYPE_PRESSURE=6TYPE_TEMPERATURE=7TYPE_PRO_draft sensor
文章浏览阅读581次。/* * Copyright (c) 2009 湖南师范大学数计院 一心飞翔项目组 * All Right Reserved * * 文件名:matrix.cpp 定义Point、Node、Matrix类的各个方法 * 摘 要:定义矩阵类,包括矩阵的相关信息和方法 * * 作 者:刘 庆 * 修改日期:2009年7月19日21:15:12 **/
文章浏览阅读1.7w次,点赞6次,收藏20次。HTML不再推荐页面中使用框架集,因此HTML5删除了<frameset>、<frame>和<noframes>这三个元素。不过HTML5还保留了<iframe>元素,该元素可以在普通的HTML页面中使用,生成一个行内框架,可以直接放在HTML页面的任意位置。除了指定id、class和style之外,还可以指定如下属性:src 指定一个UR..._iframe allow-top-navigation
文章浏览阅读785次,点赞29次,收藏12次。Zipkin 是 Twitter 的一个开源项目,它基于 Google Dapper 实现,它致力于收集服务的定时数据,以解决微服务架构中的延迟问题,包括数据的收集、存储、查找和展现。我们可以使用它来收集各个服务器上请求链路的跟踪数据,并通过它提供的 REST API 接口来辅助我们查询跟踪数据以实现对分布式系统的监控程序,从而及时地发现系统中出现的延迟升高问题并找出系统性能瓶颈的根源。除了面向开发的 API 接口之外,它也提供了方便的 UI 组件来帮助我们直观的搜索跟踪信息和分析请求链路明细,
文章浏览阅读358次。“随着天网工程的建设,中国已经建成世界上规模最大的视频监控网,摄像头总 数超过2000万个,成为世界上最安全的国家。视频图像及配套数据已经应用在反恐维稳、治安防控、侦查破案、交通行政管理、服务民生等各行业各领域。烁博科技视频安全核心能力:精准智能数据采集能力:在建设之初即以应用需求为导向,开展点位选择、设备选型等布建工作,实现前端采集设备的精细化部署。随需而动的AI数据挖掘能力:让AI所需要的算力、算法、数据、服务都在应用需求的牵引下实现合理的调度,实现解析能力的最大化。完善的数据治理能力:面_2018年8月由于某知名视频监控厂商多款摄像机存在安全漏洞