Vue实战
关注
分享
扫一扫
文章平均质量分 66
总结自己学习VUE过程中的一些实战技巧，目的在于和天下朋友共享，封闭的知识终究难以发展，唯有共享才能共赢。坚持不懈，自己成全自己，那么人人都是大神。
罗汉爷
每一个不曾起舞的日子，都是对生命的辜负！
展开
-
使用vue+kkFileview组件实现各种类型文件预览
项目使用Vue获取需要预览的项目文件列表，然后调用kkFileview预览接口实现文档在线预览。通过切换select option选项实现文件预览切换，非常贴近实际业务。原创 2024-10-24 15:11:12 · 1577 阅读 · 0 评论 -
vue请求springboot接口下载zip文件
其实只需要按照普通文件流下载即可，以下是一个例子，仅供参考。原创 2024-08-08 20:56:42 · 654 阅读 · 0 评论 -
uniapp实现点击加载更多
举个栗子：外卖app当订单商品数量比较多时，不方便一次性展示出来。通常会展示一部分，并在页面给出一个查看更多功能。点击后即可自定义展示剩余内容，比如可以每次点击多展示N个内容，或展示所有。以下为整个页面的所有代码，涉及到的数据可以自己造一些，此处不再赘述。...原创 2022-07-02 18:28:03 · 4097 阅读 · 0 评论 -
Springboot+Vue+ElementUI实现的宿舍管理系统
项目说明doman是一个基于Springboot+Vue实现的前后端分离的宿舍管理系统。项目为本人亲手打造，需要的朋友可以拿去做个修改也是不错的。大神请忽略：）项目功能详细请看功能演示： Springboot+Vue+ElementUI实现的宿舍管理系统（前后分离） 系统管理：用户管理、角色管理、菜单管理、字典管理、部门管理业务管理：公告管理、学生管理、楼栋管理、宿舍管原创 2022-05-21 23:12:24 · 1289 阅读 · 1 评论 -
springboot+vue+elementui实现文件上传下载删除DEMO
说明前面搜索了几个关于springboot+vue+elementui上传下载的文章，感觉写的都不尽如人意。要么是功能不完善，不好用。再者就是源码提供的实在差劲，都不完整。一气之下，自己搞了一个实用的完整版DEMO，有需要的朋友拿走稍加改动就能使用。项目源码源码已经整理好了，如何运行直接看根路径下的README.md。https://gitee.com/indexman/springbootdemo效果展示工程结构前端代码<!DOCTYPE html><html l原创 2022-05-10 17:56:40 · 1674 阅读 · 0 评论 -
el-dialog关闭后重置表单和校验提示
问题说明最近测试反馈操作某新增/修改表单，点击【取消】或【关闭】窗口后再次点击【新增】或【修改】发现校验提示仍然存在！问题原因项目采用Vue+ElementUI，修改表单的窗口控件采用el-dialog中添加el-form实现，默认在关闭和取消操作是没有绑定任何事件的，所以不会去清除原有的validate校验提示信息。解决方案1、在el-dialog元素上绑定一个@close事件，指向一个自定义函数，例如此处叫做：reset(formName)意思就是点击关闭按钮重置表单，同时清空校验信息。例如原创 2021-10-19 12:11:40 · 3023 阅读 · 1 评论 -
vue项目设置favicon
1.准备一个favicon放在项目的static文件夹下：2.修改打包配置开发环境修改build/webpack.dev.conf.js，找到new HtmlWebpackPlugin配置项，增加favicon配置：生产环境修改build/webpack.prod.conf.js，具体修改同上。...原创 2021-10-16 17:21:57 · 572 阅读 · 0 评论 -
el-upload使用http-request自定义上传和进度条实战
介绍项目中发现使用默认的el-upload上传动作发送上传请求的时候不会带上请求头，于是想通过自定义请求也就是http-request来自定义上传。实践证明这条路是通的，不过有个小问题就是原本上传的进度条没了。于是搞一个自定义进度条。实现效果表单<el-upload class="upload-demo" action="" :http-request="uploadMehod" :before-remove="beforeRemove" :limit="1" :fil原创 2021-09-24 09:18:04 · 10503 阅读 · 2 评论 -
Javascript操作对象数组实现增删改查
1.介绍最近帮朋友弄一个简单的针对json数组的增删改成页面，正好涉及到了js去操作对象数组实现增删改查功能。我估计很多朋友应该也会遇到这类操作，所以记录一下以便分享。2.数据准备这里我就以学生对象数组为例了，其实这个数组和json数组操作起来基本一致的，转换一下即可。例如可以使用JSON.parse将一串JSON字符串转换为js对象数组。测试数据：// 学生对象数组var students = [ {id:1, name: "张三", age: 14}, {id:2, name原创 2021-07-03 16:14:16 · 1381 阅读 · 2 评论 -
Vue+SpringBoot+ElementUI实战学生管理系统-10.学生管理模块
1.章节介绍前一篇介绍了教师管理模块，这一篇编写学生管理模块，需要的朋友可以拿去自己定制。：）2.获取源码源码是捐赠方式获取，详细请QQ联系我 ：）！3.实现效果学生列表修改学生4.模块代码页面布局<template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb原创 2021-01-27 09:11:23 · 1467 阅读 · 2 评论 -
Vue+SpringBoot+ElementUI实战学生管理系统-9.教师管理模块
1.章节介绍前一篇介绍了班级管理模块，这一篇编写教师管理模块，需要的朋友可以拿去自己定制。：）2.获取源码源码是捐赠方式获取，详细请QQ联系我 ：）！3.实现效果教师列表修改教师4.模块代码页面布局<template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb原创 2021-01-27 09:08:46 · 1123 阅读 · 0 评论 -
Vue+SpringBoot+ElementUI实战学生管理系统-8.班级管理模块
1.章节介绍前一篇介绍了专业管理模块，这一篇编写班级管理模块，需要的朋友可以拿去自己定制。：）2.获取源码源码是捐赠方式获取，详细请QQ联系我 ：）！3.实现效果班级列表修改班级4.模块代码页面布局<template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb原创 2021-01-27 09:07:19 · 1229 阅读 · 1 评论 -
Vue+SpringBoot+ElementUI实战学生管理系统-7.专业管理模块
1.章节介绍前一篇介绍了院系管理模块，这一篇编写专业管理模块，需要的朋友可以拿去自己定制。：）2.获取源码源码是捐赠方式获取，详细请QQ联系我 ：）！3.实现效果专业列表修改专业4.模块代码页面布局<template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb原创 2021-01-27 09:04:49 · 524 阅读 · 1 评论 -
Vue+SpringBoot+ElementUI实战学生管理系统-6.院系管理模块
1.章节介绍前一篇介绍了用户管理模块，这一篇编写院系管理模块，需要的朋友可以拿去自己定制。：）2.获取源码源码是捐赠方式获取，详细请QQ联系我 ：）！3.实现效果院系列表修改院系4.模块代码页面布局<template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb原创 2021-01-26 22:39:14 · 510 阅读 · 0 评论 -
Vue+SpringBoot+ElementUI实战学生管理系统-5.用户管理模块
1.章节介绍前一篇介绍了项目的API接口设计，这一篇编写用户管理模块，需要的朋友可以拿去自己定制。：）2.获取源码源码是捐赠方式获取，详细请QQ联系我 ：）！3.项目截图列表操作动态图4.用户管理页面布局<template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcr原创 2021-01-26 22:28:09 · 615 阅读 · 0 评论 -
Vue+SpringBoot+ElementUI实战学生管理系统-4.后端API编写
1.章节介绍前一片介绍了项目的表结构设计，这一篇编写后端API，需要的朋友可以拿去自己定制。：）2.获取源码源码是捐赠方式获取，详细请QQ联系我 ：）！3.项目截图登录页列表操作动态图后端接口设计登录接口@RestController@RequestMapping("/api")public class LoginController { @Autowired private UserService userService; @PostMappi原创 2021-01-24 16:29:21 · 920 阅读 · 0 评论 -
Vue+SpringBoot+ElementUI实战学生管理系统-3.表结构设计
1.章节介绍前一篇介绍了如何搭建前端工程，这一篇讲一下表结构设计，需要的朋友可以拿去自己定制。：）2.获取源码源码是捐赠方式获取，详细请QQ联系我 ：）！3.项目截图登录页列表操作动态图4.表结构设计用户表CREATE TABLE `tb_user` ( `id` int(10) NOT NULL AUTO_INCREMENT COMMENT 'id', `username` varchar(100) DEFAULT NULL COMMENT '用户名', `ni原创 2021-01-24 15:02:18 · 802 阅读 · 3 评论 -
Vue+SpringBoot+ElementUI实战学生管理系统-2.搭建Vue+elementUI脚手架
1.项目介绍前一片介绍了项目的整体情况，这一篇开始搭建前端工程，需要的朋友可以拿去自己定制。：）2.获取源码源码是捐赠方式获取，详细请QQ联系我 ：）！3.项目截图登录页列表操作动态图4.搭建前端工程只挑关键步骤讲，详细看源码。安装NodeJShttp://nodejs.cn/ 下载安装包安装。安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org安装webpacknpm i原创 2021-01-24 14:16:04 · 962 阅读 · 2 评论 -
ElementUI导入Excel文件
功能介绍最近用ElementUI做管理系统需要把excel数据导入到系统内，我想这是一个很常见的功能点，把它分享出来，希望对大家有所帮助：）实现效果实现步骤1.定义导入组件<el-upload :show-file-list="false" accept="application/vnd.ms-excel" action="http://localhost:9000/api/student/upload"原创 2021-01-21 20:38:59 · 4487 阅读 · 2 评论 -
ElementUI导出表格数据为Excel文件
功能介绍将列表的数据导出成excel文件是管理系统中非常常见的功能。最近正好用到了ElementUI+Vue的组合做了个导出效果，拿出来分享一下，希望可以帮到大家：）实现效果实现步骤1.定义导出按钮 <el-button @click="exportData" type="success" icon="el-icon-download"> 导出数据 </el-button>2.定义导出方法这里提供了2种方式导出，请根据需要自选。// 导出数据 e原创 2021-01-21 20:11:14 · 7208 阅读 · 9 评论 -
Vue+SpringBoot+ElementUI实战学生管理系统-1.项目介绍
1.项目介绍前段时间有位老铁问老徐有没有Vue+SpringBoot+ElementUI前后分离的项目想学习下，抱歉前端时间有点忙。千呼万唤始出来，做得不是很到位，需要的朋友可以拿去自己定制。：）2.获取源码源码是捐赠方式获取，详细请QQ联系我 ：）！3.功能介绍4.软件架构5.效果展示登录页列表操作动态图源码是捐赠方式获取，详细请QQ联系我 ：）！...原创 2021-01-21 17:48:08 · 2070 阅读 · 6 评论 -
Vue+ElementUI实现用户管理前后分离实战二：API接口篇
项目介绍上一篇介绍了前端相关实现代码和效果，本篇则介绍后端接口API如何实现。 ：）上一篇地址：https://blog.youkuaiyun.com/IndexMan/article/details/112480590项目截图用到的技术栈SpringBootMybatis-PlusMysql实现的API如下1.登录接口2.列表接口3.保存接口4.删除接口5.单条查询接口主要代码这里主要列一下主要代码片段，完整请看项目源码。LoginController@RestC原创 2021-01-11 19:30:53 · 741 阅读 · 4 评论 -
Vue+ElementUI实现用户管理前后分离实战一：前端篇
项目介绍前几天有老铁问我能不能写一个Vue+ElementUI+SpringBoot后端的前后分离项目，最近有点忙，但今天他还是来了！希望对大家能有点帮助，大家还想要点啥也可以加我QQ或给我留言 ：）用到的技术栈界面布局和组件：Vue、ElementUI、LessAjax请求：axios其他：sessionStorageapi接口：spring boot实现效果展示主要代码这里只列几处重要代码，详细请看项目源码。登录页<template> <di原创 2021-01-11 19:14:51 · 973 阅读 · 9 评论 -
eslint+prettier 统一代码风格
1.实现效果Eslint校验代码语法，prettier统一格式化代码，按下保存自动修复eslint错误，自动格式化代码。2.安装vscode插件VeturESLintPrettier - Code formatter3.配置vscode设置文件–首选项–设置，打开json模式，添加以下配置：{ // 控制工作台中活动栏的可见性。 "workbench.activityBar.visible": true, //主题设置 "workbench.colorTheme": "原创 2020-07-19 09:56:24 · 2730 阅读 · 0 评论 -
vue+element-ui项目搭建实战
1.使用vue ui创建vue工程利用vue-cli提供的图形化工具快速搭建vue工程：命令行运行：vue ui工程结构说明build：项目构建webpack（打包器）相关代码config：配置目录，包括端口号等node_modules：npm加载的项目依赖模块src：主要代码开发目录：assets：放置一些图片components：放置组建文件App.vue：项目入口文件main.js：项目的js核心文件router：Vue路由文件目录， 在router/index.js中原创 2020-07-15 17:09:15 · 8410 阅读 · 6 评论 -
Vue实现简单图书管理例子
以下内容整理自网络。说明本例主要涵盖以下知识点：数据绑定 条件与循环 计算属性 监听器 过滤器 常见数组和对象操作 vue生命周期示例演示代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=...原创 2020-03-18 20:38:22 · 1943 阅读 · 2 评论 -
Vue实例的生命周期
官方图解光看着图大家可能不是很理解，起码不是100%看得透，结合下面的代码就可以了。我先总结了一下几个函数执行时Vue实例的状态：执行beforeCreate，此时实例完全被创建出来，而data 和 methods 中的数据都还没有没初始化。 执行created，data 和 methods 都已经被初始化好了！通常：如果要调用 methods 中的方法，或者操作 data 中...原创 2019-04-02 16:25:38 · 314 阅读 · 0 评论 -
Vue实现静态列表增删查功能
知识点1.双向数据绑定2.自定义指令3.自定义过滤器4.v-for循环对象数组5.ES6操作数组的新方法：forEach some filter findIndex实现效果页面源码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF...原创 2019-04-01 15:54:27 · 2431 阅读 · 0 评论 -
vscode添加自定义html片段
最近在学vue，用的是微软的vscode 开发工具。很不错，赞一下微软。里面包含了众多插件大家可以各取所需。另外有一项实用的功能，User Snippets用户自定义代码段，对于那些需要重复编写的代码段 用一个快捷键自动补全，很省事。下面就演示一下，代码如下："vh": { "prefix": "vh", // 触发的关键字 输入vh按下tab键 "body": [ ...原创 2019-03-30 17:57:11 · 2587 阅读 · 0 评论 -
Vue实现简单计算器功能
知识点：v-model双向绑定v-on事件绑定实现效果源码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wid...原创 2019-03-30 17:28:48 · 1756 阅读 · 3 评论