总结基于SSM项目自主设计过程经验

• 前言
• 背景
• 用户注册部分
• 1.数据库保存用户信息及代码
• 2.管理层处理
• 3.前端WEB处理
• 方法1：form表单action请求传递代码如下：
• 方法2:jquery的post方式(注意用该方法需要Controller层添加 @ResponseBody注解)
• 方法3:ajax(这里就不展开详解,注意用该方法同样需要Controller层添加 @ResponseBody注解)

前言

本次只讲一些前端传入后端的时候处理的经验，其他的数据库操作还有事务处理这里就不详细描述

背景

本次项目框架是基于SSM的框架，前端优化用的是BootStrap进行美化，用到的jquery一些简单知识。
基本功能：1.用户注册，2.用户登录。。。。。

用户注册部分

下面简单的叙述后端到前端的设计思路，即 数据库→。。。→管理层→前端页面，再从前端页面→管理层

1.数据库保存用户信息及代码

首先是数据库保存用户基本信息内容，这里简单举了例下

其次就是数据库增删改查方法（这里不详细解说具体实现方法），下面是一些常用的方法：
1）.通过where条件筛选出符合要求的查找，如果没找到数据库反馈为null。（比如user类，返回值为user=null）
2）.分页查询（设置start和rows参数进行逐个分组查询，再用函数查出总条数据数量即count(*)）
3）。。。。（增删改功能实现）

2.管理层处理

主要是接收前端传入过来的数值和连接相应事务处理方式，比如登录的时候前端传入usercode（账号）和password（密码）两个参值，管理层就要接收这两个参值并且用登录查询用户的事务方式调用数据库的根据条件查询。简单理解图为下：
1.前端页面传入usercode（账号）和password（密码）
——————————↓————————————
2.controller层（管理层）接收usercode（账号）和password（密码）并用service层（事件处理层，即服务层）的处理方式finduserByCodeAndPassword(String usercode,String password)处理。
——————————↓————————————
3.service层连接和调用是Dao层(数据访问层)的方法的（这里指通过usercode（账号）和password（密码）查询用户信息）。
——————————↓————————————
4.Dao层对应数据库方法，并返回user值给2第二步controller层。
——————————↓————————————
5.controller层核对后给前端反馈信息。
代码如下（这里是比较简单的登录和检测部分，只能是同一浏览器只能登录一个用户，如果是想多个用户同时登录还需要KeyID值进行区分）：

@RequestMapping(value = "/login.action")
public String login(String usercode, String password, HttpSession session){
//查看用户是否已登录
if(session.getAttribute("USER_SESSION")!=null){
return "forward:tologin.action";
}
//通过service层方法查询
User user=loginService.findUser(usercode,password);
//判断是否存在用户
if(user!=null){
//如果存在进入主页面，把用户保存SEESSION
session.setAttribute("USER_SESSION",user);
return "redirect:user/list.action";
}
//如果不存在，返回登录页面
return "forward:tologin.action";
}

3.前端WEB处理

这里就详细介绍BootStrap的用法，有兴趣就到官方网站进行学习——https://v3.bootcss.com/css/
前端主要目的是传递信息给后端Controller内容：

方法1：form表单action请求传递代码如下：

//请求登录login.aciton,不过可以用onsubmit标签和js配合先检查内容是否为空
<form id="login_form" action="${pageContext.request.contextPath}/login.action" method="post"  onsubmit="return check()">
账号:<input type="text"  id="usercode" name="usercode">
密码:<input type="text"  id="password" name="password">
<input type="submit" value="登录">
</form>

<script type="text/javascript">
//检查表单内容是否为空
function check() {
var usercode=$("#usercode").val();
var password=$("#password").val();
if(usercode != ""&&password != ""){
return true;
}else {
alter("账号和密码不能为空!");
return false;
}
}
</script>

方法2:jquery的post方式(注意用该方法需要Controller层添加 @ResponseBody注解)

function createnewtable() {
$.post("<%=basePath%>login.action",
$("#login_form").serialize(), function (data) {
//返回值为OK,则是登录成功
if (data == "OK") {
alert("登录成功！");
这里写要跳转的地址
}
//返回值为NO,则登录失败(可能原因是账号密码不正确,或者是已登录等)
if (data == "NO") {
alert("登录失败!");
window.location.reload();
}
});
}

方法3:ajax(这里就不展开详解,注意用该方法同样需要Controller层添加 @ResponseBody注解)

基本个格式如下:

function useredit(参数) {
$.ajax({
type: "get/post",
url: "请求地址",
data: {"传递参数名": 参数},
success: function (返回值) {
一些显示方法或者处理方法
}
});
}

总结

本次内容为项目设计过程中比较常用的方法总结,主要是针对前端传值方式的讲解和总结.