创建一个最简单的登录项目

最新推荐文章于 2024-03-13 15:20:25 发布

bug罗

最新推荐文章于 2024-03-13 15:20:25 发布

阅读量605

点赞数

本文链接：https://blog.csdn.net/qq_33543227/article/details/98635319

版权

1：利用idea编程工具创建springboot+springMVC+Mybatis架构的项目

（1）第一步:打开idea创建新项目

（2）第二步：选择spring Initializr，然后next

（3）第三步：修改项目名和打包类型

（4）先选择springboot的版本，2.1.6。再选择项目类型web->spring web starter。

选择数据类型sql->mysql driver

(5)修改项目名和本地存放地址，一般默认

2：项目生成好后，把后续要用到的文件夹创建好

（1）在study目录下分别创建controller（控制层）、entity（实体类）、mapper（数据库映射层）、service、serviceImp（模型层）、util（工具）文件夹。

（2）在resources目录下创建mapping文件夹（操作数据库底层）。目录结构如下：

3：导入需要用到的jar包（java的工具包）

(1)找到pom.xml文件

（2）打开pom.xml文件加入以下两个jar包

<!--通过页面访问controller需要用到的配置文件-->

        <!--web启动器-->

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-thymeleaf</artifactId>

        </dependency>



        <!--mybatis框架需要的jar包-->

        <dependency>

            <groupId>org.mybatis.spring.boot</groupId>

            <artifactId>mybatis-spring-boot-starter</artifactId>

            <version>1.3.2</version>

        </dependency>

        <dependency>

            <groupId>org.mybatis</groupId>

            <artifactId>mybatis-spring</artifactId>

            <version>1.3.2</version>

        </dependency>

4：完善数据库连接参数

（1）打开application.propertites文件，添加连接数据库配置信息

（2）添加连接配置信息

server.port=8080

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone = GMT

spring.datasource.username=root

spring.datasource.password=123456

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver



spring.datasource.tomcat.max-active=20

spring.datasource.tomcat.max-idle=8

spring.datasource.tomcat.mix-idle=8

spring.datasource.tomcat.initial-size=10



//启动项目把entity包下的文件扫描到ioc容器中

mybatis.type-aliases-package=com.example.study.entity

//启动项目把resources下mapping包的文件都扫描到ioc容器中

