計算機畢業(yè)設(shè)計源碼：實現(xiàn)商品管理系統(tǒng)登錄功能

更新時間：2021-09-28 11:57:54 來源：動力節(jié)點瀏覽1026次

環(huán)境搭建

步驟一：新建動態(tài)web項目

步驟二：導入jar包

步驟三：添加配置文件

后臺搭建是比較基礎(chǔ)的部分，就不詳細介紹了。

前端

前端部分我們現(xiàn)在不可能一次性全部做完，我們遵從模塊開發(fā)的原則，一個模塊一個模塊的來，現(xiàn)在我們先來搭建基礎(chǔ)的前端結(jié)構(gòu)，在WebContent目錄下新建js，css，jsp，img：

img

首先把所有要用的圖片放到img目錄下。關(guān)于本項目需要用的圖片在這里：

首先實現(xiàn)的第一個頁面當然是用戶登錄了。在jsp目錄下新建login.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<!-- <html lang="en">向搜索引擎表示該頁面是html語言，并且語言為英文網(wǎng)站
	其"lang"的意思就是“l(fā)anguage”，語言的意思，而“en”即表示“english”-->
<head lang="en">
<meta charset="utf-8">
<title>系統(tǒng)登錄-超市賬單管理系統(tǒng)</title>
<!-- 這里待引入css-->
<link rel="stylesheet" href="css/login.css" />
</head>
<body class="login_bg">
	<!-- <section> 標簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。 -->
	<section class="loginBox">
		<header class="loginHeader">
			<h1>超市賬單管理系統(tǒng)</h1>
		</header>
		<section class="loginCont">
			<!-- action表示表單提交的對象，login是到時候處理登錄表單的controller的映射路徑-->
			<form class="loginForm" action="../user/login">
				<div class="inputbox">
					<!-- <label> 標簽為 input 元素定義標注（標記）。
						label 元素不會向用戶呈現(xiàn)任何特殊效果。
						不過，它為鼠標用戶改進了可用性。
						如果您在 label 元素內(nèi)點擊文本，就會觸發(fā)此控件。
						就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相						   關(guān)的表單控件上。
						<label> 標簽的 for 屬性應當與相關(guān)元素的 id 屬性相同。 -->
					<label for="user">賬號：</label> <input id="user" type="text"
						name="username" placeholder="請輸入賬號" required />
				</div>
				<div class="inputbox">
					<label for="mima">密碼：</label> <input id="mima" type="text"
						name="password" placeholder="請輸入密碼" required />
				</div>
				<div class="subBtn">
					<input type="submit" value="登錄" /> <input type="reset" value="重置" />
				</div>
			</form>
		</section>
	</section>
</body>
</html>

* {
	/* 外邊距 */
	margin: 0;
	/* 內(nèi)邊距 */
	padding: 0;
}
/* login頁面 */
/* 頁面背景 */
.login_bg {
	/* 位置：(0,0)，允許左右重復 */
	background: url("../img/loginBg.jpg") 0 0 repeat-x;
}
/* 登錄頁面主體 */
.loginBox {
	width: 1000px;
	/* 上下外邊距為0，左右外邊距默認 */
	margin: 0 auto;
	background: url("../img/login_bg.jpg") 0 0 no-repeat;
}
/* 登錄頁面標題 */
.loginHeader {
	/* 四個邊的內(nèi)頁邊距 */
	padding: 102px;
	/* 居中 */
	text-align: center;
	/* 底邊頁邊距 */
	padding-bottom: 30px;
}
/* 標題字體顏色為白色，陰影為黑色 */
.loginHeader h1 {
	color: #fff;
	text-shadow: 2px 2px #000;
}

