请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

python实现前后端学生管理系统(前后端分离)

2023-07-13

⭐作者介绍:大二本科网络工程专业在读,持续学习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"

相关阅读

热门文章