我的第一个项目
前期准备
请确保电脑上已经装了以下软件。
- IDEA ,这是JAVA编辑器,我用的版本是2018专业版;
- JDK8 这部分不要用新的版本,不然到时候会有很多不兼容问题,记得配置环境,这部分不会的请百度;
- apache-maven-3.6.0 跟JAVA一项配置一下环境。
- mysql 作为数据库;
- navicat for mysql这是一个可视化的数据库编辑器;
功能构思
- 首先我们需要一个数据库,来保存登陆注册要用的账号和密码对吧。数据库应该有三个属性,id,account,password
- 前端,3个界面,分别是index,welcome和error
index用来输入账号密码,welcome表示登陆成功,error表示账号或密码错误。 - 后端,主要是进行逻辑判断,即判断前端传过来的账号和密码是否正确,或者判断账号是否已经注册过了。
基本架构编写
1.我们先按照“功能构思”上面所需的界面构建一下整个登陆注册的框架
如下图所示。(新建一个项目随便取名字,注意新建项目是选择spring-Initializr)
这里建议大家CSS和JS跟HTML都是一样的名字,这样后期比较好区分,还有最好文件夹跟我的一样,也方便后期加功能。
这里说一下这几个东西的作用,LoginControllers用来放跟登陆控制相关的控制类,ReturnControllers用来存放返回页面的控制类,OtherControllers用来放其他东西,比如后面如果加传图片的功能就放在这里面。
UserRepository里面是连接JPA的内容,注意我们这个方法没有Dao层之类的东西,因为我也是初学者,按我的来应该不会出错。
接下来的static里面就是放前端三板斧的东西啦HTML、CSS、JS。
2.下面配置一下pom.xml和application.properties
首先是pom.xml 这里大家复制dependencies里面的代码就可以,其他的不要复制切记。
<?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.5.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>myfirstproject</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>myfirstproject</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-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.22</version>
</dependency>
<!--配置热部署-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
<!--使用JPA-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!--连接数据库-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</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>
<exclusion>
<groupId>com.vaadin.external.google</groupId>
<artifactId>android-json</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
<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>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
接下来是application.properties的内容,这里大家可以直接复制就OK,但是注意把下方的端口号换成你安装mysql中的端口号以及把你的数据库名字和密码改一下。
#配置文件
#配置端口
server.port=5200
#配置变量 不需要管类型
name = B
#属性配置
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML
spring.datasource.url=jdbc:mysql://localhost:你的端口名称/你的数据库名?serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=这里改成你的数据库的密码
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.tomcat.max-idle=10
spring.datasource.tomcat.max-active=50
spring.datasource.tomcat.max-wait=10000
spring.datasource.tomcat.initial-size=5
spring.datasource.tomcat.default-transaction-isolation=2
spring.jpa.hibernate.ddl-auto = update
spring.jpa.show-sql=true
spring.jpa.open-in-view=false
#spring.servlet.multipart.max-file-size=500MB
#spring.servlet.multipart.max-request-size=2048MB
spring.mvc.static-path-pattern=/static/**
3.下面就开始写其他的代码。
首先,我们在User里写代码,我们在这里写代码mysql就会自动生成表,是不是很神奇。
下面直接贴代码了,有注释大家自己看哈
User里面的代码
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity//
public class User {
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Id//这两行@是让id为逐渐并递增
private Integer id;
private String account;
private String password;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", account='" + account + '\'' +
", password='" + password + '\'' +
'}';
}
}
然后,数据库这样就算建好了,但是得等运行了才能建起来哈,接下来我们就先写一下三个html,老规矩贴代码:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<title>登录</title>
</head>
<body>
<div class="register">
<div class="loginandregister">
<form>
<div class="form-group">
<lable for="account">账号</lable>
<input type="text" class="form-control" id="account">
</div>
<div class="form-group">
<lable for="password">密码</lable>
<input type="text" class="form-control" id="password">
</div>
<button type="button" class="btn btn-outline-light" id="btn1" onclick="register()">注册</button>
<button type="button" class="btn btn-outline-light" id="btn2" onclick="login()">登录</button>
</form>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="/static/js/index.js"></script>
</body>
</html>
error.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>账号或密码错误</h1>
</body>
</html>
welcome.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>欢迎登陆</h1>
</body>
</html>
5. 接下来就是写后端页面了。
先写UserRepository的代码这里用的是Springdata-jpa的内容
import com.example.myfirstproject.OtherControllers.User;
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository<User,Integer> {
//下面这个函数是用来验证登陆账号和密码的
public User findByAccountAndPassword(String account,String password);
//findByAccountAndPassword相当于
//@Query(value = "select account from User where account=?1 and password=?2")
//public String findByAccountAndPassword(String account,String password);
//下面这个函数是用开看账号是否已经注册过用的
public User findByAccount(String account);
}
然后是MainController
import com.example.myfirstproject.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MainController {
@Autowired
private UserRepository userRepository;
//获取index页面
@GetMapping("index")
public String index(){
return "index";
}
//获取error页面
@GetMapping("error")
public String error(){
return "error";
}
//获取welcome页面
@GetMapping("welcome")
public String welcome(){
return "welcome";
}
}
接下来是LoginAndRegisterController
import com.example.myfirstproject.OtherControllers.User;
import com.example.myfirstproject.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class LoginAndRegisterController {
@Autowired
private UserRepository userRepository;
//判断账号密码是否正确
@PostMapping("login")
public String login(String account,String password){
User user = userRepository.findByAccountAndPassword(account,password);
//下面的逻辑就是通过上面这条语句,如果再数据库查到了账号和密码,那么就返回yes证明账号密码正确,否则就返回no
if(user!=null){
return "yes";
}else{
return "not";
}
}
//判断是否注册过
@PostMapping("register")
public String register(User u){
User user = userRepository.findByAccount(u.getAccount());
//注册的原理跟登陆的原理差不多,只不过这里仅用一个参数就行啦
if(user!=null){
return "not";
}else{
userRepository.save(u);
return "yes";
}
}
}
后台基本写好了,现在写前端JS代码:
index.js
function register(){
//下面两个参数用来传到后台
var account = $("#account").val();
var password = $("#password").val();
$.ajax({
type:"POST",
url:"register",
data:{
account:account,
password:password
},
success:function (data) {
//如果后台返回的是not证明账号已经注册过了
if(data=="not"){
alert("该账号已注册过");
location.reload();
}else{
alert("注册成功,请登录")
location.reload();
}
}
})
}
function login() {
var account = $("#account").val();
var password = $("#password").val();
$.ajax({
type:"POST",
url:"login",
data:{
account:account,
password:password
},
success:function (data) {
if(data=="not"){
alert("账号或密码错误");
location.href="error";
}else{
location.href="welcome";
}
}
})
}
测试
现在登陆注册的例子已经完成,接下来要对其进行测试。
1.启动项目
在地址栏输入http://localhost:5200/index出现登陆界面
2.注册
接下来注册一个账号,并在数据库中能够看到该账号,我这里注册账号名1,密码也是1,我这里ID是8因为之前做过测试了,我把记录删了
3.登陆
输入账号:1 密码:1.点击登陆将跳转到welcome页面
4.后续改进
后续可以对前端页面进行美化,慢慢加一点功能。
我们现在是前后端分离的写法,后面有机会分享前后端不分离的写法。
下一个分享应该是实现修改密码的功能。
谢谢耐心的你,我也是初学者,不足之处请多多指教。