Web前端
web
程序猿秃头之路
这个作者很懒,什么都没留下…
展开
-
FormData 文件上传提交表单请求400的问题
项目场景:前端使用 formData 提交带文件上传的表单请求报400问题描述:前端将参数拼成 FormData 的格式,代码如下: let formData = new FormData(); if (this.$refs.basicInfo.$refs.licenseNumberPhoto.$children[0].fileList[0]) { formData.append("licenseNumberPhoto", this.$re原创 2021-06-23 09:52:05 · 1607 阅读 · 0 评论 -
layer.open 方法中获取到子页面的 vue 对象
父页面中打开子页面handleAddLinkCar: function () { const vm = this; layer.open({ type: 2, title: "添加车辆", shadeClose: false, shade: [0.2, "#393D49"], maxmin: true, //开启最大化最小化按钮 area: ["1200px", "750px"],原创 2021-06-09 21:37:05 · 840 阅读 · 0 评论 -
ElementUI 树形组件 el-tree 节点增删改实现
前言要实现的效果:鼠标移入显示增删改按钮,根节点只允许新增。一、代码如下 <div> <el-tree :data="natureOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" node-key="id原创 2021-05-02 09:23:31 · 8375 阅读 · 8 评论 -
devServer 中 代理 proxy 不生效解决
问题描述:今天在跑大佬开源的管理系统RuoYi-vue前后端分离版,因为对vue不怎么了解,部署前端vue部分的时候碰到了问题:访问后台接口的时候不走代理报了404异常,我一看那个地方的路径不太对(但实际上是对的,这个地方是显示的代理前的地址)然后我就在 vue.config.js 中的 devServer 下一顿改,都不行, devServer: { host: '0.0.0.0', port: port, open: true, proxy: {原创 2021-03-06 14:29:18 · 12377 阅读 · 0 评论 -
百度地图 Api v3.0 自定义信息窗体样式
一、最终效果图二、代码var map = new BMap.Map("mapContainer");var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 15);// map.enableScrollWheelZoom(true);// map.setHeading(64.5); // 设置地图旋转角度// map.setTilt(73); // 设置地图的倾斜角度// map.set...原创 2020-05-10 11:15:56 · 6050 阅读 · 12 评论 -
CSS 实现 table 表头固定 tbody 显示垂直滚动条并自定义滚动条样式
一、最终效果图二、关键代码html 代码:<div class="table_info"> <table border="0" cellspacing="0" cellpadding="0" style="width: 100%;"> <thead> <tr> <th>项目账号</th> <th>项目名称</th> ...原创 2020-05-10 10:58:02 · 3695 阅读 · 1 评论 -
js中数组push对象,前面的值总是被最后一次的值覆盖的问题
今天在改代码的时候碰到了一个问题,就是在js中定义了一个数组,每次往里面push对象,结果最后一次push的对象会覆盖之前push进去的所有值,不怎么会前端,网上查到了原因---------------------------------------下面是代码模拟:var data = { a:'123', ...转载 2020-01-02 16:20:33 · 2092 阅读 · 0 评论 -
JS 实现回车键登录
核心代码: function keyLogin() { // 回车键的键值是 13 if (event.keyCode == 13) { $("#loginButtonId").click(); } }<input type="button" id="loginButtonId" value="...原创 2019-11-27 18:23:45 · 795 阅读 · 0 评论 -
JqGrid 获取增删改的返回值
我们使用JqGrid获取查询的数据已经很熟练了,但是有的时候增删改也有返回值,比如返回错误信息如:不要重复添加、无法删除等等,这个时候我们就要用到 afterComplete 这个配置了,核心代码如下:}).navGrid('#pager', {'add': true, 'edit': true, 'del': true, 'search': false, 'refresh': tru...原创 2019-11-27 18:17:50 · 1211 阅读 · 0 评论 -
JqGrid 增删改出现的问题
问题 1:删除的时候传给后台两个参数 {oper : del , id : xx} ,此时,如果你的对象的主键字段不叫 id 叫 systemId 或者其他名称,那么这时传给后台的 id 是行号,而不是主键字段解决方法:将你的主键字段加上 index: 'system_id',key: true 这两个属性,传过去的 id 就是你的主键值了问题 2:后端...原创 2019-11-19 19:02:40 · 391 阅读 · 0 评论 -
在JSP中实现文件下载为Excel格式
<script type="text/javascript"> function base64 (content) { return window.btoa(unescape(encodeURIComponent(content))); } /* *@tableId:...原创 2019-07-15 20:14:02 · 1641 阅读 · 1 评论 -
jquery Ajax serialize()表单序列化方式上传文件
通过Ajax serialize()表单进行序列化方式上传文件,使用FormData进行Ajax请求通过传统的form表单提交的方式上传文件:<form id= "uploadForm" action= /cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> <h1...原创 2019-07-25 15:46:55 · 2284 阅读 · 1 评论 -
JqGrid添加时的下拉菜单实现
添加时的下拉菜单中的值需要从数据库中查出来,后台拼接字符串传给前台前台代码: {name: 'guruId',editable : true, edittype:'select', editoptions: { dataUrl:'${c...原创 2019-08-16 21:21:46 · 1054 阅读 · 0 评论 -
BootStrap+JqGrid整合开发表格步骤
什么是jqGrid jqGrid是一个在jQuery基础上封装一个表格控件,以ajax的方式和服务器端通信。可以使表格的开发更简单。 开发步骤如下 首先,先准备好所需的js和css文件,点击这里可以下载, 然后引人这些样式文件和js文件,这里我们直接使用整合后的文件,注意如果你的HTML页面引入过Bootstrap的这两个文件的话是需要先将这两个文件引用删除的,否则后面...原创 2019-07-26 21:19:40 · 1111 阅读 · 0 评论 -
ajax动态获取数据、创建页面方法之一百度JS模板引擎 baiduTemplate
应用在前端模版系统或则后端JavaScript的环境发布页面,它提供了一套模版语法,用户可以写一个模版区块,每次根据传入的数据生成对应数据产生的Html,渲染不同界面效果;它的优点:愈发简单,学习成本极低,开发效率提升很大,采用javascript的原生语法,所以效率比较高, 默认HTML转义(防XSS攻击),并且支持包括URL转义等多种转义,变量未定义自动输出为空,防止页面错乱,功能强大,如分隔...转载 2019-07-27 16:25:22 · 277 阅读 · 0 评论 -
Ajax编程详解
1.传统请求和异步请求传统请求:基于超级链接、地址栏、form表单、location.href 发起的请求全部是传统请求。特点:请求之后,刷新整张页面。缺点:由于刷新了整张页面,用户操作被中断,造成大量网络流量的浪费。异步请求:基于ajax发起的请求都是异步请求。特点:多个请求并行发生,请求之间互不影响,请求之后页面不动,刷新页面的局部2.什么是AjaxAjax即...原创 2019-08-06 16:20:55 · 548 阅读 · 0 评论 -
JqGrid自定义搜索,点击之后刷新了整个页面原因
背景:JqGrid+BootStrap整了一个表格,没有用JqGrid自带的搜索,而是自己写在了红框处,搜索处的代码: <div class="panel-body" id="all"> <form class="form-inline text-center" action="#"> ...原创 2019-08-09 17:50:51 · 769 阅读 · 0 评论 -
KindEditor(富文本编辑器)的简单使用
1. 首先,去kindeditor官网下载我们所需要的资源 下载地址:资源下载路径2. 然后解压资源包,把资源文件夹添加到自己的项目中去。前台代码展示:<script charset="utf-8" src="/kindeditor/kindeditor-all.js"></script><script charset="utf-8" ...原创 2019-08-20 09:51:21 · 1692 阅读 · 0 评论 -
jqGrid结合ajaxFileUpload进行音频上传+获取音频文件时长和大小+jqGrid二级表格
项目背景: 项目开发需要使用jqGrid生成表格并在表格中生成音频并可在线听歌,并实现从用户本地上传音频至服务器,如下图所示基本方法与JqGrid结合AjaxFileUpload插件进行文件上传相似,这里只写部分不同的地方 思路: 1. 先执行添加到数据库中的操作,此时文件时长和文件大小是空的,只添加一些基础字段2.进行文件上传之后,获取这个文件时长和文件大小,修改...原创 2019-08-16 00:20:20 · 485 阅读 · 0 评论 -
JqGrid结合AjaxFileUpload插件进行文件上传
项目背景: 项目开发需要使用jqGrid生成表格并在表格中显示图片,并实现从用户本地上传图片至服务器,如下图所示 知识点 首先,点击添加按钮,用jqGrid将信息写入数据库,此时文件上传的路径是经过浏览器保护处理之后的路径,不是文件的真实路径。 然后进行文件的上传,这里使用ajaxFileUpload插件进行文件上传,点击添加之后信息和错误的文件路径先进入数据库。 最后执...原创 2019-08-16 00:25:03 · 374 阅读 · 0 评论 -
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT(已解决)
开发的时候碰到一个莫名其妙的错误,其中一个页面就是进不去,其他的页面可以进去控制台报了一个这样的错误:Failed to load resource: net::ERR_BLOCKED_BY_CLIENT最后发现是特么AdBlock插件把这个页面当做广告页面给拦截了!!!!!!!!!把这个插件禁用了就好了,真特么沙雕!...原创 2019-08-16 11:14:13 · 6255 阅读 · 6 评论 -
bootstrap 模态框modal 传值问题
后台管理的项目常会使用到bootstrap里面的模态框modal,因此编辑的时候就需要将页面上的值传到模态框里面并显示,如: html代码:触发模态框<a href="#updateDeptMd" data-toggle="modal" class="btn btn-success btn-xs" data-orderId="需要传递的值">修改</a>模态框...原创 2019-07-25 17:55:57 · 1618 阅读 · 0 评论