Ajax+SpringBoot注册登录实战_CodingPark编程公园

基础介绍

本项目实用一下三种技术:

  • Java
  • Ajax
  • SpringBoot

本项目涵盖前端 + 后端 + 数据库

代码实战

前端

log.html

<!DOCTYPE html>
<html lang="zh-CN">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>登陆丨GoStart</title>
<link rel="stylesheet" href="css/style.css">


<body>

<div class="login-container">
	<a href="index.html" style="text-decoration:none;color:white;">
	<h1>先机网</h1>
	</a>
	
	<div class="connect">
		<p>The world listens to you</p>
	</div>
	
	<form>
		<div>
			<input id="logname" type="text" name="username" class="username" placeholder="用户名" autocomplete="off"/>
		</div>
		<div>
			<input id="logpwd" type="password" name="password" class="password" placeholder="密码" oncontextmenu="return false" onpaste="return false" />
		</div>
		<button id="logsubmit" type="button" >登 陆</button>
	</form>

	<a href="register.html">
		<button type="button" class="register-tis">还有没有账号?</button>
	</a>

</div>

</body>
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="js/log.js"></script>
<!--背景图片自动更换-->
<script src="js/supersized.3.2.7.min.js"></script>
<script src="js/supersized-init.js"></script>
<!--表单验证-->
<script src="js/jquery.validate.min.js?var1.14.0"></script>
</html>

log.js


//ajax  获取后端参数    我写在了整个JS最后

  $("#logsubmit").on('click',  function(event) {
    /* Act on the event */
    var data = {name:$("#logname").val(),password:$("#logpwd").val()}
    console.log(data);
    $.ajax({
      url:"http://localhost:8080/login",
      type:"POST",
      time:'3000', 
      data: data,
      dataType: "json",
      success:function(rsp){  
        console.log(rsp);    
        if(rsp == 1){
          window.location.href="index-L2.html";
        }
      },
      error:function(e) {
        /* Act on the event */
        console.log(e);
      }
    });
});





register.html

<!DOCTYPE html>
<html lang="zh-CN">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>注册丨GoStart</title>
<link rel="stylesheet" href="css/style.css">
<body>
	<!-- Preloader Start -->
	<div class="se-pre-con"></div>
	<!-- Preloader Ends -->

<div class="register-container">
	<a href="index.html" style="text-decoration:none;color:white;">
	<h1>先机网</h1>
	</a>
	
	<div class="connect">
		<p>The world listens to you</p>
	</div>
	
	<form>
		<div>
			<input id="regname" type="text" name="username" class="username" placeholder="您的用户名" autocomplete="off"/>
		</div>
		<div>
			<input id="regpwd" type="password" name="password" class="password" placeholder="输入密码" oncontextmenu="return false" onpaste="return false" />
		</div>
		<div>
			<input id="regrepwd" type="password" name="confirm_password" class="confirm_password" placeholder="再次输入密码" oncontextmenu="return false" onpaste="return false" />
		</div>
		<!-- <div>
			<input type="text" name="phone_number" class="phone_number" placeholder="输入手机号码" autocomplete="off" id="number"/>
		</div>
		<div>
			<input type="email" name="email" class="email" placeholder="输入邮箱地址" οncοntextmenu="return false" οnpaste="return false" />
		</div> -->

		<button id="regsubmit" type="button">注 册</button>
	</form>
	<a href="log.html">
		<button type="button" class="register-tis">已经有账号?</button>
	</a>

</div>

</body>
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/register.js"></script>
<script src="js/common.js"></script>
<!--背景图片自动更换-->
<script src="js/supersized.3.2.7.min.js"></script>
<script src="js/supersized-init.js"></script>
<!--表单验证-->
<script src="js/jquery.validate.min.js?var1.14.0"></script>
</html>

register.js


//ajax  获取后端参数    我写在了整个JS最后

  $("#regsubmit").on('click',  function(event) {
    /* Act on the event */
    var data = {name:$("#regname").val(),password:$("#regpwd").val(), repassword:$("#regrepwd").val()}
    console.log(data);
    $.ajax({
      url:"http://localhost:8080/register",
      type:"POST",
      time:'3000', 
      data: data,
      dataType: "json",
      success:function(rsp){  
        console.log(rsp);    
        if(rsp == 1){
          window.location.href="index-L2.html";
        }
      },
      error:function(e) {
        /* Act on the event */
        console.log(e);
      }
    });
});





后端

在这里插入图片描述

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.xianji</groupId>
    <artifactId>xianji</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>xianji</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>


    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

application-dev.yml

server:
  port: 8080
  