/* 登錄框部分 */
.loginCont {
	width: 388px;
	height: 284px;
	/* border: 1px solid red; */
	margin: 0 auto;
}
/* .formBox {
    position: relative;
} */
/*輸入框里默認輸入字體*/
::-webkit-input-placeholder {
	color: rgb(190, 188, 188);
	/*font-style: italic;*/
}
input:-moz-placeholder, textarea:-moz-placeholder {
	color: rgb(190, 188, 188);
	font-style: italic;
}
input {
	outline: none;
}
/* 登錄表單 */
.loginForm {
	background: url("../img/formBg.png") 0 0 no-repeat;
	width: 320px;
	height: 140px;
	border-radius: 8px;
	padding: 90px 38px 48px 30px;
	/* border: 1px solid green; */
}
.loginForm label {
	width: 20%;
	display: inline-block;
}
/* div輸入框 */
.inputbox {
	height: 60px;
}
/* 輸入框 */
.inputbox input {
	/* 占div66% */
	width: 66%;
	padding: 10px 5px 10px 20px;
	/* 線條，rgb是顏色 */
	border: 1px soild rgb(178, 178, 178);
	/* 線條圓角 */
	border-radius: 3px;
	/* -webkit 是在Chrome瀏覽器中用的 一般是指 瀏覽器是webkit核心 */
	/* 水平陰影位置x0，y1，模糊距離4px，陰影尺寸0px,顏色，內(nèi)部陰影 */
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	/* 火狐 */
	-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
}
/*輸入框得到焦點的效果*/
.inputbox input:active, .inputbox input:focus {
	border: 1px solid rgba(91, 90, 90, 0.7);
	background: rgba(238, 236, 240, 0.2);
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}
/* 提交按鈕 */
.subBtn {
	margin-left: 70px;
}
/*/!*登錄頁登錄和重置按鈕*!/.providerView a是供應商管理頁面下信息查看也得返回按鈕的樣式*/
input[type='submit'], input[type='reset'] {
	width: 30%;
	/* cursor屬性設(shè)置光標類型 */
	cursor: pointer;
	background: #54a4d7;
	padding: 6px 18px;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	color: #fff;
	font-size: 18px;
	border: 1px solid #4682be;
	margin-bottom: 10px;
	margin-right: 22px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px
		0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210);
	-moz-box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px
		3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210);
	box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px
		rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210);
}
/* 鼠標懸停顏色 */
input[type='submit']:hover, input[type='reset']:hover {
	background: rgb(74, 179, 198);
}
/* 鼠標點擊釋放瞬間 */
input[type='submit']:active, input[type='submit']:focus, input[type='reset']:active,
	input[type='reset']:focus {
	background: #2a5989;
	border: 1px solid rgb(12, 76, 87);
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	-moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}

數(shù)據(jù)庫建表

為了完善第一個功能——用戶的增刪改查，我們需要到數(shù)據(jù)庫中建一張User表，這張表用來存儲所有的系統(tǒng)用戶，屬性有：

id(主鍵，自增)

code(編號，唯一)

name(姓名)

password(密碼)

sex(性別)

userType(用戶類型，1為管理員，0為普通用戶)

telephone(電話)

creatTime(用戶創(chuàng)建時期)

在數(shù)據(jù)庫中建庫SBMS(和jdbc.properties保持一致)，建表user，同時插入一條管理員數(shù)據(jù)：

CREATE TABLE `user` (
	 `id` INT AUTO_INCREMENT PRIMARY KEY,
	 `code` VARCHAR(32) UNIQUE NOT NULL,
	 `name` VARCHAR(32) NOT NULL,
	 `password` VARCHAR(32) NOT NULL,
	 `sex` ENUM('男','女'),
	 `userType` INT NOT NULL,
	 `telephone` VARCHAR(32),
	 `creatTime` TIMESTAMP
);
INSERT INTO `user` VALUES(NULL,'10001','張某某','zmm123456','男',1,'15208089999',NULL);

user表：

    id  code    name       password   sex     userType  telephone              creatTime  
------  ------  ---------  ---------  ------  --------  -----------  ---------------------
     1  10001   張某某      zmm123456  男             1  15208089999    2019-04-29 19:56:27

MyBatis逆向工程

使用逆向工程需要兩個jar包和一個配置文件，一個java驅(qū)動程序。

兩個jar包分別是數(shù)據(jù)庫驅(qū)動jar包，一個是mybatis-generator-core.jar包，它是逆向工程的jar包，配置文件用來配置一些必須的信息，java驅(qū)動程序用來驅(qū)動逆向工程。

為什么要使用逆向工程?

使用MyBatis逆向工程可以幫我們根據(jù)數(shù)據(jù)庫中指定的表自動的生成entity和mapper接口和其配置文件。極大的減少了工作量。

添加jar包

數(shù)據(jù)庫驅(qū)動jar包我們已經(jīng)添加過，所以現(xiàn)在使用逆向工程要加入這個jar包：

添加并更改配置文件

