基于node.js做的静态服务器分享，有详细注释，配套的js和a

作者: 我得bug写的又快又好 | 来源:发表于2019-08-21 10:33 被阅读2次

本人写的不复杂，适合萌新。

原文地址：https://blog.csdn.net/qq_39051175/article/details/99678556

因为是从我在csdn论坛上发表的这文章复制过来的，因此代码每一行前面的空格被去掉了（简书的问题），

建议复制代码在你的编辑器里看，本文代码都是切实可行的，不会出现运行不了的问题。

觉得可以的话点个赞，关注一下吧

mongodb或者mysql数据库都可以使用，文件头部的注释取消即可！

复制过去用的话，记得改ajax请求的url: “http://192.168.0.76:8089/test_post”（这是我的地址和路径），你需要改成你自己的哦！！

不要纠结我给变量起名很low 我有严重的起名困难症！！！！

/**

* a Static Server

* nodejs进程守护工具 pm2 了解一下

*/

const express = require('express');

// 这里是使用mongodb的

// const mongodb = require('mongodb');

// const MongoClient = mongodb.MongoClient;

// 这里使用mysql的

const mysql = require('mysql');

// const url = require('url');

//body-parser是非常常用的一个express中间件，作用是对post请求的请求体进行解析。

const bodyParser = require('body-parser'); //用于获取post请求参数的

let urlencodedParser = bodyParser.urlencoded({ //用于获取post请求参数的

extended: false

})

let app = express();

//解决跨域

app.all('*', function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");

res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

if(req.method == "OPTIONS") {

res.send(200);

} else {

next();

}

});

//设置静态文件目录

app.use(express.static('./'));

/* 一个测试 */

//获取post请求参数需要用到一个中间件，顶上有加载这个

app.post('/test_post',urlencodedParser, (req, res) => {

console.log(req.body,req.originalUrl)

res.send(req.body);

})

//获取get请求参数

app.get('/test_get', (req, res) => {

var num = 200;

//res.send('连接成功，这段字符串是node.js服务器返回的数据',num) //逗号隔开是设置随着数据一起返回的状态码比如200（成功） 500（服务器出错）之类的。

//推荐下面这么写,把设置状态码跟发送数据分开

//res.status(200);

//res.send('连接成功，这段字符串是node.js服务器返回的数据' + num) //加号隔开是返回这个数字作为数据

console.log(req.query,req.originalUrl)

res.send(req.query);

})

/* 一个测试 */

//注册

app.get('/zhuce123', (req, res) => {

var pool = mysql.createPool({

host: 'localhost',

user: 'root',

password: '',

port: 3307,

database: 'vuedata',

multipleStatements: true

});

console.log(req.query.yonghum);

var sql1 =`insert into yonghubiao (usname, password) values ('${req.query.yonghum}', '${req.query.xinmima}')`

pool.query(sql1, function(error, rows) {

res.send(req.query.yonghum);

});

})

//登陆

app.get('/denglu123', (req, res) => {

var pool = mysql.createPool({

host: 'localhost',

user: 'root',

password: '',

port: 3307,

database: 'vuedata',

multipleStatements: true

});

// console.log(req.query.yonghum);

var sql1 =`select * from yonghubiao where usname='${req.query.yonghum}' and password = '${req.query.xinmima}' limit 1`;

pool.query(sql1, function(error, rows) {

console.log(rows.length);

if(rows.length != 0){

res.send("1");

}else{

res.send("0");

}

});

});

//修改密码

app.get('/xiugai123', (req, res) => {

var pool = mysql.createPool({

host: 'localhost',

user: 'root',

password: '',

port: 3307,

database: 'vuedata',

multipleStatements: true

});

// var sql = ;

pool.query(`update yonghubiao set password='${req.query.xinmima}' where usname='${req.query.yonghum}'`, function(error, rows) {

res.send("1");

console.log(req.query);

});

});

