前端开发

基于Visual Studio 2015，你可以： 方便的管理前端包，如jQuery, Bootstrap, 或Angular。 自动运行任务，如LESS、JavaScript压缩、JSLint、JavaScript单元测试等。 方便的获得Web开发者生态圈的工具包。 为了实现这些场景，Visual Studio 2015已经内置了一些流行的第三方工具包： Bower ：Web包管理器，Bower可以帮你安装前端包，包括JavaScript、CSS类库。对于服务器端包，请通过NuGet包管理。 Grunt and Gulp ：Grunt和Gulp是基于JavaScript的运行任务。如你未用过类似功能，可以认为这是一个自动调度运行的app，ASP.NET 5工程模板使用的是Grunt运行任务。 npm (Node Package Manager). npm是一个node包管理器，最初被用于Node.js包管理。上面说的Bower、Grunt、Gulp用到了npm。 启动Visual Studio 2015，新建一个ASP.NET 5.0的工程，选择文件-> 新建工程->Visual C#->Web->ASP.NET Web应用程序： 在新建工程对话框，选择ASP.NET 5.0 Starter Web 创建一个ASP.NET MVC 6 app，工程文件结构如下： 该工程下

◆ 模块作用： 基于node平台开发的前端构建工具，将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了，提高开发效率。 1. 项目上线，HTML、CSS、JS文件压缩合并 2. 语法转换（es6、less ...） 3. 公共文件抽离 4. 修改文件浏览器自动刷新 ◆ 使用步骤： 使用npm install gulp下载gulp库文件 在项目根目录下建立gulpfile.js文件 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件 在gulpfile.js文件中编写任务. 在命令行工具中执行gulp任务 ◆ Gulp中提供的方法： gulp.src()：获取任务要处理的文件 gulp.dest()：输出文件 gulp.task()：建立gulp任务 gulp.watch()：监控文件的变化 ◆ Gulp插件： 需使用npm命令下载如下的插件： gulp-htmlmin ：html文件压缩 gulp-csso ：压缩css gulp-babel ：JavaScript语法转化 gulp-less: less语法转化 gulp-uglify ：压缩混淆JavaScript gulp-file-include 公共文件包含 browsersync 浏览器实时同步 ◆ 使用gulp.task建立任务： // 参数：任务的名称

队名：观光队 组长博客 作业博客 组员实践情况 王耀鑫 过去两天完成了哪些任务 文字/口头描述 完成服务器连接数据库部分代码 展示GitHub当日代码/文档签入记录 接下来的计划 服务器网络请求，vue使用。 还剩下哪些任务 服务器网络请求，vue使用。 燃尽图 遇到了哪些困难 1、服务器网络请求。 2、vue使用。 有哪些收获和疑问 1、收获：加深对网络请求的理解。 2、疑问：vue使用。 陈超颖 过去两天完成了哪些任务 文字/口头描述 完善短租车后端接口部分代码、博客撰写 展示GitHub当日代码/文档签入记录 接下来的计划 与前端、数据库连接，完善接口 还剩下哪些任务 与前端、数据库连接，完善接口 燃尽图 遇到了哪些困难 怎么在完成的接口框架加入数据 有哪些收获和疑问 1、收获：emmm...硬要说的话就是通过看团队数据库的代码，对数据库有更深的了解吧。 2、疑问：怎么在完成的接口框架加入数据 沈梓耀 过去两天完成了哪些任务 文字/口头描述 接受任务分配,学习新知识 展示GitHub当日代码/文档签入记录 接下来的计划 学习网络请求和接口 还剩下哪些任务 代码实现 燃尽图 遇到了哪些困难 代码的学习 有哪些收获和疑问 语法的学习比较吃力 滕佳 过去两天完成了哪些任务 文字/口头描述 把普通项目改成uniapp项目 展示GitHub当日代码/文档签入记录 接下来的计划

