# learn_frontend **Repository Path**: nmaptech/learn_frontend ## Basic Information - **Project Name**: learn_frontend - **Description**: 学习记录 大前端 - **Primary Language**: HTML - **License**: Artistic-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-01-20 - **Last Updated**: 2024-03-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: 大前端, 学习 ## README # 前端学习记录 ## 高屋建瓴/大前端发展历史 [前端已死，前端永生｜掘金年度技术演讲 2023](https://www.bilibili.com/video/BV1uz421d7Ch) ## 学习规划 ### 思路 整合之前学习的前端内容 一些有用的示例 粗浅再次学习大前端 [参考视频-b站-10小时掌握大前端技术栈](https://www.bilibili.com/video/BV1Kc411r7Fi/) 练习vue(前端) + 数据桩(学习mock.js或者django做后端接口) 学习开源项目 https://github.com/PanJiaChen/vue-element-admin/tree/master ### 练习目标 开发bs架构 简单待办事项管理 、硬件设备管理 、定时任务管理 、 cicd流程结合 、 devops流程结合 ### 参考-编程语言学习关注点 https://blog.csdn.net/cchd0001/article/details/79828472 ### 参考-web框架学习关注点 * 如何定义 url router * 如何组织 request handler 函数 * 写一个最简单的request handler 函数 * 如何从get/post请求中取出参数 * 如何定义全局url 拦截函数 * 如何获取/修改/存储 cookie,session数据 * 如何修改/输出 http header 数据 * 如何部部署app程序 * 如何配置开发环境 * 如何配置静态文件访问 * 如何访问数据库 * 是否支持ORM * 如何维护表结构的变更 * 如何定义/组织/初始化 数据表 * 如何对接orm系统和现有的表结构 * 掌握最基本的add/delete/按字段查询/count/slice/order by * 如何直接使用sql 访问数据库 * 不支持orm (这样的web框架，不用也罢) * 如何使用模板系统 * 如何组织/访问 模板文件的目录结构 * 如何在模板中嵌入代码 * 模板是否支持继承结构 * 模板之间如何include * 如何自定义模板函数 * 如何通过http get/post 获取远程数据 * 如何parse json * 如何parse xml * 如何输出为 json * 如何处理状态码:404和50x * 如何处理文件上传 ## 开发环境 windows10 + 家用服务器(esxi 虚拟的ubuntu20.04) ide（编辑器）vscode（Visual Studio Code） vscode插件 Remote - SSH 用途：远程开发。 vscode插件 Live Server 用途：实时查看效果。安装后直接html文件右键 open with live server即可打开网页 变更实时生效 如果需要环境隔离与快速复用，考虑docker，vscode对容器开发支持很好。 ## vscode 编写效率 安装代码提示插件如codeium html基本代码快速生成 !+tab键 或者html 选择版本 html标签快速生成 打标签名+tab键 ## html标签 ### head head 编码 与 网页title ```html 网页title ``` ### 标题 h1 h2 h3 ### div和span 常用的包裹标签 特性：素(没有样式) 可以通过css批量给样式 块级标签 行内标签 ### 超链接 点击并跳转到url ### 图片 只设置宽或高其中一个，会保留原有比例 图片常嵌套a标签内 ```html 百度图片 ``` ### 列表 ```html

列表

无序列表
有序列表
  1. 有序列表
  2. 有序列表
  3. 有序列表
列表嵌套
去除无序列表的样式(去掉点和缩进)
``` ### 表格 ```html
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
``` ### input系列 ```html

input系列

文本输入
默认
提示文字
常用样式
密码输入
默认
文件上传
默认
单选框 name属性一致时只能选中一个
选项1 选项2
复选框
选项1 选项2
按钮
普通按钮 提交表单
``` ### 下拉框 ```html

下拉框

下拉框 单选
下拉框 多选
``` ### 多行文本 ```html

多行文本

