2 lines
14 KiB
JavaScript
2 lines
14 KiB
JavaScript
import{_ as l,D as a,c as t,I as o,w as i,a4 as e,o as s,a as n}from"./chunks/framework.DtvhUNIn.js";const C=JSON.parse('{"title":"基础(三件套)","description":"","frontmatter":{},"headers":[],"relativePath":"技术资源汇总(杭电支持版)/7.网络应用开发/7.2.1基础(三件套).md","filePath":"技术资源汇总(杭电支持版)/7.网络应用开发/7.2.1基础(三件套).md"}'),d={name:"技术资源汇总(杭电支持版)/7.网络应用开发/7.2.1基础(三件套).md"},c=e('<h1 id="基础-三件套" tabindex="-1">基础(三件套) <a class="header-anchor" href="#基础-三件套" aria-label="Permalink to "基础(三件套)""></a></h1><h2 id="🔑-萌新需要知道的前置知识" tabindex="-1">🔑 萌新需要知道的前置知识 <a class="header-anchor" href="#🔑-萌新需要知道的前置知识" aria-label="Permalink to "🔑 萌新需要知道的前置知识""></a></h2><h3 id="前端入门到入土" tabindex="-1">前端入门<del>到入土</del> <a class="header-anchor" href="#前端入门到入土" aria-label="Permalink to "前端入门<del>到入土</del>""></a></h3><p>不同于后端语言的多样化，前端语言较为统一。在萌新阶段，你需要先掌握 HTML、CSS、JS 三种语言（人称前端三<del>剑客</del>件套）</p><p>三者关系可以简单理解为：HTML 是骨架，CSS 是衣服装饰，JS 则控制交互行为</p><p>以下提供一些可供参考的学习资料，你也可以按兴趣在 b 站大学搜索相关学习视频。在学习中遇到无法解决的问题，或者学习路径上的迷茫，也可以参考<a href="https://learnku.com/laravel/t/2396/wisdom-of-asking-questions-chinese-version" target="_blank" rel="noreferrer">提问的智慧</a>向群里的前端学姐们提问噢~</p><h4 id="html-css" tabindex="-1">HTML & CSS <a class="header-anchor" href="#html-css" aria-label="Permalink to "HTML & CSS""></a></h4><p><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web" target="_blank" rel="noreferrer">MDN Web 入门</a></p><p><a href="https://zhuanlan.zhihu.com/p/145466139" target="_blank" rel="noreferrer">前端入门必会的初级调试技巧</a></p><h4 id="javascript" tabindex="-1">JavaScript <a class="header-anchor" href="#javascript" aria-label="Permalink to "JavaScript""></a></h4><p><a href="https://zh.javascript.info/" target="_blank" rel="noreferrer">现代 JavaScript 教程</a></p><div class="warning custom-block"><p class="custom-block-title">🎈</p><p><strong>快速上手的参考建议</strong></p><p><strong>HTML</strong>可以先认知常用标签（body / div / span / a / img 等）及其常用属性</p><p><strong>CSS</strong>了解常见的颜色属性（字体颜色 / 背景颜色 / 边框颜色 等）、字体相关属性（字号 / 字重 / 行高 等）、盒子模型（padding / border / margin）、用于布局的属性（float / flex / grid）、单位（px / rem / em / vh / vw 等）、选择器（id 选择器 / 类选择器 等）</p><p><strong>JS</strong>了解基本语法（变量定义 / 判断 / 循环 / 函数定义 / etc）与 DOM 操作</p><p>涉及<strong>前后端交互</strong>的部分可以了解 fetch 的使用</p><p>其他诸如 HTML5 / CSS3 / ES6+ 的知识可以暂时跳过，<del>任务要用到再查</del></p><p>基本全部前端开发资料都可以在 <a href="https://developer.mozilla.org/" target="_blank" rel="noreferrer">MDN</a> 中找到</p></div><h3 id="🥂-助手介绍网页的重写" tabindex="-1">🥂 助手介绍网页的重写 <a class="header-anchor" href="#🥂-助手介绍网页的重写" aria-label="Permalink to "🥂 助手介绍网页的重写""></a></h3><p>设计部姐姐给了前端部一个助手介绍网页的设计稿，但是 psyq 觉得<a href="https://www.hduhelp.com/" target="_blank" rel="noreferrer">目前的助手介绍网页</a>写得不是很还原，你可以帮 psyq 重写一个更好看的网页吗？</p><p>设计稿如下：</p><p><img src="https://cdn.xyxsw.site/boxcnVR5z4U8YlXZbc8beDNEHXc.jpg" alt=""></p><h4 id="可能需要用到的图片资源" tabindex="-1">可能需要用到的图片资源 <a class="header-anchor" href="#可能需要用到的图片资源" aria-label="Permalink to "可能需要用到的图片资源""></a></h4><p><img src="https://cdn.xyxsw.site/boxcnbigxAK5SbxiWuDHr1Ashne.png" alt=""></p><p><img src="https://cdn.xyxsw.site/boxcnrqddPFusKhe0vZuzXJOosg.png" alt=""></p><h4 id="基本要求" tabindex="-1">基本要求 <a class="header-anchor" href="#基本要求" aria-label="Permalink to "基本要求""></a></h4><ul><li><p>大致还原设计稿的基础上可以自由发挥，要求美观</p><ul><li>设计稿内容的大致布局</li><li>背景颜色/样式 & 文字颜色/样式</li><li>文字与容器的位置关系</li><li>……</li></ul></li></ul><h4 id="额外发挥" tabindex="-1">额外发挥 <a class="header-anchor" href="#额外发挥" aria-label="Permalink to "额外发挥""></a></h4><ul><li>各处样式的细节（圆角 / 阴影 / 渐变）</li><li>对不同设备屏幕尺寸进行适配</li><li>为显示内容增加一些动态效果</li><li>无法一页显示所有内容时，试试在下滑页面时显示一个 <code>返回顶部</code> 的按钮</li></ul><h4 id="可能涉及的知识点" tabindex="-1">可能涉及的知识点 <a class="header-anchor" href="#可能涉及的知识点" aria-label="Permalink to "可能涉及的知识点""></a></h4><ul><li><p>使用 HTML 构建页面的基础布局</p><ul><li><p>了解常用的 HTML 标签</p><ul><li>HTML 引入外部图片文件（<code><img></code>）</li></ul></li></ul></li><li><p>如何让 HTML / CSS / JS 相互配合</p><ul><li>HTML 中书写 css 使用 <code><style></code></li><li>引入 css 等资源使用 <code><link></code></li><li>书写/引入 js 使用 <code><script></code></li></ul></li><li><p>使用 CSS 为页面赋予样式</p><ul><li>了解常见网页布局（了解 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/float" target="_blank" rel="noreferrer">float</a>，<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" target="_blank" rel="noreferrer">flex</a>/ <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid" target="_blank" rel="noreferrer">grid</a>布局，综合运用不同布局来完成页面）</li><li>使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors" target="_blank" rel="noreferrer">css 选择器</a>选中 HTML 元素添加样式（<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors" target="_blank" rel="noreferrer">id 选择器</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors" target="_blank" rel="noreferrer">类选择器</a> / etc.）</li><li>自适应布局（查阅 <code>媒体查询</code>）</li><li>交互渐变动效（查阅 css 属性： <code>transition</code>、<code>animation</code>）</li></ul></li><li><p>JS 添加交互行为</p><ul><li>监听用户下滑网页的行为并改变 <code>返回顶部</code> 按钮的可见状态（<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/scroll_event" target="_blank" rel="noreferrer">scroll 滚动事件</a>，<a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents" target="_blank" rel="noreferrer">DOM 操作入门</a>）</li></ul></li></ul><h3 id="🎫todolist" tabindex="-1">🎫TodoList <a class="header-anchor" href="#🎫todolist" aria-label="Permalink to "🎫TodoList""></a></h3><p><img src="https://cdn.xyxsw.site/boxcnikdFX5WNml7sgtPMOJQiGh.png" alt=""></p><p><img src="https://cdn.xyxsw.site/boxcnFZwQVTUWkfsbNxYfJkgPDg.png" alt=""></p>',28),h=e('<p>或许你也曾是一名时间管理大师，在各种效率类 app 立下自己要做的 flag。然而现成的工具难免无法满足自己的所有需求，那么不妨来编写一个自己的 TodoList 吧~</p><h4 id="基本要求-1" tabindex="-1">基本要求 <a class="header-anchor" href="#基本要求-1" aria-label="Permalink to "基本要求""></a></h4><ul><li>可以对 todo 进行增删改查</li><li>至少存在 <strong>待完成</strong>/<strong>已完成</strong> 两种不同的状态，Todo 应该能够在不同状态间切换。更进一步，你也可以设计一个 <strong>进行中</strong> 状态。</li></ul><h4 id="额外发挥-1" tabindex="-1">额外发挥 <a class="header-anchor" href="#额外发挥-1" aria-label="Permalink to "额外发挥""></a></h4><ul><li>页面刷新后数据不丢失</li></ul><p>参考实现方案：</p><ol><li>使用浏览器提供的储存功能实现本地存储（<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage" target="_blank" rel="noreferrer">localStorage</a>、<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API" target="_blank" rel="noreferrer">IndexedDB</a>）</li><li>通过请求后端 api 实现云端存储</li></ol><ul><li>删除待办时弹出操作不可逆的提示</li><li>在交互时适当添加缓动效果</li><li>设计定时 todo，可在用户设定的时间点对用户进行提醒</li><li>实现不同设备屏幕尺寸的自适应</li><li>添加任务热力图 (可以参考一下 GitHub 个人主页哦 🤔)</li></ul><p><img src="https://cdn.xyxsw.site/boxcncVQswB7ziUoV4LvEs35DAe.png" alt=""></p><h4 id="可能涉及的知识点-1" tabindex="-1">可能涉及的知识点 <a class="header-anchor" href="#可能涉及的知识点-1" aria-label="Permalink to "可能涉及的知识点""></a></h4><ul><li><p>使用 HTML 构建页面的基础布局</p><ul><li><p>了解常用的 HTML 标签</p><ul><li>HTML 引入外部图片文件（<code><img></code>）</li></ul></li></ul></li><li><p>如何让 HTML / CSS / JS 相互配合</p><ul><li>HTML 中书写 css 使用 <code><style></code></li><li>引入 css 等资源使用 <code><link></code></li><li>书写/引入 js 使用 <code><script></code></li></ul></li><li><p>使用 css 为页面赋予样式</p><ul><li>了解常见网页布局（了解 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/float" target="_blank" rel="noreferrer">float</a>，<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" target="_blank" rel="noreferrer">flex</a>/ <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid" target="_blank" rel="noreferrer">grid</a>布局，综合运用不同布局来完成页面）</li><li>使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors" target="_blank" rel="noreferrer">css 选择器</a>选中 HTML 元素添加样式（<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors" target="_blank" rel="noreferrer">id 选择器</a> / <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors" target="_blank" rel="noreferrer">类选择器</a> / etc.）</li><li>自适应布局（查阅 <code>媒体查询</code>）</li><li>交互渐变动效（查阅 css 属性： <code>transition</code>、<code>animation</code>）</li></ul></li><li><p>JS 添加交互行为</p><ul><li>获取网页中的待办项（查阅 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents" target="_blank" rel="noreferrer">DOM 操作入门</a>）</li><li>添加新的待办项（查阅 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents" target="_blank" rel="noreferrer">DOM 操作入门</a>）</li><li>删除网页中的待办项（查阅 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents" target="_blank" rel="noreferrer">DOM 操作入门</a>）</li><li>监听待办项的点击事件，以改变待办项的状态（查阅<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element/click_event" target="_blank" rel="noreferrer">click 单击事件</a>）</li><li>将当前待办项列表存储在本地（查阅 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage" target="_blank" rel="noreferrer">localStorage(较简单)</a>、<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API" target="_blank" rel="noreferrer">IndexedDB</a> 文档）</li><li>远程请求后端接口（了解 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch" target="_blank" rel="noreferrer">fetch</a>和<a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous" target="_blank" rel="noreferrer">js 异步</a>）</li><li>定时提醒用户待办的时间（查阅 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout" target="_blank" rel="noreferrer">setTimeout</a>/ <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval" target="_blank" rel="noreferrer">setInterval</a>）</li></ul></li></ul><h4 id="小提示" tabindex="-1">小提示 <a class="header-anchor" href="#小提示" aria-label="Permalink to "小提示""></a></h4><p>可以参考 <a href="https://todomvc.com/examples/javascript-es6/dist/" target="_blank" rel="noreferrer">todomvc</a>（<a href="https://github.com/tastejs/todomvc/tree/gh-pages/examples/javascript-es6" target="_blank" rel="noreferrer">source</a><a href="https://github.com/tastejs/todomvc/tree/gh-pages/examples/javascript-es6" target="_blank" rel="noreferrer">源码</a>）中关于 js 实现 todolist 的方法，不过还是得亲手实践哦~</p>',13);function p(g,_,b,f,u,m){const r=a("center");return s(),t("div",null,[c,o(r,null,{default:i(()=>[n("一些参考")]),_:1}),h])}const k=l(d,[["render",p]]);export{C as __pageData,k as default};
|