前端入门

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

队名：观光队 组长博客 作业博客 组员实践情况 王耀鑫 过去两天完成了哪些任务 文字/口头描述 完成服务器连接数据库部分代码 展示GitHub当日代码/文档签入记录 接下来的计划 服务器网络请求。 还剩下哪些任务 服务器网络请求。 燃尽图 遇到了哪些困难 1、py连接到数据库。 2、通过服务器对数据库进行增删改查。 3、服务器网络请求。 有哪些收获和疑问 1、收获：学会服务器和数据库之间的交互。 2、疑问：服务器网络请求。 陈超颖 过去两天完成了哪些任务 文字/口头描述 完善短租车后端接口部分代码、博客撰写 展示GitHub当日代码/文档签入记录 接下来的计划 与前端、数据库连接，完善接口 还剩下哪些任务 与前端、数据库连接，完善接口 燃尽图 遇到了哪些困难 怎么在完成的接口框架加入数据 有哪些收获和疑问 1、收获：emmm...硬要说的话就是通过看团队数据库的代码，对数据库有更深的了解吧。 2、疑问：怎么在完成的接口框架加入数据 许培荣 过去两天完成了哪些任务 文字/口头描述 复习图形学，还略微看了一下uni怎么搞 展示GitHub当日代码/文档签入记录 接下来的计划 把项目重构成uni框架，完成前端核心代码 还剩下哪些任务 前端功能完善 燃尽图 遇到了哪些困难 感觉uni查到的文档不多，大部分人采用vue.cli框架，用hbuilderx做得有点问题 有哪些收获和疑问 收获：

点击文章中的小册名称，跳转到掘金网站上就可以享受八折优惠。如图所示： 前端掘金小册推荐 小编精选推荐购买的前端相关掘金小册，均可以八折购买。 优惠八折购买：前端面试之道 – yck 疲于业务的你，可能并没有多少时间好好学习，或者说不知道该学习什么才能提高自己的技术。对于前端开发者来说，尽早建立起一个完整的前端知识框架，了解当下大厂常考知识点，掌握面试技巧，是一个值得重视的正经事。 优惠八折购买：WebGL 入门与实践 优惠八折购买：前端性能优化原理与实践 优惠八折购买：剖析 Vue.js 内部运行机制 – 染陌 本小册希望通过一种对新手更加友好直观的方式讲解 Vue.js 内部运行机制。把 Vue.js 拆分成多个小模块，讲解模块间的依赖以及调用关系。然后将源码核心部分抽离压缩，各个模块以小 Demo 的形式展现出来，用最少的代码讲解内部实现。掌握了这些模块的核心原理之后，再去阅读 Vue.js 源码或者是解决 Vue.js 的疑难杂症时，相信会更加得心应手。 优惠八折购买：Git 原理详解及实用指南 – 扔物线 简单地总结：Git 难学，是因为它的概念难以整体理解。而这本小册，就是从概念的角度出发，帮你先从本质上了解 Git 的工作模型，在此基础上去了解它的具体用法，以此来达到四两拨千斤的学习效果。而且这样的学习具有更高的持久性，在看完这本小册之后，你以后也很难再忘掉 Git

1. 前端框架 AngularJS 入门 1.1 AngularJS 简介 AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。 AngularJS 有着诸多特性，最为核心的是： MVC 、模块化、自动化双向数据绑定、依赖注入等等。 1.2 AngularJS 四大特征 1.2.1 MVC 模式 Angular 遵循软件工程的 MVC 模式 , 并鼓励展现，数据，和逻辑组件之间的松耦合 . 通过依赖注入（ dependency injection ）， Angular 为客户端的 Web 应用带来了传统服务端的服务，例如独立于视图的控制。 因此，后端减少了许多负担，产生了更轻的 Web 应用。 Model: 数据 , 其实就是 angular 变量 ($scope.XX); View: 数据的呈现 ,Html+Directive( 指令 ); Controller: 操作数据 , 就是 function, 数据的增删改查 ; 1.2.2 双向绑定 AngularJS 是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统 HTML ，通过双向的数据绑定来适应动态内容

