使用express+mysql实现一个简易的学生管理系统

最新推荐文章于 2024-04-09 11:01:48 发布
最新推荐文章于 2024-04-09 11:01:48 发布
阅读量627 收藏 11
点赞数 1
分类专栏： express学习记录 文章标签： node.js JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40639292/article/details/107341182
版权

使用express实现一个简易的学生管理系统

使用express实现一个简易的学生管理系统，增删改查学生数据（使用express+mysql进行数据的增删改查）

学生管理系统

项目代码结构

在这里插入图片描述

项目使用到的插件package.json

{
  "name": "3express-students-mysql",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "art-template": "^4.13.2",
    "body-parser": "^1.19.0",
    "bootstrap": "^3.4.1",
    "express": "^4.17.1",
    "express-art-template": "^1.0.1",
    "jquery": "^3.5.1",
    "mysql": "^2.18.1"
  }
}

项目准备

​生成package.json文件 【npm init】

安装express，使用命令【npm install express】

安装 art-template
	npm install --save art-template
	npm install --save express-art-template

安装body-parser npm i body-parser -s
该项目使用的是 bootStrap 所以需要安装bootstrap
	npm install bootstrap@3
安装mysql
	npm i mysql

页面显示

首页

界面展示

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>学生管理</title>

    <!-- Bootstrap -->
    <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div style="padding: 20px;">
        <div style="padding: 10px 0;">
            <a href="/students/new" type="button" class="btn btn-primary btn-sm">添加学生</a>
        </div>
        <table class="table table-striped table-bordered table-hover">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            {{each students}}
            <tr>
                <td>{{$value.name}}</td>
                <td>{{$value.age}}</td>
                <td>{{$value.sex}}</td>
                <td style="display: none">{{$value.id}}</td>
                <td>
                    <a href="/students/delete?id={{$value.id}}" type="button" class="btn btn-danger btn-xs" >删除</a>
                    <a href="/students/edit?id={{$value.id}}" type="button" class="btn btn-info btn-xs"> 编辑</a>
                </td>
            </tr>
            {{/each}}
        </table>
    </div>


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
<script>
</script>

添加学生页

界面展示

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div style="padding: 20px;">
        <form action="/students" method="POST">
            <div class="form-group">
                <label for="exampleInputEmail1">姓名：</label>
                <input type="text" name="name" class="form-control" id="exampleInputEmail1" placeholder="姓名">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">年龄：</label>
                <input type="text" name="age" class="form-control" id="exampleInputPassword1" placeholder="年龄">
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="sex" id="optionsRadios1" value="男" checked> 男
                </label>
                <label>
                    <input type="radio" name="sex" id="optionsRadios2" value="女"> 女
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>

</html>

修改页

界面展示

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div style="padding: 20px;">

    <form action="/students/edit" method="POST">
        <div class="form-group">
            <label for="exampleInputEmail1" name="name">姓名：</label>
            <input type="text" name="name" class="form-control" id="exampleInputEmail1" placeholder="姓名"
                   value="{{student.name}}">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">年龄：</label>
            <input type="text" name="age" class="form-control" id="exampleInputPassword1" placeholder="年龄"
                   value="{{student.age}}">
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="sex" id="optionsRadios1" value="男" {{student.sex === '男' ? 'checked':''}}>男
            </label>
            <label>
                <input type="radio" name="sex" id="optionsRadios2" value="女"{{student.sex === '女' ? 'checked':''}}> 女
            </label>
           <!--            用于保存用户id方便提交的时候顺便把id一起提交-->
            <input type="number" name="id" value="{{student.id}}" style="display: none">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>

</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

后台代码

入口函数代码

由于入口函数的代码应该尽量简洁，所把路由封装到单独的js文件中

const express = require('express')
const app = new express()
const router = require('./router')


const bodyParser = require('body-parser')
// npm i body-parser

app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())

// 把模板引擎加载到express
app.engine('html', require('express-art-template'))

// 处理静态文件
app.use('/node_modules/', express.static('./node_modules/'))
app.use('/public/', express.static('./public/'))

app.use(router)

app.listen(3000, () => {
  console.log('启动成功 127.0.0.1:3000')
})

路由代码

将增删改查的操作全部封装到studen.js文件中 路由只需要导入调用即可

const fs = require('fs')
const express = require('express')
const Student = require('./student')


// 创建路由容器
const router = express.Router()

// 挂载路由
router.get('/students', function (req, res) {
    Student.find().then(data=>{
      res.render('./index.html',{
        students:data
      })
    }).catch(err=>{
      res.status(500).send('Server Error')
      console.log(err)
    })
})

router.get('/students/new', function (req, res) {
  res.render('newStudent.html')
})

router.post('/students', function (req, res) {
  Student.save(req.body).then(data=>{
    res.redirect('/students')
  }).catch(err=>{
    res.status(500).send('Server Error')
    console.log('err',err)
  })

})