然后添加其配置文件generatorConfig.xml到src目錄下，然后去更改配置文件，注意xml文件中的注釋，你最好從頭到尾過一遍，確保所有信息都正確。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
  PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
  "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<generatorConfiguration>
	<context id="testTables" targetRuntime="MyBatis3">
		<commentGenerator>
			<!-- 是否去除自動生成的注釋 true：是 ： false:否 -->
			<property name="suppressAllComments" value="true" />
		</commentGenerator>
		<!--mysql數(shù)據(jù)庫連接的信息：驅(qū)動類、連接地址、用戶名、密碼 -->
		<jdbcConnection driverClass="com.mysql.jdbc.Driver"
			connectionURL="jdbc:mysql://localhost:3306/sbms" userId="root"
			password="123456">
		</jdbcConnection> 
		<!--這是oracle數(shù)據(jù)庫配置信息-->
		<!--  <jdbcConnection driverClass="oracle.jdbc.OracleDriver"
			connectionURL="jdbc:oracle:thin:@localhost:1521:xe" 
			userId="hr"
			password="hr">
		</jdbcConnection>  -->
		<!-- 默認false，把JDBC DECIMAL 和 NUMERIC 類型解析為 Integer，為 true時把JDBC DECIMAL 和 
			NUMERIC 類型解析為java.math.BigDecimal -->
		<javaTypeResolver>
			<property name="forceBigDecimals" value="false" />
		</javaTypeResolver>
		<!-- targetProject:生成entity類的位置 -->
		<javaModelGenerator targetPackage="com.xx.entity"
			targetProject=".\src">
			<!-- enableSubPackages:是否讓schema作為包的后綴 -->
			<property name="enableSubPackages" value="false" />
			<!-- 從數(shù)據(jù)庫返回的值被清理前后的空格 -->
			<property name="trimStrings" value="true" />
		</javaModelGenerator>
        <!-- targetProject:mapper映射文件生成的位置 -->
		<sqlMapGenerator targetPackage="com.xx.mapper" 
			targetProject=".\src">
			<!-- enableSubPackages:是否讓schema作為包的后綴 -->
			<property name="enableSubPackages" value="false" />
		</sqlMapGenerator>
		<!-- targetPackage：mapper接口生成的位置 -->
		<javaClientGenerator type="XMLMAPPER"
			targetPackage="com.xx.mapper" 
			targetProject=".\src">
			<!-- enableSubPackages:是否讓schema作為包的后綴 -->
			<property name="enableSubPackages" value="false" />
		</javaClientGenerator>
		<!-- 指定數(shù)據(jù)庫表 -->
		<table schema="" tableName="user"></table>				
		<!-- 有些表的字段需要指定java類型
		 <table schema="" tableName="user">
		         將數(shù)據(jù)庫中的字段重命名為實體類的屬性
			<columnOverride column="id" javaType="Long" />
		</table> -->
	</context>
</generatorConfiguration>

添加java程序驅(qū)動逆向工程，我們單獨建一個包com.xx.utils用來放置它(復制粘貼即可，不用自己寫，注意復制后更改配置文件的路徑)：

package com.xx.utils;
import java.io.File;
import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import org.mybatis.generator.api.MyBatisGenerator;
import org.mybatis.generator.config.Configuration;
import org.mybatis.generator.config.xml.ConfigurationParser;
import org.mybatis.generator.exception.InvalidConfigurationException;
import org.mybatis.generator.exception.XMLParserException;
import org.mybatis.generator.internal.DefaultShellCallback;
public class Gerator {
	public static void main(String[] args)
			throws IOException, XMLParserException, InvalidConfigurationException, SQLException, InterruptedException {
		// 這個java程序用來運行MaBatis逆向工程，你不需要做過多的改動
		List<String> warnings = new ArrayList<String>();
		boolean overwrite = true;
		// 確保配置文件可以被正確找到就可以，其他的不用更改
		File configFile = new File("../SSM_001/src/generatorConfig.xml");
		ConfigurationParser cp = new ConfigurationParser(warnings);
		Configuration config = cp.parseConfiguration(configFile);
		DefaultShellCallback callback = new DefaultShellCallback(overwrite);
		MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config, callback, warnings);
		myBatisGenerator.generate(null);
		// 如果成功的話會在控制臺打印success
		System.out.println("bulid succes");
	}
}

運行該程序，沒有問題的話控制臺會打印success。這個時候去檢查com.xx.entity和com.xx.mapper兩個包，自動生成的類就放在這里面。

登錄功能的實現(xiàn)

先說一下思路，我們在登錄頁面寫好賬號和密碼，請求交給UserServiceController下的login方法處理，在這里進行參數(shù)綁定，拿到賬號和密碼，去校驗是否正確，正確則跳轉(zhuǎn)到index.jsp頁面，否則保存錯誤信息，返回登錄頁面繼續(xù)登錄。

在這之前我們需要測試一下之前搭建好的環(huán)境是否可行，先來做一個小小的測試：

package com.xx.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
import com.xx.entity.User;
@Controller
@RequestMapping("/user")
public class UserServiceController {
	@RequestMapping("/login")
	public String login(String username,String password){		
		System.out.println(username);		
		System.out.println(password);		
		// 注意路徑
		return "forward:../index.jsp";		
	}
}

