SSM+Oracle实现文件上传访问系统（二）

SSM+Oracle实现文件上传访问系统（二）

                                        ——Javee

今天对系统增加了用户登录注册功能，并且在用户登录之后在每个页面都显示用户的id和欢迎词。

刚进入系统，默认就是登录页面：

没有账号就点击注册，有账号就直接账号密码登录。

点击注册，即可注册成功！注册成功后，自动返回登录页面，当用户名或者密码不正确时，登陆失败，并且给出提示：

登陆成功后，页面的右上角会有欢迎提示信息：

今天更新的内容中，主要的知识点有：

1.session的使用

服务端需要记录用户的状态时，就需要用某种机制来识具体的用户，这个机制就是Session.典型的场景比如购物车，当你点击下单按钮时，由于HTTP协议无状态，所以并不知道是哪个用户操作的，所以服务端要为特定的用户创建了特定的Session，用用于标识这个用户，并且跟踪用户，这样才知道购物车里面有几本书。

在我们项目今天的更新中，也使用到了session，比如登录失败时，错误信息的传递，再比如，登陆成功后，用户信息的传递，用户登录失败时，session中放的是登录错误信息字符串，用户登录成功后，session中放的是这个用户的对象。具体代码如下：

/**
*
* @param author 前端传来用户填写的登录信息
* @param request 不用前端传
* @return 实现登录功能
*/
@PostMapping("/login.action")
public ModelAndView login(Author author, HttpServletRequest request){
    ModelAndView mv = new ModelAndView("redirect:/page/upload.html");

    Author authorSelect = authorService.findByName(author.getName());
    if(author.getName().equals(authorSelect.getName()) &&
    author.getPassword().equals(authorSelect.getPassword())){
        //如果信息正确，就移除错误信息session，并且将数据库中查出来的用户对象放入session
        request.getSession().removeAttribute("error");
        request.getSession().setAttribute("user", authorSelect);
        return mv;
    }else{
        //如果信息错误，则将页面重定向到登陆页面，并将错误信息放到session中
        mv.setViewName("redirect:/index.html");
        request.getSession().setAttribute("error", "用户名或密码错误！");
        return mv;
    }
}

2.了解了session的作用，我们怎么在前端HTML静态页面获取到session中我们想要的信息呢？

HTML为静态页面，不像jsp等动态页面可以在前端执行后端代码。现在都讲前后端分离，所以HTML页面就用的比较多，那么静态页面怎么获取后端信息呢？这里就要提到一个新的前端技术，叫ajax，ajax为异步请求，可以在页面加载完成后，在特定的情况下向后台发送请求，并更新局部HTML界面。

在登录界面显示“用户名或密码错误”的提示信息就是通过ajax获取到后台session中的错误信息，并在前端显示，具体代码如下：

// 后台代码
@ResponseBody
@GetMapping("/errMsg.action")
public String getMsg(HttpServletRequest request){
    //获取到session中的错误信息
    String msg = request.getSession().getAttribute("error").toString();
    return msg;
}

<!--前端代码-->
<div id="errMsg"></div>

<script>
        // ajax请求后台错误信息
    $(function () {
        $.get("/user/errMsg.action", function (res) {
            document.getElementById('errMsg').innerHTML = res;
        }, "text");
    });
</script>

在用户登录成功后，在页面右上角显示欢迎信息也是通过ajax获取到后台session中的用户信息，并在前端显示，具体代码如下：

// 后台代码
@ResponseBody
@GetMapping("/getUserName.action")
public String getUserName(HttpServletRequest request){
    //获取到session中的用户对象，并从中取出用户名
    Author author = (Author)request.getSession().getAttribute("user");
    return author.getName();
}

<!--前端代码-->
<span id="welcome"></span>

<script>
    // ajax请求后台用户名
    $(function () {
        $.get("/user/getUserName.action",function(res){
            document.getElementById('welcome').innerHTML=res + "，欢迎您！";
        },"text");
    });
</script>

3.在今天的更新中，在数据库中还增加了一个表T_AUTHOR，将这张表和上一张表T_IMG如何连接起来呢？

这里就是通过AUTHOR_ID这个字段联系起来的，具体表结构先看代码：

create table T_AUTHOR
(
  author_id NUMBER not null,
  name      VARCHAR2(20 CHAR),
  password  VARCHAR2(20 CHAR),
  valid     CHAR(1) default 1
)

create table T_IMG
(
  img_id    NUMBER not null,
  img_path  VARCHAR2(100),
  author_id NUMBER,
  valid     CHAR(1) default 1
)

因为author_id和img_id都是通过序列控制生成的，所以这两个字段都可作为各自表的主键，因为这两个字段都是不重复，且可以唯一标识每一条数据。

在T_AUTHOR中，author_id是主键，我们把它放在T_IMG中，它不是唯一标识的字段，但是可以和T_AUTHOR中的用户链接起来，所以在T_IMG中，author_id就是外键。

源码见主页我的下载：SSM+Oracle实现文件上传访问系统v1.1 或 我的Github

后面持续更新功能~