router.get('/students/edit', function (req, res) {
  const id = req.query.id
  Student.find().then(data=>{
    const student = data.filter(item => parseInt(item.id) === parseInt(id))
    res.render('updateStudent.html', {
      student: student[0]

    })
  }).catch(err=>{
    res.status(500).send('Server Error')
    console.log('err',err)
  })



})

router.post('/students/edit', function (req, res) {
  Student.update(req.body).then(data=>{
    res.redirect('/students')
  }).catch(err=>{
    res.status(500).send('Server Error')
    console.log('err',err)
  })
})

router.get('/students/delete', function (req, res) {
  const id = req.query.id
  Student.delete(id).then(data=>{
    res.redirect('/students')
  }).catch(err=>{
    res.status(500).send('Server Error')
    console.log('err',err)
  })
})

// 导出
module.exports = router

student.js的代码

在student.js中进行数据库操作

// 操作db文件的API, 不关心业务
const fs = require('fs')
const dbPath = './db.json'
const mysql = require('mysql');
// 进行数据库操作需要先引入 mysql
// 然后创建一个mysql连接
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '123456',
  database: 'students'
});

connection.connect();
/**
 * 获取所有学生
 */
exports.find = function () {
  return new Promise((resolve,reject)=>{
    connection.query('SELECT * FROM STUDENTS', function (err, res, fields) {
      if (err) {
        // 发生错误的时候执行reject
        reject(err)
      }else {
        resolve(res)
      }
    });
  })
}

/**
 * 添加学生
 */
exports.save = function (student) {
  return new Promise((resolve,reject)=>{
    connection.query(`INSERT INTO STUDENTS (name,sex,age) value ('${student.name}','${student.sex}',${student.age})`, function (err, res, fields) {
      if (err) {
        // 发生错误的时候执行reject
        reject(err)
      }else {
        resolve(res)
      }
    });
  })
}

/**
 * 修改学生
 */
exports.update = function (student) {
  return new Promise((resolve,reject)=>{
    connection.query(`UPDATE STUDENTS SET name = '${student.name}',sex = '${student.sex}',age = ${student.age} WHERE id = ${student.id}`, function (err, res, fields) {
      if (err) {
        // 发生错误的时候执行reject
        reject(err)
      }else {
        resolve(res)
      }
    });
  })
}

/**
 * 删除学生
 */