mybatis.mapper-locations=classpath:mapping/*Mapper.xml

5：导入要用到的js

在static文件夹下面创建js文件夹

引入Js文件

jquery-3.0.0.min.js

6：配置项目启动类的信息

（1）打开StudyApplication文件

（2）让StudyApplication继承SpringBootServletInitializer。并且将mappera文件夹下的文件自动扫描到spring ioc容器

6：开始分别创建controller、entity、service、serviceImp、mapper、mapper.xml、util、Login.html(登录页面)

（1）controller控制层，负责接收用户的请求，并调用service层处理用户请求

package com.example.study.controller;

        import com.example.study.entity.User;
        import com.example.study.service.UserService;
        import com.example.study.util.Result;
        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 org.springframework.web.bind.annotation.RequestMethod;
        import org.springframework.web.bind.annotation.ResponseBody;

        import javax.servlet.http.Cookie;
        import javax.servlet.http.HttpServletRequest;
        import javax.servlet.http.HttpServletResponse;

//controller注解，让springBoot框架知道这个类是控制层
@Controller
public class LoginController {
    @Autowired
    public UserService userService;

    /**
     * 跳转到注册页面
     */
    @RequestMapping(value="/RegisterHtml",method = RequestMethod.GET)
    public String registerHtml(){
        return "Register";
    }

    /**
     * 跳转到登录页面
     * @requestMapping注解，设置用户访问地址
     */
    @RequestMapping(value = "/LoginHtml",method = RequestMethod.GET)
    public String LoginHtml(){
        return "Login";
    }

    /**
     * 跳转到登录成功页面
     * @requestMapping注解，设置用户访问地址
     */
    @RequestMapping(value = "/LoginSuccess",method = RequestMethod.GET)
    public String LoginSuccess(HttpServletRequest request, HttpServletResponse response, Model model){
        User userInfo=userService.queryUserByName(request.getParameter("name"));
        model.addAttribute("userInfo",userInfo);
        return "LoginSuccess";
    }

    /**
     * 登录方法
     */
    @RequestMapping(value = "/LoginInfo",method = RequestMethod.POST)
    @ResponseBody
    public Result LoginInfo(HttpServletRequest request,HttpServletResponse response, User user){
        Result result=new Result();
        //判断该用户是否存在
        User userInfo=userService.queryUserByName(user.getName());
        if(userInfo==null){
            result.setStatus(300);
            result.setErroMsg("登录失败，没有该用户，请注册！");
        }else{
            if(user.getName().equals(userInfo.getName())&&user.getPassword().equals(userInfo.getPassword())){
                Cookie cookie  =  new Cookie("name",user.getName());
                response.addCookie(cookie);
                result.setStatus(200);
                result.setMsg("登录成功");
            }else {
                result.setStatus(300);
                result.setErroMsg("密码错误！");
            }
        }
        return result;
    }

    /**
     * 注册方法
     * @param user
     */
    @RequestMapping(value = "/RegisterInfo",method = RequestMethod.POST)
    @ResponseBody
    public Result registerInfo(User user){
        Result result=new Result();
        //判断该用户名是否已经注册了
        User user1=userService.queryUserByName(user.getName());
        if(user1==null){
            //将用户信息插入到数据库
            int count=userService.insertUser(user);
            //判断是否插入成功
            if(count>0){
                result.setStatus(200);
                result.setMsg("注册成功");
            }else {
                result.setStatus(300);
                result.setMsg("注册失败");
            }
        }else {
            result.setStatus(300);
            result.setMsg("用户名已被注册");
        }
        return result;
    }

}

（2）创建entity实体类，对应数据库表结构

package com.example.study.entity;

public class User {
    public int id;
    public String name;
    public String password;
    public String age;
    public String sex;
    public String address;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }
}

（3）创建service接口类

package com.example.study.service;

import com.example.study.entity.User;

public interface UserService {
    /**根据用户名查询用户信息
     *
     * @param name
     * @return
     */
    public User queryUserByName(String name);

    /**注册用户信息
     *
     * @param user
     * @return
     */
    public int insertUser(User user);
}

（4）创建service接口实现类

package com.example.study.service.Imp;

import com.example.study.entity.User;
import com.example.study.mapper.UserMapper;
import com.example.study.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImp implements UserService {

    @Autowired
    public UserMapper userMapper;

    public User queryUserByName(String name) {
        User userInfo=userMapper.queryUserByName(name);
        return userInfo;
    }

    @Override
    public int insertUser(User user) {
        int count=userMapper.insertUser(user);
        return count;
    }
}

（5）创建mapper层，与操作数据库底层文件mapper.xml做映射

package com.example.study.mapper;

import com.example.study.entity.User;
import org.apache.ibatis.annotations.Param;

public interface UserMapper {
    public User queryUserByName(@Param("name")String name);

    public int insertUser(User user);
}

