- 博客(35)
- 收藏
- 关注
RSS订阅原创 项目中使用iframe嵌入外部网页时提示连接被拒绝
X-Frame-Options： HTTP 响应头是用来给浏览器 指示允许一个页面 可否在iframe标签,embed标签 或者 标签中展现的标记，浏览器拒绝当前页面加载任何Frame页面。即该页面不允许在frame中展示，即便是在相同域名的页面中嵌套也不允许。即表示该页面可以在相同域名页面的frame中展示。为允许frame加载的页面地址。即表示该页面可以在指定来源的frame中展示。X-Frame-Options可用于指示是否应该允许浏览器呈现在一个页面。
2024-06-25 22:12:59
976
原创 vue2实现登录页随机验证码(数字类型、字母类型)业务
来源：https://blog.csdn.net/weixin_48337566/article/details/126857995
2023-08-09 17:10:35
312
原创 前端在线表格插件 SpreadJS 地址
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/worksheet/initialize-sheet/vue
2022-05-27 20:43:36
156
原创 js实现点击按钮使div元素全屏显示
js实现点击按钮使div元素全屏显示<img class="fullImg" src="@/assets/images/full_screen.png" alt="" @click="handleFullScreen">handleFullScreen() { let element = this.$refs.leftBox; if(this.fullscreen) { if(document.exitFullscreen) {
2022-05-27 14:05:47
574
原创 css文件引入方式link与@import的区别与权重问题
css引入方式link与import的区别1、link属于html标签，而@import是css提供的，只能加载CSS2、加载顺序，link在页面加载时被加载，@import在页面加载完之后再加载3、link是html标签，因此没有兼容性，而@import只有IE5以上才能识别4、可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式css引入方式可分为link引入与@import引入，下面来分析二者的权重问题1、首先是l
2021-03-12 10:38:28
994
原创 vue中使用html2canvas和jspdf将html页面生成pdf文件并下载
将html页面生成pdf文件，需首先将页面转换为图片，然后再输出成pdf。因此，需要用到 html2canvas 插件和 jspdf 这两个插件。1、引入 html2canvas 和 jspdfnpm install html2canvasnpm install jspdf --save2、项目内引入import html2canvas from 'html2canvas'imp...
2020-04-28 14:07:52
1908
原创 vue项目中使用html2canvas将html页面生成图片，并在弹窗中显示
1、npm引入html2canvasnpm install html2canvas2、项目引入html2canvasimport html2canvas from 'html2canvas';3、html代码，省略了具体的页面内容代码。弹窗控件使用了vant中的popup引入popupimport Popup from 'vant/lib/popup';import 'vant...
2020-04-28 11:47:09
1944
原创 使用 VS Code 远程连接Linux服务器进行实时开发
第一步：安装VS Code从官网下载即可第二步：安装远程连接插件（1）点击扩展按钮（2）搜索Remote Development插件并进行安装第三步：配置连接服务器账号（1）点击 远程资源管理器，鼠标移到 SSH TARGETS 点击齿轮图，如下图（2）点击弹出的 config文件，如下图（3）填写自己的服务器配置，Host为在VS Code内显示的名称，可以随意填写，Hostn...
2020-04-21 15:34:17
11583
1
原创 npm 安装依赖出现error Unexpected end of JSON input while parsing near '..."@types/node":"^9.6.4'
例如：安装webpack、webpack-cli时使用：npm i webpack webpack-cli --save-dev，出现问题：error Unexpected end of JSON input while parsing near ‘…"@types/node":"^9.6.4’解决办法：第一步：npm install --registry=https://registr...
2020-04-20 18:24:57
274
原创 vue+Element-ui 导出excel文件
1、首先安装依赖 file-saver、xlsx、script-loadernpm install -S file-saver xlsxnpm install -D script-loader2、准备所需工具文件 Blob.js、Export2Excel.js放在untils目录下Blob.js如下/* eslint-disable *//* Blob.js * A Blo...
2020-02-13 14:39:39
472
原创 vue+Element-ui 导入excel文件生成json数据
首先展示效果图步骤如下：1、首先安装依赖npm install xlsx --save2、建立读取excel文件的js文件，以便调用importExcel.jsimport XLSX from 'xlsx'function readExcel (file) { const types = file.name.split('.')[1]; const fileType =...
2020-02-13 14:23:47
2116
1
原创 vue项目按需引入Element-ui
1、npm安装命令npm i element-ui -S2、按需引入借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的首先，安装 babel-plugin-component：npm install babel-plugin-component -D然后，将根目录下的 .babelrc 修改为：{ "presets": [...
2019-12-27 16:52:01
264
原创 vue中使用clipboard.js实现微信内H5页面复制内容到剪贴板（亲测 浏览器及Android、ios均可）
1、安装npm install clipboard --save2、文件内引入import Clipboard from 'clipboard';3、添加复制按钮复制的内容可以有三种情况：（1）、复制指定控件中能够的内容<input type="text" id="input" /><button ref="copy" data-clipboard-acti...
2019-12-17 16:30:09
1302
原创 阿里云域名+端口访问服务器中vue项目，解决invalid host header 错误
1、通常情况下，vue项目搭建完毕后，就可以直接通过localhost：8080访问，但是如要使用IP 地址访问的话，将修改 config/index.js中的host：0.0.0.0，2、使用域名访问项目，要将域名通过解析连接服务器公网的IP地址后，才能访问。这时使用 xxx.com:8080访问时，一般时候会出现 invalid host header 错误，这时一种方法是在build...
2019-12-03 13:41:54
536
原创 vue项目引入vant报错Module build failed: Error: No PostCSS Config found...
在项目根文件中新建文件postcss.config.js文件，并写入下面代码：module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } }原因是：postcss.config.js是针对webpack3.0做的特殊处理最后 npm run dev...
2019-11-04 15:11:34
946
原创 vue项目在ios移动端多个输入框软键盘关闭留白情况
一个div中有多个input<div @focusout = "inputBlur" @focusin = "inputFocus"> <input type="number > <input type="number > <input type="number > </div>添加如下方法inputBl...
2019-10-31 18:45:23
443
原创 解决在vue项目在ios移动端中，软键盘关闭后页面底部留白的问题
首先有一个输入框<input type = "number v-model = 'currValue' @blur = "onBlur" >通过监听是否失去焦点来调用方法 onBlur()onBlur() { document.body.addEventListener("focusout", () => { setTimeout(() =&g...
2019-10-31 18:31:27
682
原创 vue中路由跳转界面锚点定位
1、定位到本组件的位置`this.$el.scrollIntoView()；2、定位到指定id的位置第一种：<a href="#div1"></a>第二种：document.getElementById("divId").scrollIntoView();3、main.js中添加下面代码`router.afterEach((to,from, next)...
2019-10-31 12:08:59
4159
原创 css使一个按钮保持在页面底部，内容超出屏幕后，保持在内容底部跟随内容一起滚动
<style> body,html{ height: 100%; width: 100%; overflow: auto; } .content{ width: 100%; min-height: 100%; //重要 } footer{ width: 100...
2019-10-29 19:34:39
3438
1
原创 JS中浮点数相加精度不准确的解决方法
使用下面方法进行转换运算function addNum (n1, n2) { var s1,s2,m; try { s1 = n1.toString().split(".")[1].length; } catch (e) { s1 = 0...
2019-10-14 14:46:11
1036
原创 vue项目全局内引入外部CDN地址的js文件
通过vue-cli 构建的vue项目的根目录下，有一个index.html文件，例如，<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">如果要引入以上的地址，只需要在index.html中的head中引入，之后所有的vue文件都可以获取到...
2019-09-16 16:31:17
5572
转载 spring boot maven打包时报错
转载自：https://blog.csdn.net/HHHbetter123/article/details/78561642
2019-09-09 18:34:09
114
原创 JPA中使用@Query对数据库进行删除和更新操作，sql语句动态接收参数
在接口方法中使用以下代码 @Modifying @Transactional @Query(value ="delete from product where product_id = ?1", nativeQuery = true) void deleteType(Integer product_id);注意：里面的 ?1 代表的是方法中传过来的第一个参数produ...
2019-09-03 13:59:05
3019
原创 解决vue移动端项目下界面左部和顶部留白情况
在构建界面后，发现界面左部和顶部都有留白情况，解决办法如下：在APP.vue文件中的style中添加*{ padding: 0; margin: 0; }设定距离都为0。即可消除空白部分。...
2019-08-01 14:25:33
3902
3
原创 Vue.js项目中引入外部css文件路径问题
在Vue.js项目中，经常需要自定义组件，因此会引入外部的css文件，路径如下<style scoped> @import "../style/welcome.css";</style>注意：要使用 @import，，而不是 import...
2019-06-27 18:52:19
1256
原创 Vue.js中使用img标签src动态绑定图片地址
img标签imgAddress为data中的变量，动态绑定到src上<img :src=imgAddress>data写法如下：data() { return { imgAddress: require('../../assets/Income.png'), } }获取图片要使用require（url）进行获取。...
2019-06-27 18:48:31
2866
原创 structs2框架下的JavaWeb案例：在IntelliJ IDEA 中创建web项目的步骤并配置Tomcat、案例实现三种身份跳转不同的登录、注册界面并访问Navicat数据库
本人用的是IntelliJ IDEA 14.1.7软件进行开发的，所以将从在IDEA中创建Web项目到实现用户、商家和管理员三种身份的登录，账号和密码的验证通过与存在Navicat数据库中事先存入的数据进行对比，以下将进行分别介绍。1.首先在IDEA界面点击File-&amp;amp;gt;New-&amp;amp;gt;Project 2.点击Java-&amp;amp;gt;勾选Web Application然后点击Next 3...
2018-08-04 14:07:35
2730
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人