本文共 10533 字，大约阅读时间需要 35 分钟。

基础介绍

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

• Java
• Ajax
• SpringBoot

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

代码实战

前端

log.html

   
   
   
	
    	
先机网
			
    
		
     
The world listens to you
	
    
		
    
		
     
			
      		
     
		
     
			
      		
     
		
     登 陆	
    
	
    		还有没有账号？	
   
   
   

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

   
   	
   	
   
	
   
   
	
    	
先机网
			
    
		
     
The world listens to you
	
    
		
    
		
     
			
      		
     
		
     
			
      		
     
		
     
			
      		
     
		
     		
     注 册	
    
	
    		已经有账号？	
   
   
   

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

   
       
    
     4.0.0
        
            
     
      org.springframework.boot
             
     
      spring-boot-starter-parent
             
     
      2.3.3.RELEASE
             
      
         
        
    
     com.xianji
        
    
     xianji
        
    
     0.0.1-SNAPSHOT
        
    
     xianji
        
    
     Demo project for Spring Boot
        
            
     
      1.8
         
        
            
                 
      
       org.springframework.boot
                  
      
       spring-boot-starter-web
              
             
                 
      
       org.springframework.boot
                  
      
       spring-boot-starter-test
                  
      
       test
                  
                      
                           
        
         org.junit.vintage
                            
        
         junit-vintage-engine
                        
                   
              
             
                 
      
       org.springframework.boot
                  
      
       spring-boot-configuration-processor
                  
      
       true
              
             
                 
      
       org.springframework.boot
                  
      
       spring-boot-starter-data-jpa
              
             
                 
      
       mysql
                  
      
       mysql-connector-java
              
         
        
            
                 
                      
       
        org.springframework.boot
                       
       
        spring-boot-maven-plugin
                   
              
         
    
   

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: */@Entitypublic 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: */@RestControllerpublic 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: */@RestControllerpublic 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
   
     {
       // 接口本口 对数据库的操作都靠它！    public user findByName(String name);}
   

XianjiApplication.java

package com.xianji.xianji;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplicationpublic 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

   
       
    
     4.0.0
        
            
     
      org.springframework.boot
             
     
      spring-boot-starter-parent
             
     
      2.3.3.RELEASE
             
      
         
        
    
     com.xianji
        
    
     xianji
        
    
     0.0.1-SNAPSHOT
        
    
     xianji
        
    
     Demo project for Spring Boot
        
            
     
      1.8
         
        
            
                 
      
       org.springframework.boot
                  
      
       spring-boot-starter-web
              
             
                 
      
       org.springframework.boot
                  
      
       spring-boot-starter-test
                  
      
       test
                  
                      
                           
        
         org.junit.vintage
                            
        
         junit-vintage-engine
                        
                   
              
             
                 
      
       org.springframework.boot
                  
      
       spring-boot-configuration-processor
                  
      
       true
              
             
                 
      
       org.springframework.boot
                  
      
       spring-boot-starter-data-jpa
              
             
                 
      
       mysql
                  
      
       mysql-connector-java
              
         
        
            
                 
                      
       
        org.springframework.boot
                       
       
        spring-boot-maven-plugin
                   
              
         
    
   

特别注意

转载地址：https://codingpark.blog.csdn.net/article/details/108074836 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！