![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
vue+elementUI
一个还没工作的研究僧
这个作者很懒,什么都没留下…
展开
-
Element UI+vue+Springboot实现分页数据加载
前言分页功能在web应用中属于最为常见的功能,特别是在用表格展示大量数据的场景下。前端实现首先选择Element UI的两个组件 el-pagination和el-table组件这两个组件没有必然的联系,el-table只需绑定数据源即可 <el-table :data="emps" border stripe> <el-table-column prop="name" label="姓名" align="left" fixed width="120">&原创 2021-05-16 10:38:03 · 801 阅读 · 0 评论 -
Springboot+websocket+vue实现监听mysql数据库且实时通知前端
前言前端采用:vue+sock.js+stomp.js后端采用:springboot+websocket项目需求:多个用户端提交报修信息,管理端web实时接收并显示。实现思路:参考我简单叙述下:后端通过轮询数据库进行监听,如何监听数据库及判断是否为新的报修信息–这部分业务代码可以参考上述链接。本篇文章的重点有两个:(1)前端如何建立websocket连接(2)后端如何通过websocket的订阅模式同时通知所有订阅者有新的消息到达。后端实现(1)导入websocket依赖 <原创 2021-04-18 21:41:56 · 7982 阅读 · 3 评论 -
Vue+elementUI+SpringBoot项目-上传用户头像(2)
前言上篇文章讲了前端如何上传文件,本篇文章主要讲解后端对于图片的接收和存储。分析(1)接收图片:controller参数采用MultipartFile(2)存储图片:将图片的二进制流直接存储在数据库,这样做肯定不太合理,会对数据库性能造成一定的影响。将图片的地址即url存储在数据库,图片实体存储在服务器的文件夹里,当服务器开启时,可以通过url直接访问到图片。实现(1)后端如何处理参数 @PutMapping("/") @Transactional public原创 2021-04-18 20:51:32 · 626 阅读 · 0 评论 -
Vue+elementUI+SpringBoot项目-上传用户头像(1)
前言 一直感觉头像上传是个非常基础简单的功能,可是实现此功能用了将近2天的时间,所以记录下走过的坑。 前端采用vue+elementui,后端采用springboot。本篇文章先介绍前端文件的上传,后一篇介绍后端如何进行接收和存储的。实现(1)首先用element ui为我们定义的头像上传组件。 <el-upload class="avatar-uploader" action="#" accept=".jpg,.jpeg原创 2021-04-18 20:29:08 · 1899 阅读 · 1 评论 -
Vuex数据刷新后,如何做持久化处理
前言今天做vue项目时需要实现多个组件的数据同步,首当其冲选择了vuex。vuex介绍:参考项目需求:在用户管理界面更改用户名及其头像成功时,主界面home的用户和头像要同步更新。分析 首先明确一点js代码是运行在内存中的,代码运行时的所有变量、函数也都是保存在内存中的。刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Local Storage、Session Storage等。 回到项目中,当我修改用户信息后一定会调用init方原创 2021-04-15 21:50:28 · 258 阅读 · 0 评论 -
Vue 如何解决跨域问题
springboot解决跨域问题 参考那么前端怎么解决跨域呢,设置代理。步骤:在vue项目的根目录创建 vue.config.jsproxyObj['/'] = { //websocket ws: false, //后端地址 target: 'http://localhost:8081', //是否跨域 changeOrigin: true, /* '^/'是个正则表达式,匹配路径 ''修改成的地址 */原创 2020-12-21 13:03:49 · 228 阅读 · 0 评论 -
Vue 路由按需加载(路由懒加载)
需求:vue前后端分离的项目中,需要动态加载所有的菜单项,我们无法在router.js里提前注册路由信息。解决: 需要我们按需注册路由(即运行时注册)步骤(1)后端传来的component一般都是字符串,我们需将其格式化成对象,然后按需注册。export const formatRoutes = (routes) => { let fmRoutes = []; routes.forEach(router => { //批量定义数据 后端传来的menu对象里的原创 2020-12-21 12:53:36 · 877 阅读 · 2 评论 -
Vue中axios的网络请求封装
在我们前后端分离的项目中,一般会使用http交互,vue推荐使用的网络请求框架是axios,其实就是在ajax基础上封装的框架,但是我们还可以在代码里对axios进行进一步的封装,方便我们直接使用。步骤(1)在vue的src根目录下创建utils包,在utils包下创建api.js文件(名字可以自定义),对各种类型的请求进行封装。import axios from 'axios'//根路径 方便全局修改let base = '';//post请求 键值对拼接在url地址上export原创 2020-12-17 20:57:08 · 312 阅读 · 0 评论 -
Java Script箭头函数及this指向问题
js的箭头函数是ES6标准中的,只要是对函数书写的一种简化。先看下普通函数与箭头函数的书写形式写箭头函数,我们记住一个顺序就好,参数、箭头、函数体、这个顺序记住就足够了,参数、箭头、函数体、这三个是必须的,函数名可以没有,但这三项必须有,一些简写的方式也是简写这三项里的东西。简写1、只有一个参数时,() 可省略//不简写var demo = (x) =>{ console.log(x);}//简写var demo = x =>{ console.log(x)原创 2020-12-16 10:53:36 · 380 阅读 · 0 评论 -
安装 Vue CLI 出错:npm ERR! EEXIST: file already exists, cmd shim ‘D:\nodejs\node_global\node_modules\@vu
npm命令 安装vue脚手架npm install -g @vue/cli出现如下错误npm ERR! code EEXISTnpm ERR! path D:\nodejs\node_global\node_modules\@vue\cli\bin\vue.jsnpm ERR! dest D:\nodejs\node_global\vuenpm ERR! EEXIST: file already exists, cmd shim 'D:\nodejs\node_global\node_mod原创 2020-12-14 13:57:18 · 11514 阅读 · 11 评论 -
Vue 的三种插槽 单个插槽、具名插槽、作用域插槽
目录 单个插槽 具名插槽 作用域插槽一、单个插槽单个插槽就是指,的作用类似于占位符。举个例子: //定义一个全局子组件 Vue.component('child',{ template: '<div><slot></slot></div>', }) var vm=new Vue({ el: '#root' })<!--引用child组件--><di原创 2020-12-05 20:35:25 · 629 阅读 · 0 评论