準(zhǔn)備工作:
創(chuàng)建數(shù)據(jù)庫stu;? ? ? ? create database stu charset=utf8;
使用數(shù)據(jù)庫stu;? ? ? ? ? ? use stu;
創(chuàng)建用戶表user(id,username,password,nick)
create table user(id int primary key auto_increment,username varchar(50),password varchar(50),nick varchar(50));
?
1.開始創(chuàng)建springboot工程,勾選Web->spring Web,? SQL->MyBatis Frameword及MySQL Driver三個(gè)選項(xiàng),完成
?2.打開src->main->resources->application.properties,設(shè)置數(shù)據(jù)庫信息
輸入
spring.datasource.url=jdbc:mysql://數(shù)據(jù)庫路徑/數(shù)據(jù)庫名?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false spring.datasource.username="數(shù)據(jù)庫賬號" spring.datasource.password="數(shù)據(jù)庫密碼"
3.在src->main->resources->static目錄下開始創(chuàng)建前端頁面首頁index.html
首頁實(shí)現(xiàn)兩個(gè)a標(biāo)簽跳轉(zhuǎn)到注冊頁面及登錄頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h1>首頁</h1>
<a href="/reg.html">注冊</a>
<a href="/login.html">登錄</a>
</div>
</body>
</html>?創(chuàng)建注冊頁面reg.html和登錄頁面login.html
//-------------------------------注冊功能------------------------------
? ? ? ? ?3-1.注冊頁面準(zhǔn)備三個(gè)文本框( 用戶名,密碼,昵稱 )一個(gè)按鈕( 注冊 ),并導(dǎo)入vue和axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text" placeholder="請輸入用戶名">
<input type="password" placeholder="請輸入密碼">
<input type="text" placeholder="請輸入昵稱">
<input type="button" value="注冊">
</div>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
let v = new Vue({
el:"body>div",
data:{
},
methods:{
}
})
</script>
</body>
</html>? ? ? ? 3-2.創(chuàng)建一個(gè)對象保存數(shù)據(jù),用于與文本框雙向綁定
? ? ? ? 3-3.注冊按鈕添加點(diǎn)擊事件方法,在方法處聲明該方法發(fā)送請求,將返回的數(shù)據(jù)判斷用戶是否注冊完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text" v-model="user.username" placeholder="請輸入用戶名">
<input type="password" v-model="user.password" placeholder="請輸入密碼">
<input type="text" v-model="user.nick" placeholder="請輸入昵稱">
<input type="button" value="注冊" @click="reg()">
</div>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
let v = new Vue({
el: "body>div",
data: {
user: {
username: "", password: "", nick: ""
}
},
methods: {
reg() {
axios.post("/reg", v.user).then(function (response) {
if (response.data == 1) {
alert("注冊完成!")
location.href="/";//回到首頁
} else {
alert("用戶名已存在!")
}
})
}
}
})
</script>
</body>
</html>4.在src->main->java->創(chuàng)建的目錄下創(chuàng)建子目錄controller,目錄entity及目錄mapper,在controller目錄下創(chuàng)建UserController的JAVA文件,在entity目錄下創(chuàng)建User的JAVA文件,在mapper目錄下創(chuàng)建UserMapper接口
? ? ? ? 4-1.在User文件中創(chuàng)建實(shí)體類用于封裝屬性并生成getter and setter方法
package cn.tedu.weibo2.entity;
public class User {
private Integer id;
private String username;
private String password;
private String nick;
public Integer getId() {
return id;
}
public void setId(Integer 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 String getNick() {
return nick;
}
public void setNick(String nick) {
this.nick = nick;
}
}
? ? ? ? 4-2.?在UserMapper接口中添加Mapper注解
? ? ? ? ?在UserController類中添加RestController注解,并定義UserMapper及Autowired注解
?5.解決請求:在UserController類中解決/reg的請求定義reg方法,
? ? ? ? 5-1:到數(shù)據(jù)庫查詢用戶輸入的用戶名是否存在,若存在則返回2,若不存在則進(jìn)行數(shù)據(jù)庫添加用戶信息并返回1;
?
?
? ? ? ? 5-2:數(shù)據(jù)庫查詢,在UserMapper接口中定義sql語句查詢用戶名是否存在,并定義添加用戶sql語句用于用戶注冊
?
注冊完成檢測:
在首頁進(jìn)入到注冊頁面,輸入注冊信息
注冊完成進(jìn)入數(shù)據(jù)庫查看是否用戶添加成功!
?
注冊最終代碼:
UserController:文章來源地址http://www.zghlxwxcb.cn/news/detail-474474.html
package cn.tedu.weibo2.controller;
import cn.tedu.weibo2.entity.User;
import cn.tedu.weibo2.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class UserController {
@Autowired
UserMapper mapper;
@RequestMapping("/reg")
public int reg(@RequestBody User user){
User u = mapper.selectUser(user.getUsername());
if (u!=null){
return 2;//若用戶輸入的用戶名存在,則注冊失敗
}
mapper.insertUser(user);
return 1;//用戶名不存在,注冊成功
}
}
UserMapper:
package cn.tedu.weibo2.mapper;
import cn.tedu.weibo2.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
@Mapper
public interface UserMapper {
@Select("select id,password,nick from user where username=#{username}")
User selectUser(String username);
@Insert("insert into user values(null,#{username},#{password},#{nick})")
void insertUser(User user);
}
?//---------------------------------------登錄功能-------------------------------
1.創(chuàng)建頁面login.html 包含兩個(gè)文本框(用戶名,密碼)及一個(gè)登錄按鈕
? ? ? ? 1-1.導(dǎo)入vue及axios文件
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>? ? ? ? 1-2.定義user對象,儲存用戶名及密碼
? ? ? ? ?1-3.對用戶名輸入框及密碼框雙向綁定,獲取用戶輸入的內(nèi)容,登錄按鈕添加點(diǎn)擊事件
? ? ? ? ?1-4.點(diǎn)擊事件方法發(fā)送請求,判斷用戶名是否存在,若存在判斷密碼是否正確
?2.解決登錄發(fā)送過來的請求
? ? ? ? 2-1.在UserController類解決/login請求,定義login()方法
? ? ? ? 判斷用戶是否存在,若存在判斷密碼是否正確
運(yùn)行測試:
進(jìn)入登錄頁面,
?
?
?
?最終代碼:文章來源：http://www.zghlxwxcb.cn/news/detail-474474.html
UserController:
package cn.tedu.weibo2.controller;
import cn.tedu.weibo2.entity.User;
import cn.tedu.weibo2.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class UserController {
@Autowired
UserMapper mapper;
@RequestMapping("/reg")
public int reg(@RequestBody User user){
User u = mapper.selectUser(user.getUsername());
if (u!=null){
return 2;//若用戶輸入的用戶名存在,則注冊失敗
}
mapper.insertUser(user);
return 1;//用戶名不存在,注冊成功
}
@RequestMapping("/login")
public int login(@RequestBody User user){
User u =mapper.selectUser(user.getUsername());
if (u!=null){//用戶存在
if (user.getPassword().equals(u.getPassword())){//判斷用戶輸入的密碼是否與數(shù)據(jù)庫密碼相同
return 1;//密碼一樣,登錄成功
}
return 2;//密碼錯(cuò)誤
}
return 3;//用戶不存在
}
}
到了這里，關(guān)于java連接數(shù)據(jù)庫實(shí)現(xiàn)登錄與注冊小功能(小白版)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
