【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能

这篇具有很好参考价值的文章主要介绍了【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

若依框架

若依框架(Ruoyi)是一款基于Spring Boot和Spring Cloud的开源快速开发平台。它提供了一系列的基础功能和通用组件,能够帮助开发者快速构建企业级应用。若依框架采用了模块化的设计理念,用户可以选择需要的功能模块进行集成,也可以根据自己的业务需求进行扩展。若依框架还提供了许多便捷的工具和插件,例如代码生成器、权限管理、日志管理等,能够提高开发效率和项目管理能力。总之,若依框架是一个功能丰富、易于扩展和高效率的开发平台,适用于各种规模的企业级应用开发。

1. 若依框架搭建

1.1. 引入若依项目

若依官网:http://www.ruoyi.vip/
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端
然后会到git中,可以复制链接,或者下载zip压缩包,这里直接使用链接的方式。在idea中通过版本控制新建项目引入若依项目。
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端
引入项目:
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端

在idea中配置好maven,下载好pom文件中的依赖后,现在项目还是不能启动的。项目需要数据库中的一些表,并且需要启动redis来进行数据缓存以及存储验证码等。

1.2. 数据库

新建数据库ry-vue,引入项目中sql文件夹中的两个sql文件
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端

其中quartz.sql文件主要为定时任务所需要的表,
ry_20230223.sql文件是若依框架系统管理需要的表

【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端

1.3. 启动redis

在若依框架中,Redis主要用于缓存数据。Redis是一种高性能的内存数据库,它将数据存储在内存中,可实现快速读取和写入。可以帮助提高系统的性能和响应速度。

可以使用Windows版的redis,也可以使用Linux版的reids,这里做学习正好本地也是有Windows版的
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端
启动之后在项目中配置主机地址,以及密码
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端

1.4. 启动后端项目

【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端

1.5. 启动前端项目

前端项目在ruoyi-ui文件中
首先进入到ruoyi-ui文件夹,然后npm install下载依赖,然后npm run dev 启动项目
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端

这里能启动前端项目一定是要有node.js环境,这些前提条件应该都配置好了。
注意:一定要进入ruoyi-ui文件下,再npm run dev

在前端页面,根据默认的用户名和密码登录之后看到下面页面,算是框架运行成功。

2. 前端向后端发送请求

前端向后端发送请求,例如在登录页验证码的图片是向后端请求后返回的结果。分析以下这个流程:
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端

【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端

【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端
而在前端发送请求的时候为http://localhost/dev-api/captchaImagedev-api就是这个baseURL
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端
因为这里使用的是开发环境在文件.env.development中可以看到:
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端
而且我们知道后端的请求端口号为8080,但是请求路径中http://localhost/dev-api/captchaImage,并没有请求8080端口?
vue.config.js文件中可以看到:
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端

所以我们可以看到http://localhost/dev-api/captchaImage请求中他实际请求的路径应该为:http://localhost:8080/captchaImage

3. 验证码的实现

验证码的基本思路:
后端生成一个表达式 1+1=2 然后转换为1+1=?@2
然后通过字符串@截取两部分
1+1=? 通过base64转成图片,传到前端展示,2存入redis,2的key为后端生成的uuid,每次对比验证码时先根据uuid来查询key,这样就解决了并发问题(多个人同时请求,可以根据uuid来区分)

【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端
在返回结果中通过Base64转换为图片返回给前端

【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端
在前端中:
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端

4. 开启注册功能

开启注册功能首先要找到登录页面,如下图:
若依默认关闭了注册功能,在这里打开注册按钮的开关。
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端
不过打开之后注册时发现还是不能进行注册,需要管理员在系统管理中打开注册功能。
使用管理员账号登录若依:
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端
然后在登录页面点击注册,注册一个账号,提示注册成功。
【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能,前端

然后使用注册的账号就可以登录了,不过此时还没有开发内容,在后续开发中我们只需要开发自己的内容,然后根据情况使用管理员给相应的用户分配角色,然后角色拥有各自的权限,就可以显示相应的内容文章来源地址https://www.toymoban.com/news/detail-523470.html

