app.listen(‘8989’)
cmd运行js;
打开html页面:
读取静态资源–app.post()
JS代码:
const express=require(‘express’); const app=express(); // post请求需要依赖专门的模块 // 第一步:npm install body-parser -S; // 第二步:在页面中引入 // 第三步:在post请求的第二个参数加上刚刚解析body-parser得到的参数。 var bodyParser = require(‘body-parser’) var urlencodedParser = bodyParser.urlencoded({ extended: false }) // 静态资源读取 // /默认 寻找的路径需要是index.html app.use(‘/’,express.static(‘./www/form’)); // app.post()可以处理post请求 // post请求参数处理比较麻烦,需要依赖一个模块 body-parser // 具体用法可以参照手册 // post请求的第二个参数需要通过解析body-parser模块得到 app.post(‘/submit’,urlencodedParser,(req,res)=>{ // 获取post请求的参数 req.body res.send(req.body); }) app.listen(‘8989’); 按步骤进行即可 两者整合: const express=require(‘express’); const app=express(); var bodyParser = require(‘body-parser’) var urlencodedParser = bodyParser.urlencoded({ extended: false }) app.use(‘/’,express.static(‘./www/form’)); app.post(‘/submit’,urlencodedParser,(req,res)=>{ res.send(req.body); }) app.get(‘/submit’,(req,res)=>{ console.log(req.query); res.send(您输入的用户名是${req.query.user}); }) app.listen(‘8989’); 静态资源读取—ajax 先在目录下再创建一个public文件夹 public一般放置的是css 、js文件; js代码: const express=require(‘express’); const app=express(); // 引入处理post参数的模块 var bodyParser = require(‘body-parser’) var urlencodedParser = bodyParser.urlencoded({ extended: false }) app.use(‘/’,express.static(‘./www/form’)); //把静态资源呈递 app.use(‘/public’,express.static(‘./public’)); app.post(‘/submit’,urlencodedParser,(req,res)=>{ // 获取post请求的参数 req.body res.send(req.body); }) app.get(‘/submit’,(req,res)=>{ // get请求的参数在url内部 req.query获取get请求参数 console.log(req.query); res.send(${req.query.user}); }) app.listen(‘8989’); index.html:
这是登录页面
按钮
ajax:不需要跳转
打开其他页面:
提交get请求,跳转:
post请求:
===============================================================================
自己写的相关介绍链接:https://blog.csdn.net/weixin_53037175/article/details/111829602
连接数据库,和后台联系起来:
const express=require(‘express’); const app=express(); // 引入数据库 var MongoClient = require(‘mongodb’).MongoClient; // 数据库地址 var url = “mongodb://localhost:27017”; app.use(‘/zsh’,(req,res)=>{ // 插入数据库 // 连接数据库 把数据库和后台联系起来 MongoClient.connect(url, function(err, db) { if (err) throw err; var dbo = db.db(“student”); dbo.collection(“stu1”). find({}).toArray(function(err, result) { // 返回集合中所有数据 if (err) throw err; console.log(result); db.close(); res.send(result); }); }); }) app.use(‘/’,(req,res)=>{ MongoClient.connect(url, function(err,db) { if (err) throw err; // 选择数据库 var dbo = db.db(“student”); var myobj = { name: “菜鸟教程”, url: “www.runoob” }; // 插入数据操作 dbo.collection(“stu1”).insertOne(myobj, function(err, res1) { if (err) throw err; db.close(); res.send(‘数据插入成功了’); }); }); }) app.listen(‘8989’);
==============================================================================
首先是静态资源HTML
index.html
请注册
//addata,提交数据到指定的路径地址,这个根据js的要求修改 封装好的js文件,一般是放在自己创建文件夹里(比如model): dao.js //数据库操作 // 先下载好数据库包再引入,这个也可以在php中操作数据库 const MongoClient=require(‘mongodb’).MongoClient; // 数据库地址,27017是默认是数据库端口号 const url=“mongodb://localhost:27017”; // 把数据库连接的操作,封装起来。 function _connect(callback){ // 连接上数据库 //连接数据库是异步操作,不知道什么时候连接成功了。用到回调函数的概念 MongoClient.connect(url, function(err, db) { // 连接数据库成功 if (err) throw err; // 说明连接数据库成功了 db代表连接成功以后返回的数据 callback(db); }); } //插入数据操作: // module.exports导出数据 module.exports insert=function(databse,type,myobj,callback){ _connect(function(db){ // db连接成功的数据 // db.db(‘操作的数据库’) var db=db.db(database); //判断myobj类型,转换为数组作为语句集合插入数据库 if(myobj instanceof Array){ myobj=myobj }else{ myobj=[myobj] } // 一条数据是对象 insertOne 多条数据是数组 用insertmMany db.collerction(type).insertMany(myobj,function(err,r){ if err throw err; bd.close(); // r得到的是成功插入数据的信息 callback®; }) }) } //查看操作: // 查询封装的时候,考虑是否需要分页是否需要排序 // 需要书写函数参数的默认值,因为用户有可能不会书写 module.exports.find=function(databse,type,callback,myobj={},mysort={},myskip=0,mylimit=0){ _connect(function(db){ // 查询数据 var dbo = db.db(database); // sort排序 // skip跳过多少条数据 // limit()限制取数据的数量 dbo.collection(type).find(myobj).sort(mysort).skip(myskip).limit(mylimit).toArray(function(err, result) { // 返回集合中所有数据 if (err) throw err; console.log(result); db.close(); callback(result); }) }) } //更新操作: module.exports.update=function(databse,type,myobj,updateObj,callback){ _connect(function(db){ var dbo = db.db(dbname); var updateStr = {$set: {updateObj}}; // updateOne(查询条件(可以是id也可以是语句),更改后数据) dbo.collection(col).updateOne(myobj, updateStr, function(err, res) { if (err) throw err; console.log(“文档更新成功”); db.close(); callback(res) }); }) } //删除操作: module.exports.delete=function(database,type,myobj,callback){ _connect(function(db){ var dbo = db.db(dbname); // updateOne(查询条件,更改的数据) dbo.collection(col).deleteOne(myobj, function(err,obj) { if (err) throw err; db.close(); callback(obj); }); }) } 编写好封装的js包文件后,写对应的js文件 01.js const express=require(‘express’); const app=express(); // md5加密 一般进行多层加密 一般是2-3层 const md5=require(‘md5’); //引用写好的封装文件,./–表示同级目录 const dao=require(‘./model/dao.js’); app.use(‘/’,express.static(‘./www/’)); //引用静态资源文件如js,css app.use(‘/public’,express.static(‘./public/’)); //对应的插入数据代码 app.get(‘/addata’,(req,res)=>{ //前台html发送过来的数据–input的user以及pass var obj={ proname:req.query.user, propass:req.query.pass } dao.insert(‘product’,‘phone’,obj,function®{ res.send®; }) }) //删除 app.get(‘/del’,(req,res)=>{ var obj={ proname:req.query.user } dao.delete(‘product’,‘phone’,obj,®=>{ res.send®; }) }) //查看 app.get(‘/find’,(req,res)=>{ dao.find(‘product’,‘phone’,®=>{ res.send® },{},{},0,10) }) //更新 app.get(‘/updata’,(req,res)=>{ var myobj=“name”:“zs”; var updateStr = “name”:“ls” dao.updata(‘product’,‘phone’,myobj, updateStr,®=>{ res.send® }) }) app.listen(‘8989’);
上面是get请求的,post请求:
先修改html代码:
01.js文件中: