⭐作者介绍：大二本科网络工程专业在读，持续学习Java，努力输出优质文章
⭐作者主页：@逐梦苍穹
⭐所属专栏：项目。
1、前言
本文介绍的是用python实现的前后端学生管理系统，前后端分离，较为简单易上手。使用的技术点为：HTML+CSS+JavaScript+Flask+sqlite+Vue+Axios。
如果想了解前后端不分离的情况，请看我这篇文章：
python实现前后端学生管理系统(前后端不分离)
2、思路总览
下面是关于实现的功能的总览：
首页
①管理系统的首页：(如有需求，可以自行使用前端框架美化)
其中：
注册和登陆是链接：
注册链接到注册功能页面
登陆链接到登陆功能页面
注册
②注册
注册功能页面，注册功能页面自定义，需要包含如下注册信息并对输入内容进行校验：
| 注册信息 | 验证规则 |
|---|
| 姓名 | 姓名缩写，不能为空 |
| 学号 | 数字类型，不能为空 |
| 学院 | 不能为空 |
| 专业 | 不能为空 |
| 班级 | 不能为空 |
| 年龄 | 17-22间的任意数字，数字类型，不能为空 |
| 电话 | 数字类型，不能为空 |
| Email | 邮件格式 |
| 用户名 | 字母大小写、数字、下划线四种类型至少包含三种，字母开始，长度至少6位 |
| 密码 | 字母大小写、数字、下划线四种类型至少包含三种，长度至少8位 |
| 确认密码 | 重复密码 |
基本流程：验证成功后，这些注册信息都需要写入sqlite的数据库stu.db的students表中（该表需要先单独创建，字段为上面的注册信息，名字自定义，类型要满足需求，另外用户名设置为主键，这样表中的用户名取值就不能相同）。然后跳转到注册成功页面，该页面有返回首页链接。
登录
③登录
登陆功能页面，该页面需要输入用户名和密码，输入的用户名和密码与students表中已有记录进行比对，若用户名和对应密码在表中存在则跳转到登陆成功页面，否则提示用户名不存在或密码错误，不跳转。登陆成功页面直接以表格方式显示自己注册的所有信息，如下：
管理员
④管理员账号
创建一个admin表，字段包括管理员名和密码，自己通过sql语句插入三条记录，即创建三个管理员账号。
网站有个路径为/admin，供管理员账号登陆的页面：
登录之后展示全部信息：
3、详细代码
3.1、项目目录
3.2、static
static文件夹需要导入两个框架，一个是vue.js，一个属axios.js(这个是本项目实现前后端分离的关键：发送异步请求)
需要这两个框架文件可以点赞收藏加关注，私聊我发给你。
3.3、templates
3.3.1、01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xzl</title>
<style>
h1 {color:black}
a:link {color:#9932CC;align-items:center}
</style>
</head>
<body>
<div id="app">
<br>
<h1 style="font-size:60px">欢迎访问本站</h1><br>
<h1>
<a href="/newStudent" @click="register">注册</a><br><br>
<a href="/enter" @click="login">登录</a><br>
</h1>
</div>
</body>
</html>
3.3.2、02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xzl</title>
<style>
</style>
</head>
<body>
<div id="app" style="text-align:center;">
<h1>用户登录</h1><br>
<form @submit.prevent="login">
用户名: <input type="text" v-model="username" name="user"><br><br>
密码: <input type="password" v-model="password" name="pwd"><br><br>
<input type="submit" value="登录" /><br><br>
</form>
<a href="/" style="color:#3CBC8D;">返回首页</a>
</div>
<script src="static/js/vue.js"></script>
<script src="static/js/axios-0.18.0.js"></script>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: '',
message: ''
},
methods: {
login() {
axios.post('/check', {
username: this.username,
password: this.password
})
.then(response => {
this.message = response.data.message;
if (response.data.redirect) {
alert(this.message)
window.loc1ation.href = response.data.redirect;
}else {
alert(this.message)
}
})
.catch(error => {
console.error(error);
});
}
}
});
</script>
</body>
</html>
3.3.3、03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xzl</title>
<script>
function submitForm(event) {
event.preventDefault();
const name = document.getElementById('name').value;
const num = document.getElementById('number').value;
const academy = document.getElementById('academy').value;
const major = document.getElementById('major').value;
const Class = document.getElementById('Class').value;
const age = document.getElementById('age').value;
const phone = document.getElementById('phone-number').value;
const email = document.getElementById('email').value;
const user = document.getElementById('user').value;
const pwd = document.getElementById('password').value;
const repwd = document.getElementById('surePassword').value;
if (pwd !== repwd) {
document.getElementById('message').textContent = '两次密码不一致';
return;
}
const data = {
name: name,
num: num,
academy: academy,
major: major,
Class: Class,
age: age,
phone: phone,
email: email,
user: user,
pwd: pwd
};
fetch('/addrec', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
if (result.success) {
alert(result.message);
document.getElementById('message').textContent = '';
document.getElementById('name').value = '';
document.getElementById('number').value = '';
document.getElementById('academy').value = '';
document.getElementById('major').value = '';
document.getElementById('Class').value = '';
document.getElementById('age').value = '';
document.getElementById('phone-number').value = '';
document.getElementById('email').value = '';
document.getElementById('user').value = '';
document.getElementById('password').value = '';
document.getElementById('surePassword').value = '';
} else {
document.getElementById('message').textContent = result.message + ' ' + result.reason;
}
})
.catch(error => {
console.error('Error:', error);
document.getElementById('message').textContent = '请求失败';
});
}
var flag = false;
function checkName() {
var name = document.getElementById("name").value;
if (name.length == 0 || name == null) {
document.getElementById("name-error").innerHTML = "名字不能为空";
flag = false;
}else {
document.getElementById("name-error").innerHTML = "";
flag=true;
}
}
function checkNumber() {
var number = document.getElementById("number").value;
if (number.length == 0 || number == null) {
document.getElementById("number-error").innerHTML = "学号不能为空";
flag = false;
} else {
var regex = /^\d+$/;
if (!regex.test(number)) {
document.getElementById("number-error").innerHTML = "学号必须是数字";
flag = false;
} else {
document.getElementById("number-error").innerHTML = "";
flag=true;
}
}
}
function checkAcademy() {
var academy = document.getElementById("academy").value;
if (academy.length == 0 || academy == null) {
document.getElementById("academy-error").innerHTML = "学院不能为空";
flag = false;
} else {
document.getElementById("academy-error").innerHTML = "";
flag=true;
}
}
function checkMajor() {
var flag = false;
var major = document.getElementById("major").value;
if (major.length == 0 || major == null) {
document.getElementById("major-error").innerHTML = "专业不能为空";
flag = false;
} else {
document.getElementById("major-error").innerHTML = "";
flag=true;
}
}
function checkCLASS() {
var classValue = document.getElementById("Class").value;
if (classValue.length == 0 || classValue == null) {
document.getElementById("Class-error").innerHTML = "班级不能为空";
flag = false;
} else {
document.getElementById("Class-error").innerHTML = "";
flag=true;
}
}
function checkAge() {
var age = document.getElementById("age").value;
if (age.length == 0 || age == null) {
document.getElementById("age-error").innerHTML = "年龄不能为空";
flag = false;
} else if (isNaN(age)) {
document.getElementById("age-error").innerHTML = "年龄必须为数字";
flag = false;
} else if (age < 17 || age > 22) {
document.getElementById("age-error"
