Maven云笔记之登录注册

2023-10-28

Maven云笔记注册登录篇

使用MVC框架开始编写一个笔记本应用

目录结构：

在这里插入图片描述

登录界面

<!DOCTYPE html>

<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>威职云笔记</title>

        <!-- CSS -->
        <link rel="stylesheet" href="css/css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
		<link rel="stylesheet" href="css/form-elements.css">
        <link rel="stylesheet" href="css/style.css">


        <!-- Favicon and touch icons -->
         <link rel="shortcut icon" href="http://demo.cssmoban.com/cssthemes4/azds_login-forms/form-1/assets/ico/favicon.png">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://demo.cssmoban.com/cssthemes4/azds_login-forms/form-1/assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://demo.cssmoban.com/cssthemes4/azds_login-forms/form-1/assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://demo.cssmoban.com/cssthemes4/azds_login-forms/form-1/assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="http://demo.cssmoban.com/cssthemes4/azds_login-forms/form-1/assets/ico/apple-touch-icon-57-precomposed.png"></head>
<body>


        <!-- Top content -->
        <div class="top-content">
        	
            <div class="inner-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2 text">
                            <h1><strong>威职云笔记登录系统</strong></h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 form-box">
                        <div class="form-top">
                        		<div class="form-top-left">
                        			<h3>登录我们的网站</h3>
                            		<p>输入您的用户名和密码以登录：</p>
                        		</div>
                        		<div class="form-top-right">
                        			<i class="fa fa-key" aria-hidden="true"></i>
                        		</div>
                            </div>
                            <div class="form-bottom">
                             <div class="login"> 
			                    	<div class="form-group">
			                    		<label class="sr-only" for="form-username">用户名</label>
			                        	<input type="text" id="username"name="form-username" placeholder="用户名" class="form-username form-control">
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="form-password">密码</label>
			                        	<input type="password" id="password" name="form-password" placeholder="密码" class="form-password form-control">
			                        </div>
			                        <button type="submit" class="btn" id="submit">登录</button>
			                    </div>
		                    </div>
                        </div>
                    </div>
                     <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 social-login">
                        <h3>更多登录方式：</h3>
                        	<div class="social-login-buttons">
	                        	<a class="btn btn-link-1 btn-link-1-facebook" href="#">
	                        		<i class="fa fa-facebook"></i> Facebook
	                        	</a>
	                        	<a class="btn btn-link-1 btn-link-1-twitter" href="#">
	                        		<i class="fa fa-twitter"></i> Twitter
	                        	</a>
	                        	<a class="btn btn-link-1 btn-link-1-google-plus" href="#">
	                        		<i class="fa fa-google-plus"></i> Google Plus
	                        	</a>
                        	</div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>



        <!-- Javascript -->
        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery.backstretch.min.js"></script>
        <script src="js/scripts.js"></script>
        <script src="js/jquery-3.4.1.js"></script>
        <script src="js/login.js"></script>

    

<div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 672px; width: 1528px; z-index: -999999; position: fixed;"><img src="imgs/1.jpg" style="position: absolute; margin: 0px; padding: 0px; border: none; width: 1528px; height: 1018.67px; max-height: none; max-width: none; z-index: -999999; left: 0px; top: -173.333px;"></div></body></html>

注册界面

<!DOCTYPE html>

<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>威职云笔记</title>

        <!-- CSS -->
        <link rel="stylesheet" href="css/css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
		<link rel="stylesheet" href="css/form-elements.css">
        <link rel="stylesheet" href="css/style.css">


        <!-- Favicon and touch icons -->
         <link rel="shortcut icon" href="http://demo.cssmoban.com/cssthemes4/azds_login-forms/form-1/assets/ico/favicon.png">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://demo.cssmoban.com/cssthemes4/azds_login-forms/form-1/assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://demo.cssmoban.com/cssthemes4/azds_login-forms/form-1/assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://demo.cssmoban.com/cssthemes4/azds_login-forms/form-1/assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="http://demo.cssmoban.com/cssthemes4/azds_login-forms/form-1/assets/ico/apple-touch-icon-57-precomposed.png"></head>
