技术标签: 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>
文章浏览阅读565次。本文主要介绍如何使用C#通过OPC方式连接PLC,并提供了相应的程序和学习资料,以便读者学习和使用。OPC服务器是一种软件,可以将PLC的数据转换为标准的OPC格式,允许其他软件通过标准接口读取或控制PLC的数据。此外,本文还提供了一些学习资料,包括OPC和PLC的基础知识,C#编程语言的教程和实例代码。这些资料可以帮助读者更好地理解和应用本文介绍的程序。1.该程序是通讯方式是CSharp通过OPC方式连接PLC,用这种方式连PLC不用考虑什么种类PLC,只要OPC服务器里有的PLC都可以连。_c#opc通信
文章浏览阅读1.6w次,点赞3次,收藏10次。实践环境物理机:Windows10教育版,操作系统版本 17763.914虚拟机:Ubuntu18.04.3桌面版在Hyper-V中的刚安装好Ubuntu虚拟机之后,会发现鼠标滑动很不顺畅,也不能向虚拟机中拖拽文件或者复制内容。在VMware中,可以通过安装VMware tools来使物理机和虚拟机之间达到更好的交互。在Hyper-V中,也有这样的工具。这款工具可以完成更好的鼠标交互,我的..._win10 hyper-v ubuntu18.04 文件拷贝
文章浏览阅读156次。前言互联网时代,瞬息万变。一个小小的走错,就有可能落后于别人。我们没办法去预测任何行业、任何职业未来十年会怎么样,因为未来谁都不能确定。只能说只要有互联网存在,程序员依然是个高薪热门行业。只要跟随着时代的脚步,学习新的知识。程序员是不可能会消失的,或者说不可能会没钱赚的。我们经常可以听到很多人说,程序员是一个吃青春饭的行当。因为大多数人认为这是一个需要高强度脑力劳动的工种,而30岁、40岁,甚至50岁的程序员身体机能逐渐弱化,家庭琐事缠身,已经不能再进行这样高强度的工作了。那么,这样的说法是对的么?_类初始化一个静态属性 为线程池
文章浏览阅读1w次,点赞13次,收藏43次。说来也是惭愧,一直以来,在装环境的时候都会从官网下载Maven。然后再在idea里配置Maven。以为从官网下载的Maven是必须的步骤,直到今天才得知,idea有捆绑的 Maven 我们只需要搞一个配置文件就行了无需再官网下载Maven包以后再在新电脑装环境的时候,只需要下载idea ,网上找一个Maven的配置文件 放到 默认的 包下面就可以了!也省得每次创建项目都要重新配一次Maven了。如果不想每次新建项目都要重新配置Maven,一种方法就是使用默认的配置,另一种方法就是配置 .._安装idea后是不是不需要安装maven了?
文章浏览阅读45次。家是我们一生中最重要的地方,小时候,我们在这里哭、在这里笑、在这里学习走路,在这里有我们最真实的时光,用相机把它记下吧。 很多家庭在拍摄孩子时有一个看法,认为儿童摄影团购必须是在风景秀丽的户外,即便是室内那也是像大酒店一样...
文章浏览阅读429次。Dockerfile介绍Dockerfile是构建镜像的指令文件,由一组指令组成,文件中每条指令对应linux中一条命令,在执行构建Docker镜像时,将读取Dockerfile中的指令,根据指令来操作生成指定Docker镜像。Dockerfile结构:主要由基础镜像信息、维护者信息、镜像操作指令、容器启动时执行指令。每行支持一条指令,每条指令可以携带多个参数。注释可以使用#开头。指令说明FROM 镜像 : 指定新的镜像所基于的镜像MAINTAINER 名字 : 说明新镜像的维护(制作)人,留下_rocker/r-base镜像
文章浏览阅读223次。该系统将提供便捷的信息发布、物业报修、社区互动等功能,为小区居民提供更加便利、高效的服务。引言: 随着城市化进程的加速,小区管理成为一个日益重要的任务。因此,设计一个基于微信小程序的小区管理系统成为了一项具有挑战性和重要性的毕设课题。本文将介绍该小区管理系统的设计思路和功能,以期为小区提供更便捷、高效的管理手段。四、总结与展望: 通过本次毕设项目,我们实现了一个基于微信小程序的小区管理系统,为小区居民提供了更加便捷、高效的服务。通过该系统的设计与实现,能够提高小区管理水平,提供更好的居住环境和服务。_ssm基于微信小程序的公寓生活管理系统
文章浏览阅读635次。文章来源i春秋入坑Ubuntu半年多了记得一开始学的时候基本一星期重装三四次=-= 尴尬了 觉得自己差不多可以的时候 就吧Windows10干掉了 c盘装Ubuntu 专心学习. 这里主要来说一下使用Ubuntu的正确姿势Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的开源GNU/Linux操作系统,Ubuntu 是基于DebianGNU/Linux,支..._ubuntu安装攻击工具包
文章浏览阅读335次。需求:C++中将BYTE型数组传递给Java中,考虑到内存释放问题,未采用通过返回值进行数据传递。public class demoClass{public native boolean getData(byte[] tempData);}JNIEXPORT jboolean JNICALL Java_com_core_getData(JNIEnv *env, jobject thisObj, jbyteArray tempData){ //resultsize为s..._jni引用byte[]
文章浏览阅读2.1k次,点赞5次,收藏30次。本教程代码开源:GitHub 欢迎star文章目录一、平面模型分割1. 代码2. 说明3. 运行二、圆柱模型分割1. 代码2. 说明3. 运行三、欧几里得聚类提取1. 代码2. 说明3. 运行四、区域生长分割1. 代码2. 说明3. 运行五、基于最小切割的分割1. 代码2. 说明3. 运行六、使用 ProgressiveMorphologicalFilter 分割地面1. 代码2. 说明3. 运行一、平面模型分割在本教程中,我们将学习如何对一组点进行简单的平面分割,即找到支持平面模型的点云中的所有._pclpy.pcl.pointcloud.pointxyzi转为numpy
文章浏览阅读141次。一 其实在 skyeye 上移植 arm-linux 并非难事,网上也有不少资料, 只是大都遗漏细节, 以致细微之处卡壳,所以本文力求详实清析, 希望能对大家有点用处。本文旨在将 arm-linux 在 skyeye 上搭建起来,并在 arm-linux 上能成功 mount NFS 为目标, 最终我们能在 arm-linux 里运行我们自己的应用程序. 二 安装 Sky..._nfs启动 arm
文章浏览阅读598次,点赞2次,收藏5次。00为了形成一个体系,想将前面学过的一些东西都拉来放在一起总结总结,方便学习,方便记忆。攻防世界 Pwn 新手攻防世界 Pwn 进阶 第一页01 4-ReeHY-main-100超详细的wp1超详细的wp203 format2栈迁移的两种作用之一:栈溢出太小,进行栈迁移从而能够写入更多shellcode,进行更多操作。栈迁移一篇搞定有个陌生的函数。C 库函数 void *memcpy(void *str1, const void *str2, size_t n) 从存储区 str2 _pwn snprintf