＊且听风吟

vue-quill-editor 富文本编辑器上传视频

插入视频
- 设置工具栏中文标题
修改视频 `` 标签为 `<video>`</li> <li> <ul> <li>设置`video` 标签自定义属性</li> </ul> </li> </ul> </div> <h1>插入视频</h1> 富文本编辑器中插入视频思路：劫持原来的视频上传事件，然后，自定义上传组件将视频上传到服务器，服务器返回一个视频链接，再插入到富文本编辑器中。 封装富文本编辑器组件 <code>quill.vue</code>： <pre><code class="prism language-javascript"> <template> <div class="rich-text-editor-container" v-loading="loading"> <quill-editor :content="content" :options="editorOptions" class="ql-editor" ref="myQuillEditor" @change="onEditorChange($event)"> </quill-editor>  <div> <el-dialog :close-on-click-modal="false" width="50%" style="margin-top: 1px" title="视频上传" :visible.sync="videoForm.show" append-to-body> <el-tabs v-model="videoForm.activeName"> <el-tab-pane label="添加视频链接" name="first"> <el-input v-model="videoForm.videoLink" placeholder="请输入视频链接" clearable></el-input> <el-button type="primary" size="small" style="margin: 20px 0px 0px 0px " @click="insertVideoLink(videoForm.videoLink)">确认 </el-button> </el-tab-pane> <el-tab-pane label="本地视频上传" name="second"> <el-upload v-loading="loading" style="text-align: center;" drag :action="uploadVideoConfig.uploadUrl" accept="video/*" :name="uploadVideoConfig.name" :before-upload="onBeforeUploadVideo" :on-success="onSuccessVideo" :on-error="onErrorVideo" :multiple="false"> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">只能上传MP4文件，且不超过{{uploadVideoConfig.maxSize}}M</div> </el-upload> </el-tab-pane> </el-tabs> </el-dialog> </div> </div> </template> <script> // require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from 'vue-quill-editor' // 工具栏 const toolbarOptions = [ ["bold", "italic", "underline", "strike"], // 加粗斜体下划线删除线 ["blockquote", "code-block"], // 引用代码块 [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表 [{ indent: "-1" }, { indent: "+1" }], // 缩进 [{ size: ["small", false, "large", "huge"] }], // 字体大小 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 [{ align: [] }], // 对齐方式 ["clean"], // 清除文本格式 ['video'] // 视频 ] export default { name: 'RichTextEditor', components: { quillEditor }, props: { /* 编辑器的内容 */ content: { // 返回的html片段 type: String, default: '' }, // 视频上传配置 uploadVideoConfig: { type: Object, default () { return { uploadUrl: '', // 上传地址 maxSize: 10, // 图片上传大小限制，默认不超过2M name: 'Filedata' // 图片上传字段 } } } }, data () { let _self = this; return { loading: false, // 加载loading editorOptions: { placeholder: '', theme: 'snow', // or 'bubble' modules: { toolbar: { container: toolbarOptions, // 工具栏 handlers: { 'video': () => { // 覆盖默认的上传视频，点击视频图标，显示弹窗 _self.videoForm.show = true } } } } }, // 视频上传变量 videoForm: { show: false, // 显示插入视频链接弹框的标识 videoLink: '', activeName: 'first' } } }, mounted () { }, methods: { // 文本编辑 onEditorChange ({ quill, html, text }) { console.log('editor changed:', quill, html, text) console.log('html.replace(/<[^>]*>|/g:', html.replace(/<[^>]*>|/g)) this.$emit('update:content', html) this.$emit('change', html) }, hideLoading () { this.loading = false }, /** --------- 视频上传相关 start --------- */ insertVideoLink (videoLink) { if (!videoLink) return this.$message.error('视频地址不能为空！') this.videoForm.show = false let quill = this.$refs['myQuillEditor'].quill // 获取富文本 let range = quill.getSelection() // 获取光标位置：当编辑器中没有输入文本时，这里获取到的 range 为 null let index = range ? range.index : 0 // 在光标所在位置插入视频 quill.insertEmbed(index, 'video', videoLink) // 调整光标到最后 quill.setSelection(index + 1) }, // el-文件上传组件 onBeforeUploadVideo (file) { this.loading = true let acceptArr = ['video/mp4'] const isVideo = acceptArr.includes(file.type) const isLt1M = file.size / 1024 / 1024 < this.uploadVideoConfig.maxSize if (!isVideo) { this.hideLoading() this.$message.error('只能上传mp4格式文件!') } if (!isLt1M) { this.hideLoading() this.$message.error(`上传文件大小不能超过 ${this.uploadVideoConfig.maxSize}MB!`) } return isLt1M && isVideo }, // 文件上传成功时的钩子 onSuccessVideo (res) { this.hideLoading() if (res.code === '100') { this.insertVideoLink(res.url) } else { this.$message.error(res.desc) } }, // 文件上传失败时的钩子 onErrorVideo () { this.hideLoading() this.$message.error('上传失败') }, /**--------- 视频上传相关 end --------- */ } } </script> <style lang='less'> .rich-text-editor-container .ql-container { height: 300px; } .rich-text-editor-container .ql-editor { padding: 0; } .rich-text-editor-container .ql-tooltip { left: 5px !important; } </style> </code></pre> 页面使用封装的富文本编辑器组件，新建 <code>add.vue</code>： <pre><code class="prism language-javascript"><template> <div> <editor :content="content" v-model="content" :height="480" /> </div> </template> <script> import Editor from "./quill"; export default { components: { Editor }, data() { return { content: "" }; } }; </script> </code></pre> <h2>设置工具栏中文标题</h2> 新建 <code>quill-title.js</code>： <pre><code class="prism language-javascript">// 给工具栏设置title const titleConfig = { 'ql-bold': '加粗', 'ql-font': '字体', 'ql-code': '插入代码', 'ql-italic': '斜体', 'ql-link': '添加链接', 'ql-color': '字体颜色', 'ql-background': '背景颜色', 'ql-size': '字体大小', 'ql-strike': '删除线', 'ql-script': '上标/下标', 'ql-underline': '下划线', 'ql-blockquote': '引用', 'ql-header': '标题', 'ql-indent': '缩进', 'ql-list': '列表', 'ql-align': '文本对齐', 'ql-direction': '文本方向', 'ql-code-block': '代码块', 'ql-formula': '公式', 'ql-image': '图片', 'ql-video': '视频', 'ql-clean': '清除字体样式' } export function setQuillTitle () { const oToolBar = document.querySelector('.ql-toolbar') const aButton = oToolBar.querySelectorAll('button') const aSelect = oToolBar.querySelectorAll('select') aButton.forEach(function (item) { if (item.className === 'ql-script') { item.value === 'sub' ? item.title = '下标' : item.title = '上标' } else if (item.className === 'ql-indent') { item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进' } else { item.title = titleConfig[item.className] } }) // 字体颜色和字体背景特殊处理，两个在相同的盒子 aSelect.forEach(function (item) { if (item.className.indexOf('ql-background') > -1) { item.previousSibling.title = titleConfig['ql-background'] } else if (item.className.indexOf('ql-color') > -1) { item.previousSibling.title = titleConfig['ql-color'] } else { item.parentNode.title = titleConfig[item.className] } }) } </code></pre> 修改 <code>quill.vue</code> 文件： <pre><code class="prism language-javascript">// 设置title import { setQuillTitle } from './quill-title.js' </code></pre> 在 <code>mounted </code> 中调用 <code>setQuillTitle</code> 方法： <pre><code class="prism language-javascript"> mounted () { // 初始给编辑器设置title setQuillTitle() } </code></pre> 但是，以上富文本编辑器有一个问题：就是 <code>vue-quill-editor</code> 默认是以 <code>iframe</code> 保存的，插入到编辑器中的标签是 <code><iframe class=\"ql-video\" frameborder=\"0\" allowfullscreen=\"true\" src=\"https://xxx\">，如下图：

