SSM-网站前台博客系统制作（1）---前台+Google的Kaptcha
前提：
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个
https://mvnrepository.com/artifact/com.github.penggle/kaptcha
注意：如果下载不了，就转到Github上面去下载
2.写bean（网上有人写到web.xml里面，我没试成功，就写成bean了）
注意：bean写在application.xml里面！！！！！
可能由于本人SSM基础差，了解不够，所以写到了springmvc.xml里面去了，报了以下错误:
1
No qualifying bean of type 'com.google.code.kaptcha.Producer' available: expected at least 1 bean
(网上说加@server什么的我也没弄好，后来才发现要写到application.xml里面去)代码如下所示
验证码的Bean
3.然后就是Controller层了,Bean中是写验证码的基本样式，然后Controller就是制作验证码了，返回位置是
http://localhost:8080/coderplat/XXX
其中XXX 是@RequestMapping所写的东西，详情见代码
CaptchaController
4.最后就是前端获取了，刚刚说了，http://localhost:8080/coderplat/XXX 是你的验证码位置，所以在前端验证码那里获取就好了（其中涉及到js转接）
${pageContext.request.contextPath}是你的项目位置,相当于上面的coderplat,我在项目中重命名改成了${ctx}
1
2
换一张
src获取验证码，和上面说的一样，id,onclick包括href是来和js对接,js代码如下
1
2
3
4
5
6
7
就是实现每一次点击就访问一次js，然后重新访问一下链接，然后验证码改变就好了
总结：
前端主要就是注意bootstrap的版本，然后记得去菜鸟教程上面看看就好了（前端代码写的太low的，不好意思给出来）
写Google的Kaptcha的主要原因是网上意义不大的资源有点多，每次我都要查好久，所以整理一下，主要是下载jar包，bean写到application.xml中，然后Controller层就制作验证码，
然后就是前端获取验证码网页，href,src切换就重新在js上获取那个页面就好了。
书山有路勤为径，学海无涯苦作舟https://www.cnblogs.com/meditation5201314/p/10309532.html
