如何用前端知识获取数据,制作一个微信订餐后台案例?

广告位

在介绍案例之前,我们先来介绍以下在node中如何获取数据。 get方式 1.把发送给服务器的数据追加在请求头的…

在介绍案例之前,我们先来介绍以下在node中如何获取数据。

get方式

1.把发送给服务器的数据追加在请求头的url后面

2.发送数据的大小有限制

3.get方式发送给服务器数据会有缓存。

post方式

1.把发送给服务器的数据放在请求体里面

2.发送数据的大小没有限制

3.post方式发送给服务器数据没有缓存。

GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数。

GET在浏览器回退时是无害的,而POST会再次提交请求。

GET产生的URL地址可以被Bookmark,而POST不可以。

GET请求会被浏览器主动cache,而POST不会,除非手动设置。

GET请求只能进行url编码,而POST支持多种编码方式。

GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。

GET请求在URL中传送的参数是有长度限制的,而POST么有。

对参数的数据类型,GET只接受ASCII字符,而POST没有限制。

GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。

GET参数通过URL传递,POST放在Request body中。(本标准答案参考自w3schools)

但是我们在node中我们要怎样接受从前台传过来的post数据了。这就需要引入body-parser模块。bodyparser 用来解析post的请求取代了原生的 req.on 的方式但是只能取到ajax 和表单的数据,取不到上传的文件类型。

如何用前端知识获取数据,制作一个微信订餐后台案例?

第一步: 创建一个app.js文件放置常见的端口号为3000的服务器。我们先使用npm引入express,views,body-parser模块,在引入body-parser的的时候要添加一个解析中间件,不然在解析的时候会报错app.use(bodyParser.urlencoded({extended:false}));

如何用前端知识获取数据,制作一个微信订餐后台案例?

第二步:在public中设置好初始页面index。我们在body中创建一个div名为box。在div中常见一个h2标签作为题目。创建3个input标签。2个type类型为text作为提交数据的地方,1个名为btn类型为submut作为提交按钮。再创建一个a标签查看所有订单。最后使用ajax作为提交数据的方法。我们选取提交按钮设置相应的函数向后台提交数据。

如何用前端知识获取数据,制作一个微信订餐后台案例?

第三步:再controlle中获取手机号和食物let {phone,food}= req.query;显示所有订单,展示一个用户的所有订单。获取用户的手机号。当点击提交按钮时,就会出现相应的用户列表,还有用户所下的订单,购买了什么东西。

如何用前端知识获取数据,制作一个微信订餐后台案例?

最后就是我们点击用户名的时候我们要弹出该用户最近定的是什么菜。我们创建deta文件来存储从前台获取的数据。再点击我的用户名是就会遍历data文件夹,找到用户名相同的文件夹,提取出来使用views把获取的是通过视图变量反馈给前台。用<% =  %>将值传给前台。

如何用前端知识获取数据,制作一个微信订餐后台案例?

程序的最后结果为:

如何用前端知识获取数据,制作一个微信订餐后台案例?

关于作者: yandaxia

为您推荐

广告位

发表评论