（6）创建mapper.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.example.study.mapper.UserMapper">
    <select id="queryUserList"  resultType="com.example.study.entity.User">
        select
        id,name,password,age,sex,address
        from  user
    </select>

    <select id="queryUserByName" parameterType="java.lang.String" resultType="com.example.study.entity.User">
        select
        id,name,password,age,sex,address
        from  user
        where  name = #{name}
    </select>

    <insert id="insertUser" parameterType="com.example.study.entity.User" >
        insert into user (name,password,age,sex,address) values (#{name},#{password},#{age},#{sex},#{address})
    </insert>
</mapper>

（7）创建util工具类

package com.example.study.util;

public class Result {
    public int status;
    public String msg;
    public String erroMsg;

    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public String getErroMsg() {
        return erroMsg;
    }

    public void setErroMsg(String erroMsg) {
        this.erroMsg = erroMsg;
    }
}

（8）创建登录页面Login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这里是登录页面</title>
</head>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<style>
    .divMax{
        width: 100%;
        text-align: center;
        margin-top: 50px;
    }
</style>
<body>
    <div class="divMax">
        <h3>登录</h3>
        账号：<input type="text" id="name"><br>
        密码：<input type="text" id="password">
    </div>
    <div class="div1" style="text-align: center;margin-top: 10px;">
        <input type="submit" value="登录" onclick="denglu()">
        <input type="button" value="注册" onclick="zhuce()">
    </div>
<script>
    //进行登录验证
    function denglu() {
        var name=$("#name").val();
        var password=$("#password").val();
        if(name==" "||name==""||password==" "||password==""){
            alert("请填写账号或密码！")
        }else{
            $.ajax({
                type:"POST",
                url:"LoginInfo",
                dataType:"json",
                data:{
                    "name":$("#name").val(),
                    "password":$("#password").val(),
                },
                success:function (data) {
                    if(data.status==200){
                        window.location=("LoginSuccess?name="+name);
                    }else{
                        window.alert(data.erroMsg);
                    }
                }
            })
        }
    }

    //跳转到注册页面，访问服务器跳转
    function zhuce() {
        window.location=("RegisterHtml");
    }
</script>
</body>
</html>

（9）创建注册页面Register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这里是注册页面</title>
</head>
<script src="js/jquery-3.0.0.min.js"></script>
<style>
    .divMax{
        width: 100%;
        text-align: center;
        margin-top: 50px;
    }
    .sex{
        width: 172px;
        height: 21px;
        font-family: "微软雅黑";
    }
</style>
<body>
    <div class="divMax">
        <h3>注册</h3>
        <div>账号：<input type="text" id="name" ><br></div>
        <div>密码：<input type="text" id="password" ></div>
        <div>年龄：<input type="text" id="age" ></div>
        <div>性别：
            <select id="sex" class="sex">
                <option selected="selected">男</option>
                <option>女</option>
            </select>
        </div>
        <div>地址：<input type="text" id="address" ></div>
    </div>
    <div class="div1" style="text-align: center;margin-top: 10px;">
        <input type="submit" value="注册" onclick="zhuce()">
    </div>
<script>
    function zhuce() {
        var name=$("#name").val();
        var password=$("#password").val();
        var age=$("#age").val();
        var sex=$("#sex").val();
        var address=$("#address").val();

        if(name==""||name==" "||password==""||password==" "||age==""||age==" "||sex==""||sex==" "||address==""||address==" "){
            alert("请将注册信息补充完整!");
        }else{
            $.ajax({
                type:"POST",
                url:"RegisterInfo",
                dataType:"json",
                data:{
                    "name":name,
                    "password":password,
                    "age":age,
                    "sex":sex,
                    "address":address,
                },
                success:function (data) {
                    alert(data.msg);
                }
            })
        }
    }
</script>
</body>
</html>

（10）创建成功登录界面，显示出用户信息LoginSuccess.hml

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>登陆成功</title>
</head>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<style>
    .div1 {
        text-align: center;
        font-size: 20pt;
        color: darkgreen;
        font-weight: bold;
    }
</style>
<body>
    <div style="text-align: center;font-size: 80pt;margin-top: 100px;">恭喜登陆成功</div>
    <div class="div1">用户名：<th th:text="${userInfo.name}"></th></div>
    <div class="div1">密码：<th th:text="${userInfo.password}"></th></div>
    <div class="div1">年龄：<th th:text="${userInfo.age}"></th></div>
    <div class="div1">性别：<th th:text="${userInfo.sex}"></th></div>
    <div class="div1">地址：<th th:text="${userInfo.address}"></th></div>
</body>
</html>