node Ajax

最新推荐文章于 2022-08-31 23:59:42 发布

Tsk720

最新推荐文章于 2022-08-31 23:59:42 发布

阅读量88

点赞数

分类专栏： node

本文链接：https://blog.csdn.net/Tsk720/article/details/103056358

版权

node 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CMD

npm init
npm i express

app.js

var express = require("express");
var express = require("formidable");
var url = require("url");
var app = express();

//静态化
app.use(express.static("www"));


var arr =[
 {
 	{"id":0.4545,"username":"陆超","content":"真好","zan":0},
    {"id":0.4567,"username":"陆超2","content":"真不好","zan":0}
];

app.get("/getall",function(req,res){
	res.json({"result:arr"})
});

app.get("/zan",function(req,res){
	var id=url.parse(req.url,true).query.id;
	for (var i = 0; i<arr.length;i++) {
		if(arr[i].id == id){
              arr[i].zan++;
		}
	}
	res.send("ok");
});

app.post("/zengjia",function(req,res){
	var form = new formidable.IncomingForm();
	form.parse(req,function(err,content){
		var username=content.username;
		var content = content.content;

		arr.unshift({"id": Math.random(),"username" :username,"content":content,"zan":0})
	})
})

app.listen(3000);

\www\index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 400px;
			border:1px solid red;
		}
		.right{
			float: right;
		}

	</style>
</head>
<body>
     <div id="app">
     	<div v-for="item in arr">
     		<b>{{item.username}}说{{item.content}}</b>
     		<div class="right">
     			<
     		</div>
     		<buttton @click="zan(item.id)">赞</buttton>
     	</div>
     </div>

	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript">
		new vue({
			e1 : "#app",
			data : {
				arr:[]
			},
			created : function(){
				
               this.loadPage();
				
			},

		 methods:{
	        loadPage:function(id){
				var self = this;
				$.get("/getall",{},function(data){
                self.arr = data.result;
				});	
			},

			zan:function(id){
				var self = this;
				$.get("/zan",{"id":id},function(data){
                self.loadPage();
				});	
		    }
		});
	
	</script>
</body>
</html>

\www\js\jquery-3.4.1.min
\www\js\vue.min.js

Tsk720

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node Ajax

CMDnpm initnpm i expressapp.jsvar express = require("express");var express = require("formidable");var url = require("url");var app = express();//静态化app.use(express.static("www"));var ar...
复制链接

扫一扫