到了这里,关于【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 若依框架前端静态资源到后端访问

    修改ruoyi-ui中的.env.production(二选一) 修改ruoyi-ui中的router/index.js,设置mode属性为hash 打包前端静态资源文件。 修改后端resources中的application.yml,添加thymeleaf模板引擎配置 修改后端pom.xml,增加thymeleaf模板引擎依赖 修改后端ResourcesConfig.java中的 addResourceHandlers,添加静态资源映

    2024年02月06日
    浏览(63)
  • 前端发送请求获取后端文件,并且前端实现下载文件功能

    最近遇到一个需求,就是前端发送post请求获取后端的excel文件,并且前端实现下载导出到本地的功能。 前端页面就长上面那样,一个批量导出功能,用户勾选之后,前端通过接口把id和其他的参数传给后端,接口调用方法这里需要注意的是,这里必须设置responseType: ‘blob’

    2024年02月09日
    浏览(47)
  • mac 基于docker搭建若依项目前端(node、nginx),本地搭建若依项目后端,含试错记录

    先一句话总结一下,前后端调通的关键是 IP地址 。 最终项目环境结构:本地部署若依后端服务器,docker部署mysql、redis、node或nginx容器。通过node容器或nginx部署若依前端,并调用部署在本地的后端服务器。 声明:本文所涉及的问题点仅针对本文所处时间以及发布文章时所用的

    2024年02月02日
    浏览(47)
  • vue3+elementPlus登录向后端服务器发起数据请求Ajax

    后端的url登录接口 先修改main.js文件 login.vue 此时前端有跨域问题 先配置跨域 vue.config.js  项目中如果没有这个文件 请自行创建。 此时可以看到跳转到登录到home页面  完整的后端登录方法  消息提示使用elementPlus 的Elmessage 

    2024年01月18日
    浏览(43)
  • 前端向后端传入json 后台怎么接收(params呢)

    目录 一、使用POJO若前端传递过来的数据刚好和我们的bean实体对象属性一致,则可以使用对象的形式接收。后端实体类 二、使用Map接收后台Controller 三、使用@RequestParams 1,params传参 2.地址拼接传参 当前端传来json数据时,后端有多种方式接收 前端json数据: 后端Controller 前端

    2024年02月11日
    浏览(40)
  • Flask框架小程序后端分离开发学习笔记《4》向服务器端发送模拟请求-爬虫

    Flask是使用python的后端,由于小程序需要后端开发,遂学习一下后端开发。 下面代码,是一个比较老的版本了,可以借鉴一下。 最后尝试请求豆瓣的网页,并未得到,我怀疑是有反爬手段,我们的请求数据还有很多东西没加进去,所以看起来不像是浏览器发送的请求,后续会

    2024年01月20日
    浏览(52)
  • Flask框架小程序后端分离开发学习笔记《3》客户端向服务器端发送请求

    Flask是使用python的后端,由于小程序需要后端开发,遂学习一下后端开发。 可以看到上述代码构建了一个HTTP请求,在发送之前需要将发送之前,使用http_request.encode(‘utf-8’)。 这是因为我们在这构建的请求是字符串文本,而电脑只认识二进制0和1,所以需要将其数据类型转换

    2024年01月22日
    浏览(54)
  • ruoyi-vue(若依前后端分离版本)环境搭建 用idea 安装redis 后端配置 配置node环境 前端配置

    1.在https://gitee.com/y_project/RuoYi-Vue下载源码并解压至本地文件 2.将sql文件下的两个sql文件导入数据库生成表  3.在E:eclipsespaceoneRuoYi-Vue-masterruoyi-adminsrcmainresourcesapplication-druid.yml修改数据库名和密码 4.在E:eclipsespaceoneRuoYi-Vue-masterruoyi-adminsrcmainresourcesapplication.yml配置red

    2024年04月14日
    浏览(50)
  • CRM项目为新增用户设置对应的前端校验规则并发送Axios请求到后端将表单数据提交用户信息------CRM项目

    template     el-button type=\\\"primary\\\" @click=\\\"addUser()\\\"新增用户/el-button     el-button type=\\\"danger\\\"批量删除/el-button     el-table         :data=\\\"userList\\\"         style=\\\"width: 100%\\\"         @selection-change=\\\"handleSelectionChange\\\"             !-- 复选框    --         el-table-column type=\\\"selection\\\" width=\\\"33%\\\"

    2024年02月19日
    浏览(40)
  • 前端异步请求并解决跨域问题(Ajax+axios框架)、后端响应多个数据(JSON)

    目录 一、前后端同步异步请求 1.同步请求: 2.异步请求: 3.跨域问题(前端问题) 4.axios框架(封装后) 二、后端向前端响应多个数据-JSON 1.同步请求:         发送一个请求,回应请求,回应的内容会覆盖浏览器中的内容,这样会 打断 前端其他的正常操作。 2.异步请求:

    2024年02月07日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包