第二篇 千里之行始于跬步【前段学习指引】【TODOapp】【web实战应用】

已于 2022-11-01 09:22:44 修改
阅读量351 收藏
点赞数
分类专栏： 前端小白学习路 文章标签： 前端 学习 javascript
于 2022-10-20 18:25:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44948011/article/details/127292696
版权

chapter2 千里之行始于跬步

没有什么事情是一蹴而就的，学习是需要一个学习曲线的，因此 掌握我们的学习规律、制定合适的学习计划 是非常必要的，那么这一篇文章就是 开发一个TodoApp 来帮助我们记录分析我们的学习曲线。

✅TODO

一个好的 TODO LIST 可以让我们更好的掌握自己的每日进度⌚️,记录我们的完成度📝,跟踪和统计我们的进度🛰️。

1.📚专业技术准备

首先我们需要了解一下,作为一个前端开发我们真的需要需要掌握哪些东西,那肯定是 HTML, CSS, JavaScript。当然没有这些基础也可以跟着这篇文章制做TodoApp。

你可以通过下面这个网站检验一下的能力水平，或者作为了解学习一下相关知识。

🎯如果您真的毫无任何经验，那么仅需了解一下上方的基础教程即可，你可以将这篇文章当作对您是否真的对前端感兴趣的考验。

2.💡构思我们的TodoWeb应用

在做一个自己的应用之前，我们应该思考好我们具体要做一个什么东西，它有什么功能，他应该有怎么样子的图形页面。

2.1 MVC设计模式

图1MVC.png
我们可以采用一种简单的设计模式 MVC模式。如 图1 所示，其中

  1. Model（模型） - 模型代表一个存取数据的对象。它也可以带有逻辑，在数据变化时更新控制器。
  2. View（视图） - 视图代表模型包含的数据的可视化。
  3. Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。

通过这种设计模式我们可以按步就班的开始我们的程序构思。

  1. 我们可以使用 JavaScript 脚本 和 Nodejs 构建我们的控制器。
  2. 使用 DOM 、 HTML 和 CSS 构建视图。
  3. 运用 Javascript Object构建模型。
2.2 简单梳理应用内容

TodoApp 是一个很简单的web程序，我们先简单考虑一下它有哪些功能，并且像我一样先将这些功能和设计简单列出来。(任何想法都可以，就是先记下来)

  • 添加 新事项📝
  • 编辑/删除/完成 事项⚙️
  • 设定周期任务⏰
  • 存储事项进度🗃
  • 追踪任务进度📅

简要罗列了一下，我们可以进行一下啊简要的分析，可见这个应用主要围绕 事项 这一实例(对象)进行操作，对 事项 进行诸如 增/删/改 的操作。

根据 2.1 MVC 模式，我们可以将 事项 作为一个 Model模型 ， 而 围绕他的功能实现 作为 Controller ，然后我们需要将 这些数据渲染成UI 也就是 View视图。这就是一个简单的 MVC模式的 近似应用。

2.3 从设计稿开始

构建项目最简单最清晰就是从设计稿开始了,简单的就是从 UI设计 开始,让我们一起打开 MasterGo (如果你有一定HTML、CSS基础那可以跳过这一部分)

1.我们使用MasterGo简单的绘制一个 UI界面

方便我们对 尺寸 和 布局 的掌控，从而快速地编写 静态页面 。
图2 设计图
我已经做好并分享了了，点击直接查看→项目地址

2.分割各个内容模型

我们主要分为两个部分，输入框（图内序1）和 事务列表（图内序3）这两部分。

  • 输入框：input标签 用于输入事项。
  • 事务项：根据 事务项数组 渲染 事务项视图 。
    图3 设计图分割
3.使用 HTML 标签编写页面。

首先 在我们的 VScode 里面创建一个 index.js 文件。
在里面输入下方代码（🍧如果不是很了解html可以好好看看注释）

<!DOCTYPE html>
<html>

<head>
    <!-- 下面的内容是 页面的编码格式 -->
    <meta charset="UTF-8">
    <!-- 下面的目前用不到 以后再去学习 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 下面的内容是视图的设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 下面的 title 的内容是你网页标签上的标题 -->
    <title>Todo</title>

    <!-- 样式表 -->
    <style>
         /* 如果实在看不懂所有内容 请浏览该网址 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps */
        body {
     
            background-color: #808080;
        }

        /* css 自定义属性 */
        /* 这里我们用来设置 主题 */
        :root {
     
            --main-bg-color: #FFFFFF;
            --theme-primary: #5AEBEB;
            --theme-secondary: #FFFFFF;
            --theme-list-primary: #928A8A;
            --theme-list-success: #55a068;
            --theme-danger: #9b3333;
            --theme-list-button: #D8D8D8;

        }

        .container {
     
            /* 下面第一条可以设置居中显示 */
            margin: auto;
            width: 400px;
            height: 600px;
            border-radius: 30px;
            background-color: var(--main-bg-color);
        }

        /* 顶部的样式 */
        .topbanner {
     
            position: relative;
            border-radius: 30px 30px 0px 0px;
            background-color: var(--theme-primary);
            height: 120px;
        }

        .topbanner_inputbox {
     
            position: absolute;
            left: 33px;
            top: 38px;
            width: 340px;
            height: 40px;
            border-radius: 20px;
            background: var(--theme-secondary);
        }


        .topbanner_inputbox .listInput {
     
            float: left;
            margin-left: 20px;
            box-sizing: border-box;
            border: none;
            height: 100%;
        }

        .topbanner_inputbox .round_button {
     
            border: none;
            background-color: var(--theme-list-primary);
            float: right;
            box-sizing: border-box;
            border-radius: 100%;
            width: 40px;
            height: 40px;
        }

        .topbanner_inputbox .round_button:hover {
     
            background-color: var(--theme-list-success);
        }

        /* 列表内容的样式 */
        .listitem {
     
            border-radius: 0px 0px 30px 30px;
            background-color: inherit;
            height: 100%;
        }

        .itemcon {
     
            box-sizing: border-box;
            width: 400px;
            height: 480px;
            border-radius: 0px 0px 30px 30px;
            background-color: var(--theme-secondary);
            overflow-y: scroll;
        }

        .itemcon::-webkit-scrollbar {
     
            display: none;
        }

        .itemlists {
     
            margin: 0 auto;
            width: 340px;
            height: 480px;
        }

        .itemlists .item {
     
            position: relative;
            margin-top: 20px;
            width: 340px;
            height: 48px;
            border-radius: 4px;
            background: var(--theme-list-primary);
            line-height: 48px;
            box-shadow: 0 0 12px 2px rgb(167, 167, 167);
        }

        .itemlists .item.finish {
     
            background-color: var
最低0.47元/天 解锁文章
猫西柿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
跬步与职业生涯
12-17
这一款整理发布的跬步与职业生涯，适用于日常学习、参考、借鉴跬步与职业生涯使用，欢迎大家下...该文档为跬步与职业生涯，是一份很不错的参考资料，具有较高参考价值，感兴趣的可以下载看看
分步学习：不积跬步，无以至千里；不积小流，无以成江河
02-20
逐步学习学习过程中看过的比较好的文章，书籍等资源，更全面的书籍索引推荐。JavaJ2EEHttp和WebSocket前端开发＆和项目建成码头工人MySQLLinux设计测试TDD软件开发数据结构与算法工具其他的事情＆
Kotlin+MVVM 构建todo App 应用
1
09-07 524
使用Kotlin+MVVM实现的todo app，功能界面参考微软的Todo软件（只实现了核心功能，部分功能未实现）。项目模块：添加/删除项目，项目负责管理todo任务任务模块：添加/删除任务，标记任务完成情况，标记任务为重要，标记为我的一天，设置提醒时间（发送前台通知），设置过期时间。搜索模块：依据任务名称模糊搜索。这是本人在学完Android后搞得第一个练手项目，其中很多编码方式不一定规范，有些功能也未实现（如帐号管理，任务云同步，项目可移动，任务可重新分组，任务可细分步骤等功能）。
TO-DO app项目总结（一）
Klein_Kartoffel的博客
05-31 1630
总结一下我做的第一个项目，也当做第一篇博客： 以“专注明天”和“定制推荐”为主推功能的一款极简to-do-list类手机应用软件 担当角色：服务端开发人员 参与程度：全程 项目简介：一个完整的互联网项目体验，运用互联网思维，从产品构思，界面设计，市场调研及需求分析，推广宣传等多角度融合思考。 项目周期：5周（第一版上线） 项目总结逻辑： TO-DO  app项目总结（一） 以“开发
探索未来移动应用的创新力作：IONICFIREBASEAPP - Flutter TO DO 移动应用
最新发布
gitblog_00050的博客
06-16 302
探索未来移动应用的创新力作：IONICFIREBASEAPP - Flutter TO DO 移动应用 项目地址:https://gitcode.com/ionicfirebaseapp/flutter-app IONICFIREBASEAPP 是一个专注于为企业级技术开发移动应用和后台的市场，同时也提供定制化应用设计服务。他们的最新开源项目是基于流行的Flutter框架的TO DO移动应用，让...
［ Swift之 编写ToDo App］
Vicky的移动开发专栏
02-07 431
http://blog.csdn.net/chaoyuan899/article/details/39586803?utm_source=tuicool 以下所有代码都是使用Xcode Version 6.0.1 (6A317)编写的。 由于团队开发的时候使用stroyboard在合并的时候有诸多不便，所有还是使用.xib文件编写这个ToDo App. 想要实现的功能
todos app简单编写（web）
zhwoiu的博客
06-25 439
武灵枫 173080175
探索未来待办事项管理的新境界：Flutter驱动的To-do List App
gitblog_00005的博客
06-12 251
探索未来待办事项管理的新境界：Flutter驱动的To-do List App ???? 项目地址:https://gitcode.com/robbyrahmana/todoApp 在快节奏的数字时代，高效的时间管理和任务跟踪成为了个人与团队成功的关键。今天，我们带来了一款优雅而功能强大的工具——基于Flutter框架构建的《To-do List App》，它为你的日常规划带来革新性的体验。让我们一起深...
积跬步方能至千里，2020看安科生物厚积薄发.pdf
03-11
积跬步方能至千里，2020看安科生物厚积薄发.pdf
2015年高中语文优秀作文积跬步方能驰骋千里素材
08-06
标题中的“积跬步方能驰骋千里”源自古代荀子的《劝学》篇，这句话强调了积累的重要性。在高中语文作文中引用这句古语，旨在引导学生理解成就并非一蹴而就，而是需要耐心和毅力，通过不断的积累才能实现远大的目标。...
20210613-开源证券-投资策略专题：产业链研究的跬步（一），景气验证.pdf
06-13
20210613-开源证券-投资策略专题：产业链研究的跬步（一），景气验证.pdf
web-to-app:用于创建您网站的android apk文件的android源代码。 只需将MainActivity.java中的url更改为您的网站主机名，就可以了。 您可以进行自定义，例如将应用程序图标添加到徽标以及其他丰富功能-Android app source code
03-24
网络到应用 您网站的apk文件的android源代码。 为您的网站创建android移动应用的简便快捷方式。 只需将MainActivity.java中的url更改为您的网站主机名，就可以了。 您可以进行自定义，例如使用徽标和其他丰富功能更改应用程序图标。 web-to-app.apk是源代码中的内置示例。 该应用程序在启动时会加载 。 您可以在Android手机上安装并运行web-to-app.apk（网站的anroid应用程序），以查看网站的外观以及使用此源代码的行为。
todo-web
03-21
Gettdone-Web Todo应用程序| 相关网址 演出： ： 生产： ： E2E： ： 后端： ： 工具 GitHub，React，Redux，AWS，NETLIFY，CircleCI，CodeCov .. 流动检视 可用脚本 在项目目录中，可以运行： 在本地 git clone要克隆此仓库 npm install应用程序依赖项 yarn start -启动应用程序 单元和综合测试 npm test运行单元和集成测试 npm test -- --coverage使用覆盖率报告运行测试 End2End测试 找到如何从运行端到端测试说明仓库 功能性 添加待办事项 ####按Todo类别过滤 ####列出可用的待办事项 ####按类别过滤 删除待办事项 缺少gif CI / CI
Web转化为APP——YonBIP(APICloud迁移版)
qq_52504945的博客
06-11 2688
Web打包成APP的在线服务平台——用友
移动平台3G手机网站前端开发布局技巧汇总
chucui3393的博客
11-28 280
您或许正在或准备参与一个WepApp项目，您或许正在Google搜索mobile development相关的文章，您或许是一名专业的WEB前端工程师，您或许想学习Mobile前端开发方面的技术，如果您被我说中了，呵呵那么这篇文章将为您带来意想不到的惊喜！当您看到这篇文章时，已经默认认为您是...
如何两步完成网页到Android App转换
JiandaoStudio
03-18 2072
我们可以利用Ant和Cordova将网页转换成Android App 一.安装步骤 Cordova除了要安装node.js，还要安装 1.Java 的JDK 2.android的sdk 3.Apache ant jdk和sdk我这就不说如何安装，我们来说如何安装ant 1.1.安装Ant 下载地址： http://ant.apache.org/bindown1oad.cgi。进入网页...
Web3 DApp 最佳编程实践指南
leaning_java的博客
06-23 1938
Web3 Dapp最佳编程实践指南
让你的站点（Web）一键变成APP（应用程序）（上）
葡萄城技术团队博客
01-19 3158
Web应用方兴未艾，我们已经十分习惯习惯了在电脑上进行以自己的工作，而随着众多功能强大的在线网站，我们的Windows的桌面也不再拥挤着各种快捷方式；不光是PC端，在移动端我们也不再在浩如烟海的应用市场安装各种软件，轻量级的各种小程序取代了他们的位置，无需安装点开即用的方式为大家的工作生活带来了很大便利。 我们很明白这种改变对我们生活工作带来的便利，但是偶尔在网上冲浪我们也会怀念那个满桌面都是本地应用的时代，桌面双击即可运行，不用在开启的网页中搜寻我们需要的功能网页，哪怕断网了依旧可以正常使用，使用速度上
TODO页面（Java语言核心技术学习）
DL_dldlhhj的博客
04-28 424
TODO项目（初学JavaSE练手项目，纯java后端写前端页面）
python积跬步以致千里
04-16
下面是Python积跬步以致千里的几个方面： 1. 简洁易读的语法：Python采用简洁的语法，使得代码易于阅读和理解。它使用缩进来表示代码块，而不是使用大括号，这使得代码结构更加清晰。 2. 大量的第三方库：Python...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值