从零入门开源框架---若依(前后端分离版)

news2025/2/24 4:14:54

一、若依是什么?
若依它就是一个开源项目,别人写好的代码,我们拿来进行二次开发,它主要是做数据和权限管理系统。
二、使用背景
任何公司的各种大的项目必然需要一个后台权限管理系统,这是必然的,但是如果不想投入太多人力物力去开发,又恰好有现成且比较好用的别人已经完成的项目直接供我们来使用,那么何乐而不为呢?
三、学习若依目标
1、使用、减少工作量
2、学习优秀的开源项目底层的编程思想,设计思路,提高自己的编程能力

介绍完毕,使用流程走起~~~~
一、学习一个东西,咱们首先想到得就是它的官网:(http://www.ruoyi.vip/)
在这里插入图片描述如上图它有四个版本,咱们今天说的是其中的前后端分离版本

二、使用具备条件
1、springboot+vue的开发基础
2、环境条件
jdk1.8+、mysql、redis、maven、vue
注:使用若依必须有redis,它的验证码和缓存数据都是存在redis中的,没有redis,项目跑不起来
3、使用项目步骤
(1)下载并运行
(2)看懂业务流程
(3)进行二次开发

下载
在这里插入图片描述
在这里插入图片描述
复制地址直接在idea中下载,也可以下载zip
注;下载的zip不要解压,直接在idea中打开
在这里插入图片描述
以上就是项目的整体结构,其中红色框的是后台的工程
绿色框的是前端工程,后端工程有6个,admin是主工程(后期只需启动它就可以)
前端工程我们给他单独打开
在这里插入图片描述
可以看到前端就是一个纯vue工程

运行
(1)配置数据库
在项目的目录中有个两个sql脚本,在自己本地的数据库中执行就可以

在这里插入图片描述
在这里插入图片描述
运行完大概就这些表。
然后在代码中修改数据库配置,改为自己的数据库信息,如下图在这里插入图片描述
(2)启动redis
cmd窗口进入到本地安装redis路径,执行命令:redis.server.exe,启动后,此窗口不要关闭

在这里插入图片描述
然后在代码中修改redis配置,如下图
在这里插入图片描述
(3)启动后台项目
在这里插入图片描述

验证启动是否成功,在浏览器访问:localhost:8080,出现如下界面,即为成功
在这里插入图片描述
(4)启动前端项目
单独打开前端项目,命令行执行:npm install 安装依赖
完成后,执行npm run dev 启动
在这里插入图片描述

启动后默认端口81,自动在浏览器打开

在这里插入图片描述
看到验证码后,说明前后端是联通的,验证码是从后台传过来的。

至此,若依前后端分离项目启动完成,可以结合自己的需求二次开发啦~~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405847.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

windows安装yarn 详细教程

1、yarn介绍:yarn是一个代码包管理器,它允许我们与来自世界各地的其他开发人员共享代码。想要更多了解可以进入官网查看:https://yarnpkg.com/getting-started 2、进入yarn官网,可以看见官网已经声明从新版本(16.10)开始&#xf…

Vue项目二 登录注册功能的实现

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言一、系统注册功能的实现1.配置注册页面路由2.注册页面的搭建3.api下发送ajax请求的文件创建二、后台数据服务的创建1.app.js文件的建立2.User.js文件的建立3.配置…

目前最流行的 5 大 Vue 动画库,使用后太炫酷了

⭐️ 本文首发自 前端修罗场(点击加入),是一个由 资深开发者 独立运行 的专业技术社区,我专注 Web 技术、答疑解惑、面试辅导以及职业发展。现在加入,私聊我即可获取一次免费的模拟面试机会,帮你评估知识点的掌握程度,…

vue3 antd项目实战——table表格的自定义筛选【纯前端filters过滤、自定义筛选table表格数据】

vue3 antd项目实战——table表格自定义筛选(使用filters属性实现表头列columns自定义筛选)往期知识调用(步骤不懂就看这儿)场景复现实战演示实例1——筛选发布状态🔥1、双向绑定表格列目录、表格数据2、编写列目录内容…

vue控制滚动条滑到某个位置

一.关于web开发的各种高度的计算介绍 设置当前滑动到的距离 语法一:window.scrollTop(x,y) 传俩个值 //x横坐标 y纵坐标 例:window.scrollTop(0,1000) 语法二:window.scrollTop(options) 传对象,对象里面放属性 w…

js遍历map(js遍历map对象)

javascript怎么遍历map var map new HashMap();map.put(a,1);map.put(b,2);遍历:var key map.keySet();for (var i in key){ alert(map.get(key[i]));}注:js 中使用map,要先导入一个HashMap.js文件 没要求,引入这个文…

【深入浅出imx8企业级开发实战 | 04】嵌入式Linux设备掉电数据容错研究

这是机器未来的第58篇文章 原文首发地址:https://robotsfutures.blog.csdn.net/article/details/126924015 《深入浅出i.MX8企业级开发实战》快速导航 【01】imx8qxp yocto工程构建指南 【02】Yocto工程repo源码gitee加速配置方法 【03】imx8qxp一键独立编译指南 【04】嵌入式…

三分钟创建一个新应用,ivx的神奇之处【PPT式程序开发】

像做PPT一样的可视化编程语言你想拥有吗,可以自己尝试一下。像PPT一样的编程语言 文章目录🍓🍓用ivx创建一个新的应用(零基础)🚀🚀🥭🥭点击链接,跳转到官网&a…

【Vue 路由(vue—router)二】路由传参(params的类型 、Query参数的类型、路由name)

目录 前言 一、路由传参 效果展示 1.params的类型 (后附源码) params的类型源码不要在意注释代码 2.​​​​​​query参数的类型(后附源码) query参数的类型源码同样无视注释代码 3.路由name 前言 此内容为连载&#xff0c…

一文搞懂JS-Web-API——DOM

🌈本系列文章是博主精心整理的面试热点问题,吸收了大量的技术博客与面试文章,总结多年的面试经历,带你快速建立前端面试知识体系。抓住每一场面试的机会,知己知彼才能百战百胜。直击技术痛点,主动出击&…

Pinia 数据持久化储存(pinia-plugin-persistedstate)

pinia需要使用pinia-plugin-persistedstate插件来进行数据的存储 插件官网地址: https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html 1、安装 这里对插件的安装就不多赘述了,放两张官网的截图 使用命令:npm i pi…

Vue--》计算属性与监视(侦听)属性的使用

目录 计算属性(computed) 监视属性(watch) 监视的两种方法 immediate选项 深度监视 计算属性(computed) 计算属性指的是通过一系列运算之后&#xff0c;最终得到一个值。这个动态计算出来的属性值可以被模板结构或methods方法使用&#xff0c;案例如下&#xff1a; <…

前端实战|React18极客园——登陆模块(token持久化、路由拦截、mobx、封装axios)

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f6e0;目前正在学习的是&#x1f525;React框架React框架React框架&#x1f525…

vite搭建vue2项目

问题提出 最近在做一个练习的小项目&#xff0c;由于要配合组成员的其它成员来搭建项目&#xff0c;大多掌握的技术栈都在vue2&#xff0c;用惯了vite来搭建&#xff08;vite真香~&#xff09;,就想着来搭建一个vue2的项目。原本以为查下百度很快可以搭好&#xff0c;没想到折…

【小程序从0到1】WXSS模版语法汇总

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f6e0;目前正在学习的是&#x1f525;React/小程序React/小程序React/小程序&am…

微前端vue项目实战 -- 乾坤qiankun框架 (一)

背景&#xff1a; 公司研发的项目主要是 GIS地图为基础的管理系统&#xff0c;由主体项目&#xff08;管理业务模块&#xff09; GIS地图应用&#xff0c;由于 GIS地图应用模块 会在多个地方使用&#xff0c;所以单独构建一个项目&#xff0c;分别在不同的业务场景中引用、交互…

JavaScript鼠标移动事件及案例

一、鼠标点击事件 1.onclick单击事件 鼠标单击时事件处理函数 <input type"button" id"bt" value"点击"> <script> //找到按钮并设置点击事件 document.getElementById("bt").onclick function (){ //被点击…

kkFileView部署及使用

Windows:kkFileView部署及使用前言部署Web引用普通webVue &#xff1a;需要引入base64.js前言 kkFileView支持主流文档的在线预览服务。官网地址 部署 kkFileView不需要集成&#xff0c;只需要部署到服务器即可。 从 Gitee 上下载最新的压缩包&#xff0c;或者从代码仓库中下…

【Vue+element-ui搭建前端页面】适用于初学者学习

作者有话说&#xff1a; 学习编程我们必不可少的就是做项目&#xff0c;在学习后端的同时&#xff0c;前端知识也是要学习滴&#xff0c;这篇文章将展示如何利用Vue和element-ui搭建前端界面。话不多说&#xff0c;进入主题&#xff01;&#xff01;&#xff01; 目录 首先是…

网页报错“Form elements must have labels”的处理

网页报错“Form elements must have labels”的处理 先给出错误现象源码&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width&quo…