使用express实现一个简易的学生管理系统(使用文件存储)

最新推荐文章于 2024-02-24 23:07:19 发布

Miku T_T

最新推荐文章于 2024-02-24 23:07:19 发布

阅读量858

点赞数

分类专栏： express学习记录文章标签： javascript node.js

本文链接：https://blog.csdn.net/qq_40639292/article/details/107332625

版权

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

使用express实现一个简易的学生管理系统，增删改查学生数据（使用的是文件存储学生数据，之后还会使用mysql进行存储）
mysql版本地址： https://blog.csdn.net/qq_40639292/article/details/107341182.

学生管理系统

使用express实现一个简易的学生管理系统
项目代码结构
项目使用到的插件package.json
项目准备
页面显示
- 首页
- - 界面展示
  - 代码
- 添加学生页
- - 界面展示
  - 代码
- 修改页
- - 界面展示
  - 代码
后台代码

项目代码结构

在这里插入图片描述

项目使用到的插件package.json

{
   
  "name": "2express-students",
  "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"
  }
}

项目准备

生成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

页面显示

首页

界面展示

在这里插入图片描述

代码

<!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&#

最低0.47元/天解锁文章