前端
关注
分享
扫一扫
文章平均质量分 51
thymeleaf、html、vue...
不知春夏，不知秋冬
不知春夏，不知秋冬。
展开
-
微信小程序地图导航
通过微信小程序 wx.openLocation获取地图原创 2023-02-01 10:03:57 · 2431 阅读 · 1 评论 -
Echarts 的悬浮框tooltip显示自定义格式化
文章地址：https://www.cnblogs.com/shizhijie/p/8805757.html效果：部分代码： tooltip: { trigger: "axis", backgroundColor: "rgba(255,255,255,0.1)", axisPointer: { type: "shadow", label: { show:转载 2022-01-06 14:43:26 · 700 阅读 · 0 评论 -
iview table的render()函数基本的用法
这里记录的是iviewui框架中render函数的用法。如下：语法：render:(h,params)=>{}具体用法：render:(h,params) => { return h(" 定义的元素 "，{ 元素的性质 }，" 元素的内容"/[元素的内容])}案例：当定义的元素没有其他元素时：render:(h,params)=>{ return h('div', {style:{width:'100px',height:'100px',background:'转载 2021-11-25 17:22:19 · 705 阅读 · 0 评论 -
提升Vue加载速度
文章地址:https://zhuanlan.zhihu.com/p/144430943gzip打包gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。1、下载依赖npm i -D compression-webpack-plugin2、在vue.config.js中配置const CompressionPlugin = require('compression-webpack-plug转载 2021-10-08 11:14:24 · 280 阅读 · 0 评论 -
Vue大数据页面Echart+Datav
预览：开源地址：https://gitee.com/MTrun/big-screen-vue-datav#https://echarts.apache.org/zh/api.html#echarts本项目百度云地址链接：https://pan.baidu.com/s/1KC1mrwjB0GkDfJNDZmofUA提取码：6527转载 2021-09-03 15:48:56 · 375 阅读 · 0 评论 -
iview的icon图标不显示问题
记：2021年9月3日，寻问度娘iview官网，在导入相关icon图标发现并没有生效。再次…再次…询问度娘,才知之前引入的是“view-design”而不是如今官网的‘iview’。view-design官网地址：https://www.iviewui.com/components/iconiview官网地址：https://iview.github.io/components/icon...原创 2021-09-03 11:05:38 · 5040 阅读 · 0 评论 -
Vue之完整Dome
项目介绍：一个前后端分离的管理系统。前端使用vue框架，后端使用Java的springboot框架。项目框架：SpringBoot+SpringSecurity+jwt+mybatis-plus+swagger2环境：JDK1.8软件： idea后端教程：Java后端管理系统前端框架：vue ,vue_cli,element软件： HBuilder x前端教程：xx1.创建项目vue-cli-3.0cmd中输入命令：vue create 项目名结构：结构描述见：Vue之vue-原创 2021-04-08 09:40:19 · 900 阅读 · 0 评论 -
Vue之Element标签页保留用户操作缓存。
使用Keep-alive缓存组件。问题：Vue之Keep-alive属性 include 和 exclude无效场景：切换标签页保存用户操作，关闭标签页清除缓存的操作。思路：使用keep-alive缓存标签页，点击切换不刷新标签页，当关闭时清除缓存。文章资料：1 keep-alive实现原理。2.使用 keep-alive 的 include 和 exclude无效的一点注意。keep-alive的主要属性： include: patternTypes, // 缓存白名单 exc转载 2021-04-07 14:04:11 · 1353 阅读 · 0 评论 -
Vue之标签页
项目框架：Vue cli 3.0+ element相关资料：elementui tab标签管理路由页面Element Tabs 标签页实现右键自定义菜单效果图：ps：该项目实现了登录滑块验证、主页标签页和右键菜单的 “关闭所有”…等功能。1.主页差异这里和elementui tab标签管理路由页面使用的是不同的页面布局；官方示例代码如下：<el-container> <el-header>Header</el-header> <el-co转载 2021-04-02 10:43:53 · 1024 阅读 · 0 评论 -
Vue之拦截器跳转登录页面
拦截器man.js中：//设置axiosimport qs from 'qs';import axios from 'axios'// 添加一个响应拦截器 axios.interceptors.response.use(function (response) { return response;}, function (error) { console.log(error.response) // 401处理跳转登录页面 替换地址栏URL if (error.response转载 2021-03-23 17:11:06 · 1835 阅读 · 1 评论 -
Vue之vue-cli新和旧版本代码生成的项目区别
记录下文章地址：http://www.voycn.com/article/chuangjianvuexiangmuqubie-vue-cli-30yuvue-cli-20创建项目结构区别vue-cli 2.0创建步骤PS D:\Web前端\vue项目\Clistudy> vue init webpack vue-cli-2.0? Project name vue-cli-2.0-study? Project description vue cli 2.0 study-vue.js? Au转载 2021-01-28 16:58:38 · 374 阅读 · 0 评论 -
Vue之组件间交互
Vue中父与子组件交互记录下vue如何实现组件数据交互。1.父组件发送数据到子组件。父组件：<template><view> <!-- 使用 :list="datas"传递数据到子组件 codes中使用props接收 --> <codes :list="datas"></codes></view></template><script>import codes from "@/compon转载 2021-01-28 10:08:06 · 149 阅读 · 0 评论 -
Vue之第三方通用接口页面
第三方接口功能实现场景：调用第三方接口参数是写死在后台的application.yml文件中，不方便更新管理接口的参数、接口状态、使用次数等等。耦合性太高。解决思路：把部分通用的字段写入数据库中，不同意的接口参数转换为json数据存入某个字段中。1 前端前端vue效果图：代码： <template> <div> <div class="info" > <h1>第三方车牌识别接原创 2021-01-19 16:35:48 · 1046 阅读 · 0 评论 -
Vue错误记录（三）文件上传之transformRequest配置导致其他接口错误
场景：在 Vue项目的man.js中封装了文件上传接口，配置transformRequest后导致其他请求接口出错。原因： 配置transformRequest后请求数据是FormData格式，其他请求接口发送数据到后台无法解析。解决方法：调用接口时，配置transformRequest相应的数据格式。man.js中的接口配置// 默认配置import qs from 'qs';import axios from 'axios'axios.defaults.withCredentials =原创 2021-01-12 15:25:23 · 2557 阅读 · 0 评论 -
Vue网页调用摄像头拍照
文章资料：https://www.cnblogs.com/ljx20180807/p/10839713.html转载 2021-01-28 16:58:17 · 1162 阅读 · 1 评论 -
Vue错误记录（二） 表单不能通过验证
场景： 添加、修改数据所用表单为同一个。原因：Vue项目中表单的数据来自后台的json字符串。部分验证没有通过，发现是数据类型对不上，json中是Number，而表单中是String。使用以下语句判断数据格式打印：console.log(Object.prototype.toString.call(object));//[object String]果然是Number类型而表单中没有规定type添加类型 type: 'number'成功通过验证。我的天，添加又出问题了。添加输入原创 2020-12-10 12:08:19 · 523 阅读 · 0 评论 -
Vue错误记录（一）TypeError: loaderContext.getResolve is not a function
运行出现错误：Vue Module build failed: TypeError: loaderContext.getResolve is not a function 解决办法1.安装 lessnpm install less less-loader --save2.进入 build 目录 打开文件 webpack.base.conf.js 在文件中找到 rules 新增如下代码：{ test: /.less$/, loader: "style-loader!css-loader!le转载 2020-12-02 11:20:52 · 1323 阅读 · 0 评论 -
Vue的demo-踩坑
步骤：1.全局安装vue-cli脚手架npm i -g @vue/cli-init2、创建一个基于webpack模版的新项目（其中，my-project为项目名）一路回车）。如：vue init webpack my-project 3、打开项目，这里以my-project为例cd my-project4、安装项目相关依赖包（也可以使用cnpm来安装，速度更快，执行npm install -g cnpm --registry=https://registry.npm.taobao.org转载 2020-10-27 17:13:52 · 435 阅读 · 0 评论 -
如何将数据库中带有样式的数据在html页面生效
例子：<c:forEach items="${ar}" var="ar"> <c:out value="${ar.content}" escapeXml="false"></c:out></c:forEach>在<c:out>标签中有一个escapeXml属性,其默认值为true转载 2019-02-16 11:03:59 · 1149 阅读 · 0 评论 -
Java之Springboot页面thymeleaf的ajax分页页面
<html lang="en"><html xmlns:th="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minim原创 2020-09-15 10:40:36 · 398 阅读 · 0 评论 -
Java之springboot中跳转页面样式失效
后台业务跳转thymeleaf 页面样式无效情况。在页面添加<html xmlns:th="http://www.w3.org/1999/xhtml"><head>... <link rel="stylesheet" th:href="@{/basic/css/bingding.css}" > <script th:src="@{/basic/js/jquery-3.2.1.min.js}"></script></hea原创 2020-09-10 15:01:38 · 390 阅读 · 0 评论