十月五周 总结笔记

十月五周 总结笔记


一、日程安排

星期 事务
周日 1、学习Vue.js中ajax部分(vue-resource、axios); 2、复习UML; 3、拆机ThinkPad E550c
周一 1、深入了解(vue-resoure、axios、jquery(ajax)); 2、解决跨域请求问题; 3、学习UML; 4、构思入党志愿书
周二 1、了解XSS跨站攻击; 2、学习Vuex;
周三 1、开发jsp期中项目; 2、网络安全入门;
周四 1、学习java中json数据操作; 2、学习Vue.js; 3、开发jsp期中项目
周五 1、vue-router导航守卫;2、servlet清空session;3、cookie path httponly属性
周六 1、前端爬坑

二、学习内容

1、Vue.js

  • 跨域请求问题:

  • 情况如下:
    开发环境下npm run dev启动地址是localhost:8080;
    前端ajax请求用于测试请求的接口(https://suggest.taobao.com/sug?code=utf-8&q=卫衣&callback=cb)返回的是json数据;
    无论前端是使用vue-resource、axios、jquery ajax都报错无法请求到数据;

  • 前端console报错信息如下:

Access to XMLHttpRequest at 'https://suggest.taobao.com/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3&callback=cb'from 
origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is 
present on the requested resource.
  • 报错原因:
    这是由于浏览器的同源策略引发的错误,该策略是浏览器为了安全性的考虑实施的非常重要的安全策略。
    即从一个域上加载的脚本不允许访问另外一个域的文档属性。
    详细见造成跨域的原因和解决方法 博客

  • 解决方案:

1、设置代理:

  • 原理:
    跨域请求不被允许,但是跨站请求是不受限制的。可以将请求发送至资源服务器,由资源服务器中转发送至目标服务器。返回结果再由资源服务器接收,转发给浏览器。
  • 方法:
>#./config/index.js (dev:)
>    proxyTable: {
>      '/api': {
>        target: 'https://suggest.taobao.com/',
>        changeOrigin: true,
>        pathRewrite: {
>          '^/api': '/' # 前端写请求 '/api/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3&callback=cb'
>        }              # 即 'https://suggest.taobao.com/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3&callback=cb'
>      }                # (target+'/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3&callback=cb')
>    }
>```

2、后端测试接口添加请求头:

  • 原理:
    参考cors解决跨域问题 博客
  • 方法:
    参考AJAX跨域产生原因及解决方法 博客
  • axios[官网]、vue-resource、jquery在vue-cli中的实例:

 const testUrl = 'https://suggest.taobao.com/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3&callback=cb'
 
 // axios
 var self = this
 axios.get(testUrl)
   .then(function (response) {
     self.info = response.data
   })
   .catch(function (error) {
     console.log(error)
   })

 // vue-resource
 this.$http.get(testUrl).then(
   (response) => {
     this.info = response.data
   },
   (responseError) => {
     console.log('error')
   }
 )

 // jquery
 var self = this
 $.ajax({
   type: 'GET',
   url: testUrl,
   success: function (data) {
     self.info = data
   },
   error: function (data) {
     console.log('error')
   }
 })
  • Vuex

2、JAVA

  • 1.java servlet中对json数据的接收、处理和发送

  • 接收json数据原理:
    通过对json字符串格式化实现,需要使用类JSONObject,专门用来处理json格式数据; \
  • 使用JSONObject类,引入以下6个jar包:
commons-beanutils-1.7.0.jar
commons-collections-3.1.jar
commons-lang-2.5.jar
commons-logging.jar
ezmorph-1.0.3.jar
json-lib-2.1-jdk15.jar
  • 下面给出一个接收工具类的代码:
// jsonReader.java
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import javax.servlet.http.HttpServletRequest;
import net.sf.json.JSONObject;

public class jsonReader {
   public static JSONObject receivePost(HttpServletRequest request){
       InputStreamReader in = null;
       StringBuilder sb = null;
       try {
           in = new InputStreamReader(request.getInputStream(), "UTF-8");
           BufferedReader br = new BufferedReader(in);
           String line = null;
           sb = new StringBuilder();
           while((line = br.readLine()) != null){
               sb.append(line);
           }
       } catch (UnsupportedEncodingException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       } catch (IOException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       }
       JSONObject json = JSONObject.fromObject(sb.toString());
       return json;
   }
}
  • 2.servlet Session内容清空

HttpSession session = request.getSession();
session.invalidate();
  • 3.JDNI 应用

  • 原理:
    通过对tomcat配置实现数据库连接池,con.close()时不会真正关闭连接,只会放回连接池中,一定要记得close()操作.

3、UML学习

  • 1946年,世界第一台计算机,美国
  • 50年代,软件诞生
  • 60年代中期到70中期,软件危机

原因:

  1. 开发无计划性
  2. 需求分析不充分
  3. 开发过程无规范
  4. 产品无评测手段
  • 软件 = 程序 + 数据 + 文档
  • 软件工程三要素:方法、工具、过程

开发五阶段:

  1. 需求分析
  2. 系统分析设计
  3. 系统实现
  4. 测试
  5. 维护
  • UML由5类视图定义:
  1. 用例图(Use Case Diagram):从用户的角度描述系统功能,指出功能的操作;
  2. 静态图(Static Diagram):类图、对象图、包图;
  3. 行为图(Behavior Diagram):状态图、活动图;
  4. 交互图(Interactive Diagram):时序图、合作图
  5. 实现图(Implementation Diagram):组件图、配置图
  • 面向对象 = 对象 + 类 + 继承 + 通讯

4、TinkPad E550c拆机

  • 参考拆机图解
  • 总体感觉背板卡扣太紧,非常难拆

5、XSS跨站攻击

  • 个人理解,就是JS脚本注入攻击
  • 用户访问后,运行注入的JS脚本
  • 通过注入的脚本,向黑客的主机发起跨域请求,黑客获取用户名,密码,Session等进行下一步的攻击

6、网络安全入门

  • web渗透 信息收集
  1. 操作系统
  2. 编程语言
  3. 数据库类型
  4. 中间件(tomcat、IIS等)
  5. 管理员个人信息
  6. 网站子域名、端口信息
    ps: 信息来源(站长之家、google hack、zoomeye、layer子域名挖掘机)
  • 学习站点
  1. 乌云知识库
  2. i 春秋(论坛)
  3. Freebuf
  4. 合天网安
  5. 吾爱破解
  6. 看雪论坛
  7. 即可安全
  • 本周总结

学习比较杂,下周开始计划性学习

  • 下周计划

忙到爆炸,学习停滞
ACM算法入门,优化py_email

你可能感兴趣的:(Spring,boot/Vue)