在本讲中,我们开始详情页功能的开发,详情页就是对单个视频进行播放并展示视频的相关信息,比如视频标题、描述、评论信息、相关推荐等。我们将会学习到通用视图类DetailView的使用、评论动态加载、以及如何通过ajax实现喜欢和收藏功能,并通过一段段很酷的代码来说明这些功能。
最近在学习VUE,感觉确实不错的前端框架。但光学习基本有点太慢,时间太长,主要是为了项目上手使用,所以在网上找了找比较好的VUE框架开发的项目实例。分享给大家。每个项目前边的蓝色是可以点击打开的链接,直接在GIT上跳转到具体的项目工程,大家直接打开访问就可以了。按照自己需求下载代码吧。
element:饿了么出品的Vue2的web UI工具套件 Vux:基于Vue和WeUI的组件库 mint-ui:Vue 2的移动UI元素 iview:基于 Vuejs 的开源 UI 组件库 Keen-UI:轻量级的基本UI组件合集 vue-material:通过Vue Material和Vue 2建立精美的app应用 muse-ui:三端样式一致的响应式 UI 库 vuetify:为移动而生的Vue JS 2组件框架 vonic:快速构建移动端单页应用 eme:优雅的Markdown编辑器 vue-multiselect:Vue.js选择框解决方案 vue-table:简化数据表格 VueCircleMenu:漂亮的vue圆环菜单 vue-chat:vuejs和vuex及webpack的聊天示例 radon-ui:快速开发产品的Vue组件库 vue-waterfall:Vue.js的瀑布布局组件 vue-carbon:基于 vue 开发MD风格的移动端 vue-beauty:由vue和ant design创建的优美UI组件 vue-blu:帮助你轻松创建web应用 vueAdmin:基于vuejs2和element的简单的管理员模板 vue-syntax-highlight:Sublime Text语法高亮 vue-infinite-scroll:VueJS的无限滚动指令 Vue.Draggable:实现拖放和视图模型数组同步 vue-awesome-swiper:vue.js触摸滑动组件 vue-calendar:日期选择插件 bootstrap-vue:应用于Vuejs2的Twitter的Bootstrap 4组件 vue-swipe:VueJS触摸滑块 vue-amap:基于Vue 2和高德地图的地图组件 vue-chartjs:vue中的Chartjs的封装 vue-datepicker:日历和日期选择组件 markcook:好看的markdown编辑器 vue-google-maps:带有双向数据绑定Google地图组件 vue-progressbar:vue轻量级进度条 vue-picture-input:移动友好的图片文件输入组件 vue-infinite-loading:VueJS的无限滚动插件 vue-upload-component:Vuejs文件上传组件 vue-datetime-picker:日期时间选择控件 vue-scroller:Vonic UI的功能性组件 vue2-calendar:支持lunar和日期事件的日期选择器 vue-video-player:VueJS视频及直播播放器 vue-fullcalendar:基于vue.js的全日历组件 rubik:基于Vuejs2的开源 UI 组件库 VueStar:带星星动画的vue点赞按钮 vue-mugen-scroll:无限滚动组件 mint-loadmore:VueJS的双向下拉刷新组件 vue-tables-2:显示数据的bootstrap样式网格 vue-virtual-scroller:带任意数目数据的顺畅的滚动 DataVisualization:数据可视化 vue-quill-editor:基于Quill适用于Vue2的富文本编辑器 Vueditor:所见即所得的编辑器 vue-html5-editor:html5所见即所得编辑器 vue-msgbox:vuejs的消息框 vue-slider:vue 滑动组件 vue-core-image-upload:轻量级的vue上传插件 vue-slide:vue轻量级滑动组件 vue-lazyload-img:移动优化的vue图片懒加载插件 vue-drag-and-drop-list:创建排序列表的Vue指令 vue-progressive-image:Vue的渐进图像加载插件 vuwe:基于微信WeUI所开发的专用于Vue2的组件库 vue-dropzone:用于文件上传的Vue组件 vue-charts:轻松渲染一个图表 vue-swiper:易于使用的滑块组件 vue-images:显示一组图片的lightbox组件 vue-carousel-3d:VueJS的3D轮播组件 vue-region-picker:选择中国的省份市和地区 vue-typer:模拟用户输入选择和删除文本的Vue组件 vue-impression:移动Vuejs2 UI元素 vue-datatable:使用Vuejs创建的DataTableView vue-instant:轻松创建自动提示的自定义搜索控件 vue-dragging:使元素可以拖拽 vue-sli
仓库地址:https://github.com/opendigg/awesome-github-vue
Copying '/opt/jumpserver/apps/static/js/plugins/inputTags.jquery.min.js' Copying '/opt/jumpserver/apps/static/js/plugins/cropper/cropper.min.js' Copying '/opt/jumpserver/apps/static/js/plugins/datatables/datatables.min.js' Copying '/opt/jumpserver/apps/static/js/plugins/datatables/pdfmake.min.js.map' Copying '/opt/jumpserver/apps/static/js/plugins/datatables/i18n/English.lang' Copying '/opt/jumpserver/apps/static/js/plugins/datatables/i18n/zh-hans.json' Copying '/opt/jumpserver/apps/static/js/plugins/datepicker/bootstrap-datepicker.js' Copying '/opt/jumpserver/apps/static/js/plugins/demo/peity-demo.js' Copying '/opt/jumpserver/apps/static/js/plugins/dropzone/dropzone.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/echarts-all.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/echarts.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/bar.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/chord.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/eventRiver.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/force.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/funnel.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/gauge.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/heatmap.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/k.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/line.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/map.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/pie.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/radar.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/scatter.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/tree.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/treemap.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/venn.js' Copying '/opt/jumpserver/apps/static/js/plugins/echarts/chart/wordCloud.js' C
在项目开发环境下,我们会把 JS 代码尽可能模块化,方便管理和修改,这就避免不了会出现一个项目自身 JS 文件数量达到 10 个或者更多。 而项目上线后,会要求将所有 JS 文件合并为 1 个或者几个,手动的操作虽然也不是问题,但每次修改更新都要手动操作合并一遍,这就肯定是个噩梦了。 这种情况下,一些工具也就随之产生,比如在线合并,一些网站提供js文件上传,然后合并,但这还是很麻烦,如果开发环境没有网络呢? 这会我就想到了 windows 系统下的 cmd 里的 copy 命令,它虽然是个复
这两道题真是太有趣了!虽然标签是逆向,但是以前端为载体,有很多JS/CSS奇淫巧计,我已经迫不及待地想要和大家分享了。
1,找到http://www.xinhuanet.com 图片显示不了的原因,curl没打开zip宏
Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/modules/heatmap.js' Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/modules/heatmap.src.js' Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/modules/no-data-to-display.js' Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/modules/no-data-to-display.src.js' Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/modules/solid-gauge.js' Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/modules/solid-gauge.src.js' Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/themes/dark-blue.js' Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/themes/dark-green.js' Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/themes/dark-unica.js' Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/themes/gray.js' Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/themes/grid-light.js' Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/themes/grid.js' Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/themes/sand-signika.js' Copying '/opt/jumpserver/apps/static/js/plugins/highcharts/themes/skies.js' Copying '/opt/jumpserver/apps/static/js/plugins/iCheck/icheck.min.js' Copying '/opt/jumpserver/apps/static/js/plugins/jstree/jstree.min.js' Copying '/opt/jumpserver/apps/static/js/plugins/layer/layer.js' Copying '/opt/jumpserver/apps/static/js/plugins/layer/skin/layer.css' Copying '/opt/jumpserver/apps/static/js/plugins/layer/skin/default/icon-ext.png' Copying '/opt/jumpserver/apps/static/js/plugins/layer/skin/default/icon.png' Copying '/opt/jumpserver/apps/static/js/plugins/layer/skin/default/loading-0.gif' Copying '/opt/jumpserver/apps/static/js/plugins/layer/skin/default/loading-1.gif' Copying '/opt/jumpserver/apps/static/js/plugins/layer/skin/default/loading-2.gif' Copying '/opt/jumpserver/apps/static/js/plugins/magnific/jquery.magnific-popup.min.js' Copying '/opt/jumpserver/apps/static/js/plugins/metisMenu/jquery.metisMenu.js' Copying '/opt/jumpserver/apps/static/js/plugins/pace/pac
1,修复两处小崩溃,主要是多线程渲染页面时,devtools调试下断点再执行会触发。
本文介绍了在 Web 页面中实现跨域的常见方法,包括使用 CORS、使用 JSONP、使用代理服务器等,并给出了具体的代码示例和案例分析。同时,本文还探讨了在跨域请求中可能遇到的难题和解决方案,包括同源策略、CORS 的配置、缓存问题等,并给出了相应的解决方案。
为了提高网站的访问速度,现在一般会将静态资源放在 CDN 下,而不是放在网站的域名之下。以腾讯课堂为例,其域名为 ke.qq.com,打开控制台,访问 ke.qq.com,我们可以看到 js 文件放在了 CDN 7.url.cn 下,css 文件放在了 CDN 8.url.cn 下。尽管 CDN 的服务可用性一般宣称 99.9% 甚至 99.999%,然而实际上监测结果比该数值要小一些。为了应对这种情况,需要做到当发现 css 或 js 文件从 CDN 加载失败时,能再次从网站的域名加载。
Github开源地址:https://github.com/DawnMagnet/JSInterpreter-TencentOS
api explorer工具里的6种sdk,我都是用的获取cdn访问日志下载链接的DescribeCdnDomainLogs接口。
记一下gulp.src()用法 语法 gulp.src(globs[, options]) globs:文件匹配模式(类似正则表达式),用来匹配文件路径(包括文件名) options:可选参数。通常情况不需要用到 js gulp.src('**/*.js') 匹配模式 内部使用node-glob模块实现文件匹配 单匹配 匹配符 code 匹配 不匹配 备注 * * a.b, x.y, abc, abc/ a/b.js 不匹配/,除非/出现在末尾 *.* a.b, x.y abc 匹配所有带后缀的文件
动态与静态CommonJS与ES6 Module最本质的区别在于前者对模块依赖的解决是“动态的”,而后者是“静态的”。在这里“动态”的含义是,模块依赖关系的建立发生在代码运行阶段;而“静态”则是模块依赖关系的建立发生在代码编译阶段。
使用hexo g出现如下错误,一顿排查,发现,是文章的文件名和文章的title有非法字符,原title为:ssh: connect to host github.com port 22: Connection timed out。修改名称即可。
xargs可以将输入内容(通常通过命令行管道传递),转成后续命令的参数,通常用途有:
对古老的网站进行维护, 短时间内用react或vue组件化重写全部页面不太现实,但用webpack做个打包, 还是可行性的, 配置好webpack多入口多出口,只需对网站进行少量的改动, 就可以愉快的用scss, es6, 等语法写网站了
Ryan Dahl在 2009/3/3 的这次代码提交将蛋壳中的 NodeJS 项目命名为 node,从此,世界上多了一个 Node.js
Webpack是一个前端构建工具,本文将简要介绍它最常用的功能,并创建一个基于webpack的前端开发环境。
最新版的Butterfly取消了原来设置在_config.yml里的默认CDN,导致不能快速替换掉现在极不稳定的jsDelivr CDN。本文的默认Butterfly版本为4.1.0。
xargs命令有两个要点。第一,你必须列出目标文件。第二,你必须指定对每个文件需要执行的命令或脚本。
毫无疑问,参数肯定是js生成的,那么如何获取这些参数的规律呢?通过下面的学习来了解
webpack ensure相信大家都听过。有人称它为异步加载,也有人说做代码切割,那这个家伙到底是用来干嘛的?其实说白了,它就是把js模块给独立导出一个.js文件的,然后使用这个模块的时候,webpack会构造script dom元素,由浏览器发起异步请求这个js文件。
随着Meteor1.3 正式版的临近,我们再来回顾一下Mantra,并讲一下使用它的原因。Mantra是Meteor 1.3+React的一种应用架构规范,它包含了一系列的规范和约定,如果你遵循Mantra规范,那么你的应用将更加容易构建和扩展。 当我们最初看到Mantra的时候,会觉得它给Meteor应用增加了不少复杂度。为什么我们需要这么多额外的目录和文件呢?随着你认识的深入,你会逐渐意识到这些模块化组织结构的优势所在,它能让我们方便地了解应用的内部机制。同时,它也将让我们更方便地修改应用或者添加新的功
JavaScript 代码多文件混淆加密可以有效保护源代码不被他人轻易盗取。虽然前端的 JS 无法做到纯粹的加密,但通过一系列的混淆操作,可以让源码变得难以阅读,增加他人复制的难度。强烈推荐您试一试 ipaguard代码加密工具,它能够为您的代码提供更强的保护。
日常 Web 端爬虫过程中,经常会遇到参数被加密的场景,因此,我们需要分析网页源代码
很多人都建议jquery使用cdn加速的方式引入。当然,我不反对这么做。但是以我自己做项目的便利性,我还是习惯把jq放在本地使用。原因有以下几点:
当开始一个新的web开发项目时,许多开发人员都有一个问题:“什么工具是最合适的?” 显然,JavaScript是骨干,因为今天它提供了创建前端的广泛功能。但是人们在选择框架时面临着两难,因为JS中有很
最近测试了几个 ES module 和 Commonjs 的例子,理解了之前不太理解的概念,记录一下。要是想多了解的可以去看看阮老师的 Module 那部分。会贴一小部分的代码,不会贴所有验证的代码。
最近在做项目的时候发现在一个模块导出的时候是返回一个NEW以后实例化的对象,在其他地方使用的是同一个对象(一直以为是不用的对象,每次导入都是一个新的。。。还是太菜)。
一、先写一个简单demo1 1-1安装好webpack后创建这样一个目录: 1-2:向src各文件和dist/index.html文件写入内容: <!DOCTYPE html> <html lang=
"循环加载"(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本。 // a.js var b = require('b'); // b.js var
“循环加载”(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本。
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起。webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。同时,webpack还有丰富的插件 plugin,可以完成例如js,css的压缩,公共依赖模块的提取和注入,甚至利用模板对 h
开发环境中可使用 analyze-webpack-plugin 观察各模块的占用情况。以该项目为例:浏览器中输入 http://localhost:3000/analyze.html 可以看到如下效果:
Node.js 既支持 CommonJS 标准,也完全支持 ECMAScript 标准。Node.js 环境下用 js语言编写的文件,有三种格式:.js、.mjs、.cjs。
如果你的网站上面有很多第三方JS代码,那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲染HTML的时候,如果解析到需要下载文件的script标签,那么会停止解析接下来的HTML,然后下载外链JS文件并执行。等JS执行完毕之后才会继续解析剩下的HTML。这就是所谓的『HTML解析被阻止』。浏览器解析渲染页面的抽象流程图如下:
inode 为“索引节点”,存储文件的元信息。其是 UNIX 操作系统中的一种数据结构,包含了与文件系统中各个文件相关的一些重要信息。
领取专属 10元无门槛券
手把手带您无忧上云