队名：观光队 组长博客 作业博客 组员实践情况 王耀鑫 过去两天完成了哪些任务 文字/口头描述 完成服务器连接数据库部分代码 展示GitHub当日代码/文档签入记录 接下来的计划 服务器网络请求，前端完善。 还剩下哪些任务 服务器网络请求，前端完善。 燃尽图 遇到了哪些困难 1、服务器网络请求。 2、vue使用。 有哪些收获和疑问 1、收获：无。 2、疑问：vue使用。 陈超颖 过去两天完成了哪些任务 文字/口头描述 博客撰写 展示GitHub当日代码/文档签入记录 接下来的计划 与前端、数据库连接，完善接口 还剩下哪些任务 与前端、数据库连接，完善接口 燃尽图 遇到了哪些困难 怎么在完成的接口框架加入数据 有哪些收获和疑问 1、收获：emmm...硬要说的话就是通过看团队数据库的代码，对数据库有更深的了解吧。 2、疑问：怎么在完成的接口框架加入数据 陈湘怡 过去两天完成了哪些任务 文字/口头描述 学习uni-app组件ing 展示GitHub当日代码/文档签入记录 这两天无代码签入 接下来的计划 修改页面，学习js,vue,学习完善再完善。 还剩下哪些任务 与后端接口连接，完善修改页面。QAQ 燃尽图 遇到了哪些困难 考完马上搞软工，难。 有哪些收获和疑问 1、收获：收获成长。 2、疑问：没啥疑问，都是学的还不够。 林银河 过去两天完成了哪些任务 文字/口头描述

DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。下面是我清空本地dns后访问网页dns的查询请求。 避免页面跳转 当客户端收到服务器的跳转回复时，客户端再次根据服务器回复中的location指定的地址再次发送请求，例如以下跳转回复。 HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html 当客户端遇到这种回复的时候，用户只能等待客户端再次发送请求，有的网站甚至会一直跳n次，跳到他想带你去的地方…当然在这个时候用户看不到任何页面内容，只有浏览器的进度条一直在刷新。 80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。 1. 捆绑文件: 现在有很多现成的库可以帮你将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减少文件的下载次数。例如在asp