<body>


        <!-- Top content -->
        <div class="top-content">
        	
            <div class="inner-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2 text">
                            <h1><strong>威职云笔记登录系统</strong></h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 form-box">
                        <div class="form-top">
                        		<div class="form-top-left">
                        			<h3>登录我们的网站</h3>
                            		<p>输入您的信息注册账号：</p>
                        		</div>
                        		<div class="form-top-right">
                        			<i class="fa fa-key" aria-hidden="true"></i>
                        		</div>
                            </div>
                            <div class="form-bottom">
                             <div class="login"> 
			                    	<div class="form-group">
			                    		<label class="sr-only" for="form-username">用户名</label>
			                        	<input type="text" id="username"name="form-username" placeholder="用户名" class="form-username form-control">
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="form-password">密码</label>
			                        	<input type="password" id="password" name="form-password" placeholder="密码" class="form-password form-control">
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="form-password">确认密码</label>
			                        	<input type="password" id="repassword" name="form-password" placeholder="确认密码" class="form-password form-control">
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="form-password">姓名</label>
			                        	<input type="text" id="name" name="form-password" placeholder="姓名" class="form-password form-control">
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="form-password">年龄</label>
			                        	<input type="text" id="age" name="form-password" placeholder="年龄" class="form-password form-control">
			                        </div>
			                        <button type="submit" class="btn" id="submit">注册</button>
			                    </div>
		                    </div>
                        </div>
                    </div>
                     <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 social-login">
                        <h3>更多登录方式：</h3>
                        	<div class="social-login-buttons">
	                        	<a class="btn btn-link-1 btn-link-1-facebook" href="#">
	                        		<i class="fa fa-facebook"></i> Facebook
	                        	</a>
	                        	<a class="btn btn-link-1 btn-link-1-twitter" href="#">
	                        		<i class="fa fa-twitter"></i> Twitter
	                        	</a>
	                        	<a class="btn btn-link-1 btn-link-1-google-plus" href="#">
	                        		<i class="fa fa-google-plus"></i> Google Plus
	                        	</a>
                        	</div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>



        <!-- Javascript -->
        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery.backstretch.min.js"></script>
        <script src="js/scripts.js"></script>
        <script src="js/jquery-3.4.1.js"></script>
        <script src="js/register.js"></script>

    

<div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 672px; width: 1528px; z-index: -999999; position: fixed;"><img src="imgs/1.jpg" style="position: absolute; margin: 0px; padding: 0px; border: none; width: 1528px; height: 1018.67px; max-height: none; max-width: none; z-index: -999999; left: 0px; top: -173.333px;"></div></body></html>

css+js+图片代码：
链接：https://pan.baidu.com/s/1kWOWv_iO05LWP9l5bt-p8A
提取码：ymrq

首先定义user类，用来存放信息

package com.whc.noteserver.entity;

import java.io.Serializable;

public class User implements Serializable{
	
	private String id;
	private String username;  //用户名
	private String password;//密码
	private int age;//年龄
	private String name;//姓名
	
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	@Override
	public String toString() {
		return "User [username=" + username + ",  age=" + age + ", name=" + name + "]";
	}

}

继续写我们的Dao层，用来存放一些方法

package com.whc.noteserver.dao;

import java.util.List;

import com.whc.noteserver.entity.User;

public interface UserDao {
	public List<User> login(User user);
	
	/**
	 * 根据用户名获取用户信息
	 * @param user 从前台传入的user
	 * @return 从数据库查询的user
	 */
	public List<User> getUserByUserName(User user);
	
	
	/**
	 * 添加用户信息
	 * @param user 从前台传入的user
	 * @return 1
	 */
	public int addUser(User user);
}

之后再写一个Service接口

package com.whc.noteserver.service;

import java.util.List;

import com.whc.noteserver.entity.User;

public interface UserService {
	/**
	 * 用户登录
	 * @param user 传入的user
	 * @return 从数据库查询返回的User
	 */
	public User login(User user);
	
	/**
	 * 根据用户名查询用户信息
	 * @param user 前台传入的user
	 * @return 从数据库查询的user
	 */
	public User getUserByUserName(User user);
	
	
	/**
	 * 添加用户信息
	 * @param user 前台传入的user
	 * @return 1
	 */
	public int addUser(User user);
}

然后就是我们接口的实现类

package com.whc.noteserver.serviceimpl;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.whc.noteserver.dao.UserDao;
import com.whc.noteserver.entity.User;
import com.whc.noteserver.service.UserService;

@Service
public class UserImpl implements UserService{

	@Autowired
	UserDao userDao;
	
	public User login(User user) {

		List<User> list=userDao.login(user);
		if(list==null || list.isEmpty()) {
			System.out.println("用户名、密码不匹配");
			return null;
		}else {
			System.out.println(list.get(0));
			return list.get(0);
		}
		
	}

	public User getUserByUserName(User user) {
		List<User> list=userDao.getUserByUserName(user);
		if(list==null || list.isEmpty()) {
			return null;
		}
		return list.get(0);
	}

	public int addUser(User user) {
		return userDao.addUser(user);
	}
}

现在到了我们的控制层controller

package com.whc.noteserver.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;
import java.util.UUID;

import javax.servlet.http.HttpSession;

import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.whc.noteserver.entity.User;
import com.whc.noteserver.service.UserService;
import com.whc.noteserver.test.Person;
import com.whc.noteserver.util.JsonResult;
import com.whc.noteserver.util.MD5;


@Controller //注解，组件扫描加入到spring容器中
@RequestMapping("/user") //类controller的映射路径
public class UserController {
	
	private Logger logger = LogManager.getLogger(UserController.class);

	@Autowired
	UserService userService;
	
