草庐IT

vue前端

全部标签

Springboot+Vue+ElementUI实现表单上传图片同时数据库存储url

后端(springBoot)思路:1、实现图片上传接口,利用图片工具类将图片上传至服务器或者本地2、实现图片删除接口,利用图片工具类对已上传至服务器或者本地的图片删除3、实现数据库修改接口,修改数据库中图片访问路径url图片工具类 //图片上传,支持多张图片 publicstaticListString>upload(ListMultipartFile>files,Stringpath)throwsIOException{ListString>msgs=newArrayList>();if(files.size()1){msgs.add("file_empty");returnmsgs;}fo

在Vue中获取DOM元素的实际宽高

最近使用D3.js开发可视化图表,因为移动端做了rem适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOMAPI的使用,避免遗忘这里总结一下。一、获取元素在Vue中可以使用ref来获取一个真实的DOM元素。为了保险起见,所有的DOM操作建议都放在$nextTick()方法中。template>divclass="box"ref="wrap">div>template>script>exportdefault{mounted(){//获取DOM元素this.$nextTick(()=>{let$ele=this.$refs.wrap})},}script>stylescoped>.

uni-app,vue3接口请求封装

uni-app接口,全局方法封装1.在根目录创建一个api文件,在api文件夹中创建api.js,baseUrl.js和http.js文件2. baseUrl.js文件代码exportdefault"https://XXXX.test03.qcw800.com/api/"3.http.js文件代码exportfunctionhttps(opts,data){ lethttpDefaultOpts={ url:opts.url, data:data, method:opts.method, header:opts.method=='get'?{ 'X-Requested-With':

nginx支持一个端口访问多个前端项目(http以及https)

前言    最近做项目结构优化,前端项目都是部署在nginx上,想实现同一个端口可以访问多个前端项目.这样可以提高服务器的端口复用率,降低项目部署以及维护成本.根据平常的需求,用两台nginx服务器分别支持http、https同一端口访问不同项目。下面将配置方式以及相关注意事项做简单梳理,希望对有相同需求的同学有所帮助,尽量提升效率,专注业务开发!http方式同一端口访问不同项目    nginx安装步骤这里不在介绍,有安装需求的同学可以参考:超详细的linux部署nginx实战记录,直接介绍如何如何配置:22服务器的8099设置为访问多个项目,关键配置文件如下:server{listen80

vue+js+海康web开发包接入海康威视摄像头

一、登录海康开放平台下载web开发包,下载需要先登录海康账号,没有的需先注册一个。海康开放平台web开发包下载地址:https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10&id=4c945d18fa5f49638ce517ec32e24e24二、将web开发包引入vue项目下载后解压的包目录如下:将把webs下的整个codebase文件夹和jquery-1.7.1.min.js都复制到public文件夹下,在index.html下引入对应文件,必须引入的只有jquery-1.7.1.min.js和webVideo

Web前端快速开发 Bootstrap 响应式UI框架

文章目录前言Bootstrap介绍Bootstrap3Bootstrap响应式UI框架使用布局容器栅格系统响应式工具类bootstrap4bootstrap5变化的内容前言本文讲解了Bootstrap响应式UI框架的基本使用与规则,如果本文对你所帮助,请三连支持博主,先赞后看养成习惯。以下是本篇文章正文内容,下面案例可供参考Bootstrap介绍顾名思义就是一套架构,它有一套完整的网页功能解决方案,而且控制权在框架本身,有预定的样式库、组件库和插件。使用者必须按照框架所规定的规则来开发。Bootstrap是基于HTMLCSSJavascript的框架,用于开发响应式布局,移动设备有限的web项

Vue2 实现前端分页 使用Element-ui 后端返回数据没有字段 以及后端有字段实现分别实现分页

后端如果一次给你返回很多数据那么浏览器会卡那么要实现分页也是属于性能优化的一种 比如把一万条数据显示成每页10条或者更多. 不会引起阻塞每次点击的时候给后端传入字段 在联调的时候要划分好责任看后端有没有给你字段还是要你自己实现不过大部分都是后端给的字段也是必须的 就是每次用户点击的时候在去请求数据每次请求多少条1.这个是前端分页后端分页在下面1.使用element-ui的分页组件分页完整功能//返回的数据长度page-size每页显示条目个数,支持.sync修饰符current-page当前页数,支持.sync修饰符total总条目数number—2.在分页组件里面的data里面开始写需要的数

Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表、地图)

Vue之echarts图表数据可视化的基础使用(简单绘制各种图表、地图)目录Vue之echarts图表数据可视化的基础使用(简单绘制各种图表、地图)一、简单介绍二、环境搭建三、使用echarts四、自动缩放echarts五、数据更新,自动刷新echart图表六、绘制折线图七、绘制饼图八、绘制全国地图九、绘制省地图(北京为例) 十、绘制世界地图一、简单介绍Vue开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍,vue中添加echarts,然后在vue中简单使用,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。ECharts,一个使用JavaScript实现的开源可视

web前端面试高频考点——Vue的高级特性(动态组件、异步加载、keep-alive、mixin、Vuex、Vue-Router)

系列文章目录内容参考链接Vue基本使用Vue的基本使用(一文掌握Vue最基础的知识点)Vue通信和高级特性Vue组件间的通信及高级特性(多种组件间的通信、自定义v-model、nextTick、插槽)Vue高级特性Vue的高级特性(动态组件、异步加载、keep-alive、mixin、Vuex、Vue-Router)Vue原理1Vue原理(理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM)Vue原理2Vue原理(diff算法、模板编译、组件渲染和更新、JS实现路由)Vue面试题web前端面试高频考点——Vue面试题文章目录系列文章目录一、Vue高级特性1、动态组件2、

从0搭建前端脚手架详解(小白也可以搭建)

本篇文章用来为大家提供一个搭建简易前端脚手架的思路。先来看一眼实现的效果。从图上来看这个脚手架的功能非常的简单只有一个创建的命令,其他都是帮助和显示版本号的。也就是上图这句,创建一个新项目,只需要输入create项目名便可使用,在创建时执行了一系列的操作,这一块的思路很简单,就是将git仓库中的项目模板拷贝下来再依据使用者的不同操作对复制下来的模板的部分文件进行修改就可以了,大致思路便介绍到这里,接下来我们便来详细的讲讲如何实现,以及会用到的依赖。脚手架目录结构了解搭建的脚手架脚手架就是在启动的时候询问一些简单的问题,并且通过用户回答的结果去渲染对应的模板文件,我们接下来的流程亦是如此脚手架的