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添加：
var express = require('express');
var db = require('../../db.js');
var router = express.Router();
router.get('/', function(req, res, next) {
var mysqlQuery = 'SELECT * FROM student'
db.DBConnection.query(mysqlQuery,function(err,rows,fields){
if(err){
console.log(err);
return;
}
res.render('user', {students:rows})
});
});
module.exports = router;
页面主要代码：
<!DOCTYPE html>
<html>
<head>
<title>学生成绩录入系统</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="/javascripts/jquery.js"></script>
</head>
<body>
<header>
<div class="container">
学生成绩录入
</div>
</header>
<section>
<div class="container">
<section>
<form action="">
<div class="form-group">
<label>姓名</label>
<input type="text" id="name" >
</div>
<div class="form-group">
<label>语文</label>
<input type="text" id="chinese">
</div>
<div class="form-group">
<label>英语</label>
<input type="text" id="english">
</div>
<div class="form-group">
<label>数学</label>
<input type="text" id="math">
</div>
<div>
<div class="add-save">
<input type="button" value="保存" id="save">
</div>
</div>
</form>
</section>
</div>
</section>
</body>
<script src="/javascripts/index.js"></script>
</html>
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 = '<p>' + success + '</p>';
$('.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作为路由；效果图如下：
