001 | Binary2Decimal

FancyIcookie
153 阅读4分钟

Binary2Decimal

第一次自己写的一个简简单单的小项目demo，稍微总结一下。

序

很早就想搭建属于自己的一些想法，但一直没有实施起来，最开始的起点来自于云游君的小站，按照此步骤直接搭建好了，但是完全不懂为什么，emm大概因为自己连最最基础的知识都不懂吧。现在发现要搭建网站，的确是需要很多想法和实现的步骤的，因此打算从很小很小的一步开始。比如就从这个demo开始，很简单也算是造轮子的一种，但是自己搭出来的时候还是很有成就和满足感。

本文只针对自己在学习和创作路上的记录，也可供其他学习者参考哦，如有不足可指出（不接受批评，毕竟我很胆小）

在做此demo之前，你需要了解html、css、javascript、vue2以及git

电脑里需要已经安装好node.js（为了更方便使用npm管理包）、安装好Git（注册Github账号）

步骤

安装vue脚手架

npm install -g @vue/cli
# 如果安装失败，可能是国内使用 npm 非常慢，可以考虑切换为 taobao 镜像
# npm install -g @vue/cli --registry=https://registry.npm.taobao.org

按照使用脚手架的方法，创建项目，如果你已经看过vue2的使用方法，则该过程你可以跳过，主要步骤如下：

vue create 项目名称(bin2dec)
Manually select features 手动配置
	Babel
	CSS Pre-processor
2.x
Less
In dedicated config files

以上即为主要选择部分，此处只是简略的写，没有详细解释，之后会补写，详细情况可以先看一些讲解vue脚手架的视频或者文档

项目需求

该项目的内容很简单：将任一二进制数字转换为十进制数。

要求：

  • 用户可以输入二进制数字（附加：可以不限制8位）
  • 如果用户输入的不是0或者1，则提醒
  • 输入之后能够查看结果

思路方案

按照项目需求：

  1. 用户输入二进制数字：设置一个input框
  2. 输入错误则提醒：侦听输入框内容，出现不是0或者1的其他字符则显示提醒内容
  3. 输出结果：① 使用按钮查看结果；② 随着用户输入动态展示结果（此处使用的是②方案）

具体过程

页面内容

  • 设置input框，并双向绑定侦听input框的输入内容，v-model="binary_num"

  • 提醒内容 和 输出结果 需要根据内容动态显示，则设置 data：alert_info、binary_num、decimal_result。

<template>
  <div>
    <div>Please enter a binary number</div>
    <div class="alert">{{ alert_info }}</div>
    <input type="text" v-model.trim="binary_num"/>
    <div class="res">{{ decimal_result }}</div>
  </div>
</template>
功能实现

这里使用的是二进制转十进制函数，没有再直接循环算了

this.decimal_result = parseInt(this.binary_num, 2);

侦听过程中，直接侦听 binary_num 的情况：如果值为空，则不显示提醒内容也不显示输出结果；如果值不为空，则判断是否为二进制数，如果是，则提醒内容为空，输出结果；如果不是，输出提醒内容，输出为error

 watch: {
      binary_num(val) {
        val = val.split('')
        if (val.length == 0) {
          this.decimal_result = '';
          this.alert_info = '';
        } else {
          if (this.not_binary(val)==false) {
            this.alert_info = 'please enter 0 or 1';
            this.decimal_result = 'error';
          } else {
            this.alert_info = '';
            this.decimal_result = parseInt(this.binary_num, 2);
          }
        }  
      }
    }
装饰页面

加了个好看的背景，然后中间给个有些透明的框，可以查看demo，瞬间觉得真好看O(∩_∩)O

bin2dec.png

部署

最后就是我之前不明白好久的如何部署demo，让别人也可以查看呢，即部署动态网页。

参考此位小伙伴 blog.csdn.net/weixin_4297…

首先将你的代码上传到github，具体步骤为：

bin2dec-2.png

注意：如果你的目录里已经有 README.md，就不用第一步echo，另外再git add 的步骤中，不要只git add README.md 需要你全部git，即git add .

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:fancyicookie/你的仓库名字.git
git push -u origin main

然后就是关键步骤了，首先需要在vue.config.js中添加publicPath: './'，如图下所示，否则打开网站容易显示为空白页面。

image.png

然后建立gh-pages分支：

1. git checkout -b gh-pages
2. 在gh-pages分支下打包：cd bin2dec npm run build
# 这时候gh-pages分支下，项目多了一个dist文件夹
3. 强制推送dist打包文件到gh-pages目录下： git add -f dist 
4. 添加描述信息：git commit -m 'Initial the page of project'
5. 提交：git subtree push --prefix dist origin gh-pages

之后就能访问我部署的静态网页了，撒花★,°:.☆(￣▽￣)/$:.°★ 。

个人收获

熟悉vue中的侦听器使用；了解了git部署网页

完成，放上我的git：github.com/fancyicooki…

avatar
文章
阅读
粉丝