# 十月五周 总结笔记

十月五周 总结笔记

---

一、日程安排

星期	事务
周日	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