application.yml

spring:
  profiles:
    active: dev

  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/xianji
    username: root
    password: root


  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true



user.java

package com.xianji.xianji.domain;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;

/**
 * @Author: TEAM-AG
 * @Description:
 * @Date: Created in 13:13 2020-08-15
 * @Modified By:
 */
@Entity
public class user {

    @Id
    @GeneratedValue
    private Integer id;
    private String name;
    private String password;


    public user() {                             // 无参构造方法
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer 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;
    }
}



userlog.java

package com.xianji.xianji.controller;

import com.xianji.xianji.dao.xianjiRepository;
import com.xianji.xianji.domain.user;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletResponse;

/**
 * @Author: TEAM-AG
 * @Description:
 * @Date: Created in 16:52 2020-08-15
 * @Modified By:
 */

@RestController
public class userlog {

    private Integer status = 0;

    @Autowired
    private xianjiRepository xianjiRepository;

    /**
     *
     * @Description:
     * 查询
     * @auther: TEAM-AG
     * @date: 20:10 2020-08-13
     * @param: []
     * @return: java.util.List
     *
     */



    // 查询

//    @RequestMapping(value = "/login", method = RequestMethod.POST)
//    @ResponseBody
    @PostMapping(value = "/login")                       // @查某个id
    @CrossOrigin
    public Integer login(String name, String password){

        status = 0;

        user user = xianjiRepository.findByName(name);


        if (password.equals(user.getPassword())){
            status = 1;
        }

        System.out.println("LoginStatus : " + status);

//        response.setHeader("Access-Control-Allow-Origin", "*");     // 跨域
//        response.setContentType("text/json; charset=utf-8");         // 跨域
        return status;

    }



}



userreg.java

package com.xianji.xianji.controller;

import com.xianji.xianji.dao.xianjiRepository;
import com.xianji.xianji.domain.user;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @Author: TEAM-AG
 * @Description:
 * @Date: Created in 07:53 2020-08-16
 * @Modified By:
 */

@RestController
public class userreg {


    private Integer status = 0;

    @Autowired
    private xianjiRepository xianjiRepository;

    /**
     *
     * @Description:
     * 查询
     * @auther: TEAM-AG
     * @date: 20:10 2020-08-13
     * @param: []
     * @return: java.util.List
     *
     */



    // 插入

//    @RequestMapping(value = "/login", method = RequestMethod.POST)
//    @ResponseBody
    @PostMapping(value = "/register")                       // @插入
    @CrossOrigin
    public Integer register(String name, String password, String repassword){

        status = 0;

        user user = xianjiRepository.findByName(name);

        System.out.println("kankan -> " + user);

        if (user == null &&  password.equals(repassword)){          // 查了,但没这个用户

            user usernew = new user();
            usernew.setName(name);
            usernew.setPassword(password);
//            System.out.println("查了,但没这个用户0");
            xianjiRepository.save(usernew);
//            System.out.println("查了,但没这个用户1");
            status = 1;
//            System.out.println("查了,但没这个用户2");
        }

//        System.out.println("查了,但没这个用户2" + status);            // 1

        else if (!password.equals(user.getPassword()) && password.equals(repassword)){            // 查了,有个用户

            user usernew = new user();
            usernew.setName(name);
            usernew.setPassword(password);
            xianjiRepository.save(usernew);

            status = 1;

        }


        System.out.println("RegisterStatus : " + status);

//        response.setHeader("Access-Control-Allow-Origin", "*");     // 跨域
//        response.setContentType("text/json; charset=utf-8");         // 跨域
        return status;

    }

}




xianjiRepository.java

package com.xianji.xianji.dao;

import com.xianji.xianji.domain.user;
import org.springframework.data.jpa.repository.JpaRepository;

/**
 * @Author: TEAM-AG
 * @Description:
 * @Date: Created in 13:20 2020-08-15
 * @Modified By:
 */
public interface xianjiRepository extends JpaRepository<user, Integer> {

    // 接口本口 对数据库的操作都靠它!


    public user findByName(String name);


}



XianjiApplication.java

package com.xianji.xianji;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class XianjiApplication {

    public static void main(String[] args) {
        SpringApplication.run(XianjiApplication.class, args);
    }

}


数据库

其实Jpa的数据库,走后端已经配置完毕
这里再展示一下具体内容

application-dev.yml

server:
  port: 8080
  

application.yml

spring:
  profiles:
    active: dev

  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/xianji
    username: root
    password: root


  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true



pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.xianji</groupId>
    <artifactId>xianji</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>xianji</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>


    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

特别注意

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页
实付 79.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值