多行文本
``` ### 案例-登录 页面数据提交到后台必须的要求: - form标签 - 包裹提交数据的标签 - form标签中有method中指定的http方法 - 有action中的提交地址 - 有一个submit按钮 - 数据输入标签 - 必须要有name属性 可以简单理解为页面提交的数据为一个 python 中的dict {"username":"xxx","password":"123456"} ```html
案例-登录-codeium给的对齐版本 内联样式
``` ### 总结-常见块级标签和行内标签 块 h1 div 行内 span img a ## css样式 选择器 在js jquery 爬虫中网页数据解析 网页自动化测试 均有涉及 常用样式 盒模型 标准文档流 浮动 定位 弹性盒子 ## javascripte/js f12 - sources 加断点 f5刷新 步进调试 数组 有序元素 ```js let arr = [1, 2, 3] arr.push(4) //添加元素 ``` 对象 简单对象 object ```js let obj = { name: 'jack', age: 20 } ``` ## dom操作 文档对象模型 作用：操作dom节点(html标签元素) 操作内容、样式、属性、事件 学习dom就是学习如何使用js操作html标签的内容、样式、属性、事件 ## jquery jquery 是js封装 简化dom操作 一万多行js代码 选择器 基础动作action 动态dom节点 jquery对象与dom对象转换 元素尺寸&位置 效果动画 ES6 历史名词/泛指 5.1版本之后的js标准 ES2015是其正式名称 发布于2015 引入许多特性和语法糖。 ## typescript ts是js的超集 主要提供类型系统核对ES6的支持。 类型系统: 申明变量时指定类型。参考java泛型 python类型注解。 ts代码不能直接在浏览器运行，需要先编译为js代码，编译时执行类型检测。 ## nodejs 是一个应用编程平台，可以运行js代码，提供js运行环境。基于google的v8引擎，执行js的性能很好。提供大量应用编程接口API，在处理http网络、数据库、文件等操作时非常方便。 ### nvm nodejs版本控制器 [参考](https://blog.csdn.net/FloraCHY/article/details/120720711) 安装nvm 安装node 执行简单js代码以验证node环境 ### nodejs模块开发 ``` commonjs模块化规范 module.exports 导出模块 require() 导入模块 es6模块化规范 export getMax export getMin import {getMax} from './utils.js' ``` 查看官方api关于内置模块 练习熟悉 三方模块 mysql express jquery vue。可以官网下载 可以用包管理工具下载。 ### 包管理工具npm npm -v 三方包安装在 node_modules 目录下。该同级目录下有package.json 为项目记录文件。记录了包依赖，同时描述项目信息。 全局安装 npm i 库名 -g 本地安装 npm i 库名 删除包 npm uninstall jquery npm镜像修改 npm config set registry 镜像地址 查看配置 npm config list ## express web框架 开始创建简单项目 npm init npm i express ### 使用express应用程序生成器 npx express-generator --view=ejs 实例没有配置镜像源 使用代理工具 proxychains4 npx express-generator --view=ejs 秒级生成项目 npm install 实例 proxychains4 npm install 或者直接 npm start ## 数据库 数据库管理软件 oracle db2 sqlserver mysql mysql客户端管理软件 navicat sqlyog phpmyadmin chat2db pass ## vue 渐进式 js 框架 采用简洁的模板语法声明式的将数据渲染进dom 自动跟踪js状态变化并在状态改变时响应式更新dom https://cdn.jsdelivr.net/npm/vue 页面另存为 vue.js 放到js目录下引入使用 ### 文本插值&属性绑定&事件 01.html 在单页中编写 展示原理 ```

{{content}}

content: '内容数据', {{}} 文本插值 不能在html属性中使用

message: '

元素一

', v-html 原始html 百度 urlbaidu: 'http://www.baidu.com', v-bind 响应式绑定属性 百度 urlbaidu: 'http://www.baidu.com', v-bind 简写

操作样式

布尔值 操作样式 v-on:事件类型=事件处理函数 等价于 @事件类型 ``` ### 条件渲染 02.html ``` v-if v-else v-else-if v-show ``` 如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。 ### 列表渲染 03.html ``` v-for ``` ### 表单绑定 04.html ``` v-model ``` ### 练习todoList 05-todoList.html ### 组件 ### 生命周期 ### 计算属性&侦听器 提高效率 计算属性以方法格式定义 以属性方式调用 与普通属性的区别：计算属性的依赖项变化后会自动重新计算。 ### 组件通讯 09-组件通讯.html 父传子 子传父 ``` 在父组件使用子组件的地方绑定自定义事件 在子组件中触发自定义事件 ``` ### 脚手架创建项目 创建项目npm create vue@latest 项目结构 ### 网络请求