測試時確保login.jsp里面表單的action路徑是正確的，比如這里的路徑必須是../user/login才能訪問到正確的controller。

確保你表單里面的input標簽name值和login方法里面的形參名相匹配(可以用@RequestParam處理)，總之要確保參數(shù)能成功綁定。

測試步驟：

啟動tomcat服務器(把項目部署到服務器上再啟動)

打開瀏覽器，訪問login.jsp。比如這里要輸入http://localhost/SSM_001/jsp/login.jsp(其實這樣不合理，你也可以去web.xml里面去更改首頁)

輸入賬號和密碼，點擊登錄(如果跳轉(zhuǎn)到index.jsp頁面并且控制臺打印出你輸入的值則說明環(huán)境搭建沒有問題)。

成功跳轉(zhuǎn)到登錄頁面(其實把參數(shù)值拼在url地址中并不合理，至少登錄和密碼不能這么干，我們后面再處理)。

控制臺也成功的打印出了參數(shù)值(做到這一步，其實SSM框架整合已經(jīng)成功了一半了)!

下面來看具體的登錄功能的實現(xiàn)，我們借此測試mybatis和spring的整合效果。

要實現(xiàn)登錄功能，我們就需要用到之前用逆向工程建好的mapper了。

在登錄邏輯之前，我們要對之前寫好的login.jsp進行更改：

1.更改表單的提交方式為post(不要把用戶信息暴露在url中):

<form class="loginForm" action="../user/login" method="post">

2.更改表單中賬號的input標簽的name值為code(因為登錄時我們規(guī)定是按照code登錄而不是用戶名，code唯一，username不唯一):

<input id="user" type="text" name="code" placeholder="請輸入賬號" required />

3.現(xiàn)在按照service-serviceImpl-controller的思路來寫：

userService

package com.xx.service;
import com.xx.entity.User;
public interface UserService {
	// 在這個接口中定義第一個功能：根據(jù)code來查詢用戶信息，返回用戶對象
	public User selectUserByCode(String code);
}

userServiceImpl

package com.xx.service.impl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.xx.entity.User;
import com.xx.mapper.UserMapper;
import com.xx.service.UserService;
@Service
@Transactional
public class UserServiceImpl implements UserService {
	@Autowired
	private UserMapper userMapper;
	@Override
	public User selectUserByCode(String code) {
		// TODO Auto-generated method stub
		return userMapper.selectUserByCode(code);
	}
}

注意，MyBatis逆向工程生成的UserMapper中并沒有selectUserByCode()這個方法，我們要自己寫。而且我們要給它加上@Repository注解，并在Mapper.xml中寫SQL語句：

UserMapper

package com.xx.mapper;
import com.xx.entity.User;
import com.xx.entity.UserExample;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
@Repository
public interface UserMapper {
    // 中間是其他方法，省略，重點在注解和下面這個方法
	User selectUserByCode(String code);
}

UserMapper.xml

  <select id="selectUserByCode" parameterType="String" resultType="com.xx.entity.User">
  	select * from user where code = #{code}
  </select>

接下來就是最關(guān)鍵的部分：

UserServiceController：

package com.xx.controller;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.xx.entity.User;
import com.xx.service.UserService;
@Controller
@RequestMapping("/user")
public class UserServiceController {
	@Autowired
	private UserService userService;
	@RequestMapping("/login")
	public String login(String code, String password, Model model, HttpSession session) {
		// 調(diào)用userSercice中的selectUserByCode方法返回user對象。
		User user = userService.selectUserByCode(code);
		// 判斷user是否為空
		if (user != null) {
			// code正確則校驗密碼
			if (user.getPassword().equals(password)) {
				// 密碼正確，保存用戶信息到session
				session.setAttribute("user", user);
				// 請求重定向到index.jsp
				return "redirect:../index.jsp";
			} else {
				// 密碼不正確，保存錯誤信息
				model.addAttribute("error", "密碼不正確");
				// 請求轉(zhuǎn)發(fā)到login.jsp
				// 不能重定向！重定向之后再jsp頁面是取不到model里面的值的
				return "forward:../jsp/login.jsp";
			}
		} else {
			// 賬號不存在，保存錯誤信息
			model.addAttribute("error", "用戶不存在");
			// 請求轉(zhuǎn)發(fā)到login.jsp
			return "forward:../jsp/login.jsp";
		}
	}
}

我們在login.jsp頁面顯示一下錯誤信息，寫在header里面：

<h2 id="error_msg" style="color: red;">${error}</h2>

登錄成功后的index.jsp頁面(省略了，打印一句話測試一下)：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	index.jsp……
</body>
</html>

大工告成!測試一下!