首页 > 其他分享 >Vue 3.0 + Element-Plus + Ruoyi

Vue 3.0 + Element-Plus + Ruoyi

时间:2024-04-01 22:44:46浏览次数:30  
标签:Vue redis Ruoyi ruoyi Plus 模块 存放 搭建

1 项目搭建

1.1 项目源码

1.2 项目架构

  • 后端目录结构
    • ruoyi-admin:后台服务的核心模块,包含主要的业务处理逻辑。
    • ruoyi-common:公共模块,包含工具类和通用代码。
    • ruoyi-framework:框架核心,包含安全、配置和核心管理功能。
    • ruoyi-generator:代码生成模块,用于自动生成代码。
    • ruoyi-quartz:定时任务模块,管理定时任务。
    • ruoyi-system:系统基础模块,包含用户、权限、日志等基础服务。
    • pom.xml:Maven配置文件,管理项目依赖。
  • 前端目录结构(ruoyi-ui)
    • src:存放源代码。
      • api:存放各种API调用接口。
      • assets:存放静态资源,如图片、样式文件。
      • components:存放Vue组件。
      • layout:应用的布局组件。
      • router:Vue路由配置。
      • store:Vuex状态管理。
      • views:应用的视图文件。
    • public:存放公共文件,如index.html。
    • package.json:Node.js的配置文件,管理前端项目的依赖。

1.3 搭建

  • 项目下载或拉取到本地
  • 环境准备
    • node.js (npm命令)
    • mysql
    • redis
    • jdk
    • maven自定义仓库
  • mysql数据库搭建
    • 创建ry-vue数据库,编码规则为utf8mb4,否则运行脚本后,项目运行报错
    • 执行sql文件夹下两个sql脚本
  • 后端配置修改
    • ruoyi-admin\src\main\resources\application-druid.yml
      • 数据库用户名与密码修改
      • 如果redis设置密码,也需要修改

1.4 运行

  • 开启redis服务(可直接执行redis-server.exe)
    image
  • 后端直接运行
    image
  • 前端
    • 使用cmd命令窗口,只一次执行需要先执行
      npm install
    • 再执行(非第一次直接执行该命令)
      npm run dev
      image
    • 访问地址
    • 登录
      • 账号admin
      • 密码admin123
        image

2 新模块搭建

2.1 后端代码

2.1.1 模块搭建

image

标签:Vue,redis,Ruoyi,ruoyi,Plus,模块,存放,搭建
From: https://www.cnblogs.com/mlstudyjava/p/18108171

相关文章

  • Vue.js基础指令
    (在讲指令之前,可以先了解插值表达式,如果已经知道,当我没说)一.插值表达式1.数据绑定最常见的形式就是双大括号的文本插值,Mustache上属性的值替代。只要绑定的数据对象上属性发生了改变,插值处的内容都会更新。,message是将数据解析成纯文本的,也就是说,就算中含有了html,message......
  • vue3 设置el-dialog height超过滚动条
     方法一:<stylescoped>::v-deep.el-dialog.el-dialog-body{height:500px;overflow-y:auto;}</style> 如果要设置动态的高度话,则要在setup里面设置 <script>exportdefaultdefineComponent({setup:{constcssContent=ref({heigh......
  • 前端技术栈和Vue学习总结
    前端技术栈+Vue笔记ES6新特性1.let1)let声明有严格的局部作用域​ 此时"console.log("job="+job)"将报错 {varname="zy学习";letjob="java工程师";console.log("name="+name)console.log("job=&quo......
  • vue在组件销毁的时候将异步请求撤销
    背景Vue2+ArcGISJS加载图层使用FeatureLayer.queryFeatures(query)对服务端执行地理数据查询请求。该请求为fetch类型。复现Bug:刚打开专题A,未等加载完,点击快速切换到共用同一个地图的新专题B,地图却加载专题A的数据图层。原因:由于地图还是用的同一个对象,且该函数Feat......
  • SpringBoot集成MyBatis-Plus快速入门Demo
    目录1.MyBatis-Plus概述2.MyBatis-Plus框架结构3. MyBatis-Plus快速入门3.1 创建表3.2 创建工程3.3 导入依赖3.4添加配置文件application.yml,配置数据库信息3.5 创建实体类(包括自动填充)3.6创建配置类(包括配置乐观锁、分页、逻辑删除等插件) 3.7编写自动填......
  • vue3中播放flv流视频,以及组件封装超全
    实现以上功能的播放,只需要传入一个流的地址即可,当然组件也只有简单的实时播放功能下面直接上组件里面的flvjs通过npmiflv.js直接下载 <template><divclass="player"style="position:relative;"><pstyle="position:absolute!important;top:10px;lef......
  • 大屏可视化项目示例--基于Vue3+vite2+echart+mock+axios+dataV
    图例: 项目环境:Vite、Echarts、Npm、Node、axios、mock、vue3、dataV。项目地址:IofTV-Screen-Vue3:......
  • src文件夹别名配置-Vue
    修改vite.config.js文件import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//@ts-ignoreimportpathfrom'path'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue()],resolve:{......
  • Vue — Vue3.0状态管理工具Pinia
    一、什么是Pinia?Pinia是一个专门为Vue3设计的状态管理库。它的目标是提供一种简单、直观的方法来管理Vue应用的状态,同时充分利用Vue3的响应式系统和组合式API。Pinia主要特点包括:基于Vue3:Pinia是专门为Vue3设计的状态管理库,充分利用了Vue3的响应式系统......
  • Vue tableList:<any>[]介绍
    letdata=reactive({tableList:<any>[]});在这段代码中,tableList:[]表示tableList是一个数组,数组中的元素类型可以是任意类型(即TypeScript中的any类型)。[]中的尖括号<>是TypeScript中的类型断言语法,用于指定数组的元素类型。表示任意类型,即可以是任何......