在开发阶段的时候,服务器和浏览器在同一电脑上开发的。
但生产环境时,服务器是部署在服务器上的,浏览器端也是在服务器上,可通过域名或ip访问。
本地域名:localhost
本地IP:127.0.0.1
查看本地局域网ip:在cmd中使用ipconfig
node创建服务的模块为http。
// 引入http模块 const http = require("http"); // 调用http createServer方法创建服务 // 这个方法需要一个回调函数,回调函数中有两个形参 回调函数是在接收到请求时执行 // node 是依靠事件驱动。 // request 请求信息 // response 响应信息 http.createServer(function(req,res){ // 如果有请求进来,需要给它响应。 // 设置请求头,请求头中指定编码格式 res.setHeader("content-type","text/platin;charset=utf8") res.end("你好,东湖"); // 需要添加端口监听 }).listen(3000);//不推荐更改,因为你不知道每个应用的端口。如果两个程序的端口冲突,则软件运行会出错。 console.log("服务器已经启动"); // ctrl + c 停止服务运行。
注意:
res.end()只能写入字符串,并且不可多次写入,end()后面再写任何属性和方法都不会再执行。
res.write()方法,也可以写入内容,并且可多次写入。
1,页面输出中文时可能会出现乱码
解决方案如下:
设置setHeader指定文件类型及编码格式
res.setHeader("content-type","text/platin;charset=utf-8")
2,可能会出现跨域问题
当违反同源策略时,会出现跨域问题。
同源策略:TCP协议、域名、端口三者必须一致,一个不同即违反了同源策略。(如果你不知道啥叫同源策略请看这行,如果知道你就当我没说过2233)
解决方案(这!才是重点!):
诶,还是设置请求头啊2233
res.setHeader("Access-Control-Allow-Origin","*");
获取请求的两种方式那就是·····get和post!
get与post的区别:
1,语义上:
get:获取。从服务器端获取一些数据。
post:发送。向服务器发送一些数据。
2,参数:
get:以键值对的形式拼接到地址栏中,参数大小4kb左右
post:会在请求体中发送到服务端,参数大小不受浏览器控制,但受服务器的限制
3,安全性:
由第2条中对get的描述可知,post的安全性是高于get的
4,缓存:
get:被浏览器缓存
post:不会被浏览器缓存
js文件:
let obj = queryString.parse(req.url.split('?')[1]); res.setHeader("content-type","text/platin;charset=utf8"); res.write(`您搜索的商品为${obj.keyword},价格为${obj.price}`); // 添加端口监听 res.end(); }).listen(3000); console.log("服务器成功启动");
html文件:
<form action="http://localhost:3000" method="get"> 商品名称:<input type="text" name="keyword"> 商品价格:<input type="text" name="price"> <br> <input type="submit" value="提交"> </form>
js文件
const http = require("http"); const queryString = require("querystring"); http.createServer(function (req, res) { res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("content-type", "text/html;charset=utf8"); let user = { name:"zhangsan", pwd:"123" } let data = ""; // 监听事件 只要有数据传入时就会触发 req.on("data",(chunk)=>{ data += chunk; }) // 监听事件 数据传输完毕后触发 req.on("end",()=>{ // 将参数转为对象 let {username,pwd} = queryString.parse(data); if (username==user.name&&pwd==user.pwd) { res.write("欢迎你,"+username); }else{ res.write("用户名或密码错误") } res.end(); }) }).listen(3000); console.log("服务器成功启动");
html与get一样即可