前提:
1 天半时间简单自己手写了一下前端布局和后台验证码的基本工作, 简要说明一下遇到的问题和收获吧.
这次基本就是前台设计 (首页)+Kaptcha 图片验证码 (之前弄了一个 reCaptcha 验证码 但是必须要 FQ, 所以花半天时间搞了一下这个验证码.)
实现环境:
Bootstrap(下载链接: https://v3.bootCSS.com/getting-started/ ) 个人感觉上面的例子有些不兼容, 特别是登录弹窗的弹出, 弄了蛮久.
- >Bootstrap.min.CSS(3.3.7),
- >Bootstrap.min.JS(3.3.7),
- >jQuery.min.JS(v2.1.1)
- >main.CSS(自己写的)
实现效果:
前端 (最好自己先写, 然后想加的东西也好加上去, 不然 Bootsrap 不兼容很难受的):
Header 部分:
按钮栏: 我用的 Bootstrap 自带的, 然后基本布局就弄好了 (Overflow:hidden 浏览器缩大缩小不能影响下面, 不然排版就乱了, 这是我在设计下面布局的时候遇到的问题)
登录的模态框: http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html?from=androidqq 个人感觉菜鸟教程对新手入门还是蛮好的
图片的轮播图: https://blog.csdn.net/qq_39905917/article/details/85091136 这里有怎么设计轮播时间, 上面的菜鸟教程也有轮播样式, 都还蛮可以的.
下面基本样式: 注意最好用 div 包含你想布局的东西就好了, 这点需要注意
后台: 验证码 (网上太多了, 但是都没搞好, 我查了好久啊, 好多喜欢 copy 别人代码赚访问量的人啊.)
1. 下载 jar 包:
懂 springboot 的人一打开链接就懂了, 用 SSM 的下载 jar 包就好, 一共 2 个
注意: 如果下载不了, 就转到 GitHub 上面去下载
2. 写 bean(网上有人写到 web.xml 里面, 我没试成功, 就写成 bean 了)
注意: bean 写在 application.xml 里面!!!!!
可能由于本人 SSM 基础差, 了解不够, 所以写到了 springmvc.xml 里面去了, 报了以下错误:
No qualifying bean of type 'com.google.code.kaptcha.Producer' available: expected at least 1 bean
(网上说加 @server 什么的我也没弄好, 后来才发现要写到 application.xml 里面去) 代码如下所示
- <!-- 验证码 -->
- <bean id="defaultKaptcha" class="com.google.code.kaptcha.impl.DefaultKaptcha">
- <property name="config">
- <bean class="com.google.code.kaptcha.util.Config">
- <constructor-arg>
- <props>
- <!-- 验证码宽度 -->
- <prop key="kaptcha.image.width">110</prop>
- <!-- 验证码高度 -->
- <prop key="kaptcha.image.height">50</prop>
- <!-- 生成验证码内容范围 -->
- <prop key="kaptcha.textproducer.char.string">0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ</prop>
- <!-- 验证码个数 -->
- <prop key="kaptcha.textproducer.char.length">4</prop>
- <!-- 是否有边框 -->
- <prop key="kaptcha.border">no</prop>
- <!-- 边框颜色 -->
- <prop key="kaptcha.border.color">105,179,90</prop>
- <!-- 边框厚度 -->
- <prop key="kaptcha.border.thickness">1</prop>
- <!-- 验证码字体颜色 -->
- <prop key="kaptcha.textproducer.font.color">black</prop>
- <!-- 验证码字体大小 -->
- <prop key="kaptcha.textproducer.font.size">30</prop>
- <!-- 验证码所属字体样式 -->
- <prop key="kaptcha.textproducer.font.names"> 楷体 </prop>
- <!-- 干扰线颜色 -->
- <prop key="kaptcha.noise.color">black</prop>
- <!-- 验证码文本字符间距 -->
- <prop key="kaptcha.textproducer.char.space">3</prop>
- <!-- 图片样式 : 阴影 -->
- <prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.ShadowGimpy</prop>
- </props>
- </constructor-arg>
- </bean>
- </property>
- </bean>
验证码的 Bean
3. 然后就是 Controller 层了, Bean 中是写验证码的基本样式, 然后 Controller 就是制作验证码了, 返回位置是
http://localhost:8080/coderplat/XXX
其中 XXX 是 @RequestMapping 所写的东西, 详情见代码
- package org.fkit.hrm.controller;
- import java.awt.image.BufferedImage;
- import java.io.IOException;
- import java.io.PrintWriter;
- import javax.annotation.Resource;
- import javax.imageio.ImageIO;
- import javax.servlet.ServletOutputStream;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import javax.servlet.http.HttpSession;
- import org.springframework.beans.factory.annotation.Autowired;
- import org.springframework.stereotype.Controller;
- import org.springframework.Web.bind.annotation.RequestMapping;
- import org.springframework.Web.bind.annotation.RequestParam;
- import org.springframework.Web.servlet.ModelAndView;
- import com.google.code.kaptcha.Constants;
- import com.google.code.kaptcha.Producer;
- /**
- * @author Empirefree 胡宇乔:
- * @version 创建时间: 2019 年 1 月 23 日 下午 1:49:56
- */
- @Controller
- public class CaptchaController {
- private Producer kaptchaProducer=null;
- @Autowired
- public void setCaptchaProducer(Producer kaptchaProducer) {
- this.kaptchaProducer = kaptchaProducer;
- }
- @RequestMapping("/kmycode")
- public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception{
- System.out.println("正在进行验证码业务~~~~~");
- response.setDateHeader("Expires",0);
- response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
- response.addHeader("Cache-Control", "post-check=0, pre-check=0");
- response.setHeader("Pragma", "no-cache");
- response.setContentType("image/jpeg");
- String capText = kaptchaProducer.createText();
- request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
- BufferedImage bi = kaptchaProducer.createImage(capText);
- ServletOutputStream out = response.getOutputStream();
- ImageIO.write(bi, "jpg", out);
- try {
- out.flush();
- } finally {
- out.close();
- }
- return null;
- }
- }
- CaptchaController
4. 最后就是前端获取了, 刚刚说了, http://localhost:8080/coderplat/XXX 是你的验证码位置, 所以在前端验证码那里获取就好了 (其中涉及到 JS 转接)
${pageContext.request.contextPath} 是你的项目位置, 相当于上面的 coderplat, 我在项目中重命名改成了 ${ctx}
- <img class="verificat" src="${ctx }/kmycode" id="kchange" title="看不清, 点击换一张"
- onclick="changeCaptcha()" style="width:80px;height: 50px; border-radius: 10px;"
- />
- <a href="javascript:changeCaptcha()">
- 换一张
- </a>
src 获取验证码, 和上面说的一样, id,onclick 包括 href 是来和 JS 对接, JS 代码如下
- <script type="text/javascript">
- function changeCaptcha(){
- var time=new Date().getTime();
- $("#kchange").attr("src","${ctx}/kmycode");
- }
- </script>
就是实现每一次点击就访问一次 JS, 然后重新访问一下链接, 然后验证码改变就好了
总结:
前端主要就是注意 Bootstrap 的版本, 然后记得去菜鸟教程上面看看就好了 (前端代码写的太 low 的, 不好意思给出来)
写 Google 的 Kaptcha 的主要原因是网上意义不大的资源有点多, 每次我都要查好久, 所以整理一下, 主要是下载 jar 包, bean 写到 application.xml 中, 然后 Controller 层就制作验证码,
然后就是前端获取验证码网页, href,src 切换就重新在 JS 上获取那个页面就好了.
来源: https://www.cnblogs.com/meditation5201314/p/10309532.html