前端技术
Javascript、Vue技术
CallMeJacky
如果你有梦想的话,就要去捍卫它 。
展开
-
【html】前端页面可视化设计工具总结
在进行网站设计时,我们可以通过借助现有的html模板,在适当地修改后,变为适合需求的web界面。因此,对于一个后端的程序员来说,找到一个合适的html模板就变得非常重要。目录1. 源码之家2. Bootstrap Designer3. bootswatch4. Bootsnipp5. Layoutit6. 表单代码生成器1. 源码之家一般来说,我们可以通过一些...原创 2019-09-16 21:29:34 · 46968 阅读 · 4 评论 -
【node.js】零基础运行基于Vue和ElementUI开发的一款表单设计器项目
简介在github上找到了一个vue项目:基于Vue,ElementUI开发的一款表单设计器,该项目是一位前端大佬开发的,能够通过拖拽的方式自动生成表单代码,让笔者这样的后端开发者从困难的表单代码编写中解放出来。没有任何基础,瞬间蒙了,好在慌乱中恢复了淡定~Vue是什么?Vue (读音类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计...原创 2019-09-16 16:57:41 · 515 阅读 · 0 评论 -
easyui加载等待的js
【需求】当页面上有很多css和js需要加载时,可能由于等待页面的css样式加载完毕,html内容加载完毕,样式生成后再进行展示,避免一开始加载内容后,逐渐渲染样式造成的不良视觉效果,增强用户体验感。loading.js代码实现/*** 页面加载等待loading.js*///获取浏览器页面可见高度和宽度var _PageHeight = document.document...原创 2018-06-26 22:19:20 · 676 阅读 · 0 评论 -
不定长二维数组在el-table中的动态显示
项目中需要根据商品分类动态生成一个若干个复选框列表,接着,根据列表的内容排列组合生成一个二维数组,最后,需要将二维数组显示在表格中。这里,定义二维数组的格式如下图所示:如图所示,在字典数据skuList中包含两个键值对。其中,dataColumn是表头,dataList是一个二维数组,每一行对应一条数据记录。利用element ui中的el-table标签,显示二维数组中的数据的模板部分代码如下所示。<!-- 根据规格选项产生Sku列表,动态生成列 --><el-table s原创 2020-08-10 22:54:47 · 2878 阅读 · 1 评论 -
vue-quill-editor插入视频和图片自定义插件封装
富文本编辑器是大家经常使用的工具,本篇博客给出一个封装了插入视频和图片功能的vue插件。完整的插件代码如下:<template> <div> <quilleditor v-model="content" ref="myTextEditor" :options="editorOption" :action="uploadUrl"原创 2020-08-10 09:38:49 · 2278 阅读 · 0 评论 -
Vue报错 Duplicate keys detected: ‘1‘. This may cause an update error. vue报错
情况一、错误信息展示为关键字‘keys‘,此时应该检查for循环中的key,循环的key值不为唯一性 (很普通)情况二、有两个相同的for循环,而这两个for循环的key值是一样的,此时将一个的key值加一个数字或者加一个字符串例如...转载 2020-08-10 07:59:04 · 1385 阅读 · 0 评论 -
Vue中图片加载问题总结
1. favicon.ico 504问题注意,由于更改的是配置文件,所以需要重新npm run dev运行该项目。2. 图片引用加载不出来vue中常见的两种图片引用方式如下:直接img标签的src属性传入绝对路径或者相对路径;使用img标签(其他组件,如el-avatar)的src属性绑定变量值,需要注意的是,变量值必须是通过require引进本地图片或者网络上的图片。<template> <el-container> <el-aside clas原创 2020-08-09 00:46:17 · 2272 阅读 · 0 评论 -
垂直水平居中的三种实现方式
今天向一位朋友请教垂直水平居中问题,没想到朋友直接给出了三种实现方式,这里记录下来。如图所示,登陆页中有一个登陆表单,我们需要将表单内容垂直水平居中。这里,为了简单起见,以如下的html为例:<div class='a1'> <div class="a2">需要垂直水平居中的元素</div></div>样式初始化*{ margin:0; padding:0;}html, body{ height: 100%;}最终我们想要实原创 2020-08-04 23:01:47 · 1191 阅读 · 0 评论 -
Vue后台管理系统简单实现
后台管理系统的布局一直中规中矩,对于一个后端工程师,对前端知识也需要有一定的了解。下面介绍一下自己用vue做的一个后台模板,主要是方便自己以后的使用。先对页面的结果做一下分析,首先可以看到上边是公司的logo和个人头像,下边分为两个部分,左边是导航栏,右边是点击导航后展示的Tab选项卡。这里没有做点击导航时右边直接展示详情页,主要是因为实际中我们可能更喜欢选项卡这种方式,方便同时打开多个管理页面。主要实现代码如下图所示,这里有四个文件:Layout.vue:布局组件,完成基本的布局结构,同时负责协原创 2020-08-03 16:29:44 · 4975 阅读 · 3 评论 -
Vue前后端分离项目跨域问题的前端解决方案
前端解决跨域问题的主要思路时通过配置proxyTable// 解决跨域问题,注意,修改这里的配置需要重启服务器 proxyTable: { '/': { // 测试环境 target: 'http://127.0.0.1:80', // 接口域名 changeOrigin: true, // 是否跨域 pathRewrite: { '^/': '' // 需要rewrite重写的, }.原创 2020-08-02 22:42:28 · 1061 阅读 · 0 评论 -
Vue中用户状态管理
本篇博客从vue的角度如何进行用户登陆状态检查,也就是说:限制某些页面只有在登陆后才能访问;如果用户的Cookie过期之后,跳转到登录页,让用户重新进行身份认证。如果有更好的实现,欢迎各位评论区留言讨论。1. 限制页面访问某些页面既然登陆后才能访问,那么我们就可以在用户访问该受访问的页面的时候,检查其是否已经认证。这里主要是通过在vue-resource中添加请求拦截来来完成。具体关键步骤:在设置路由规则时,添加标记requiresAuth(只是一个标记,其他的名字也行);befor原创 2020-08-02 22:35:07 · 841 阅读 · 0 评论 -
【js】D3绘制平行坐标图
平行坐标系(parallel)是一种常用的可视化高维数据的图表。平行坐标系的具有良好的数学基础, 其射影几何解释和对偶特性使它很适合用于可视化数据分析。文章目录1. 利用D3.js绘图1.1 逻辑代码1.2 跨域的概念1.2.1 跨域问题是如何产生的?1.2.2 为什么谷歌浏览器出现了跨域问题,火狐却没有?1.2.3 跨域问题的解决方案2. 安装http-server2.1 全局安装http-server2.2 启动并配置http-server3.svg可视化1. 利用D3.js绘图1.1 逻辑代码原创 2020-06-11 12:05:09 · 2359 阅读 · 0 评论 -
【js】神经网络结构可视化
今天向大家推荐一个由下面这位大佬开发的基于JavaScript的神经网络可视化绘图软件,可以用来绘制各种各样的风格的神经网络图。大佬将代码开源到了github上了,原始的地址为:https://github.com/zfrenchee/NN-SVG。笔者怀着崇拜与敬畏之情,唯恐这么美妙的代码丢失。因此,把源码fork到自己的github上一份,大家可以通过访问:https://jack13...原创 2019-04-04 13:09:29 · 1249 阅读 · 0 评论 -
【js】 canvas绘图和拖拽效果实现
Canvas 是 html5 中的一个非常重要的元素,和以往的 html 标签不同的是,我们虽然可以通过 Canvas 的 API 进行图像的绘制,但是,却不能够为绘制出的东西添加事件。也就是说,在 Canvas 画布中所有的移动,都是通过清空画布重新绘制的,并不是像 DOM 元素一样,可以通过设置某一个具体对象的left、top值让其移动,而只能通过每次清空画布,再次绘制。那么,如果我们确实...原创 2019-03-22 16:23:40 · 5975 阅读 · 2 评论 -
【js】JavaScript中的对象
1. 创建对象定义空对象之后再添加成员。最简单的方法(即Object Literal,对象字面变量),之后便可以向它添加新成员。<script> varmyObject={};/* 声明对象字面变量*/ myObject.name="Jener";/*向对象添加新成员*/ myObject.age=25; alert(myObject.nam...转载 2019-03-22 14:32:10 · 392 阅读 · 0 评论 -
【js】VS Code在Chome下调试JS代码
1. 新建项目文件夹,同时新建html文件,编写代码。2. 打开调试界面,并选择下拉箭头,添加配置文件。此时,会自动生成如下代码。接着,我们需要在生成的代码中指定要调试的文件,这里即test1.html文件。这里有两种方式查看变量的值,一种是从chome中打开控制台。另一种是直接在VS Code中直接打开控制台查看变量的值。...原创 2019-03-08 11:14:59 · 585 阅读 · 0 评论 -
VS Code 插件
1.智能提示VS Code JavaScript(ES6) snippets2. 代码高亮JavaScript Atom Grammar3. 函数注释文档生成Add jsdoc comments在typescript或javascript文件中,选择一个函数签名,最好是包含一个或多个参数的函数签名。选择整个函数签名,然后调用“添加文档注释”扩展名(打开命令调色板...原创 2019-03-08 09:45:42 · 2010 阅读 · 0 评论 -
js获取客户端浏览器类型
【应用场景】在使用jquery easyui的form插件时,chrome返回json数据总是被添加了样式,其他浏览器都能正常返回json数据。尝试使用jqeury的ajax方法提交表单也没有出现问题。为了绕过错误以及为了学习easyui的使用,所以笔者采用如下解决方案:(1)判断浏览器是否为chrome浏览器;(2)若是chrome浏览器,则使用jquery的ajax方式提交表单;否则,采用ea...原创 2018-06-28 18:57:25 · 882 阅读 · 0 评论 -
【js】获取系统时间
1.js代码<script> //获取系统时间 function GetTime() { var mon, day, now, hour, min, ampm, time, str, tz, end, beg, sec; mon = new Array('1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '...原创 2018-06-27 08:38:08 · 433 阅读 · 0 评论