exports.delete = function (id) {
  return new Promise((resolve,reject)=>{
    connection.query(`DELETE FROM STUDENTS WHERE id = ${id}`, function (err, res, fields) {
      if (err) {
        // 发生错误的时候执行reject
        reject(err)
      }else {
        resolve(res)
      }
    });
  })


}
Miku T_T
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
express连接mysql数据库，连接阿里云数据库
qq_51724721的博客
05-28 2798
使用Express连接mysql详细教程（附项目的完整代码我放在结尾了） 要使用Express连接本地数据库 我们首先需要安装好Express的依赖 我们使用这个框架呢首先要有一点ajax的基础 前置条件 电脑上要安装node.js 可以去node官网安装一个 然后我们去新建一个工作文件夹 在文件夹里面打开CMD 或者是在编辑器里面打开用编辑器内置的终端也可以 然后在工作区的目录下运行 npm i express //安装Express的依赖 然后安装mysql数据库的服务 npm install mys
Node.js: express + MySQL的使用
h360583690的博客
06-26 7586
node.js使用express+MySQL
express搭建服务器并连接mysql数据库
qq_43852612的博客
06-26 3981
用express快速搭建web服务器，并连接mysql数据库，以及实现数据库中数据的增删改查。
express操作mysql数据库的方法总结
最新发布
峰会路转的博客
04-09 560
列出下mysql数据库操作常见的命令行方式//选择所有数据//选择特定字段的数据//插入新数据;//更新字段//删除记录= 'jack';select *这样，我们就在express这样的服务端框架里，实现了真实数据的处理，离大前端又近了一步！！
【Express连接MySQL数据库】
橙子的博客
07-28 3568
3）服务器接收到前端的请求数据后,将数据写入数据库,同时给前端发送响应信息。（2）通过jQuery的方法向服务器发起异步请求,将数据提交给服务器。创建一个配置文件用于连接MySQL数据库。（1）在前端页面中使用表单来收集数据。..................
使用node+express+mysql实现一个简单的后台管理（增删改查）
weixin_41549971的博客
06-25 2941
注意：login,js home.js user.js dept.js course.js score.js 等文件可在代码包中查看。（包括前端界面文件，数据库sql文件）3.安装Navicat 16 for MySQL图形界面工具， 创建数据库，导入student_database.sql文件。1.新增文件夹test-demo，使用命令行初始化。5. 代码相关 （主要文件如下）4.简单看下目录结构。
node+express+mysql实现的学生成绩管理系统源码+数据库
07-04
node+express+mysql实现的学生成绩管理系统源码+数据库 编译方式可自行选择：vscode编译器、cmd窗口 使用的是 MySQL 数据库：student_score.sql(可自行导入本地数据库使用) 安装项目相关依赖：npm install 启动项目...
基于NodeJs+Express+Mysql学生社团活动管理系统
11-01
这里首先分析的用户功能主要在社团管理系统的前台服务上进行实现的，也就是用户访问社团管理平台之后登录社团管理系统，在页面上可以进行哪些操作。 1.首页 （1）在首页上能够查看社团管理系统首页的轮播图； （2）...
毕业设计，基于NodeJs+Express+Mysql开发的学生社团活动管理系统，内含NodeJS完整源代码，数据库脚本
01-27
基于NodeJs+Express+Mysql学生社团活动管理系统 开发技术：nodejs + express + ElementUI + layui 开发工具环境：Vscode + Mysql 后台登录地址：http://localhost:8080/nodejsr08n1/admin/dist/index.html#/login ...
基于NodeJs+Express+Mysql学生社团活动管理系统+sql数据库(毕设源码).zip
06-16
这里首先分析的用户功能主要在社团管理系统的前台服务上进行实现的，也就是用户访问社团管理平台之后登录社团管理系统，在页面上可以进行哪些操作。 1.首页 （1）在首页上能够查看社团管理系统首页的轮播图； （2）...
手把手教express + mysql 包写接口
ZYR_JS的博客
09-18 886
目标: 简单来说就是写一个真正的接口,利用express,MySQL包. 接口1 添加学生数据 url: localhost:3000/api/student method: post 参数格式：普通键值对 name: 字符串 age: 数值 测试：postman来测试 接口2 获取所有的学生数据 url: localhost:3000/api/student method: get 参数:无 测试：postman来测试 思路 创建项目ser...
Node学生管理系统（Express+MySQL）
08-12
使用Node编写的一套学生管理系统（增删改查），数据库使用MySQL。 使用Express框架，和art-template模板引擎。
express学生信息管理系统（CRUD）.zip
02-20
express学生信息管理系统（CRUD）
基于Express框架的后台管理系统
09-21
这是一个运行在nodeJs，基于Express框架的教学后台管理系统，实现了学生信息管理，教师信息管理等，每个表中也实现了分页及回调地址callBackUrl等功能。
express连接mysql
CSDNchaxundaima的博客
09-08 3317
1.mysql的安装 [mysql下载地址（官网）](https://www.mysql.com/downloads/) 打开如下图 滑轮下滑到页面底部 点击 MySQL Community Server 8.0.26 进入以下界面 图上两个箭头表示两种安装方法 上面箭头点击，下载到的文件为安装软件的方式安装mysql 下面箭头表示，下载到的文件为zip压缩包 我用的是压缩包 下载zip包以后，在电脑任意盘创建文件夹存放解压后的包 打开这个目录 复制箭头指的地址配置环境变量 在桌面找到我的电脑,点
node(express框架)连接mysql 基础篇
qq_43541326的博客
04-25 885
1 . 首先我已经创建了一个数据表并且创建了一个数据库 chatgpt 并使用它。由于我的是mac 我就安装mac版本的。
express + mysql
gklcsdn的博客
02-08 206
const express = require("express"); const app = express(); const mysql = require("mysql"); // 创建连接 const db = mysql.createConnection({ host:"localhost", user:"root", password:"qwe123", database:"exapp" }); // 连接数据库 db.connect( (err) =&gt
计算机毕业设计Node.js+Express学生信息管理系统 (源码+程序+lw+远程调试)
Node.js毕设程序源码
01-19 332
项目运行环境配置：Node.js最新版+ Vs项目技术：Express框架+ Node.js+ Vue 等等组成，B/S模式 +Vscode管理+前后端分离等等。环境需要1.运行环境：最好是Nodejs最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发环境：Vscode或HbuilderX都可以。推荐HbuilderX;3.mysql环境：建议是用5.7版本均可4.硬件环境：windows 7/8/10 1G内存以上；
使用express实现一个简易的学生管理系统(使用文件存储)
Miku的博客
07-14 775
使用express实现一个简易的学生管理系统 使用express实现一个简易的学生管理系统，增删改查学生数据（使用的是文件存储学生数据，之后还会使用mysql进行存储） 学生管理系统使用express实现一个简易的学生管理系统项目代码结构项目使用到的插件package.json项目准备页面显示首页界面展示代码添加学生页界面展示代码修改页界面展示代码后台代码db.json数据(存放初始数据)入口函数代码路由代码student.js的代码 项目代码结构 项目使用到的插件package.json { "na
用MySQL+node+vue做一个学生信息管理系统,并给出相应代码
06-13
使用node.js编写后端代码，可以使用Express框架快速搭建一个Web应用程序，实现对学生信息的增删改查等操作。以查询学生信息为例，代码如下： ```javascript const express = require('express'); const mysql = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值