VUE
文章平均质量分 69
RanGe*
别让我秀琴瞧不起你!
展开
-
java加载图片返回前端 vue展示图片 下载图片 设置图片水平/垂直居中显示
图片上传到后台之后, 需要加载显示在前端, 这里java后端就需要将图片以blob流的形式返回给前端, 前端再将文件流接收, 以url的形式动态赋值给<img>标签上代码后端javaimport java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.IOException;import java.io.UnsupportedEncodingE原创 2021-07-21 10:45:21 · 1687 阅读 · 0 评论 -
docker 部署vue dist文件 使用nginx
Dockerfile 内容 FROM nginx:latest MAINTAINER front COPY dist/ /home/myhtml/front/ #拷贝dist文件到容器中 COPY nginx.conf /etc/nginx/nginx.conf #替换nginx中的配置文件使用自定义的配置 RUN echo 'echo init ok!!'nginx.cong内容user nginx;worker_processes 1;error_log /var/log原创 2021-06-09 10:14:14 · 1351 阅读 · 0 评论 -
golang整合vue打包文件dist静态资源 打包进exe
golang整合vue打包文件dist静态文件 打包进exe1.需求描述2.下载工具3.dist文件打包4.golang中配置5.打包6.启动测试1.需求描述golang语言开发十分方便, 简洁,能够快速搭建一个webApi,前期工作很小,vue是最新流行起来的前端开发框架,所带来的方便是有目共睹的,目前已经成为了市面上主流的前端开发框架之一。vue项目在部署的时候需要打包,打包之后生成一个dist文件夹,里面的静态文件放入到指定的后端代码中就可以与后端代码一起部署了。之前做过java的spring原创 2021-03-23 17:17:41 · 2700 阅读 · 0 评论 -
vue axios post形式下载zip文件流
axios以post形式发送请求, 获取zip文件流下载到本地downloadFile() { var reqData = qs.stringify({ // form-data格式的数据 fileIds: "98g8349g-2343jkng8s98fga-324rkjgq" }); axios .post("/api/download/zip1", reqData, { // url中/api是前端解决跨域问题的 headers: { // 这里需要使用form-data格原创 2020-05-27 10:18:30 · 3555 阅读 · 0 评论 -
vue+shiro+springboot项目整合部署到linux tomcat8.5
事情的起因:这几天在做一个项目的整合部署, 中间遇到了很多的坑, 现在记录一下遇到的问题, 以及解决方案vue+shiro+springboot项目整合部署到linux tomcat8.5一 vue项目打包1.1 注释掉独立开发时配置的url前缀1.2 查找项目的build命令1.3 将打包后生成的文件放入springboot的静态资源文件夹中二 shiro白名单配置2.1 登录请求2.2 登出请求2.2.1 有人会有疑问了, 为啥登出请求也要特权呢?2.2.2 setLoginUrl为何设置返回一个js原创 2020-05-11 13:28:47 · 665 阅读 · 7 评论 -
v-chart中使用map地图出现警告 不显示地图 修改使用本地json文件
v-chart中使用map时, 将教程中的代码直接拿过来, 默认是显示不出来的, 浏览器打开控制台发现有一个警告如下这种情况是什么XMLHttpRequest是一个异步请求, 但是这里在使用同步的方式发送请求,导致出现的这个警告我们刷新浏览器可以发现浏览器在获取map这个插件时, 发送了一个json串的请求这里使用的是中国地图, 所以查询的json数据中有国内各省/直辖市的数据信息后来...原创 2020-05-06 10:20:45 · 1303 阅读 · 1 评论 -
vue引入echart错误提示Error in mounted hook: "Error: Component series.line not exists. Load it first
在vue中引入vue-echarts组件的时候报错了,如下图Error in mounted hook: "Error: Component series.line not exists. Load it first 这里的series.line只是某一个图表, 其他报错例如series.bar之类的 都是这个原因解决方法找到项目中node_modules/vue-echarts/co...原创 2020-04-30 11:29:51 · 3211 阅读 · 1 评论 -
vue使用iview的Upload插件进行文件上传, 携带参数, 携带headers信息等
最近接手了一个重构前端页面的项目, 后台只提供api接口, 需要使用前端的vue框架中的Upload进行上传文件, 并携带两个参数, 同时还需要在请求头中设置userId查找了很多资料, 使用原生的上传也是可以的 , 只是之前没有注意到userId这事, 导致发送请求时总是报错500(internal server error)接下来看一下如何使用Upload标签实现点击/拖拽上传如何携带...原创 2020-04-23 15:35:35 · 6186 阅读 · 1 评论 -
vue通过前端配置解决跨域问题proxyTable
vue是一个独立的前端框架,在开发过程中需要解决一下跨域问题, 当然了,在后端也是可以解决跨域问题的, 但是如果后端只提供接口,并不能解决跨域的话, 那么这时候就需要在前端解决跨域了 ,首先找到vue前端的配置文件, 默认是在项目根目录下/config/中的index.js文件中找到module.exports中的devdev: { env: require('./dev.e...原创 2020-04-22 15:16:02 · 2405 阅读 · 0 评论 -
vue中使用iview的分页功能 自定义页面显示记录数目size大小
iview中默认使用的分页大小有四个选项这个是一个默认值这里设置的只有10,20,30,40四个选项,对于需要显示大量数据的需求来说,显然不能满足要求,通过查看iview的Page标签源码我们可以发现有一个属性是page-size-optspage.vue源码: https://github.com/iview/iview/blob/2.0/src/components/page/pag...原创 2020-04-14 13:17:00 · 5882 阅读 · 1 评论 -
springboot接收实体类集合类型参数, 前端使用vue发送数据
今天在写代码的时候遇到一个问题, 就是前端需要发送一个集合list数据到后台, list的类型是一个实体类, 后台使用的是springboot, 但是如何接收这个参数, 确实让我费了点功夫.查了很多资料, 大多是说需要使用@RequestParam注解, 然后加上value = "list[]" 类似这样的public ResultJSON methodName(@RequestParam(r...原创 2020-03-26 14:58:01 · 4767 阅读 · 0 评论 -
解决 iview-modal 点击‘确定’按钮时弹框自动关闭问题
遇到的问题:iview-modal在做数据校验时,点击确定,当校验不通过时,弹框也自动关闭了解决方案:1.给Modal添加属性loading后,点击确定按钮对话框不会自动消失,并显示 loading 状态,需要手动关闭对话框,常用于表单提交。handleSubmit(name) { let self = this; this.$refs[name].validate(...原创 2020-01-15 14:59:23 · 1546 阅读 · 0 评论 -
vue中computed计算属性和methods区别
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。...原创 2020-01-13 22:08:02 · 175 阅读 · 0 评论 -
vue父子组件通信
vue父子组件通信子组件: <template> <div>子组件<button @click="sendMsg">传递</button></div> </template> <script> export default{ name:"child", data(){return{m...原创 2020-01-13 22:06:47 · 93 阅读 · 0 评论 -
vue-axios请求
get请求: this.$axios.get("http://www.wwtliu.com/sxtstu/news/juhenews.php",{ params:{//是否添加.get都是使用get方式发送请求,axios的默认方式 type:"junshi", count:30 } }).then(res => { this.newsData...原创 2020-01-13 22:00:05 · 491 阅读 · 0 评论 -
vuex/store使用
示例代码main.js中添加代码 import store from "./store"//导入store new Vue({ el: '#app', router, store,//添加一个store components: {App}, template: '<App/>' })store文件夹中创建index.js分为四级操作: ...原创 2020-01-13 21:51:13 · 120 阅读 · 0 评论 -
vue插件使用-element/swiper/Iconfont
vue插件使用-element/swiper/Iconfontelement地址http://element-cn.eleme.io/2.0/#/zh-CN/swiper地址https://www.swiper.com.cn/api/Iconfont图标使用1. 在Iconfont官网中下载图标http://www.iconfont/cn/(官网地址)2. 选择需要的图标添加到购物车...原创 2020-01-13 21:41:56 · 91 阅读 · 0 评论 -
Nodejs环境搭建配置
一、使用之前,我们先来掌握3个东西是用来干什么的。npm: Nodejs下的包管理器。webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)开始:如图,下载...原创 2020-01-13 12:47:57 · 716 阅读 · 0 评论 -
vue-framework-range常见问题整理
vue-framework-range前端vue框架常见问题整理解决tinymce报错问题1.package.json文件中找相关的依赖并删除2.dos窗口删除依赖npm uninstall vue-tinymce3.重新下载npm install vue-tinymceselect标签问题1.通过将vue版本号从2.3.3换成2.5.2是可以解决2.同时注意更换vue-templ...原创 2020-01-13 11:47:58 · 378 阅读 · 0 评论 -
SpringBoot整合shiro解决前后台分离 vue跨域OPTIONS预请求问题
前后分离,使用自定义token作为shiro认证标识,实现springboot整合shiro直接进入主题,项目是使用springboot,框架用的shiro做权限,mybatis做orm框架,项目需要做前后分离,这样就会导致一个问题,shiro是根据sessionID来识别是不是同一个request,但如果前后分离的话,就会出现跨域的问题,session很可能就会发生变化,这样就需要用一个标记来...原创 2020-01-08 22:32:25 · 1814 阅读 · 4 评论