-->

signed

QiShunwang

“诚信为本、客户至上”

6.2_后台服务器

2021/6/3 16:53:59   来源:

01、后台服务器

使用HTML+css+js 开发的是浏览器端,又叫前端
node 服务器端 又叫后端

开发阶段:服务器端和浏览器端都在一台电脑上开发就可以了。
生产环境:服务器端是部署在服务器上的。浏览器端也是在服务器上,别人通过域名或者ip访问。

本地域名:localhost
本地IP:127.0.0.1

查看本地局域网ip、在cmd中使用ipconfig

// node创建服务的模块为http。下面代码是使用node构建后台服务器。

// 引入http模块
 const http = require("http");       //http是对象,意味着有一堆的属性和方法供我们使用。

                                   // 调用http createServer方法创建服务
                                   // 这个方法需要一个回调函数,回调函数中有两个形参
                                   // request 请求信息
                                   // response 响应信息

 http.createServer(function(req,res){
 
 res.setHeader("content-type","text/html(platin);charset=utf-8");
 res.end("hello 世界");                        // 如果有请求进来,需要给它响应。 

 }).listen(3000);   // 需要添加端口监听    //不推荐更改,因为你不知道每个应用的端口。  如果两个程序的端口冲突,则软件运行会出错。
 console.log("服务器已经启动");
  • ctrl + c 停止服务运行。

  • 请求信息、响应信息解析图如下:
    在这里插入图片描述


02、读取文件到页面

方法一:

const http = require("http");    // 引入http模块
const fs = require("fs");         //引入文件系统

http.createServer(function(req,res){

  fs.readFile("a.html","utf-8",function(err,data){         // 读取文件
    if(err){
      console.log("读取失败:"+err);
      return;
    }
    res.end(data);
  })

}).listen(3000);
console.log("服务器已启动");

第二种方法:

const http = require("http");
const fs = require("fs");   

http.createServer(function(req,res){
  fs.readFile("a.html","utf-8",function(err,data){
    if(err) {
      console.log("读取失败"+err);
    } else {
      res.end(data);
    }
  })
}).listen(3000);
console.log("服务器已经启动");

如果出现乱码则设置请求头:

(1)  res.setHeader("content-type","text/html(platin);charset=utf-8");
(2)  res.writeHead(200,{"content-type":"text/html(platin);charset=utf-8"})


03、http相关知识(见另外一篇)

04、请求报文

form标签是用来收集信息,提交给服务器端
action : 提交的服务器端的地址
method : 提交的方式
name:
1.分组
2.提交数据时的key名

eg:
 <form action="http://localhost:3000/index" method="POST">
    姓名:<input type="text" name="username"><br>
    密码:<input type="password" name="pwd"><br>
    性别:<input type="radio" name="sex">男
    <input type="radio" name="sex">女
    <br>
    <input type="submit" value="提交">
  </form>
// 获取请求报文中的一些信息
const http = require("http");


http.createServer(function(req,res){  // 第一个是请求信息对象,第二个是响应信息对象。

   //同源策略:协议、端口、域名一致。
  // 解决跨域问题
  // 违反了同源策略时,会出现跨域: 协议,域名,端口三者只要有一个不同就会跨域。
  res.setHeader("Access-Control-Allow-Origin","*");

  console.log(req.method);     // 获取请求方式: get post

  console.log(req.url);        // 获取请求的url (完整路径中端口后面的部分)

  console.log(req.headers);    // 获取请求头

  res.end();           
}).listen(3000);     // 添加端口监听
console.log("服务器成功启动");

get 和 post 的区别

  • 1.语义上的区别
    get 获取 从服务器端获取一些数据时使用。
    post 发送 向服务器端发送一些数据。
  • 2.参数
    get:参数会以键值对的形式拼接到地址栏中
    post:参数会在请求体中,发送到服务端。

参数的大小:
get:4kb左右
post:大小不受浏览器限制,但是可能会被服务器端限制。

  • 3.安全性
    post的安全性更高。

  • 4.缓存
    get:请求会被浏览器缓存
    post:请求不会被浏览器缓存


05、获取get参数

html 如下:

  <form action="http://localhost:3000" method="get">
      商品名称:<input type="text" name="keyword">
      <br>
      商品价格:<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","*");      // 解决跨域问题,违反了同源策略时,会出现跨域: 协议,域名,端口三者只要有一个不同就会跨域。
    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】


06、获取图书信息的小案例

index.js文件如下:

const http = require("http");
const queryString = require("querystring");
// 导入数据模块
let { dataList } = require("./dataList");     //解构赋值let dataList  = require("./dataList.js").dataList;//正常写法  二选一
http.createServer(function (req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*");  //解决跨域

  let obj = queryString.parse(req.url.split('?')[1]);

  res.setHeader("content-type", "text/html;charset=utf8");
  let result = dataList.filter((item) => {
    return item.bookName == obj.bookName;
  });

  if (result.length == 0) {
    res.write("未查询相关图书!")
  } else {
    for (let i = 0; i < result.length; i++) {
      res.write(`搜索到的图书为${result[i].bookName},作者为:${result[i].author},热度排位为${result[i].NO}<br>`);
    }
  }
  res.end();
}).listen(3000);
console.log("服务器成功启动");

HTML如下:

 <form action="http://localhost:3000" method="get">
      书籍名称:<input type="text" name="bookName">
      <br>
      <input type="submit" value="提交">
  </form>

dataList.js文件如下:

let dataList = [
  {
    "bookName": "夜的命名术",
    "NO": "1",
    "author": "会说话的肘子",
    "classify": "都市",
    "intro": "    蓝与紫的霓虹中,浓密的钢铁苍穹下,数据洪流的前端,是科技革命之后的世界,也是现实与虚幻的分界。钢铁与身体,过去与未来。这里,表世界与里世界并存,面前的一切,像是时间之墙近在眼前。黑",
    "update": "最新更新 159、苍穹为被,席地而眠(为蓝天白云爱睡觉白银盟加更)",
    "updateDate": "2021-06-01 14:40",
    "imgSrc": "https://bookcover.yuewen.com/qdbimg/349573/1021617576/150"
  },
  {
    "bookName": "大奉打更人",
    "NO": "2",
    "author": "卖报小郎君",
    "classify": "仙侠",
    "intro": "    《大奉打更人》实体书前三册已正式上架预售,天猫、京东、当当全平台发售。2020年12月3日,晚上8:12这个世界,有儒;有道;有佛;有妖;有术士。警校毕业的许七安幽幽醒来,发现自己",
    "update": "最新更新 第三十五章 占卜",
    "updateDate": "2021-06-01 23:27",
    "imgSrc": "https://bookcover.yuewen.com/qdbimg/349573/1019664125/150"
  },
  ];
  
  //导出  
module.exports = {
  dataList
}

07、获取post参数

index.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("服务器成功启动");

login.html如下:

  <form action="http://localhost:3000" method="post">
      用户名:<input type="text" name="username">
      <br>
      密码:<input type="password" name="pwd">
      <br>
      <input type="submit" value="提交">
  </form>