// 下面注释部分是操作mongodb数据库的

// //登陆

// app.post('/login', urlencodedParser, (req, res) => {

// let {

// name,

// mima

// } = req.body;

// MongoClient.connect("mongodb://localhost:27017/", function(err, database) {

// if(err) throw err;

// let db = database.db('xcy');

// let yhb = db.collection('yhb'); //切换到具体的集合

// yhb.findOne({

// username: name,

// password: mima

// }, (err, result) => {

// if(result) {

// // 登录成功后，给前端发送用户表示：token

// res.send({

// code: 1,

// data: result,

// msg: 'ok'

// })

// } else {

// res.send({

// code: 0,

// data: [],

// msg: 'fail'

// })

// }

// });

// database.close();

// });

// });

// //用户列表

// app.get('/hqyh', (req, res) => {

// var pool = mysql.createPool({

// host: 'localhost',

// user: 'root',

// password: '',

// port: 3307,

// database: 'xcy',

// multipleStatements: true

// });

// pool.query('select * from yonghubiao', function(error, rows) {

// res.send(rows);

// });

// });

// //修改密码

// app.get('/xiugai', (req, res) => {

// var pool = mysql.createPool({

// host: 'localhost',

// user: 'root',

// password: '',

// port: 3307,

// database: 'xcy',

// multipleStatements: true

// });

// // var sql = ;

// pool.query(`update yonghubiao set password='${req.query.xinmima}' where usname='${req.query.yonghum}'`, function(error, rows) {

// res.send("");

// console.log(req.query);

// });

// });

// //删除

// app.get('/shanchu', (req, res) => {

// var pool = mysql.createPool({

// host: 'localhost',

// user: 'root',

// password: '',

// port: 3307,

// database: 'xcy',

// multipleStatements: true

// });

// // var sql =;

// pool.query(`DELETE FROM yonghubiao where usname= '${req.query.yonghum}'`, function(error, rows) {

// res.send("删除成功");

// console.log(req.query.yonghum);

// });

// });

// //添加

// app.get('/tianjia', (req, res) => {

// var pool = mysql.createPool({

// host: 'localhost',

// user: 'root',

// password: '',

// port: 3307,

// database: 'xcy',

// multipleStatements: true

// });

// console.log(req.query);

// var sql = `insert into yonghubiao (usname, password) values ('${req.query.yonghum}', '${req.query.xinmima}')`;

// pool.query(sql, function(error, rows) {

// res.send("添加成功");

// });

// });

// //商品列表

// app.get('/splb', (req, res) => {

// var pool = mysql.createPool({

// host: 'localhost',

// user: 'root',

// password: '',

// port: 3307,

// database: 'xcy',

// multipleStatements: true

// });

// pool.query('select * from goods', function(error, rows) {

// res.send(rows);

// });

// });

// //修改商品列表

// app.get('/xiugaigood', (req, res) => {

// var pool = mysql.createPool({

// host: 'localhost',

// user: 'root',

// password: '',

// port: 3307,

// database: 'xcy',

// multipleStatements: true

// });

// var sql = `

// update goods set goodname='${req.query.goodming}' where id='${req.query.goodid}';

// update goods set jiage='${req.query.goodjiage}' where id='${req.query.goodid}';

// update goods set goodxiangqing='${req.query.goodzhonglei}' where id='${req.query.goodid}';

// update goods set tupianlujing='${req.query.goodtupianlujing}' where id='${req.query.goodid}';

// update goods set jieshao='${req.query.goodjieshao}' where id='${req.query.goodid}';

// update goods set shouchu='${req.query.goodshouchu}' where id='${req.query.goodid}';

// update goods set rongliang='${req.query.goodrongliang}' where id='${req.query.goodid}';

// update goods set id='${req.query.goodnewid}' where id='${req.query.goodid}';

// `;

// pool.query(sql, function(error, rows) {

// res.send("");