但是，实际使用过程中，需要的是插入一个 video 标签。

修改视频 </code> 标签为 <code><video></code></h1> 新建 <code>quill-video.js</code>： <pre><code class="prism language-javascript">import { Quill } from "vue-quill-editor"; // 源码中是import直接倒入，这里要用Quill.import引入 const BlockEmbed = Quill.import('blots/block/embed') const Link = Quill.import('formats/link') const ATTRIBUTES = ['height', 'width'] class Video extends BlockEmbed { static create(value) { const node = super.create(value) // 添加video标签所需的属性 node.setAttribute('controls', 'controls') node.setAttribute('type', 'video/mp4') node.setAttribute('src', this.sanitize(value)) return node } static formats(domNode) { return ATTRIBUTES.reduce((formats, attribute) => { if (domNode.hasAttribute(attribute)) { formats[attribute] = domNode.getAttribute(attribute) } return formats }, {}) } static sanitize(url) { return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member } static value(domNode) { return domNode.getAttribute('src') } format(name, value) { if (ATTRIBUTES.indexOf(name) > -1) { if (value) { this.domNode.setAttribute(name, value) } else { this.domNode.removeAttribute(name) } } else { super.format(name, value) } } html() { const { video } = this.value() return `<a href="${video}">${video}</a>` } } Video.blotName = 'video' // 这里不用改，楼主不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot Video.className = 'ql-video' Video.tagName = 'video' // 用video标签替换iframe export default Video </code></pre> 修改 <code>quill.vue</code> 文件： <pre><code class="prism language-javascript">import { quillEditor, Quill } from 'vue-quill-editor' // 这里引入修改过的video模块并注册 import Video from './video' Quill.register(Video, true) </code></pre> 如下图： <a href="http://img.e-com-net.com/image/info8/47dd7d7250f546da8fa7006a60933da6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/47dd7d7250f546da8fa7006a60933da6.jpg" alt="vue-quill-editor 富文本编辑器上传视频_第2张图片" width="530" height="210" style="border:1px solid black;"></a> 在页面可以看到，插入到编辑器中的标签是 <code><video class=\"ql-video\" controls=\"controls\" type=\"video/mp4\" src=\"xxx\"></video></code>，如下图： <a href="http://img.e-com-net.com/image/info8/46fa019081cb4fb6a2b6047e891d072a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/46fa019081cb4fb6a2b6047e891d072a.jpg" alt="vue-quill-editor 富文本编辑器上传视频_第3张图片" width="650" height="350" style="border:1px solid black;"></a> <h2>设置<code>video</code> 标签自定义属性</h2> 有时候，还需要给 <code>video</code> 标签添加一些自定义的属性：修改 <code>quill-video.js</code> 文件： <a href="http://img.e-com-net.com/image/info8/e31f25fda37549fe908c03e1bd1a6910.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e31f25fda37549fe908c03e1bd1a6910.jpg" alt="vue-quill-editor 富文本编辑器上传视频_第4张图片" width="650" height="521" style="border:1px solid black;"></a> 修改 <code>quill.vue</code> 文件： <a href="http://img.e-com-net.com/image/info8/cda601689c3344f3b1508c9981b1ffc3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cda601689c3344f3b1508c9981b1ffc3.jpg" alt="vue-quill-editor 富文本编辑器上传视频_第5张图片" width="650" height="453" style="border:1px solid black;"></a> 这样，就给 <code>video</code> 标签加上了自定义属性：<code><video class=\"ql-video\" controls=\"controls\" playsinline=\"true\" webkit-playsinline=\"true\" type=\"video/mp4\" poster=\"https://xxx\" src=\"https://xxx\"></video></code>。 PS：以此类推，也可以给 <code>video</code> 标签添加一些其它属性，例如 <code>width，height</code> 等等啦，只需要照着上面的方式修改对应地方即可。 页面效果： <a href="http://img.e-com-net.com/image/info8/8ed9d69c051046e98672d383522fba83.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8ed9d69c051046e98672d383522fba83.jpg" alt="vue-quill-editor 富文本编辑器上传视频_第6张图片" width="650" height="143" style="border:1px solid black;"></a> 完整 <code>quill.vue</code> 代码： <pre><code class="prism language-javascript"> <template> <div class="rich-text-editor-container" v-loading="loading"> <quill-editor :content="content" :options="editorOptions" class="ql-editor" ref="myQuillEditor" @change="onEditorChange($event)"> </quill-editor>  <div> <el-dialog :close-on-click-modal="false" width="50%" style="margin-top: 1px" title="视频上传" :visible.sync="videoForm.show" append-to-body> <el-tabs v-model="videoForm.activeName"> <el-tab-pane label="添加视频链接" name="first"> <el-input v-model="videoForm.videoLink" placeholder="请输入视频链接" clearable></el-input> <el-button type="primary" size="small" style="margin: 20px 0px 0px 0px " @click="insertVideoLink(videoForm.videoLink,'')">确认 </el-button> </el-tab-pane> <el-tab-pane label="本地视频上传" name="second"> <el-upload v-loading="loading" style="text-align: center;" drag :action="uploadVideoConfig.uploadUrl" accept="video/*" :name="uploadVideoConfig.name" :before-upload="onBeforeUploadVideo" :on-success="onSuccessVideo" :on-error="onErrorVideo" :multiple="false"> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">只能上传MP4文件，且不超过{{uploadVideoConfig.maxSize}}M</div> </el-upload> </el-tab-pane> </el-tabs> </el-dialog> </div> </div> </template> <script> // require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor, Quill } from 'vue-quill-editor' // 这里引入修改过的video模块并注册 import Video from './video' Quill.register(Video, true) // 设置title import { setQuillTitle } from './quill-title.js' // 工具栏 const toolbarOptions = [ ["bold", "italic", "underline", "strike"], // 加粗斜体下划线删除线 ["blockquote", "code-block"], // 引用代码块 [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表 [{ indent: "-1" }, { indent: "+1" }], // 缩进 [{ size: ["small", false, "large", "huge"] }], // 字体大小 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 [{ align: [] }], // 对齐方式 ["clean"], // 清除文本格式 ['video'] // 视频 ] export default { name: 'RichTextEditor', components: { quillEditor }, props: { /* 编辑器的内容 */ content: { // 返回的html片段 type: String, default: '' }, // 视频上传配置 uploadVideoConfig: { type: Object, default () { return { uploadUrl: '', // 上传地址 maxSize: 10, // 图片上传大小限制，默认不超过2M name: 'Filedata' // 图片上传字段 } } } }, data () { let _self = this; return { loading: false, // 加载loading editorOptions: { placeholder: '', theme: 'snow', // or 'bubble' modules: { toolbar: { container: toolbarOptions, // 工具栏 handlers: { 'video': () => { // 覆盖默认的上传视频，点击视频图标，显示弹窗 _self.videoForm.show = true } } } } }, // 视频上传变量 videoForm: { show: false, // 显示插入视频链接弹框的标识 videoLink: '', activeName: 'first' } } }, mounted () { // 初始给编辑器设置title setQuillTitle() }, methods: { // 文本编辑 onEditorChange ({ quill, html, text }) { console.log('editor changed:', quill, html, text) console.log('html.replace(/<[^>]*>|/g:', html.replace(/<[^>]*>|/g)) this.$emit('update:content', html) this.$emit('change', html) }, hideLoading () { this.loading = false }, /** --------- 视频上传相关 start --------- */ insertVideoLink (videoLink, poster) { if (!videoLink) return this.$message.error('视频地址不能为空！') this.videoForm.show = false let quill = this.$refs['myQuillEditor'].quill // 获取富文本 let range = quill.getSelection() // 获取光标位置：当编辑器中没有输入文本时，这里获取到的 range 为 null let index = range ? range.index : 0 // 没有视频默认封面时，设置默认视频封面图片 const img = poster ? poster : 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg' // 在光标所在位置插入视频 quill.insertEmbed(index, 'video', { url: videoLink, poster: img }) // 调整光标到最后 quill.setSelection(index + 1) }, // el-文件上传组件 onBeforeUploadVideo (file) { this.loading = true let acceptArr = ['video/mp4'] const isVideo = acceptArr.includes(file.type) const isLt1M = file.size / 1024 / 1024 < this.uploadVideoConfig.maxSize if (!isVideo) { this.hideLoading() this.$message.error('只能上传mp4格式文件!') } if (!isLt1M) { this.hideLoading() this.$message.error(`上传文件大小不能超过 ${this.uploadVideoConfig.maxSize}MB!`) } return isLt1M && isVideo }, // 文件上传成功时的钩子 onSuccessVideo (res) { this.hideLoading() if (res.code === '100') { this.insertVideoLink(res.url, res.cover) } else { this.$message.error(res.desc) } }, // 文件上传失败时的钩子 onErrorVideo () { this.hideLoading() this.$message.error('上传失败') }, /**--------- 视频上传相关 end --------- */ } } </script> <style lang='less'> .rich-text-editor-container .ql-container { height: 300px; } .rich-text-editor-container .ql-editor { padding: 0; } .rich-text-editor-container .ql-tooltip { left: 5px !important; } </style> </code></pre> 完整 <code>quill-video.js</code> 代码： <pre><code class="prism language-javascript">import { Quill } from "vue-quill-editor"; // 源码中是import直接倒入，这里要用Quill.import引入 const BlockEmbed = Quill.import('blots/block/embed') const Link = Quill.import('formats/link') const ATTRIBUTES = ['height', 'width'] class Video extends BlockEmbed { static create (value) { let node = super.create() // 添加video标签所需的属性 node.setAttribute('controls', 'controls') node.setAttribute('playsinline', 'true') node.setAttribute('webkit-playsinline', 'true') node.setAttribute('type', 'video/mp4') // poster 属性指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 node.setAttribute('poster', value.poster) node.setAttribute('src', this.sanitize(value.url)) return node } static formats (domNode) { return ATTRIBUTES.reduce((formats, attribute) => { if (domNode.hasAttribute(attribute)) { formats[attribute] = domNode.getAttribute(attribute) } return formats }, {}) } static sanitize (url) { return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member } static value (domNode) { // 设置自定义的属性值 return { url: domNode.getAttribute('src'), poster: domNode.getAttribute('poster'), } } format (name, value) { if (ATTRIBUTES.indexOf(name) > -1) { if (value) { this.domNode.setAttribute(name, value) } else { this.domNode.removeAttribute(name) } } else { super.format(name, value) } } html () { const { video } = this.value() return `<a href="${video}">${video}</a>` } } Video.blotName = 'video' // 这里不用改，不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot Video.className = 'ql-video' // 可添加样式，看实际使用需要 Video.tagName = 'video' // 用video标签替换iframe export default Video </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1648545966241906688"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(#,Vue,2.x,vue.js,音视频,javascript)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> 软件技术NINI <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> igotyback <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> 小猿L <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835453535777550336.htm" title="vue3中el-table中点击图片放大时，被表格覆盖" target="_blank">vue3中el-table中点击图片放大时，被表格覆盖</a> 叫我小鹏呀 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported</div> </li> <li><a href="/article/1835452528599330816.htm" title="vue项目element-ui的table表格单元格合并" target="_blank">vue项目element-ui的table表格单元格合并</a> 酋长哈哈 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'</div> </li> <li><a href="/article/1835450384655675392.htm" title="Vue中table合并单元格用法" target="_blank">Vue中table合并单元格用法</a> weixin_30613343 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a> <div>地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> 苹果酱0567 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835443569528238080.htm" title="Vue( ElementUI入门、vue-cli安装)" target="_blank">Vue( ElementUI入门、vue-cli安装)</a> m0_l5z <a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> 2401_85194651 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835435885760442368.htm" title="vue+el-table 可输入表格使用上下键进行input框切换" target="_blank">vue+el-table 可输入表格使用上下键进行input框切换</a> 以对_ <a class="tag" taget="_blank" href="/search/vue%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">vue学习记录</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei</div> </li> <li><a href="/article/1835435885122908160.htm" title="vue + Element UI table动态合并单元格" target="_blank">vue + Element UI table动态合并单元格</a> 我家媳妇儿萌哒哒 <a class="tag" taget="_blank" href="/search/element/1.htm">element</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre</div> </li> <li><a href="/article/1835431726982197248.htm" title="vue 创建项目报错：command failed: npm install --loglevel error" target="_blank">vue 创建项目报错：command failed: npm install --loglevel error</a> 那鱼、会飞 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/vue-cli3/1.htm">vue-cli3</a> <div>这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/cli@3.12.1npminstall-g@vue/cli@3.12.1（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错</div> </li> <li><a href="/article/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835428821877223424.htm" title="计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署）" target="_blank">计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署）</a> java毕设程序源码王哥 <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发</div> </li> <li><a href="/article/1835422140325785600.htm" title="pyhon+ffmpeg 常用音视频处理命令" target="_blank">pyhon+ffmpeg 常用音视频处理命令</a> 不再游移 <a class="tag" taget="_blank" href="/search/ffmpeg/1.htm">ffmpeg</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>FFmpeg是多媒体领域的万能工具。只要涉及音视频领域的处理，基本上没有它做不了的事情！通俗点讲，从视频录制、视频编辑再到播放，它都能做！前段时间做了个短视频自动化脚本项目，需要自动处理音视频（包括一些合成、拼接、转场、调色等等），当时做的时候找各种命令还是很痛苦的，因此对用到的所有处理命令做了个汇总，方便以后使用。目录一、获取音频时长二、获取视频信息三、获取视频时长四、多个视频合并五、视频提取视</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> hai40587 <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835401975269781504.htm" title="vue render 函数详解 (配参数详解)" target="_blank">vue render 函数详解 (配参数详解)</a> 你的眼睛會笑 <a class="tag" taget="_blank" href="/search/vue2/1.htm">vue2</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> 余生逆风飞翔 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835393400380157952.htm" title="VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。" target="_blank">VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。</a> 焚木灵 <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，</div> </li> <li><a href="/article/1835390752381825024.htm" title="详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因" target="_blank">详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因</a> hw_happy <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出</div> </li> <li><a href="/article/1835383919906746368.htm" title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a> 海淀萌狗 <div>-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i</div> </li> <li><a href="/article/1835376631733121024.htm" title="Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘" target="_blank">Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘</a> 周bro <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a> <div>node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本6.9.0npminstallnpm@6.14.17-g执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases</div> </li> <li><a href="/article/1835376632366460928.htm" title="vue2实现复制,粘贴功能" target="_blank">vue2实现复制,粘贴功能</a> 周bro <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> 马小蜗 <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835370074102394880.htm" title="【vite 自动配置路由】" target="_blank">【vite 自动配置路由】</a> CODER-V <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%9E%84%E5%BB%BA/1.htm">软件构建</a> <div>手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men</div> </li> <li><a href="/article/44.htm" title="Enum 枚举" target="_blank">Enum 枚举</a> 120153216 <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a> <div>原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0</div> </li> <li><a href="/article/171.htm" title="Java8简明教程" target="_blank">Java8简明教程</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk1.8/1.htm">jdk1.8</a> <div>        Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添</div> </li> <li><a href="/article/298.htm" title="Oracle表维护快速备份删除数据" target="_blank">Oracle表维护快速备份删除数据</a> cuisuqiang <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E9%80%9F/1.htm">快速</a><a class="tag" taget="_blank" href="/search/%E5%A4%87%E4%BB%BD/1.htm">备份</a><a class="tag" taget="_blank" href="/search/%E5%88%A0%E9%99%A4/1.htm">删除</a> <div>我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备</div> </li> <li><a href="/article/425.htm" title="java多态内存分析" target="_blank">java多态内存分析</a> 麦田的设计者 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98%E5%88%86%E6%9E%90/1.htm">内存分析</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E6%80%81%E5%8E%9F%E7%90%86/1.htm">多态原理</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3%E5%92%8C%E6%8A%BD%E8%B1%A1%E7%B1%BB/1.htm">接口和抽象类</a> <div>      “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心</div> </li> <li><a href="/article/552.htm" title="Xshell实现Windows上传文件到Linux主机" target="_blank">Xshell实现Windows上传文件到Linux主机</a> 被触发 <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛；我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo</div> </li> <li><a href="/article/679.htm" title="类的加载ClassLoader" target="_blank">类的加载ClassLoader</a> 肆无忌惮_ <a class="tag" taget="_blank" href="/search/ClassLoader/1.htm">ClassLoader</a> <div>类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？首先写一个便于测试的类Student</div> </li> <li><a href="/article/806.htm" title="html5写的玫瑰花" target="_blank">html5写的玫瑰花</a> 知了ing <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div><html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas> </div> </li> <li><a href="/article/933.htm" title="google的ConcurrentLinkedHashmap源代码解析" target="_blank">google的ConcurrentLinkedHashmap源代码解析</a> 矮蛋蛋 <a class="tag" taget="_blank" href="/search/LRU/1.htm">LRU</a> <div>原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke</div> </li> <li><a href="/article/1060.htm" title="webservice获取访问服务的ip地址" target="_blank">webservice获取访问服务的ip地址</a> alleni123 <a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div>1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http</div> </li> <li><a href="/article/1187.htm" title="菜鸟的java基础提升之道——————>是否值得拥有" target="_blank">菜鸟的java基础提升之道——————>是否值得拥有</a> 百合不是茶 <div>1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：</div> </li> <li><a href="/article/1314.htm" title="通过修改Linux服务自动启动指定应用程序" target="_blank">通过修改Linux服务自动启动指定应用程序</a> bijian1013 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</div> </li> <li><a href="/article/1441.htm" title="spring拦截器的一个简单实例" target="_blank">spring拦截器的一个简单实例</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E6%8B%A6%E6%88%AA%E5%99%A8/1.htm">拦截器</a><a class="tag" taget="_blank" href="/search/Interceptor/1.htm">Interceptor</a> <div>Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check</div> </li> <li><a href="/article/1568.htm" title="[Velocity二]自定义Velocity指令" target="_blank">[Velocity二]自定义Velocity指令</a> bit1129 <a class="tag" taget="_blank" href="/search/velocity/1.htm">velocity</a> <div>什么是Velocity指令在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs</div> </li> <li><a href="/article/1695.htm" title="【Hive十】Programming Hive学习笔记" target="_blank">【Hive十】Programming Hive学习笔记</a> bit1129 <a class="tag" taget="_blank" href="/search/programming/1.htm">programming</a> <div> 第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.</div> </li> <li><a href="/article/1822.htm" title="nginx有选择性进行限制" target="_blank">nginx有选择性进行限制</a> ronin47 <a class="tag" taget="_blank" href="/search/nginx+%E5%8A%A8%E9%9D%99%E3%80%80%E9%99%90%E5%88%B6/1.htm">nginx 动静　限制</a> <div>http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ { </div> </li> <li><a href="/article/1949.htm" title="java-4.-在二元树中找出和为某一值的所有路径 ." target="_blank">java-4.-在二元树中找出和为某一值的所有路径 .</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise </div> </li> <li><a href="/article/2076.htm" title="Netty学习笔记" target="_blank">Netty学习笔记</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===</div> </li> <li><a href="/article/2203.htm" title="js获取项目路径" target="_blank">js获取项目路径</a> cngolon <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>//js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati</div> </li> <li><a href="/article/2330.htm" title="oracle 的性能优化" target="_blank">oracle 的性能优化</a> cuishikuan <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a> <div>   在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！</div> </li> <li><a href="/article/2457.htm" title="Shell变量和数组使用详解" target="_blank">Shell变量和数组使用详解</a> daizj <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E5%8F%98%E9%87%8F/1.htm">变量</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a> <div>Shell 变量定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则：首个字符必须为字母（a-z，A-Z）。中间不能有空格，可以使用下划线（_）。不能使用标点符号。不能使用ba</div> </li> <li><a href="/article/2584.htm" title="编程中的一些概念，KISS、DRY、MVC、OOP、REST" target="_blank">编程中的一些概念，KISS、DRY、MVC、OOP、REST</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a> <div>KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。（2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。（3）OOP 即Object-Orie</div> </li> <li><a href="/article/2711.htm" title="[Android]设置Activity为全屏显示的两种方法" target="_blank">[Android]设置Activity为全屏显示的两种方法</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/Activity/1.htm">Activity</a> <div>1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      </div> </li> <li><a href="/article/2838.htm" title="solrcloud 部署方式比较" target="_blank">solrcloud 部署方式比较</a> eksliang <a class="tag" taget="_blank" href="/search/solrCloud/1.htm">solrCloud</a> <div>solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo</div> </li> <li><a href="/article/2965.htm" title="Java synchronized关键字详解" target="_blank">Java synchronized关键字详解</a> gqdy365 <a class="tag" taget="_blank" href="/search/synchronized/1.htm">synchronized</a> <div>转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。同步机制可以使用synchronized关键字实现。当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。当s</div> </li> <li><a href="/article/3092.htm" title="js实现登录时记住用户名" target="_blank">js实现登录时记住用户名</a> hw1287789687 <a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%BD%8F%E6%88%91/1.htm">记住我</a><a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%BD%8F%E5%AF%86%E7%A0%81/1.htm">记住密码</a><a class="tag" taget="_blank" href="/search/cookie/1.htm">cookie</a><a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%BD%8F%E7%94%A8%E6%88%B7%E5%90%8D/1.htm">记住用户名</a><a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%BD%8F%E8%B4%A6%E5%8F%B7/1.htm">记住账号</a> <div>在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了页面:loginInput.html 代码: <!DOCTYPE html PUB</div> </li> <li><a href="/article/3219.htm" title="开发者必备的 Chrome 扩展" target="_blank">开发者必备的 Chrome 扩展</a> justjavac <a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a> <div>Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl</div> </li> <li><a href="/article/3346.htm" title="算法机试题" target="_blank">算法机试题</a> 李亚飞 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E8%AF%95%E9%A2%98/1.htm">机试题</a> <div>       在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n</div> </li> <li><a href="/article/3473.htm" title="正确配置Linux系统ulimit值" target="_blank">正确配置Linux系统ulimit值</a> 字符串 <a class="tag" taget="_blank" href="/search/ulimit/1.htm">ulimit</a> <div>在Linux下面部署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进</div> </li> <li><a href="/article/3600.htm" title="hibernate调用返回游标的存储过程" target="_blank">hibernate调用返回游标的存储过程</a> Supanccy2013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> <div>注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程</div> </li> <li><a href="/article/3727.htm" title="Spring 4.2新特性-更简单的Application Event" target="_blank">Spring 4.2新特性-更简单的Application Event</a> wiselyman <a class="tag" taget="_blank" href="/search/application/1.htm">application</a> <div>1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例包依赖 <p</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>