手把手搭建一个完整的ssm登录注册项目(适合新手)
数据库设计
实体层,使用lombook更方便哦
mapper
dao层
dao层的基类,因为没有使用springboot,我们得自己管理起来
dao层实现层
service层则重写一遍dao层代码就不显示了
service层实现类
好,到这里我们就来写前端jsp和控制层,目前是登录
前端获取值,控制层回model层找数据是否正确,若不正确则返回error界面。反之正确则进入index页面。
注册功能
此中写了个验证用户名的功能
还有一个4位随机数验证码
var code; //声明一个变量用于存储生成的验证码
document.getElementById("code").onclick = changeImg;
function changeImg() {
var arrays = new Array(
'1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
'u', 'v', 'w', 'x', 'y', 'z',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
'U', 'V', 'W', 'X', 'Y', 'Z'
);
code = ''; //重新初始化验证码
//alert(arrays.length);
//随机从数组中获取四个元素组成验证码
for(var i = 0; i < 4; i++) {
//随机获取一个数组的下标
var r = parseInt(Math.random() * arrays.length);
code += arrays[r];
}
document.getElementById('code').innerHTML = code; //将验证码写入指定区域
}
//效验验证码(表单被提交时触发)
function checken() {
//获取用户输入的验证码
var input_code = document.getElementById('vcode').value;
var user_name = document.getElementById('user_name').value;
var user_pwd = document.getElementById('user_pwd').value;
if(/^[a-zA-Z][a-zA-Z0-9_]{4,20}$/.test(user_name)){
if(user_pwd!=""){
if(input_code.toLowerCase() == code.toLowerCase()) {
return true;
}else{
alert("请输入正确的验证码!");
return false;
}
}else{
alert("密码不能为空");
return false;
}
//验证码正确(表单提交)
}else{
alert("请输入5-21个以字母开头、可带数字、“_”的用户名");
//验证码不正确,表单不允许提交
return false;
}
}
对登录注册页面也使用了布局,也用到了font-awesome图片
则运行页面
注册页面
注册我们则配置的是spring mvc静态资源定位器
<bean id="ZhuCe" class="org.springframework.web.servlet.view.InternalResourceView">
<property name="url" value="./WEB-INF/jsp/enroll.jsp"></property>
</bean>
<mvc:view-controller path="/ZhuCe" view-name="ZhuCe"/>
登录注册布局
body{
background-image:url("img/dl.jpg");
background-size: cover;
}
a{
color: #666;
text-decoration: none;
}
#bigBox
{
margin: 0 auto;
margin-top: 100px;
padding: 20px 50px;
background-color: #000000;
width: 400px;
height: 400px;
border-radius: 20px;
text-align: center;
background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
}
#bigBox h1
{
font-size: 40px;
color: floralwhite;
}
#bigBox .inputBox
{
margin-top: 35px;
}
#bigBox .inputBox .inputText
{
margin-top: 20px;
}
#bigBox .inputBox .inputText input
{
border: 0;
padding: 10px 10px;
border-bottom: 1px solid white;
background-color: #00000000;
color: white;
width: 200px;
height: 40px;
font-size: 20px;
}
#bigBox .inputBox .inputText i
{
color: white;
}
#bigBox .inputBox .inputButton
{
border: 0;
width: 200px;
height: 50px;
color: white;
margin-top: 55px;
border-radius:20px;
background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%,#b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
}
CSDN-Ada助手: 恭喜您发布了这么精彩的博客,基于springcloud alibaba和vue开发的电商项目听起来非常有趣!您的使用到elasticsearch做高亮搜索、redis集群做缓存数据库、以及使用百度地图api计算最近商店库存的技术应用让项目更加丰富和实用。希望您能继续保持这样的创作热情,持续更新项目,分享更多有价值的内容。或许下一步可以考虑增加一些关于用户体验优化或者数据分析方面的内容,让项目更加完善。期待您的下一篇博客!
CSDN-Ada助手: 恭喜作者完成了第6篇博客!从标题中我们可以看出,这篇博客讲述了基于springboot+vue开发的电商项目,其中使用到了LRU算法缓存商品信息、热卖商品、模糊查询搜索框,并且运用到沙箱支付。这些内容听起来非常有趣和实用!作者在技术上的实践和应用已经很出色了。 希望作者能够继续保持创作的热情和动力,为我们带来更多有关电商项目开发的经验和知识。对于下一步的创作建议,我认为可以考虑分享一些关于用户体验的内容,比如如何提升用户购物的便利性和快捷性。同时,也可以探讨一些与电商项目相关的热门话题,比如如何应对电商平台的竞争,如何进行数据分析等等。期待读到更多精彩的博客!
程汐笙: 需要源码的,可以在资源里面去取,最前面的那个资源
m0_74995539: 您好,有全部图片吗
2301_78800596: 您好,有全部图片吗