SSM登陆界面的实现

最新推荐文章于 2022-06-21 19:06:26 发布

whut_cs123

最新推荐文章于 2022-06-21 19:06:26 发布

阅读量3.2k

点赞数 3

CC 4.0 BY-SA版权

文章标签： SSM

本文链接：https://blog.youkuaiyun.com/qq_40758752/article/details/95959184

本文介绍了一个基于SSM框架的web-app项目的构建过程，通过maven管理项目。详细阐述了如何通过java调用DAO执行SQL，再通过XML配置渲染网页，展示查询结果。控制器中设置查询方法，并跳转到对应的网页。登录功能通过判断查询结果来决定跳转成功或失败页面。同时，展示了service、DAO的调用以及数据库操作。最后，给出了xml配置文件和本地运行效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在之前我们已经可以构建一个SSM项目了，那么我们仍然采用同样的方法来构建一个基于SSM框架的web-app项目，项目使用maven，项目导图如下：

之前已经介绍过实体bean，controller等组件，那我们来看一下其他的项目包的配置信息。

与之前的项目相比，我们仍然是采用java调用DAO文件，DAO调用并执行sql语句，同时返回sql执行的结果，然后我们使用xml来同步将结果一一渲染到网页上来，然后我们就可以在网页上看见显示的结果。

话不多说，直接po源码，先分析controller文件。

package com.zhongruan.controller;

import com.zhongruan.bean.UserInfo;
import com.zhongruan.service.IUserInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.List;

@Controller
@RequestMapping("user")
public class UserInfoController {
    @Autowired
    IUserInfoService userInfoService;

    @RequestMapping("/findAll.do")
    public ModelAndView findAll() {
        List<UserInfo> userInfos = userInfoService.findAll();
        ModelAndView mv = new ModelAndView();
        mv.addObject("userInfos", userInfos);
        mv.setViewName("user-list");
        return mv;
    }

    @RequestMapping("/login.do")
    public ModelAndView login(UserInfo userInfo){
        ModelAndView mv = new ModelAndView();
        boolean flag=userInfoService.login(userInfo);
        if(flag){
            mv.setViewName("main");
        }
        else {
            mv.setViewName("../failer");
        }
        return mv;
    }


}

这里findAll仍然是用来查询数据使用的，可以看到我们将找到的用户信息列表保存到userinfos这个变量中来，然后我们将查询返回到的这个用户添加到userinfos这个变量名中去，然后我们跳转到user-list网页中去，从刚刚保存了userinfos的容器中获取这个实体的操作，然后我们就可以通过xml静态的配置和使用这些数据了。

在登陆中我们也可以看到，我们创建一个静态的boolean类型来声明是否查询到用户，查询到用户即跳转登录成功的main界面，失败则跳转至failer页面，然后我们来看一下service和数据库DAO的文件。

package com.zhongruan.service.impl;

import com.zhongruan.bean.UserInfo;
import com.zhongruan.dao.IUserInfoDao;
import com.zhongruan.service.IUserInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service("userInfoService")
public class UserInfoServiceImpl implements IUserInfoService {
    @Autowired
    private IUserInfoDao userInfoDao;

    @Override
    public List<UserInfo> findAll() {
        return userInfoDao.findAll();
    }

    @Override
    public boolean login(UserInfo userInfo) {
        UserInfo users= userInfoDao.login(userInfo);
        if(users!=null){
            return true;
        }
        else return false;
    }


}

这里我们就是统统调用数据库的原函数来进一步调用sql语句完成配置。

这里再给上xml的配置代码

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.zhongruan.dao.IUserInfoDao">
    <select id="findAll" resultType="com.zhongruan.bean.UserInfo">
            select * from userinfo
    </select>
    <select id="login" resultType="com.zhongruan.bean.UserInfo" parameterType="com.zhongruan.bean.UserInfo">
        select * from userinfo where username=#{username} and password=#{password}
    </select>

</mapper>

然后我们配置相应的tomcat服务器就可以本地运行该网页。

这里就是我们的效果图，同时这里给出jsp文件，用于项目测试使用。

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>ITCAST - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">

<meta
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
	name="viewport">

  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/morris/morris.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/select2/select2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/style.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
</head>

<body class="hold-transition skin-blue sidebar-mini">

	<div class="wrapper">

		<!-- 页面头部 -->
		<jsp:include page="header.jsp"></jsp:include>
			<!-- 页面头部 /-->

		<!-- 导航侧栏 -->
		<jsp:include page="aside.jsp"></jsp:include>
		<!-- 导航侧栏 /-->

		<!-- 内容区域 -->
		<div class="content-wrapper">

			<img src="${pageContext.request.contextPath}/img/center.jpg"
				width="100%" height="100%" />

		</div>
		<!-- 内容区域 /-->

		<!-- 底部导航 -->
		<footer class="main-footer">
		<div class="pull-right hidden-xs">
			<b>Version</b> 1.0.8
		</div>
		<strong>Copyright &copy; 2014-2017 <a
			href="http://www.chinasofti.com">研究院研发部</a>.
		</strong> All rights reserved. </footer>
		<!-- 底部导航 /-->

	</div>

	<script
		src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
	<script>
		$.widget.bridge('uibutton', $.ui.button);
	</script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/raphael/raphael-min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/morris/morris.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/sparkline/jquery.sparkline.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/knob/jquery.knob.js"></script>
	<script
		sr