后台服务器

下雪不过冬天

已于 2022-01-25 10:43:04 修改

阅读量1.9k

点赞数 1

文章标签：服务器前端运维

于 2021-06-03 16:47:50 首次发布

本文链接：https://blog.csdn.net/m0_56232007/article/details/117463879

版权

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

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