本章较适合后端能力比力弱的同学，逻辑处理都在前端完成，后端只必要写好用户的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());
- }
- }
|
