SpringBoot+Vue项目中实现登录验证码校验
在各大项目中,为保证数据的安全性,通常在登录页面加入验证码校验,以防止爬虫带来的数据泄露危机。本文将介绍在前后端分离的项目中,怎样实现图形验证码校验。
第一步:在后端创建一个生成随机验证码的工具类和接收请求验证码的接口。工具类的主要作用生成随机验证码和对应的图片。接口的作用是将生成的随机验证码保存到session,同时,将图片进行base64编码,然后返回给前端。
第二步:在登录页面创建的同时获取验证码,并将后端传回来得key和编码后的字符串拼接,绑定img标签的src属性。此外,当用户点击验证码的img标签时,重新获取验证码,后端session更新验证码。
第三步:后端登录接口接收登录请求时,将用户提交的验证码和session中的验证码进行比对,不相同则返回相应信息给前端进行提示,相同则进行账号密码的匹配。
vue+spring boot从零开发BBS项目---前端篇(一)
这是一个前端使用vue,后台使用spring boot开发的论坛项目,旨在熟悉前后的开发技术,随做随记,记录一些知识要点。
HBuilderX
npm
1.Vue 渐进式JavaScript 框架。
2.ElementUI 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
3.axios 易用、简洁且高效的http库。
4.vue-router Vue.js 官方的路由管理器。
5.Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
6.font-awesome 提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。
7.Normalize.css 提供HTML元素样式上跨浏览器的高度一致性。
前端项目需要对以上使用到的内容有一定的了解。熟悉以后就可以正式开始开发工作了。
Vue项目直接部署Springboot项目里
开始准备:
注意,我的 springboot 用的视图模板是 thymeleaf ,静态文件夹路径默认是 resources/static/ ,我们目的就是要把 dist 这个打包好的文件夹,整个放进去这里。
1.修改vuejs的 config/index.js ,在里面找到 assetsPublicPath ,改为 /dist/ ,记住,是 build:{} 这里的,不是上面 dev:{} 的。
2.执行 npm run build ,会出现一个 dist 文件夹在vuejs项目目录里。
3.把这个 dist 文件夹copy到 springboot 的 resources/static/ ,记住,是整个 dist 连文件夹一起copy过来。
OK,搞掂。就是这么简单。
访问 localhost/dist/index.html/#/ 就可以
按上文搞的还是不行,发现路由没有跳转出现空白页
发现跳转不了 应该是history的模式路由需要修改才能改成hash
最后把项目扔到根目录localhost/ (不用index.html)
如果不想要根目录 我尝试了一下有404的问题,时间有限,以后有机会慢慢解决