![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前台vue
关于vue方面
努力敲代码的咸鱼
这个作者很懒,什么都没留下…
展开
-
vue 实现文件下载
1.前台按钮 <el-button size="mini" icon="el-icon-edit-outline" type="primary" @click="fileDownload(scope.row)"原创 2021-04-16 15:45:02 · 1290 阅读 · 0 评论 -
前台vue框架+后台SpringBoot框架连通
准备前台框架可以参考通过代码搭建Vue项目后台框架IDEA 搭建SpringBoot项目准备必要的js文件首先我们需要定义一个全局变量,在后面我们需要改动地址就比较方便了1、global-variable.js//全局变量文件//baseURL:访问后台路径 const baseURL = 'http://localhost:后台的端口号';export default { baseURL,}前台访问后台肯定需要一个中间的桥梁,该桥梁我们用request.js2、r原创 2021-04-13 14:03:42 · 1054 阅读 · 1 评论 -
通过代码搭建 vue框架 详细教程
一、 安装node.js二、安装cnpmnpm install -g cnpm –registry=https://registry.npm.taobao.org三、安装脚手架cnpm install --global vue-cli四、搭建框架准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。1、确定自己项目存放的地方,清空输入cmd输入vue init webpack 项目名去原先设定的目录下看是否生成以下这些文件五、导入项目打开Vscode导入刚刚创建原创 2021-04-12 16:08:03 · 422 阅读 · 0 评论 -
vue-cli · Failed to download repo vuejs-templates/webpack: read ECONNRESET
vue下载模板时报 vue-cli · Failed to download repo vuejs-templates/webpack: read ECONNRESET这个时候不要慌,多试几次再看看我第一次报错,第二次就可以了原创 2021-04-12 14:47:23 · 846 阅读 · 0 评论 -
通过可视化界面搭建VUE框架 详细教程
一、安装Node.js1、从官网上下载安装包2、检查是否安装成功原创 2021-04-12 13:35:07 · 1226 阅读 · 0 评论 -
vue 登录加盐加密
vue前台加密,后台解密思路:1、先从后台获取加密方法2、将获取的加密方法给前台加密3.将加密后的密码和账户传入后台4、后台对前台传过来的密码进行解密前台:vue 安装“jsencrypt”: “^3.0.0-rc.1”main.js引用需要jsencrypt.js文件(function (global, factory) {typeof exports === ‘object’ && typeof module !== ‘undefined’ ? factory(e原创 2021-02-18 18:05:39 · 975 阅读 · 1 评论 -
前台接收type值,转换成对应的type的名称
**前台接收type值,转换成对应的type的名称**type是后台传过来的数据通过typeFormatter方法转换_self.statusOptions是对应的数据如下:row.type的值为id的值原创 2021-02-18 13:59:21 · 195 阅读 · 0 评论 -
Vue+Websocket 带参数使用
Websocket 带参数使用在页面初始化的时候就建立Websocketvue 前台1.在data(){定义websocket=null}2.在methods(){}以下方法 //打开一个websocket webSocket() { const wsurl = localhost:端口号 + "/deviceMonitorWebSocket/" + _self.userId +"/"+deviceId; _self.websoc原创 2021-01-29 15:49:05 · 6758 阅读 · 0 评论 -
vue element 表格排名
vue element 表格排名先上效果图步骤首先后台将数据排好传给前台 ,方便了前台不用二次转换;2.前台将数据放入表格,其中最前的排名通过 type=“index” 实现 ;<el-table-column type="index" align="center" :resizable="false" label="名次" width="100">将排名前三的进行特殊化<template slot-scope="scope">原创 2020-12-18 11:15:11 · 1989 阅读 · 0 评论 -
关于css3calc()函数不起作用解决办法
关于css3calc()函数不起作用解决办法经过几个小时的摸索解决办法如下使用calc()函数进行计算(包括常用的长度值比如%,px等)calc()函数支持 “+”, “-”, “*”, “/” 运算,注意:## 运算符前后必须空格隔开例如:calc(100% - 100px )‘-’ 前后需要空格如果还不起作用解决办法,在1的基础上将250px换成对应remcalc(100% - 2.133333 )还是不可以,则试试 calc(~“100% - 100px”) 可能是因为les原创 2020-12-04 16:01:14 · 1263 阅读 · 0 评论 -
vue 实现多个视频播放 vue-video-player
vue 实现多个视频播放 vue-video-player实现方式:利用vue的一个组件 vue-video-player步骤一:安装vue-video-player插件安装:npm install vue-video-player --save或者cnpm install vue-video-player --save步骤二:在main.js入口文件中引入import VideoPlayer from 'vue-video-player'require('video.js/dist/vide原创 2020-11-23 15:44:22 · 10806 阅读 · 2 评论 -
el-tree点击的节点文字设置颜色
vue 给el-tree点击的节点文字设置颜色解决步骤el-tree 默认点击节点不会有什么样式,看起来很丑而且体验效果有点差解决步骤1.直接在.vue页面里面加一下样式<style scope>.el-tree-node:focus>.el-tree-node__content{ background-color: #fff;//节点的背景颜色 color: #409eff;//节点的字体颜色}</style>注意:如果不起作用,可以试着把scope原创 2020-09-28 10:58:59 · 4028 阅读 · 3 评论 -
el-form中的rules校验
el-form中的rules不起作用问题描述:检查步骤:问题描述:写了prop标签但是在输入框填写输入后,还是提示请输入****检查步骤:1.先确定prop属性是否写在了标签后面2.检查表单的rule是否写了3.检查prop的值是否和v-model的值保持一致(最关键的检查)4.r如果是双重的则需要写成双重的(谨记prop的值和v-model的值保持一致)5.校验写法红色的是单个校验,一个字符绿色的双重(prop的值不是一个单词。而是对象里面的一个值)...原创 2020-09-15 16:32:56 · 3975 阅读 · 2 评论 -
VUE (el-upload) +SpringBoot 实现文件上传(带参数传入后台)
VUE+SpringBoot实现文件上传(带参数传入后台)前台:使用element-UI里面的步骤一先写一个文件上传的按钮(我这边是通过弹窗,将上传的文件先加入弹窗点击确定在进行上传)<el-buttonsize=“mini”icon=“el-icon-edit-outline”type=“primary”@click=“fileUpload(scope.row)”>附件上传步骤二:文件上传弹窗(这里用的是 el-upload 这个组件)</el-upload>原创 2020-09-02 17:56:56 · 8500 阅读 · 2 评论 -
vue 关闭tag标签后 清空keep-alive的页面数据
vue 关闭tag标签后 清空keep-alive的页面数据问题描述:tag标签页面相互切换页面保持离开时候的状态,当关闭标签页面,从侧面再次进入的时候页面还是离开时候的样子解决办法:1.首先检查route.matched[1].components.default.name里面的name属性是否存在如果不存在,那可能就是问题所在原因2.想办法给上文所说的name赋值这边就要说到为什么 keep-alive include和exclude无效问题因为include和exclude 使该标原创 2020-08-28 18:02:50 · 3291 阅读 · 4 评论 -
vue 出现 Avoided redundant navigation to current location: “*****“
vue 中重复点击菜单报Avoided redundant navigation to current location: “*****”虽然对项目无影响,但是强迫症的我看了还是很变扭解决方法:1.找到router文件夹下的index.js文件2.在index.js中加下面的代码import Router from ‘vue-router’//解决重复点菜单报红问题const originalPush = Router.prototype.pushRouter.prototype.push原创 2020-08-11 11:04:11 · 357 阅读 · 0 评论