Nodejs 中 GET 传输数据

Nodejs-GET

上图是下面将要使用的项目文件位置,安装Node.js网上有很多教程就不说了,如果是Linux系统好像还要安装npm,win的已经集成到Nodejs安装包里一起安装了。

deepin下安装 Nodejs 执行以下代码:

  1. sudo apt-get install nodejs

安装 npm :

  1. sudo apt-get install npm

项目结构

package.json 项目配置文件 保存项目的基本信息

node_modules Node.js项目使用的功能模块

app.js:

  1. // Node.js 可以让JavaScript在浏览器之外运行 如:
  2. // 作为web服务器的编程语言在服务器上运行
  3. // 作为桌面应用的编程语言在各种系统中开发应用程序
  4. // 开发手机app
  5. // Js号称全栈编程语言
  6. // require函数是用来加载模块 模块默认保存位置node_modules文件夹
  7. var express = require('express')
  8. // 调用上一步加载的express函数创建一个web应用(app对象)
  9. var app = express()
  10. // 调用app对象的use方法
  11. // 调用express函数对象的static方法
  12. // 使用wwwroot文件中的文件可以通过浏览器访问的静态资源
  13. // 静态资源:浏览器自身下载即可使用 不需要服务端程序参与处理
  14. // 比如图片,html文件 css文件
  15. app.use(express.static('wwwroot'))
  16. // get表示处理一个get请求
  17. // get请求的数据是通过url中的查询字符串传到服务器
  18. // 使用表单发起get请求会导致页面刷新(实际上是打开了一个新页面)
  19. app.get('/user',function(request,response){
  20. //    request表示所有请求数据
  21.     //   query表示查询字符串
  22.     // name表示查询字符串中名字为name的数据
  23.      var name = request.query.name
  24.      var age = request.query.age
  25.      console.log(name)
  26.      console.log(age)
  27.      console.dir(request.query)
  28.     //  response表示发送给浏览器的响应数据
  29.     // status表示发送给浏览器的状态码
  30.     // send表示发送给浏览的内容(响应体)
  31.     response.status(200).send('<strong>你提交的数据是:</strong><br>' + name + '<br>' + age)
  32. })
  33. // listen监听指定的端口 
  34. // 当有请求到达时会转给上边的get post请求等去处理
  35. // 第一个参数是监听的端口号 没有被占用的端口号都可以使用
  36. // 第二个参数是监听成功后的回调函数
  37. app.listen(3000,function(){
  38.     console.log('服务器运行了')
  39. })
  40. // 启动此web应用的方法
  41. // 在命令中执行(切换到当前文件夹)
  42. // node app.js
  43. // 停止web应用的方法
  44. // 关闭命令行窗口 或者 ctrl + c

index.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Form表单</title>
  8. </head>
  9. <body>
  10.    <h1>提交个人资料</h1>
  11.    <!-- action当提交表单时向何处发送表单数据 -->
  12.    <!-- method 方法规定如何发送表单数据 -->
  13.    <form action="/user" method="get">
  14.        <input type="text" name="name" placeholder="请输入名字"><br>
  15.        <input type="number" name='age' placeholder="请输入年龄"><br>
  16.        <input type="submit" value="提交">
  17.    </form>
  18. </body>
  19. </html>

补充资料:

精讲HTTP请求响应

浏览器打开页面的过程

网络术语基本概念

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