AJAX--POST，jQuery，动态服务器

Yibo98145
375 阅读3分钟

静态服务器

hs命令的原型，hs命令会默认创建一个服务器，然后包裹你的文件，使得请求可以顺利

 response.statusCode = 200
  const filePath = path === '/' ? '/index.html' : path
  const index = filePath.lastIndexOf('.')
  const suffix = filePath.substring(index)
  const fileTypes = {
    '.html':'text/html',
    '.css':'text/css',
    '.js':'text/javascript',
    '.png':'image/png',
    '.jpg':'image/jpeg'
  }
  response.setHeader('Content-Type', 
    `${fileTypes[suffix] || 'text/html'};charset=utf-8`)
  let content 
  try{
    content = fs.readFileSync(`./public${filePath}`)
  }catch(error){
    content = '文件不存在'
    response.statusCode = 404
  }
  response.write(content)
  response.end()

这个服务器的根路径其实是public文件，所有url都是以根路径开头的

动态服务器

静态服务器和动态服务器的区别就是静态网页和动态网页的区别

  • 没有请求数据库，就是静态服务器
  • 请求了数据库，就是动态服务器
  • 我们用json文件来模拟数据库

操作数据库

  • 读取数据
  • 先fs.readFileSync(./db/users.json ).toString()
  • 然后JSON.parse-下(反序列化)， 得到数组
  • 存储数据
  • 先JSON.stringify-下(序列化)， , 得到字符串
  • 然后fs.writeFileSync(./db/users/json', data)

jqueryAPI

  • $form.on("submit", e => {})，e代表事件对象，e里有很多属性，方法

  • jquery的属性选择器 Element[name="value"]选择指定属性是给定值的元素。

  • jquery的ajax请求jQuery.ajax({settings}) 在setting里设置属性即可

$.ajax({
          method: "POST",
          url: "/register",
          contentType: "text/json;charset=UTF-8",
          data: JSON.stringify({ name, password })
});

  • .val()方法主要用于获取表单元素的值，比如 input, select 和 textarea。对于 <select multiple="multiple"> 元素, .val()方法返回一个包含每个选择项的数组，如果没有选择性被选中，它返回null

  • 如果对Location.href写入新的 URL 地址，浏览器会立刻跳转到这个新地址。

POST实现注册

  • 前端写一个form,
  • 让用户填写name和password
  • 前端监听submit事件(阻止默认事件，改成自己写的POST)
  • 前端发送post请求，数据位于请求体
  • 后端接收post请求
  • 后端获取请求体中的name和password
  • 后端存储数据

实现登录

  • 前端写一个form,
  • 让用户填写name和password
  • 前端监听submit事件(阻止默认事件，改成自己写的POST)
  • 前端发送post请求，数据位于请求体
  • 后端接收post请求
  • 后端获取请求体中的name和password
  • 服务端核对一致返回cookie，不一致返回400
  • home知道登录了（有cookie）
  • home知道你登录了（cookie含有id）

cookie

Cookie是服务器下发给浏览器的一段字符串浏览器必须保存这个Cookie (除非用户删除) 之后发起相同二级域名请求(任何请求)时，浏览器必须附上Cookie

  • 我们需要实现登录完成后，跳转到主页，而且主页已经知道你登录了，这时我们用到cookie
  • 在服务端响应头加上response.setHeader('Set-Cookie','logined=1')
  • 之后发起请求成功的页面就会加上cookie，浏览器会保存cookie说明你已经登录了
  • 服务端在home路径判断是否有cookie来选择用不同的字符串替换占位符
  • 在后端实现cookie不要在前端设置
  • 在服务端响应头加上response.setHeader('Set-Cookie','logined=1'，HttpOnly)此时只能在后端操作
  • 把cookie设置为以下
response.setHeader('Set-Cookie',`user_id=${user.id}`)
  • cookie是一由分号分开的字符串，可以spilt成数组，fitter找到id即可

解决用户篡改cookie

当前cookie是用户的id，服务端在所有数据中找到对应id，如果我们篡改id，服务端找的就是对应id的信息

  • 解决办法:加密和session
  • 把用户信息放在服务器的session里，再给信息一个随机id
  • 把随机id发给浏览器
  • 后端下次读取到id时，通过session[id]获取用户信息
  • 想想为什么用户无法篡改id (因为id很长，而且随机)
  • session是什么?是文件。不能用内存，因为断电内存就清空
  • session.json里面存放一个对象
const random = Math. random()
const session = JSON.parse(fs.readFileSync('./session. json'). toString())
session[random] = {user_ id: user.id}
fs.writeFileSync('./session.json',JSON.stringify(session))
response.setHeader("Set-Cookie","session_ id=${random});
  • 每次登陆都会在session里加入一个随机数属性，浏览器发送session_ id，服务端会在session.json里找到对应的随机数属性名读取{user_ id: user.id}，如果黑客想仿造得仿造出随机数才行
  • 按照旧方法黑客只需仿造出id即可
  • 如果按时删掉session里的文件，安全性会很高

注销

  • 删除浏览器端的 Cookie，还需要把对应的 Session 数据删掉
  • 不能用JS删Cookie，应该使用 HTTP only 的 Cookie，然后JS发请求让服务器删Cookie
avatar
文章
阅读
粉丝