nodejs+vs code+express+mysql开发一个学生成绩录入系统

您所在的位置：网站首页 › 学生成绩登记表格怎么做 › nodejs+vs code+express+mysql开发一个学生成绩录入系统

nodejs+vs code+express+mysql开发一个学生成绩录入系统

2024-07-16 11:17| 来源: 网络整理| 查看: 265

Windows10下部署node.js开发环境

nodejs下载地址最好选择.msi安装文件，下载后双击运行，勾选同意协议，一路默认下去安装就行

测试nodejs开发环境

为APP创建一个目录。打开vs code在NodeApp文件夹里创建一个名为hello_world.js文件，添加如下代码：

var http=require('http'); http.createServer(function(request,response){ response.writeHead(200,{'Content-Type':'text/plain'}); response.end('Hello World\n'); }).listen(3000); console.log('Server running at http://localhost:3000/');

在vs code终端输入：在这里插入图片描述然后在Google chrome浏览器打开http://localhost:3000/ 显示这说明Node平台安装成功，并且能成功运行Node.js程序。

生成基本项目结构

我是在D盘创建了个文件夹S，vscode直接打开文件夹在终端输入：使用express和express生成器之前需要通过npm安装；

npm install express express-generator -g

再利用express的生成器自动生成基本项目结构，我选择使用ejs模板引擎，所以需要加e参数：

express -e student

目录中会自动生成一个名为student的文件夹，目录结构如下：在这里插入图片描述在这个目录中的package.json中已经声明了相关模块，执行安装即可：

npm install

为了连接MySQL，安装模块：

npm install mysql --save

安装ejs模块：

npm install ejs 数据库设计

CREATE DATABASE student; USE student; CREATE TABLE student( ID INT KEY AUTO_INCREMENT, name VARCHAR(20) NOT NULL UNIQUE, chinese INT NOT NULL, english INT NOT NULL, math INT NOT NULL );

成绩录入路由开发

项目目录新建一个db.js文件

const mysql=require("mysql"); const DB={ host:"localhost", port:3306, user:"root", password:"root", database:"student" } const DBConnection=mysql.createConnection({ host:DB.host, user:DB.user, port:DB.port, password:DB.password, database:DB.database, multipleStatements:true }); DBConnection.connect(); module.exports.DBConnection=DBConnection;

index.js文件添加：

exports.user=require('../routes/users') var express = require('express'); var db = require('../../db.js'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('index'); }); router.post('/', function(req, res, next) { var mysqlParams=[req.body.name, req.body.chinese, req.body.english, req.body.math ]; var mysqlQuery = 'INSERT student(name,chinese,english,math) VALUES(?,?,?,?)' db.DBConnection.query(mysqlQuery,mysqlParams,function(err,rows,fields){ if(err){ console.log(err); return; } var success={ message:"增加成功" }; res.send(success); }); }); module.exports = router;

user.js添加：

页面主要代码：

学生成绩录入系统学生成绩录入姓名语文英语数学

index.js:

(function(global,$){ $("#save").click(function() { $.ajax({ dataType: "json", async: true, data: { "name": $('#name').val(), "chinese": $('#chinese').val(), "english": $('#english').val(), "math": $('#math').val() }, type: "POST", beforeSend: function () { }, success: function (response) { if (response) { var success = response.message; } var newDom = '

' + success + '

'; $('.add-save').after(newDom); setTimeout(function () { location.assign("/"); }, 500) }, error: function () { layer.alert("请求失败", { skin: 'layui-layer-molv', closeBtn: 0, shift: 2 }); }, complete: function () { } }) }) } )(window,jQuery)

样式就喜欢怎样就怎样设计吧！最后利用命令行

node student\app.js

启动项目在这里插入图片描述 MySQL数据库表里也添加有数据了。查看学生成绩：app.js里使用user.js作为路由；效果图如下：

【本文地址】

nodejs+vs code+express+mysql开发一个学生成绩录入系统

nodejs+vs code+express+mysql开发一个学生成绩录入系统

今日新闻

推荐新闻