ToB企服应用市场:ToB评测及商务社交产业平台
标题:
html+axios+springboot实现登录注册(前端代码)
[打印本页]
作者:
道家人
时间:
6 天前
标题:
html+axios+springboot实现登录注册(前端代码)
本章较适合后端能力比力弱的同学，逻辑处理都在前端完成，后端只必要写好用户的Get和Post请求即可。
登录部门：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/login.css">
<link rel="stylesheet" href="./js/element.css">
</head>
<body>
<!-- 外div包罗 -->
<div class="margindiv">
<!-- 登录框 -->
<div class="loginborder">
<!-- 左半部门 -->
<div class="leftdiv">
<h2>接待~</h2>
<h2>来到悦华社区</h2>
</div>
<!-- 左半部门 -->
<!-- 右半部门 -->
<div class="rightinput" id="app">
<h3>登录</h3>
<input placeholder="账号:" v-model="loginUsername">
<input placeholder="暗码:" v-model="loginPassword">
<button @click="login">登录</button>
<a href="./register.html">没有账号？去注册</a>
</div>
<!-- 右半部门 -->
</div>
<!-- 登录框 -->
</div>
<!-- 外div包罗 -->
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios.min.js"></script>
<script>
const vmlogin = new Vue({
el: "#app",
data: {
user: [],//渲染用户的数组
loginUsername: '',//输入用户名
loginPassword:''//输入暗码
},
created() {
axios.get("http://127.0.0.1:8080/api/User/get").then(response => {
this.user = response.data;
}).catch(err => {
this.$message({
type: 'error',
message: err
});
})
},
methods: {
login(){
//判定账号暗码是否正确，如果正确就登岸
let existLoginUser = this.user.find(user => user.username === this.loginUsername && user.password ===
this.loginPassword);
if (existLoginUser) {
localStorage.setItem('loggedInUser', this.loginUsername); // 存储登录用户名
localStorage.setItem('Usercreatetime', existLoginUser.createtime); // 新增：存储登录用户的注册时间
localStorage.setItem('Userheadeimg', existLoginUser.image); // 新增：存储用户的头像链接
localStorage.setItem('Userid', existLoginUser.id); // 新增：存储用户的数据库ID
this.$message({
type: 'success',
message: '暗码正确，正在登录！'
});
setTimeout(() => {
window.location.href = "index.html";
}, 2000);
} else {
this.$message({
type: 'success',
message: '用户名或暗码错误，请重新输入！'
});
}
},
}
})
</script>
</body>
</html>
注册部门：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/login.css">
<link rel="stylesheet" href="./js/element.css">
</head>
<body>
<!-- 外div包罗 -->
<div class="margindiv">
<!-- 登录框 -->
<div class="loginborder">
<!-- 左半部门 -->
<div class="leftdiv">
<h2>接待~</h2>
<h2>来到悦华社区</h2>
</div>
<!-- 左半部门 -->
<!-- 右半部门 -->
<div class="rightinput" id="app">
<h3>注册</h3>
<input placeholder="账号:" v-model="newUsername">
<input placeholder="暗码:" v-model="newPassword" type="password">
<input placeholder="确认暗码:" v-model="newPasswordtow" type="password">
<input placeholder="头像链接:" v-model="newImage">
<input placeholder="注册时间?为当前" v-model="newCreatetime" readonly style="display: none;">
<button @click="adduser">注册</button>
<a href="./login.html">已有账号？去登录</a>
</div>
<!-- 右半部门 -->
</div>
<!-- 登录框 -->
</div>
<!-- 外div包罗 -->
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios.min.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
user: [], //渲染用户的数组
newUsername: '', //注册用户名
newPassword: '', //注册暗码
newPasswordtow: '', //注册暗码
newImage: '', //注册头像
newCreatetime: '' //注册账号的时间
},
created() {
axios.get("http://127.0.0.1:8080/api/User/get").then(response => {
this.user = response.data;
}).catch(err => {
this.$message({
type: 'error',
message: err
});
})
},
methods: {
// 注册
adduser() {
if (this.newPassword !== this.newPasswordtow) {
this.$message({
type: 'success',
message: '暗码和确认暗码不一致，请重新输入！'
});
return;
}
if (!this.newUsername || !this.newPassword || !this.newPasswordtow) {
this.$message({
type: 'success',
message: '全部输入框不能为空！'
});
return;
}
//设置用户名已存在提示的逻辑
let existUser = this.user.find(user => user.username === this.newUsername);
if (existUser) {
this.isUserExist = true; // 设置用户存在标识
// alert("用户已存在注册失败!");
this.$message({
type: 'success',
message: '用户已存在注册失败！'
});
return;
}
// 获取注册的时间,并传递值
// 在点击注册时获取当前时间并格式化为指定格式
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let day = now.getDate();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
this.newCreatetime = `${year}/${month}/${day} ${hours}
{minutes}
{seconds}`;
let data = [{
"username": this.newUsername,
"password": this.newPassword,
"image": this.newImage,
"createtime": this.newCreatetime
}];
axios.post("http://127.0.0.1:8080/api/User/add", data)
.then(response => {
this.$message({
type: 'success',
message: '注册账号成功！'
});
this.newUsername = '',
this.newPassword = '',
this.newImage = ''
setTimeout(() => {
window.location.href = "login.html";
}, 2000);
})
.catch(err => {
this.$message({
type: 'error',
message: err
});
});
},
}
})
</script>
</body>
</html>
后端Controller：
package com.nfit.studentmis1805.controller;
import com.nfit.studentmis1805.entity.User;
import com.nfit.studentmis1805.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.stream.Collectors;
@RestController
//@CrossOrigin("*")
@RequestMapping("/api/User")
public class UserController {
@Autowired
UserService userService;
/********************查询全部*/
@GetMapping("/get")
public List<User> findAllUser(){
return userService.getAllUser();
}
//根据id查询
@GetMapping("/getById/{id}")
public User findUserById(@PathVariable Integer id) {
return userService.getUserById(id);
}
/*******************添加用户**/
@PostMapping("/add")
public List<Integer> adduser(@RequestBody List<User> user){
return user.stream().map(userService::addUser)
.collect(Collectors.toList());
}
}
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4
{minutes}{seconds}`;