队名：观光队 组长博客 作业博客 组员实践情况 王耀鑫 过去两天完成了哪些任务 文字/口头描述 完成服务器连接数据库部分代码 展示GitHub当日代码/文档签入记录 接下来的计划 与服务器连接，配合前端工作 还剩下哪些任务 与服务器连接，配合前端工作 燃尽图 遇到了哪些困难 1、py连接到数据库。 2、通过服务器对数据库进行增删改查。 有哪些收获和疑问 1、收获：学会服务器和数据库之间的交互。 2、疑问：flask还是不会 陈超颖 过去两天完成了哪些任务 文字/口头描述 完成短租车后端接口部分代码 展示GitHub当日代码/文档签入记录 接下来的计划 与前端、数据库连接，完善接口 还剩下哪些任务 与前端、数据库连接，完善接口 燃尽图 遇到了哪些困难 1、最初前面看flask的教程，基本都要使用虚拟环境开发，安装也很是头痛。后来发现可以直接在win10上开发。我#@^~.... 2、最大困难应该就是初次接触后端，感觉很难，不熟悉（结对主要负责前端部分）。看完flask框架以及大佬培荣的热心教学，觉得自己还可以接受。 有哪些收获和疑问 1、收获：对后端没有那么恐惧，初步了解了python库里面的flask框架，并实现简单应用。flask框架是一个轻量级的web框架，个人觉得挺好用的。 2、疑问：我始终没有搞懂为什么flask的教程都说要在虚拟环境里面操作。我在win10操作得好好的啊.

队名：观光队 组长博客 作业博客 组员实践情况 王耀鑫 过去两天完成了哪些任务 文字/口头描述 完成服务器连接数据库部分代码 展示GitHub当日代码/文档签入记录 接下来的计划 与服务器连接，配合前端工作 还剩下哪些任务 与服务器连接，配合前端工作 燃尽图 遇到了哪些困难 1、py连接到数据库。 2、通过服务器对数据库进行增删改查。 有哪些收获和疑问 1、收获：学会服务器和数据库之间的交互。 2、疑问：flask还是不会 陈超颖 过去两天完成了哪些任务 文字/口头描述 完成短租车后端接口部分代码 展示GitHub当日代码/文档签入记录 接下来的计划 与前端、数据库连接，完善接口 还剩下哪些任务 与前端、数据库连接，完善接口 燃尽图 遇到了哪些困难 1、最初前面看flask的教程，基本都要使用虚拟环境开发，安装也很是头痛。后来发现可以直接在win10上开发。我#@^~.... 2、最大困难应该就是初次接触后端，感觉很难，不熟悉（结对主要负责前端部分）。看完flask框架以及大佬培荣的热心教学，觉得自己还可以接受。 有哪些收获和疑问 1、收获：对后端没有那么恐惧，初步了解了python库里面的flask框架，并实现简单应用。flask框架是一个轻量级的web框架，个人觉得挺好用的。 2、疑问：我始终没有搞懂为什么flask的教程都说要在虚拟环境里面操作。我在win10操作得好好的啊.

其实我只是想写写前端性能测试的东西，不知不觉写了很多与之盘根错节的知识点。我这里只写些皮毛，我也只懂些皮毛。 #小白入门一 举个例子： 你要吃个菜，你找到厨师说，我要尖椒肉丝。 厨师就去翻菜谱，炒给你吃。 你是浏览者 菜是你将看到的页面 厨师是浏览器 菜谱是程序员写的页面代码 炒菜的过程，就是页面渲染 #小白入门二 渲染大致分为两部分，一部分是排版，一部分是绘制。排版就是根据文档流，加上浮动、定位等属性，确定各个盒子的位置还有尺寸。绘制就是将css的属性例如字体、背景色、圆角等等按照给定的方式呈现出来。各个浏览器的渲染效率不一样。 #小白入门三 浏览器这边做的工作大致分为以下几步：加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）渲染：构建渲染树，对各个元素进行位置计算、样式计算等等，然后根据渲染树对页面进行渲染（可以理解为“画”元素）这几个过程不是完全孤立的，会有交叉，比如HTML加载后就会进行解析，然后拉取HTML中指定的CSS、JS等。 摘自 ： https://www.zhihu.com/question/20117417?sort=created https://www