一、前言 最近同事问到一个问题，一个前端页面在IOS端真机测试下出现一个比较诡异的问题，如果没有遇到过估计也是一筹莫展。今天特此记录一下，或许能帮到后面遇到这个问题的朋友少绕一些弯路。这是关于JQuery 中的 delegate 和 on 给动态元素绑定事件触发不了的问题。文章以下只用 delegate 举例。 二、JQuery 的 delegate 作用。 首先我们来了解一下 Delegate 的作用。一句话带过：“给动态添加的元素绑定事件” 看图： 下面九个测试按钮是通过点击上面的 “添加测试按钮” 按钮添加的。这就是动态添加元素的概念。接下来需求为每个添加的测试按钮都有统一的处理事件。这边作为测试，当点击时输出 “你点击了+按钮名称” 信息。 按平时绑定事件的方式，.click() 或者 on('click') 等等这些方式。代码如下 $(function(){ //“添加测试按钮” 按钮点击事件，测试按钮 class 为 new-btn $("#add-btn").click(function(){ var test_btn_count = $('#btn-line button').size(); var new_btn_html = '<div class="new-btn btn">测试按钮' + (test_btn_count + 1) +'</div>'; $('

前后端不分离 　　 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制的，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。 　　这种应用模式比较适合纯网页应用，但是当后端对接App时，App可能并不需要后端返回一个HTML网页，而仅仅是数据本身，所以后端原本返回网页的接口不再适用于前端App应用，为了对接App后端还需要在开发一套接口。 请求的数据交互如下图 ： 前后端分离 　　 在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，App有App的处理方式，但是无论那种前端，所需的数据基本相同，后端仅需要开发一套逻辑对外提供数据即可。 　　在前后端分离的应用模式中，前端与后端的耦合度相对较低。 　　在前后端分离的应用模式中，我们通常将后端开发的每个视图都称为一个接口或者API,前端通过访问接口来对数据进行增删改查。 对应的数据交互如下图： 　　 　　　　　　　 　　　　　　　　　　　　　　 　　 来源： https://www.cnblogs.com/xiaobenshou/p/10263851.html

目录 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队的角色，管理，合作 总结 对照敏捷开发的原则, 你觉得你们小组做得最好的是哪几个原则? 请列出具体的事例。 下个阶段要改进的地方 照骗 设想和目标 我们的软件要解决什么问题？是否定义得很清楚？是否对典型用户和典型场景有清晰的描述？ alpha阶段软件 要解决的问题是：北航学生没有一个 方便快捷 的渠道，去查看各个社团 信息 、 新闻文章 、 举办的活动 等社团资讯。 具体来说，没有一个集北航社团各种资讯于一身的平台：如今每个社团有自己的公众号，用户一个个去关注和查看文章十分麻烦；社联推送的社团介绍等也比较有限；社团举办的活动基本只能通过社员群、朋友圈、公众号文章的方式来进行宣传，不方便用户获取信息。 要解决的问题定义得很清楚，也是我们在设计功能是时的主要考量依据。 对典型用户和典型场景有清晰的描述，alpha阶段有两类典型用户： 萌新M 、 二狗G （点击跳转功能规格说明书查看详情） 我们达到目标了么（原计划的功能做到了几个？ 按照原计划交付时间交付了么？ 原计划达到的用户数量达到了么?) 功能：原计划的最核心的三个功能（展示新闻、社团信息、活动）都做到了，同时还加入了一些非核心功能（比如按类别筛选新闻）。 交付时间：原计划4.18晚提交微信审核，实际熬了会儿夜，在4.19凌晨提交审核，并幸运地在4

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。也就是说如果协议，域名，或者端口有一个不同就是跨域。 那么为什么要用跨域？ 其实是因为浏览器出于安全考虑，我们都知道浏览器有同源策略。如果没有同源策略的情况下，A网站可以被任意来源的Ajax访问到内容，如果当前A网站还处于登录态，那么对方就可以通过Ajax获得A网站的任何消息。当然跨域可以用来房子CSRF攻击，但是并不能完全阻止CSRF。 为什么跨域并不能完全阻止CSRF攻击呢？举个例子： 当请求跨域了，请求是必然发出去的，只是浏览器拦截了响应。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么 Ajax 就不会。因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。所以跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。 上面讲到同源策略，那什么是同源策略呢？ 同源策略（SOP）是一种约定，它是浏览器最核心也是最基本的安全功能。浏览器如果缺少同源策略，就会很容易收到xss，csrf等攻击。所谓同源是指“协议+域名+端口”三者相同，即便两个不同的域名指向同一个IP地址，也非同源。 下面来说一下几种方案来解决跨域问题 跨域的方案有： 1、通过jsonp跨域； 2、postMessage跨域； 3、跨域资源共享

　　在实际开发中，前端和后端之所以存在跨域的问题，主要是受到了 “同源策略”的限制，“同源”一般是指： 协议、域名（主域名以及子域名）和端口号三者相同，三者中的任何一个不相同都算作是跨域，不同域之间的相互请求资源就算作是跨域，这样都是会被限制的；之所以设置同源策略的限制主要是为了避免浏览器受到xss、CSFR等的攻击；同源策略限制的内容有： Cookie、LocalStorage、IndexdDB等存储数据，Dom节点，AJAX请求发送后，被浏览器的拦截；但是，img标签中的src、link中的href以及script中的src是允许跨域加载资源的； 　　需要注意的是，如果是协议和端口造成的跨域问题，前端是无能为力的，只能通过服务器的配置来解决；其次，在跨域问题上，仅仅是通过“url的首部”来识别而不会根据域名对应的IP地址来判断，也就是根据域名，协议，端口来判断； 　　跨域并不是请求发布出去，请求是能发出去的，服务器是能够收到请求并且正常的返回结果的，只是结果被浏览器给拦截了； 　　 跨域的解决方案 　　1、jsonp原理 　　　　利用script标签没有跨域限制的漏洞，网页可以得到从其他源动态产生的json数据。 JSONP请求一定需要对方的服务器做支持才可以；JSONP主要是通过声明一个回调函数，然后利用script的src属性后边跟上 ？callback=声明的回调函数