资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/WebPack+React.Js+BootStrap 实现进制转换工具

WebPack+React.Js+BootStrap 实现进制转换工具

Y3G / 816人阅读

摘要：的作用是获取用户输入的数据，当输入框的值发生改变时，对应的事件响应会被调用也就是函数，其对进行了设置，并内部有回调函数告诉父级组件有属性发生变化。于是我们就在这个函数中调用进制转换的函数并把结果呈现出来，这样就实现了数据的传递功能了。

一.WebPack入门 1.WebPack简介 
</>复制代码 
  1. WebPack是模块打包机：分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

2.如何使用WebPack

1.安装:

(1)全局安装:

</>复制代码 
  1.     
  2.     npm install -g webpack

(2)安装到项目中:

</>复制代码 
  1.     
  2.     npm install --save-dev webpack

2.配置使用:

(1)项目的目录结构:

(2)目录解析:

</>复制代码 
  1. 在项目目录中创建两个文件夹，一个是app,另一个是public.接着再创建一个文件index.html放置在public中。public用于放置页面的入口文件，app用来放置js文件。

(3)WebPack的配置文件(webpack.config.js):

</>复制代码 
  1.     module.exports = {
  2.         entry:  __dirname + "/app/main.js",//唯一入口文件
  3.         output: {
  4.             path: __dirname + "/public",//打包后文件bundle.js存放的地方
  5.             filename: "bundle.js"//打包后输出文件的文件名
  6.         }
  7.     }

3.生成Source Maps（使调试更容易）

(1)Source Maps是Webpack在打包时可以为我们生成的source maps，为我们提供了一种对应编译 文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。在webpack的配置文件中配置 source maps，需要配置devtool

(2)devetool配置选项优缺点

</>复制代码 
  1. *上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的构建速度的后果        就是对打包后的文件的的执行有一定影响。*

(3)WebPack的配置文件(webpack.config.js):

</>复制代码 
  1.     module.exports = {
  2.         devetool:"eval-source-map",//配置Source Maps选项,选择合适的选项
  3.         entry:  __dirname + "/app/main.js",//唯一入口文件
  4.         output: {
  5.             path: __dirname + "/public",//打包后文件bundle.js存放的地方
  6.             filename: "bundle.js"//打包后输出文件的文件名
  7.         }
  8.     }
3.使用webpack-server实时监测代码并刷新

1.安装:

</>复制代码 
  1.     
  2.     npm install --save-dev webpack-dev-server

2.WebPack的配置文件(webpack.config.js)

</>复制代码 
  1.     module.exports = {
  2.         devetool:"eval-source-map",//配置Source Maps选项,选择合适的选项
  3.         entry:  __dirname + "/app/main.js",//唯一入口文件
  4.         output: {
  5.             path: __dirname + "/public",//打包后文件bundle.js存放的地方
  6.             filename: "bundle.js"//打包后输出文件的文件名
  7.         }
  8.         devServer: {
  9.             port: 8080,//设置服务器监听的端口，默认是8080
  10.         contentBase: "./public",//本地服务器所加载的页面所在的目录
  11.         colors: true,//终端中输出结果是否为彩色
  12.         historyApiFallback: true,//是否使用不跳转，一般是在开发单页面应用比较有优势
  13.         inline: true//是否开启实时刷新
  14.       }
  15.     }
4.使用Loaders处理加载文件

1.安装:

</>复制代码 
  1.     npm install --save-dev json-loader

2.配置文件(webpack.config.js):

</>复制代码 
  1.     module.exports = {
  2.         devtool: "eval-source-map",
  3.         entry:  __dirname + "/app/main.js",
  4.             path: __dirname + "/public",
  5.         filename: "bundle.js"
  6.         },
  7.         module: {//在配置文件里添加JSON loader
  8.         loaders: [
  9.                 {
  10.             test: /.json$/,//匹配.json类型的文件
  11.             loader: "json"
  12.                 }
  13.         ]
  14.         },
  15.       
  16.         devServer: {
  17.         contentBase: "./public",
  18.         colors: true,
  19.         historyApiFallback: true,
  20.         inline: true
  21.         }
  22.     }
  23. *这样一来，就可以通过在js文件代码中引入json格式的文件。*
  24.     import config from "./config.json"
  25.     console.log(config.text);
5.使用Babel转换JavaScript语言标准

1.安装:

</>复制代码 
  1.     //一次性安装多个模块
  2.     npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
  3.     npm install --save react react-dom

2.简介Babel:

</>复制代码 
  1. *个人用途是用来解析Es6的语法格式还有JSX的语法，转换后使得浏览器能够使用*

3.配置文件(webpack.config.js):

</>复制代码 
  1. test: 一个匹配loaders所处理的文件的拓展名的正则表达式(required)
  2. loader: loader的名称(required)
  3. include/exclude: 手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(optional)
  4. query: 为loaders提供额外的设置选项(optional)