	@RequestMapping("/login") //方法的映射路径
	@ResponseBody	//将返回信息输送到网页端
	public Object login(User user) {
		//System.out.println(user.toString());
		//http://60.205.246.215:8080/WZNoteServer/login.html
		logger.debug("登录："+user.getUsername());
		logger.info("登录："+user.getUsername());
		
		
		try {
			user.setPassword(MD5.md5(user.getPassword(), "helloword"));
		}catch(Exception e) {
			logger.error("MD5加密",e);
		}
		
		User userResult=userService.login(user);
		JsonResult jsonResult;
		if(userResult!=null) {
			jsonResult= new JsonResult(JsonResult.STATE_SUCCESS,"",userResult);
		}else {
			jsonResult= new JsonResult(JsonResult.STATE_ERROR,"用户名或密码错误",null);
		}
		return jsonResult;
		
	}
	
	@RequestMapping("/register")
	@ResponseBody
	public Object register(User user) {
		user.setId(UUID.randomUUID().toString());
		try {
			String newpassword=MD5.md5(user.getPassword(), "helloword");
			user.setPassword(newpassword);
		}catch(Exception e) {
			e.printStackTrace();
		}
		
		JsonResult jsonResult=null;
		System.out.println(user);
		//1、判断前台传过来的用户名是否重复
		User userResult=userService.getUserByUserName(user);
		if(userResult==null) {
			//可以注册
			//2、如果不重复，说明可以注册，把User信息添加到数据库
			int result = userService.addUser(user);
			if(result==1) {
				//数据库插入成功
				jsonResult=new JsonResult(JsonResult.STATE_SUCCESS,"注册成功",null);
			}else {
				//数据库插入失败
				jsonResult=new JsonResult(JsonResult.STATE_ERROR,"注册失败",null);
			}
			
		}else {
			//存在相同的用户名，不可以注册
			jsonResult=new JsonResult(JsonResult.STATE_ERROR,"存在重复的用户名",null);	
		}
		return jsonResult;	
	}
}

使用控制层的方法就需要一些列的操作
首先就是注解

<?xml version="1.0" encoding="UTF-8"?>

<beans xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd 
http://www.springframework.org/schema/context 
http://www.springframework.org/schema/context/spring-context-3.2.xsd 
http://www.springframework.org/schema/jdbc 
http://www.springframework.org/schema/jdbc/spring-jdbc-3.2.xsd 
http://www.springframework.org/schema/jee 
http://www.springframework.org/schema/jee/spring-jee-3.2.xsd 
http://www.springframework.org/schema/tx 
http://www.springframework.org/schema/tx/spring-tx-3.2.xsd 
http://www.springframework.org/schema/data/jpa 
http://www.springframework.org/schema/data/jpa/spring-jpa-1.3.xsd 
http://www.springframework.org/schema/aop 
http://www.springframework.org/schema/aop/spring-aop-3.2.xsd 
http://www.springframework.org/schema/mvc 
http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd 
http://www.springframework.org/schema/util 
http://www.springframework.org/schema/util/spring-util-3.2.xsd" 
xmlns:jpa="http://www.springframework.org/schema/data/jpa" 
xmlns:util="http://www.springframework.org/schema/util" 
xmlns:mvc="http://www.springframework.org/schema/mvc" 
xmlns:aop="http://www.springframework.org/schema/aop" 
xmlns:tx="http://www.springframework.org/schema/tx" 
xmlns:jee="http://www.springframework.org/schema/jee" 
xmlns:jdbc="http://www.springframework.org/schema/jdbc" 
xmlns:context="http://www.springframework.org/schema/context" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns="http://www.springframework.org/schema/beans">

<!--1 <bean id="date" class="java.util.Date"></bean><bean id="person" class="com.whc.noteserver.test.Person">name就是person里的fanDian ref就是指向spring-servie.xml中id为fanDian的bean<property name="fanDian" ref="fanDian"></property></bean> -->

<!-- <context:component-scan base-package="com.whc.noteserver.test"></context:component-scan> -->

<!-- <bean id="person" class="com.whc.noteserver.test.Person"><property name="Username" value="zhangsan"></property></bean> -->
<!-- 包扫描 -->
<context:component-scan base-package="com.whc.noteserver"/>
<!-- 启动注解版的Spring MVC -->
<mvc:annotation-driven/>

</beans>

启动包扫描之后就是我们的连接数据库等，可以看我的这片文章
https://blog.csdn.net/weixin_44215758/article/details/106233009
在resources文件夹下的Mapper中创建xml文件，用来放我们的sql语句

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper SYSTEM "http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd" PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN">

<mapper namespace="com.whc.noteserver.dao.UserDao">

<select resultType="com.whc.noteserver.entity.User" parameterType="com.whc.noteserver.entity.User" id="login">select * from note_t_users where username=#{username} and password=#{password} </select>

<select resultType="com.whc.noteserver.entity.User" parameterType="com.whc.noteserver.entity.User" id="getUserByUserName">select * from note_t_users where username=#{username} </select>

<insert parameterType="com.whc.noteserver.entity.User" id="addUser">insert into note_t_users (id,username,password,age,name) values(#{id},#{username},#{password},#{age},#{name}) </insert>

</mapper>

基础设置完成之后就开始controller文件中的MD5加密和返回值统一封装的类
MD5加密：https://blog.csdn.net/weixin_44215758/article/details/106230817
JsonResult类：https://blog.csdn.net/weixin_44215758/article/details/106234274

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Java

Maven