// console.log(req.query);

// });

// });

// //删除good

// app.get('/shanchugood', (req, res) => {

// var pool = mysql.createPool({

// host: 'localhost',

// user: 'root',

// password: '',

// port: 3307,

// database: 'xcy',

// multipleStatements: true

// });

// // var sql =;

// pool.query(`DELETE FROM goods where id= '${req.query.goodid}'`, function(error, rows) {

// res.send("删除成功");

// console.log(req.query.goodid);

// });

// });

// //添加商品

// app.get('/tianjiagood', (req, res) => {

// var pool = mysql.createPool({

// host: 'localhost',

// user: 'root',

// password: '',

// port: 3307,

// database: 'xcy',

// multipleStatements: true

// });

// console.log(req.query);

// var sql = `insert into goods (goodname, id,jiage,goodxiangqing,tupianlujing,jieshao,shouchu,rongliang) values ('${req.query.goodming}', '${req.query.goodnewid}','${req.query.goodjiage}','${req.query.goodzhonglei}','${req.query.goodtupianlujing}','${req.query.goodjieshao}','${req.query.goodshouchu}','${req.query.goodrongliang}')`;

// pool.query(sql, function(error, rows) {

// res.send("添加成功");

// });

// });

//监听某个端口

app.listen(8089, () => {

console.log("监听成功,服务器运行ing,端口:8089")

})

下面是配套的js和ajax请求—原生和jquery的都有

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

html,

body {

width: 100%;

height: 100%;

}

#btn {

width: 100px;

height: 100px;

margin: 0 auto;

display: block;

margin-top: 35%;

transform: translateY(-50%);

}

#btn2 {

width: 100px;

height: 100px;

margin: 0 auto;

display: block;

margin-top: 15%;

transform: translateY(-50%);

}

#txt {

width: 360px;

margin: 0 auto;

display: block;

padding: 10px;

background-color: bisque;

}

</style>

</head>

<body>

<button type="button" id="btn">发送btn</button>

<button type="button" id="btn2">发送btn2</button>

<div id="txt">xxc </div>

<script src="common.js" type="text/javascript" charset="utf-8"></script>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript">

var btn = document.getElementById("btn");

var btn2 = document.getElementById("btn2");

var txt = document.getElementById("txt");

btn.onclick = function(e) {

var ajax = new XMLHttpRequest();

//如果是get传参,用字符串模版写在URL里吧

ajax.open('POST', 'http://192.168.0.76:8089/test_post');

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//原生ajax发送数据要写出下面这个格式,要紧凑,不要留空格(不然JSON.parse会出问题)

ajax.send("name=yyy&abc=123"); //携带数据到服务器

ajax.onreadystatechange = function() {

if (ajax.readyState == 4 && ajax.status == 200) {

var res = JSON.parse(ajax.responseText);

console.log(res);

txt.innerHTML = (res.name +" "+res.abc);

}

}

}

// jquery版本

$("#btn2").click(function() {

//get

$.ajax({

type: "get",

url: "http://192.168.0.76:8089/test_get",

data: {

name: '觉得可以的话点个赞，关注一下吧'

},

success: function(res) {

console.log(res)

$("#txt").html(res.name);

}

});

//post

// $.ajax({

// type: "post",

// url: "http://192.168.0.76:8089/test_post",

// data: {

// name: 'qwe'

// },

// success: function(res) {

// $("#txt").html(res.name);

// }

// });

});

</script>

</body>

</html>

以上的是原生JS和jquery的ajax请求我写的这个node.js的服务器的方式

不论是mysql还是mongdb数据库，请求是一样的。

网友评论

本文标题：基于node.js做的静态服务器分享，有详细注释，配套的js和a

本文链接：https://www.haomeiwen.com/subject/lgfbsctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

基于node.js做的静态服务器分享，有详细注释，配套的js和a

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

让前端飞

Web前端之路