基于node.js的环境搭建——前后端分离

最新推荐文章于 2024-06-02 13:09:53 发布

爱吃鱼的喵996

最新推荐文章于 2024-06-02 13:09:53 发布

阅读量789

点赞数

分类专栏： js探索

本文链接：https://blog.csdn.net/qq_44647223/article/details/111334075

版权

js探索专栏收录该内容

11 篇文章 0 订阅

订阅专栏

首先安装express框架

目录结构：
nodeJs为node.js的目录，其下有node.exe执行文件
在这里插入图片描述
新建立一个Test目录，如上图
Test目录下面内容如下：

通过cmd命令进入nodeJs目录下，然后运行index2.js
在这里插入图片描述
浏览器访问本地地址 http://127.0.0.1:3000 可以访问到index.html界面

在index.html中，分别设置post，get请求后端数据

实验代码

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #722D21;
    padding: 10px;
}
</style>
</head>
<body>


 
<div class="center">
  <p>访问界面访问界面访问界面访问界面</p>
</div>
<!-- 在node.js中，引入框架也需要额外设置访问路径才可以引入 -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

	$.ajax({
		url:'/post_addr',//请求地址
		type:'POST',
		data:{
			type:1
		},
		dataType:'json',
		success:function(res){
			console.log(res)
		},
		error:function(res){
			console.log(res)
		}
	})
	$.ajax({
		url:'/get_addr?type=2',//请求地址
		type:'GET',
		dataType:'json',
		success:function(res){
			console.log(res)
		},
		error:function(res){
			console.log(res)
		}
	})
</script>


</body>
</html>

index2.js

//express_demo.js 文件
var express = require('express');
var bodyParser = require("body-parser");  
var app = express();
var fs = require('fs');

//获取post数据代码
app.use(bodyParser.urlencoded({ extended: false }));

//如果浏览器访问到ip地址根目录，则访问/Test/index.html文件
app.get('/', function (req, res) {
	// res.send('Hello World');
	fs.readFile('./Test/index.html','utf-8',function(err,data){
		if(err){
			throw err ;
		}
		res.send(data);
	});
})
//引入jq代码
app.get('/jquery.min.js', function (req, res) {//设置路径从而可以访问不同的html界面
	// res.send('Hello World');
	fs.readFile('./Test/jquery.min.js','utf-8',function(err,data){
		if(err){
			throw err ;
		}
		res.send(data);
	});
})

//post_addr 是请求地址
app.post('/post_addr',function(req,res){
	// console.log(req)
    console.log(req.body);
    var json={
    	res:100,
    	text:'ok'
    }
    res.send(json)
    // res.send('POST发送成功了')
})
//get_addr 是请求地址
app.get('/get_addr',function(req,res){

	console.log(req.query.type)//获得type = 2
    // console.log(req.body);
    var json={
    	res:100,
    	text:'okkk'
    }
    res.send(json)
})

var server = app.listen(3000, function () {
	var host = server.address().address
	var port = server.address().port
	console.log("running server http://%s:%s",host, port)
	// console.log("应用实例，访问地址为 http://%s:%s", host, port)
})

爱吃鱼的喵996

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
基于node.js的环境搭建——前后端分离

目录结构：nodeJs为node.js的目录，其下有node.exe执行文件新建立一个Test目录，如上图Test目录下面内容如下：通过cmd命令进入nodeJs目录下，然后运行index2.js浏览器访问本地地址 http://127.0.0.1:3000 可以访问到index.html界面在index.html中，分别设置post，get请求后端数据实验代码index.html<!DOCTYPE html><html><head>&l
复制链接

扫一扫

专栏目录