</>复制代码 
  1.     module.exports = {
  2.         devtool: "eval-source-map",
  3.         entry:  __dirname + "/app/main.js",
  4.             path: __dirname + "/public",
  5.         filename: "bundle.js"
  6.         },
  7.         module: {//在配置文件里添加JSON loader
  8.         loaders: [
  9.                 {
  10.             test: /.json$/,//匹配.json类型的文件
  11.             loader: "json"
  12.                 },
  13.                 {
  14.             test: /.js$/,//匹配.js文件
  15.             exclude: /node_modules/,//排除哪个文件不加载
  16.             loader: "babel",//在webpack的module部分的loaders里进行配置即可
  17.             query: {
  18.               presets: ["es2015","react"]
  19.             }
  20.                 }
  21.         ]
  22.         },
  23.       
  24.         devServer: {
  25.         contentBase: "./public",
  26.         colors: true,
  27.         historyApiFallback: true,
  28.         inline: true
  29.         }
  30.     }
二.React.Js实现进制转换工具 1.HTML主界面实现

搭建好React的工具平台之后我们就可以实现工具的制作了^_^

</>复制代码 
  1. HTML节目十分简单，里面就只有一个div容器，还有一个使用bootstrap用来装饰的导航栏，如此而已。让我们看一下代码吧！

index.html:

</>复制代码 
  2.     
  3.     
  4.         
  5.         
  6.         
  7.         在线进制转换工具
  8.     
  9.     
  10.         
  11.             
  12.                 
    进制转换工具
  13.             
  14.         
  15.         
  16.         
  17.
2.React组件实现

1.定义两个React子组件(InputNumber.js,OutputNumber.js)，用来后面的视图调用

先给出代码吧！

(1) InputNumber.js:

</>复制代码 
  1. import React, { Component } from "react"
  2. import {
  3.   Grid,
  4.   Row,
  5.   Col,
  6.   FormControl,
  7.   ControlLabel,
  8.   FormGroup,
  9.   Radio,
  10.   InputGroup,
  11. } from "react-bootstrap"
  12. class InputNumber extends React.Component {
  13.   constructor(props) {
  14.     super(props);
  15.     var checkedList = [false, false, false];
  16.     checkedList[this.props.checked] = true;
  17.     this.state = {
  18.       checkedList: checkedList,
  19.       number: this.props.number
  20.     }
  21.   }
  22.   selectHandleChange(event) {
  23.     var checkedList = [false, false, false];
  24.     checkedList[event.target.value] = true;
  25.     this.setState({
  26.       checkedList: checkedList
  27.     });
  28.     this.props.callbackCheckedChange(event.target.value);
  29.   }
  30.   textHandleChange(event) {
  31.     this.setState({
  32.       number: event.target.value
  33.     });
  34.     this.props.callbackNumberChange(event.target.value);
  35.   }
  36.   render() {
  37.     return (
  38.       
  39.         
  40.           二进制
  41.           十进制
  42.           十六进制
  43.         
  44.         
  45.           
  46.             请输入：
  47.             
  48.           
  49.         
  50.       
  51.     );
  52.   }
  53. }
  54. export default InputNumber;

在上面的代码中需要关注的地方有:

</>复制代码 
  1. 该组件是用于用户输入数值后传递数值的类型和大小到父级组件中，所以其内部需要有两个属性，checkedList和number。checkedList用来标识当前哪个radio选项框被选中，并当点击事件发生时，把value的值进行动态设置，主要是用到了React的组件状态机，通过setState函数对checkedList进行修改。number的作用是获取用户输入的数据，当输入框的值发生改变时，对应的事件响应会被调用也就是textHandleChange函数，其对number进行了设置，并内部有回调函数:this.props.callbackCheckedChange(event.target.value)告诉父级组件有属性发生变化。这样就使得当前组件的状态改变时，父级的组件也会对应调用方法进行事件处理。

(2) OutputNumber.js:

</>复制代码 
  1. import React, { Component } from "react"
  2. import {
  3.   Grid,
  4.   Row,
  5.   Col,
  6.   FormControl,
  7.   ControlLabel,
  8.   FormGroup,
  9.   InputGroup,
  10. } from "react-bootstrap"
  11. class OutputNumber extends React.Component {
  12.   constructor(props) {
  13.     super(props);
  14.     this.state = {
  15.       binaryRes: "",
  16.       decimal: "",
  17.       hexadecimal: "",
  18.       mapBase:[2,10,16]
  19.     }
  20.   }
  21.   changeToDec(numbers, base) {
  22.     var sum = 0;
  23.     var length = numbers.length
  24.     for (let i = 0; i < length; i++) {
  25.       let number = parseInt(numbers[i]);
  26.       sum += Math.pow(base, length - i - 1) * number;
  27.     }
  28.     return sum.toString();
  29.   }
  30.   //十进制转换其他进制
  31.   decChange(numbers, base) {
  32.     var num = parseInt(numbers);
  33.     var str = "";
  34.     var k = parseInt(num);
  35.     var m = num % base;
  36.     while (k >= base) {
  37.       if(m > 9)
  38.         str = String.fromCharCode(0x40 + (m - 9)) + str;
  39.       else
  40.         str = m.toString() + str;
  41.       k = parseInt(k / base);
  42.       m = k % base;
  43.     }
  44.     if(m > 9)
  45.       str = String.fromCharCode(0x40 + (m - 9)) + str;
  46.     else
  47.       str = m.toString() + str;
  48.     return str;
  49.   }
  50.   componentWillReceiveProps(nextProps) {
  51.     var base = this.state.mapBase[nextProps.checked];
  52.     var numberDec = this.changeToDec(nextProps.number,base);
  53.     this.setState({
  54.       binaryRes:this.decChange(numberDec,2),
  55.       decimal:this.decChange(numberDec,10),
  56.       hexadecimal:this.decChange(numberDec,16)
  57.     });
  58.   }
  59.   render() {
  60.     return (
  61.       
  62.         
  63.           
  64.             二进制：
  65.             
  66.           
  67.           
  68.             十进制：
  69.             
  70.           
  71.           
  72.             十六制：
  73.             
  74.           
  75.         
  76.       
  77.     )
  78.   }
  79. }
  80. export default OutputNumber;
</>复制代码 
  1. 这个组件是用来对用户输入的类型数据进行进制转换并呈现结果，所以需要binaryRes,decimal,hexadecimal这三个属性来呈现不同类型进制的结果，通过changeToDec和decChange这两个函数对数值进行转换得到结果。可是，我们要在什么时候调用这两个函数进行进制转换呢?这时就需要使用componentWillReceiveProps(nextProps)函数，当父级组件传递进来的元素发生改变时，这个方法会被调用。于是我们就在这个函数中调用进制转换的函数并把结果呈现出来，这样就实现了数据的传递功能了。

2.定义一个React父级组件用来封装两个子组件(MainView.js)，用来给入口文件调用

代码实现

</>复制代码 
  1. MainView.js:
  2. import React from "react";
  3. import InputNumber from "./InputNumber"
  4. import OutputNumber from "./OutputNumber"
  5. class MainView extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  8.     this.state = {
  9.       checked: 0,
  10.       number: ""
  11.     }
  12.   }
  13.   onCheckedChange(newChecked) {
  14.     this.setState({
  15.       checked: newChecked,
  16.     });
  17.   }
  18.   onNumberChange(newNumber) {
  19.     this.setState({
  20.       number: newNumber
  21.     });
  22.   }
  23.   render() {
  24.     return (
  25.       
  26.         
  27.         
  28.       
  29.     );
  30.   }
  31. }
  32. export default MainView;
</>复制代码 
  1. 这个组件是父级组件，封装了前面的两个组件，并把其内部的属性统一传递给两个子组件，使得数据进行了单向的绑定。

3.定义一个入口文件main.js用来向页面渲染React组件

代码实现

main.js:

</>复制代码 
  1. import React from "react";
  2. import {render} from "react-dom";
  3. import MainView from "./MainView"
  4. var checked = 0;
  5. render(,document.getElementById("root"));    
</>复制代码 
  1. 这代码不同多说，就是渲染主视图到虚拟DOM的树结构中。
三.总结 
</>复制代码 
  1. 一开始看来React的基本用法但是没有经过实际的操作会以为React很简单，但是当你动手打出代码的时候，你会发现很多的问题。这时候就需要我们一步一步地去查资料探索，找到解决的方案并实现。所以我写这篇文章的目的是为了让更多React初学者能够参考并把React学得透彻，我对React也是刚开始入门，还不是很熟练，希望做出更多的东西，写出更多的总结不断提升自己的编程能力，哈哈哈，感谢阅读此文。
  2. 最后附上程序github的仓库链接程序github的仓库链接
云服务器 GPU云服务器 进制转换 十进制转换16进制 二进制转换十进制 python转换进制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80688.html

相关文章

  • 4月份前端资源分享

    摘要：更多资源请文章转自月份前端资源分享关于的思考一款有趣的动画效果跨站资源共享之二最流行的编程语言能做什么到底什么是闭包的第三个参数跨域资源共享详解阮一峰前端要给力之语句在中的值周爱民中国第二届视频花絮编码规范前端工程师手册奇舞周刊被忽视的 更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfron...

    jsdt 评论0 收藏0

  • 前端学习路线

    摘要：具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上： 学习HTML基础，了解如何编写语义HTML 理解如何把网页分...

    FullStackDeveloper 评论0 收藏0

  • 前端学习路线

    摘要：具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上： 学习HTML基础，了解如何编写语义HTML 理解如何把网页分...

    20171112 评论0 收藏0

  • 前端资源收集整理

    摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总 学习指导 精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！ 听说2017你想写前端？：适合于已经度过了小白阶...

    awesome23 评论0 收藏0

发表评论

登陆后可评论

0条评论

Y3G

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<