vue
关注
分享
扫一扫
踏 浪
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue前端项目-代码生成-主页(查询表格数据)
1、前端页面1.1 代码生成 页面创建 src / views / tool / gen / index.vue 页面，内容如下<template> <div class="app-container"> 111 </div></template><script>export default { name: "Gen", data() { return {}; },};</scri原创 2020-10-14 17:17:58 · 4295 阅读 · 1 评论 -
SpringBoot后端项目-代码生成-主页
1、查询生成的表数据对应前端的 API：/tool/gen/list1.1 Controller 层package com.ruoyi.project.tool.gen.controller;/** * 代码生成 操作处理 * * @author ruoyi */@RestController@RequestMapping("/tool/gen")public class GenController extends BaseController { @Autowi.原创 2020-10-14 16:49:36 · 1332 阅读 · 0 评论 -
Vue前端项目-系统监控-数据监控
实现效果:1、前台vue 项目创建 src / views / monitor / druid / index.vue 页面， 内容如下：<template> <div v-loading="loading" :style="'height:'+ height"> <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />原创 2020-09-10 10:47:25 · 5197 阅读 · 2 评论 -
Vue前端项目-用户管理-增删改（上）
目录1、按钮界面2、修改和删除按钮状态控制3、添加和修改的对话框4、点击 “新增”方法5、新增用户的保存操作6、修改用户7、删除用户8、总结实现效果图：1、按钮界面在src / views / system / user / index.vue页面中，添加 五个按钮分别为 “新增”，“修改”，“删除”，“导入”和 “导出”在 搜索和重置 按钮后面 添加如下代码： <el-row :gutter="10" class="mb8...原创 2020-09-08 16:13:11 · 9248 阅读 · 2 评论 -
Vuex中的state
目录1、项目代码2、子组件访问 store 中数据3、mapState辅助函数1、项目代码新建 demo05文件夹 -》 在文件夹下创建 index.html内容如下:<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...原创 2020-06-30 11:04:37 · 460 阅读 · 0 评论 -
Vuex第一个例子
目录1、项目代码2、使用与调试3、总结1、项目代码新建 demo04 文件夹 -》 在文件夹下创建 index.html内容如下:<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-06-30 10:03:04 · 296 阅读 · 0 评论 -
覆盖element-ui 中的样式
需求：我们在使用 element-ui 绘制页面时，有时候需要重写 element-ui 组件样式， 但会发现直接重写会失效！！分析:原因在于<stylescoped> 收到这scoped 的影响解决:因此我们如果要重写样式，需要在后面添加 <style></style> 标签,把要重写的样式写在里面。注意添加 !important 提高优先级...原创 2020-05-10 13:18:16 · 3718 阅读 · 0 评论 -
Vue前端项目-上线部署-nginx代理解决跨域问题
目录1、后端项目1.1、已完成内容1.2、把后台若依SpringBoot 项目打成 jar1.3、上传 ruoyi 的jar包到远程服务器1.4、运行 jar包1.5、关闭防火墙2、前端项目2.1、打包前端项目2.2、本地安装 nginx2.3、配置首页和代理2.4、nginx 命令1、后端项目1.1、已完成内容redis安装 mysql安...原创 2020-04-20 00:11:32 · 4657 阅读 · 1 评论 -
前后端分离项目跨域问题及解决方案
目录1、什么是跨域2、前后端分离项目中的跨域问题3、方法一：SpringBoot后端进行处理4、方法二：在Vue前端进行处理5、总结1、什么是跨域请求同域资源：在域名 （或 ip 地址）相同，端口号相同下的请求资源，可以看做是同域资源请求跨域资源：请求的资源只要 是 域名（或 ip 地址）、端口号中任意一个不同的资源都可以认为是跨域资源如：端口...原创 2020-04-18 20:00:01 · 33641 阅读 · 7 评论 -
Vue前端项目-用户管理-导出用户列表
目录1、Vue端(查询数据)1.1、导出按钮添加点击事件1.2、定义导出方法1.3、确认框1.4、引入 导出用户方法（即 exportUser方法）1.5、定义导出用户方法2、Vue端（下载数据）2.1、定义通用的下载方法2.2、全局挂载下载方法2、SpringBoot后台2.1、导入依赖2.2、Controller层处理导出方法2.3、导出工...原创 2020-04-09 17:27:16 · 1945 阅读 · 2 评论 -
Vue前端项目-用户管理-条件搜索界面
目录1、用户管理页面2、导入Element-UI相关组件3、添加全局样式4、全局挂载获取字典的方法5、获取字典方法6、Controller层代码7、Service接口层8、Service接口实现类层9、Mapper接口10、Model实体类11、常量类12、映射描述文件实现效果图：1、用户管理页面在 src / views / ...原创 2020-04-06 11:27:30 · 6514 阅读 · 2 评论 -
Vue前端项目-用户管理-显示用户列表(下)
目录1、表格中添加这三列2、导入elementui组件3、全局挂载解析日期的处理方法4、日期处理方法实现效果:1、表格中添加这三列在 src / views / system / user / index.vue 中的 el-table 表格添加 <el-table-column label="状态" align="center">...原创 2020-04-05 17:52:24 · 1457 阅读 · 4 评论 -
Vue前端项目-用户管理-显示用户列表(上)
目录1、用户管理页面2、导入相关的 element-ui 组件3、查询用户列表API4、全局挂载方法5、添加日期范围方法6、定义分页组件7、scroll-to 文件8、未完成部分9、Controller层10、Service层11、Service的 impl12、Mapper接口13、Mapper接口映射描述文件实现效果图：1、用户管...原创 2020-04-05 16:31:30 · 5209 阅读 · 1 评论 -
SpringBoot2后端项目-定义Controller基类和返回结果集
目录1、定义Controller基类2、日期处理工具类3、sql操作工具类4、引入分页插件依赖5、返回表格分页数据对象6、表格数据处理1、定义Controller基类package com.ruoyi.framework.web.controller;/** * web层通用数据处理 * * @author ruoyi */public cla...原创 2020-04-05 12:49:40 · 1959 阅读 · 0 评论 -
Vue前端项目-首页-面包屑-显示当前路径
目录1、面包屑组件1.1、对breadcrumb组件二次封装1.2、引入面包屑组件2、导航菜单点击2.1、新增用户管理和角色管理页面2.2、测试实现效果：1、面包屑组件1.1、对breadcrumb组件二次封装新建 src / components / Breadcrumb / index.vue 组件<template> <...原创 2020-04-03 12:28:57 · 7561 阅读 · 1 评论 -
Vue前端项目-首页-实现首页路由重定向
目录1、创建首页组件2、修改路由3、在 AppMain组件中设置路由占位符实现效果:1、创建首页组件新建 src / views / index.vue 组件, 内容<template> <div class=""> <h1>这是index 首页</h1> </div></temp...原创 2020-04-02 23:40:06 · 4643 阅读 · 3 评论 -
Vue前端项目-首页-左侧菜单栏-根据设备决定侧边栏的隐藏情况
目录1、完成步骤1和21.1、设备处理文件1.2、主页中引用步骤1.1创建文件1.3、测试2、Vuex中定义全局变量device2.1、定义 device 变量,并提供修改方法2.2、提供device 的get方法2.3、在进入首页或翻转屏幕时，重新设置device 的值3、完成步骤4和53.1、修改 index 主页3.2、移动端样式4、完成...原创 2020-04-02 17:56:18 · 14087 阅读 · 3 评论 -
Vue前端项目-首页-左侧菜单栏的展开与折叠
目录1、思路2、按钮单击事件3、父组件调用 Vuex 改变侧边栏状态4、新建app模块用于管理整个应用状态5、左侧菜单栏6、隐藏样式实现效果展开效果图:合并效果图:1、思路点击按钮（展开与折叠按钮），触发左侧菜单栏的张开与折叠，需要使用一个变量（state.sidebar.opened）来控制 为什么要用state.sidebar.open...原创 2020-04-01 00:24:04 · 23587 阅读 · 5 评论 -
Vue前端项目-首页-动态菜单
目录1、侧边栏组件1.1 侧边栏组件1.2、getters.js1.3、permission 模块1.4、app 模块1.5、vuex中添加新模块1.6、样式文件1.7、变量scss文件2、SidebarItem 组件2.1 SidebarIntem 组件2.2、验证工具类2.3、菜单项组件2.4 链接组件在完成 <首页-获取路由信息&...原创 2020-03-30 22:28:58 · 5404 阅读 · 0 评论 -
Vue前端项目-首页-svg图标
目录1、安装依赖2、组件全局注册2.1、使用完整的vue.js2.2 main.js文件到导入注册组件2.3、icons的 index.js 文件3、Svg组件3.1、Svg组件文件3.2、校验工具类4、Svg配置4.1、在 vue.config.js 中,新增svg配置4.2、svg文件夹5、使用1、安装依赖cnpm install...原创 2020-03-29 21:50:27 · 1281 阅读 · 1 评论 -
Vue前端项目-首页-获取路由信息
目录前端部分1、路由导航守卫2、store中添加 permission模块3、路由模块4、路由APISpringBoot后端1、Controller层2、实体类3、Service 层4、Service实现类5、Mapper 接口6、映射描述文件在上一章 <Vue前端项目-首页-获取角色> 后, 接着介绍登陆完成后, 发生重定向, ...原创 2020-03-27 10:41:55 · 3100 阅读 · 0 评论 -
Vue前端项目-首页-获取角色
目录Vue端代码1、前端守卫设置2、Vuex中定义getter3、新建 getters.js 文件4、定义GetInfo 方法获取用户角色信息5、获取用户信息API6、请求拦截器SpringBoot 端1、Controller层2、Service 层3、Mapper接口4、映射描述文件描述:当我们登陆完成后,进去到首页, 在重定向到首页之前...原创 2020-03-26 15:31:20 · 5285 阅读 · 0 评论 -
Vue前端项目-跨域问题
描述:登录成功后,跳转到首页, 发起请求获取 角色信息, 发现前端报错了,但后端一直无法接收到 rquest.getHead("Authorization") 的值这时在浏览器中,我们发现已经发送的请求中是含有Authorization, 如图解决:在SecurityConfig 类 configure方法中,添加如下既可以.antMatchers(HttpMetho...原创 2020-03-26 14:40:51 · 1214 阅读 · 2 评论 -
Vue前端项目-主页布局-左侧导航菜单（静态）
目录1、修改侧边栏组件2、滚动条样式3、导入并使用组件实现效果：NavMenu 的详细用法：https://element.eleme.cn/#/zh-CN/component/menu1、修改侧边栏组件为侧边栏组件，添加导航菜单侧边栏组件： src / layout / components / Sidebar / index.vue<tem...原创 2020-03-25 14:54:36 · 23061 阅读 · 0 评论 -
Vue前端项目-主页布局-01
目录1、安装sass-loader2、全局样式3、在 main.js 中引用全局样式4、主页布局5、Sidebar组件6、重新运行项目，观察侧边栏效果7、顶部导航条（Navbar）8、AppMain组件1、安装sass-loader项目中用到的 scss 来做样式文件， 所以需要先安装一下sass-loadernpm i sass-loader ...原创 2020-03-24 22:37:13 · 2396 阅读 · 1 评论 -
Vue前端项目-首页-知识点-引入多个Vue页面
目录1、编写主页2、添加路由3、测试首页4、导航栏组件5、主区域组件6、单页面引入7、多页面引入之前我们已经完成了登录功能，接下来我们将介绍主页介绍。为了方便主页的开发，我们可以先把 前端守卫的代码给注释掉， 放行所有请求。1、编写主页新建 src / layout / index.vue ，内容：<template> &l...原创 2020-03-23 22:01:23 · 2485 阅读 · 0 评论 -
SpringBoot2后端项目-用户登录-中
分析：前端 vue 部分（前端路由与导航守卫）：1、添加一个首页（ src / views / index.vue），这个做测试用的，里面放一句简单话即可。等做完登录功能后再来修改这个页面2、为这个首页添加 2条路由，此时我们的路由规则里面已经有 3条const routes = [ { path: '/login', component: Login }, { pa...原创 2020-03-20 21:41:44 · 2422 阅读 · 1 评论 -
vue设置
1、vscode 格式化代码本人习惯用 ctrl + shift + f , 来格式化代码修改该 vscode 格式化代码快捷键步骤文件 -> 首选项 -> 键盘快捷方式输入 "格式化" 搜索2、vue文件模板当我们创建 XXX.vue 文件时, 我们希望 输入 vue + tab 帮助我们快速生成 vue 末班文件具体操作1、文件 -> 首...原创 2020-03-19 20:39:31 · 1944 阅读 · 0 评论 -
SpringBoot2后端项目-用户登录-上
本次使用的是 Springsecurity 做安全认证框架1、引入依赖 <jwt.version>0.9.0</jwt.version> <!-- spring security 安全认证 --> <dependency> <gr...原创 2020-03-18 17:17:21 · 1948 阅读 · 2 评论 -
SpringBoot2后端项目-异步方法-纪录用户登录信息
目录1、实体类1.1 实体类基类1.2系统访问记录实体类2、工具类2.1ServletUtils2.2IpUtils2.3AddressUtils2.4LogUtils3 通用常量4、系统访问日志 服务层、Mapper接口及实现类5、异步工厂 记录登录信息5.1、引入解析浏览器、操作系统的工具类5.2、异步工厂记录登录信息1、实...原创 2020-03-17 17:23:56 · 1668 阅读 · 0 评论 -
SpringBoot2后端项目-异常类-登录模块异常
1、基础异常类①、编写一个 基础的异常类， 后面我们自己定义多数的异常需要继承这个基础的异常类②、基础异常类 继承 RuntimeExceptionpackage com.ruoyi.common.exception;/** * 基础异常 * * @author ruoyi */public class BaseException extends RuntimeExce...原创 2020-03-17 15:24:35 · 1526 阅读 · 0 评论 -
SpringBoot2后端项目-国际化
目录1、配置国际化资源文件2、国际化资源文件3、工具类4、测试1、配置国际化资源文件在 application.yml 中添加 国际化资源文件配置spring: # 资源信息 messages: # 国际化资源文件路径 basename: i18n/messages2、国际化资源文件新建 resources / i18n /m...原创 2020-03-15 23:03:32 · 2086 阅读 · 1 评论 -
SpringBoot2后端项目-定时任务例子
1、基于Timer的定时任务1.1介绍在JDK1.5之前使用的都是 Timer来完成定时任务， 特点是 单线程执行定时任务，因此存在以下问题：多任务之间相互影响（只要有一个没有捕获的异常出现，其它任务便会自动终止运行） 多任务的执行是串行的，效率低1.2例子使用 PostMan 发送POST 请求：localhost:8888/ruoyi/login ，请求参数： 用户名、密码...原创 2020-03-15 21:05:37 · 928 阅读 · 0 评论 -
SpringBoot2后端项目-整合mybatis、druid
1、整合 mybatis、druid1.1 引入依赖需要的依赖有3个分别是： mysql驱动、springboot整合mybatis的starter、阿里数据库连接池 <properties> <java.version>1.8</java.version> <fastjson.v...原创 2020-03-13 14:11:17 · 1249 阅读 · 0 评论 -
SpringBoot2后端项目-验证码图片生成
1、项目创建1.1 初始化的 pom.xml文件主要内容: <!-- 项目坐标 --> <groupId>com.ruoyi</groupId> <artifactId>ruoyi</artifactId> <version>0.0.1-SNAPSHOT</version>...原创 2020-03-11 23:50:48 · 2080 阅读 · 1 评论 -
Vue前端项目-登录组件-登录功能(上)
需求分析:①、创建 login.vue 页面时，需要从 cookie 中获取 用户名、密码 和 记住我②、添加表单的数据校验功能③、点击登录按钮， 完成登录功能 此时若勾选了 "记住我" , 则需要将 用户名、密码和 记住我 添加到 cookie 中 发送异步登录请求 若请求成功，页面跳转到 "首页" 或 "重定向到之前访...原创 2020-03-10 22:51:11 · 40360 阅读 · 4 评论 -
Vue前端项目-登录组件-验证码生成
思路:在 创建组件时调用方法, 发送 axios 请求, 获取验证码图片和 验证码UUID（该UUID存入 redis的 key）这里只介绍vue前端验证码相关的， 至于后端是如何生成验证码和 UUID的，将在后续别的章节介绍！本章用到 axios 发送远程请求, 所以需要检查一下 axios 是否已安装?1、发送请求获取验证码1.1、 组件创建时，调用方法获取验证码l...原创 2020-03-09 16:52:07 · 2786 阅读 · 3 评论 -
Vue前端项目-登录组件-登录框界面
1、登录框组件设计需求：登录框居于屏幕中央显示；登录框中的表单元素分别有：用户名、密码、验证码、记住我；效果如图：注意:我们使用的是 element-ui 来做界面的, 当时我们创建项目的时候 选择组件按需导入因此当我们第一次到某组件时候需要在src / plugins / element.js 文件中导入该组件并将组件绑定到 vue 对象1.1 表单元素...原创 2020-03-09 15:45:16 · 28666 阅读 · 10 评论 -
Vue前端项目-登录组件-粒子背景
目录1、安装vue-particles 插件2、在main.js文件中全局引入3、在 login.vue 代码需求：将登录组件背景设置为 "粒子背景", 实现效果如图:1、安装vue-particles 插件npm install vue-particles --save-dev2、在main.js文件中全局引入import VueParticles...原创 2020-03-07 23:51:43 · 3738 阅读 · 3 评论 -
Vue前端项目-登录组件-添加
目录1、App.vue 文件2、创建 login.vue 组件3、设置路由文件4、测试需求：请求路径为 "/" 或 "/login" 时, 将路由到 login.vue 视图页面1、App.vue 文件需要在 App.vue 文件中放置一个 ""路由占位符""<template> <div id="app"> <!...原创 2020-03-07 23:15:08 · 1353 阅读 · 3 评论