本文旨在用最通俗的语言讲述最枯燥的基本知识 面试过前端的老铁都知道，对于前端，面试官喜欢一开始先问些HTML5新增元素啊特性啊，或者是js闭包啊原型啊，或者是css垂直水平居中怎么实现啊之类的基础问题，当你能倒背如流的回答这些之后，面试官脸上会划过一丝诡异的笑容，然后晴转多云，故作深沉的清一下嗓子问： 从用户输入URL到浏览器呈现页面经过了哪些过程？ 如果你懂，巴拉巴拉回答了一堆，他又接着问： 那网页具体是如何渲染出来的呢？ 如果你还懂，又巴拉巴拉的回答了一堆，他还会继续问： 那你有哪些网页性能优化的经验呢？ 当你还能巴拉巴拉的回答了一堆之后，面试官这下心里就有逼数了，转而去问你一些和技术无关的七大姑八大姨之类的事情，这时候，你就可以欢呼你的offer基本已经到手了。 那么各位问题来了，真正轮到你去面试的时候 你能否很好的回到这些问题呢？ 用户输入URL回车之后，浏览器到底做了啥？ 页面渲染的完整流程是怎样的？ 前端性能优化有哪些经验？ 如果不能，那我们往下走： （有人会疑惑说不是讲前端吗？为毛要讲TCP、DNS这些与前端无关的知识?别慌咯，跟着文章走吧，多学无害！） 文章提纲： TCP UDP 套接字socket HTTP协议 DNS解析 HTTP请求发起和响应 页面渲染的过程 页面的性能优化 TCP连接 TCP ：Transmission Control Protocol，

HTML页面结构层HTML 分以下方面学习： HTML基础， HTML表格， HTML表单， 搭建网页结构 html基础 学习前端的第一门课程，为HTML基础，HTML标记语言，它是网页制作的第一步。 学习内容： HTML概念，了解HTML发展史，基础语法，常用标签（段落，图片，链接等） 结合小例子 什么是HTML HTML（Hypertext Markup Language）即超文本标记语言 html发展史 1993（IETF）HTML1.0 1995（W3C）HTML2.0 1996（W3C）HTML4.0 1997（W3C）HTML4.0.1 2000（W3C）XHTML1.0 2001（w3c）xhtml1.1 xhtml2.0? 2004年（WHATWG）HTML5草案 2008年（合并）HTML5正式版 2014年HTML5定稿 html特点 HTML不需要编译，直接由浏览器执行 HTML文件是一个文本文件 HTML文件必须使用HTML或htm为文件名后缀 HTML大小写不敏感，HTML与html一样 HTML是一个文本文件 HTML基础语法 学习内容 HTML基本结构 HTML标签 HTML元素 HTML属性 注解 注解：div标签为块级结构布局元素，因此将在css中结合盒模型进行讲解。 HTML基本结构 <html> // 头部信息 <head> <title>标题

HTML页面结构层HTML 分以下方面学习： HTML基础， HTML表格， HTML表单， 搭建网页结构 html基础 学习前端的第一门课程，为HTML基础，HTML标记语言，它是网页制作的第一步。 学习内容： HTML概念，了解HTML发展史，基础语法，常用标签（段落，图片，链接等） 结合小例子 什么是HTML HTML（Hypertext Markup Language）即超文本标记语言 html发展史 1993（IETF）HTML1.0 1995（W3C）HTML2.0 1996（W3C）HTML4.0 1997（W3C）HTML4.0.1 2000（W3C）XHTML1.0 2001（w3c）xhtml1.1 xhtml2.0? 2004年（WHATWG）HTML5草案 2008年（合并）HTML5正式版 2014年HTML5定稿 html特点 HTML不需要编译，直接由浏览器执行 HTML文件是一个文本文件 HTML文件必须使用HTML或htm为文件名后缀 HTML大小写不敏感，HTML与html一样 HTML是一个文本文件 HTML基础语法 学习内容 HTML基本结构 HTML标签 HTML元素 HTML属性 注解 注解：div标签为块级结构布局元素，因此将在css中结合盒模型进行讲解。 HTML基本结构 <html> // 头部信息 <head> <title>标题