React>> react_goodlive_program>> 返回
项目作者： mystic3333

项目描述 ：
用react写的一个webapp demo, 只写了一部分
高级语言： JavaScript
项目地址: git://github.com/mystic3333/react_goodlive_program.git
创建时间： 2020-07-07T12:58:24Z
项目社区：https://github.com/mystic3333/react_goodlive_program
开源协议：
下载


参考资料汇总

  1. - 字体图标库: https://icomoon.io/
  2. - iconfont: https://www.iconfont.cn/
  3. - 蓝湖psd稿设计软件: https://lanhuapp.com/

项目初始化

  1. npx create-react-app goodlive

拉取配置文件

  1. npm run eject

配置less

  1. npm install less less-loader --save
  1. const lessRegex = /\.less$/;
  3. module: {
  4.     {
  5.         test: lessRegex,
  6.         exclude: lessModuleRegex,
  7.         use: getStyleLoaders(
  8.         {
  9.             importLoaders: 3,
  10.             sourceMap: isEnvProduction && shouldUseSourceMap,
  11.         },
  12.         'less-loader'
  13.         ),
  14.         // Don't consider CSS imports dead code even if the
  15.         // containing package claims to have no side effects.
  16.         // Remove this when webpack adds a warning or an error for this.
  17.         // See https://github.com/webpack/webpack/issues/6571
  18.         sideEffects: true,
  19.     }
  20. }

初始化css

reset.less文件

  1. @charset "gb2312";
  2. /* CSS Document */
  3. html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
  4. body{padding:0; margin:0; background:black;}
  5. html,body,fieldset,img,iframe,abbr{border:0;}
  6. li{list-style:none;}
  7. textarea{overflow:auto;resize:none;}
  8. a,button{cursor:pointer;}
  9. h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
  10. a,a:hover{text-decoration:none;}
  11. body,textarea,input,button{
  12.     color:#62a1c9;
  13. }
  15. html,body{
  16.     width:100%;
  17.     min-height: 930px;
  18.     height: auto;
  19. }
  21. .hide{
  22.     display: none;
  23. }
  25. .text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
  26.     text-shadow: @string;
  27. }
  28. .box-shadow (@string) {
  29.     -webkit-box-shadow: @string;
  30.     -moz-box-shadow:    @string;
  31.     box-shadow:         @string;
  32. }
  33. .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  34.     -webkit-box-shadow:    @x @y @blur @spread rgba(0, 0, 0, @alpha);
  35.     -moz-box-shadow:    @x @y @blur @spread rgba(0, 0, 0, @alpha);
  36.     box-shadow:        @x @y @blur @spread rgba(0, 0, 0, @alpha);
  37. }
  38. .inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  39.     -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  40.     -moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  41.     box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  42. }
  44. .box-sizing (@type: border-box) {
  45.     -webkit-box-sizing: @type;
  46.     -moz-box-sizing:    @type;
  47.     box-sizing:         @type;
  48. }
  50. .border-radius (@radius: 5px) {
  51.     -webkit-border-radius: @radius;
  52.     -moz-border-radius:    @radius;
  53.     border-radius:         @radius;
  55.     -moz-background-clip:    padding;
  56.     -webkit-background-clip: padding-box;
  57.     background-clip:         padding-box;
  58. }
  59. .border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
  60.     -webkit-border-top-right-radius:    @topright;
  61.     -webkit-border-bottom-right-radius: @bottomright;
  62.     -webkit-border-bottom-left-radius:  @bottomleft;
  63.     -webkit-border-top-left-radius:     @topleft;
  65.     -moz-border-radius-topright:        @topright;
  66.     -moz-border-radius-bottomright:     @bottomright;
  67.     -moz-border-radius-bottomleft:      @bottomleft;
  68.     -moz-border-radius-topleft:         @topleft;
  70.     border-top-right-radius:            @topright;
  71.     border-bottom-right-radius:         @bottomright;
  72.     border-bottom-left-radius:          @bottomleft;
  73.     border-top-left-radius:             @topleft;
  75.     -moz-background-clip:    padding; 
  76.     -webkit-background-clip: padding-box; 
  77.     background-clip:         padding-box; 
  78. }
  80. .opacity (@opacity: 0.5) {
  81.     @tempOpacity: @opacity * 100;
  82.     -webkit-opacity:     @opacity;
  83.     -moz-opacity:         @opacity;
  84.     opacity:         @opacity;
  85.     filter:alpha(opacity=@tempOpacity);
  86. }
  88. .gradient (@startColor: #eee, @endColor: white) {
  89.     background-color: @startColor;
  90.     background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  91.     background: -webkit-linear-gradient(top, @startColor, @endColor);
  92.     background: -moz-linear-gradient(top, @startColor, @endColor);
  93.     background: -ms-linear-gradient(top, @startColor, @endColor);
  94.     background: -o-linear-gradient(top, @startColor, @endColor);
  95. }
  96. .horizontal-gradient (@startColor: #eee, @endColor: white) {
  97.      background-color: @startColor;
  98.     background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  99.     background-image: -webkit-linear-gradient(left, @startColor, @endColor);
  100.     background-image: -moz-linear-gradient(left, @startColor, @endColor);
  101.     background-image: -ms-linear-gradient(left, @startColor, @endColor);
  102.     background-image: -o-linear-gradient(left, @startColor, @endColor);
  103.     background-image: linear-gradient(left, @startColor, @endColor);
  104. }
  106. .animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
  107.     -webkit-animation: @name @duration @delay @ease;
  108.     -moz-animation:    @name @duration @delay @ease;
  109.     -ms-animation:     @name @duration @delay @ease;
  110.     animation:           @name @duration @delay @ease;
  111. }
  113. .transition (@transition) {
  114.     -webkit-transition: @transition;  
  115.     -moz-transition:    @transition;
  116.     -ms-transition:     @transition; 
  117.     -o-transition:      @transition;
  118.     transition:        @transition;
  119. }
  120. .transform(@string){
  121.     -webkit-transform: @string;
  122.     -moz-transform:      @string;
  123.     -ms-transform:          @string;
  124.     -o-transform:          @string;
  125.     transform:               @string;
  126. }
  127. .scale (@factor) {
  128.     -webkit-transform: scale(@factor);
  129.     -moz-transform:      scale(@factor);
  130.     -ms-transform:          scale(@factor);
  131.     -o-transform:          scale(@factor);
  132.     transform:               scale(@factor);
  133. }
  134. .rotate (@deg) {
  135.     -webkit-transform: rotate(@deg);
  136.     -moz-transform:      rotate(@deg);
  137.     -ms-transform:          rotate(@deg);
  138.     -o-transform:          rotate(@deg);
  139.     transform:               rotate(@deg);
  140. }
  141. .skew (@deg, @deg2) {
  142.     -webkit-transform:       skew(@deg, @deg2);
  143.     -moz-transform:      skew(@deg, @deg2);
  144.     -ms-transform:          skew(@deg, @deg2);
  145.     -o-transform:          skew(@deg, @deg2);
  146.     transform:               skew(@deg, @deg2);
  147. }
  148. .translate (@x, @y:0) {
  149.     -webkit-transform:       translate(@x, @y);
  150.     -moz-transform:      translate(@x, @y);
  151.     -ms-transform:          translate(@x, @y);
  152.     -o-transform:          translate(@x, @y);
  153.     transform:               translate(@x, @y);
  154. }
  155. .translate3d (@x, @y: 0, @z: 0) {
  156.     -webkit-transform:       translate3d(@x, @y, @z);
  157.     -moz-transform:      translate3d(@x, @y, @z);
  158.     -ms-transform:          translate3d(@x, @y, @z);
  159.     -o-transform:          translate3d(@x, @y, @z);
  160.     transform:               translate3d(@x, @y, @z);
  161. }
  162. .perspective (@value: 1000) {
  163.     -webkit-perspective:     @value;
  164.     -moz-perspective:     @value;
  165.     -ms-perspective:     @value;
  166.     perspective:         @value;
  167. }
  168. .transform-origin (@x:center, @y:center) {
  169.     -webkit-transform-origin: @x @y;
  170.     -moz-transform-origin:    @x @y;
  171.     -ms-transform-origin:     @x @y;
  172.     -o-transform-origin:      @x @y;
  173.     transform-origin:            @x @y;
  174. }
  176. .keyframes(@name, @frames) {
  177.     @-webkit-keyframes @name { @frames(); }
  178.     @-moz-keyframes @name { @frames(); }
  179.     @-ms-keyframes @name { @frames(); }
  180.     @-o-keyframes @name { @frames(); }
  181.     @keyframes @name { @frames(); }
  182. }
  184. .animation(@arg){
  185.     -moz-animation:@arg;
  186.     -webkit-animation:@arg;
  187.     -o-animation:@arg;
  188.     -ms-animation:@arg;
  189.     animation:@arg;
  190. }

reset.css文件

  1. /*reset.css用来存储清除浏览器的样式 ,后面添加了一部分通用样式*/
  3. a { background-color: transparent; text-decoration: none;-webkit-tap-highlight-color:rgba(0,0,0,0) }
  4. a:hover { outline: none; text-decoration: none; }
  5. a,a:hover,a:active,a:visited,a:link,a:focus{
  6. -webkit-tap-highlight-color:rgba(0,0,0,0);
  7. -webkit-tap-highlight-color: transparent;
  8. outline:none;
  9. text-decoration: none;
  10. -webkit-tap-highlight-color:rgba(0,0,0,0);
  11. -webkit-user-modify: read-only;
  12. cursor: pointer;
  13. }
  15. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
  16. table { border-collapse: collapse; border-spacing: 0; }
  17. fieldset, img { border: 0; }
  18. address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit; }
  19. del, ins { text-decoration: none; }
  20. li { list-style: none; }
  21. caption, th { text-align: left; }
  22. h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
  23. q:before, q:after { content: ''; }
  24. abbr, acronym { border: 0; font-variant: normal; }
  25. sup { vertical-align: baseline; }
  26. sub { vertical-align: baseline; }
  27. /*because legend doesn't inherit in IE */
  28. legend { color: #000; }
  29. input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }
  30. button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
  31. /*@purpose To enable resizing for IE */
  32. /*@branch For IE6-Win, IE7-Win */
  33. input, button, textarea, select {
  34. *font-size: 100%; outline:none; }
  36. /*select*/
  37. select{
  38. /*复写Chrome和Firefox里面的边框*/
  39. border:1px solid green;
  40. /*清除默认样式*/
  41. appearance:none;
  42. -moz-appearance:none;
  43. -webkit-appearance:none;
  44. /*在选择框的最右侧中间显示小箭头图片*/
  45. /*background: url(../img/icon/icon_select.png) no-repeat scroll right center transparent;*/
  46. /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  47. padding-right: 14px;
  48. }
  49. /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
  50. select::-ms-expand { display: none; }
  52. /* 个人在后面添加了一些常用的公共样式 */
  53. /*居中效果*/
  54. .margin_center { margin: 0px auto; }
  55. /*浮动*/
  56. .float_left { float: left; }
  57. .float_right { float: right; }
  58. /*文字位置*/
  59. .text_center { text-align: center; }
  60. .text_left { text-align: left; }
  61. .text_right { text-align: right; }
  62. /*position*/
  63. .position_relative { position: relative; }
  64. .position_absolute { position: absolute; }
  65. /*边框*/
  66. .no_border { border: 0px!important;border-right: 0px!important; }
  67. /*宽度*/
  68. .width_whole { width: 100%; }
  69. /*清除格式*/
  70. .clear_both { clear: both; }
  71. .no_margin { margin: 0px!important; }
  72. /* 展示样式 */
  73. .display_block { display: block; }
  74. .display_none { display: none; }
  75. .visibility_hidden { visibility: hidden; }
  76. /*清除浮动*/
  77. .clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}
  79. * html .clearfix{zoom:1;} /* IE6 */
  81. *+html .clearfix{zoom:1;} /* IE7 */
  83. body {
  84. font-family: 'PingFangSC','helvetica neue','hiragino sans gb','arial','microsoft yahei ui','microsoft yahei','simsun','sans-serif'!important;
  85. font-size: 10px;
  86. }

字体自适应

复制到index.html文件中

  1. <script>
  2.     (function (width) {
  3.     var doc = width.document,
  4.         element = doc.documentElement,
  5.         i = 640,
  6.         d = i / 100,
  7.         o = "orientationchange" in width ? "orientationchange" : "resize",
  8.         a = function () {
  9.         var width = element.clientWidth || 320;
  10.         width > 640 && (width = 640);
  11.         element.style.fontSize = width / d + "px"
  12.         };
  13.     doc.addEventListener && (width.addEventListener(o, a, !1), doc.addEventListener("DOMContentLoaded", a, !1))
  14.     })(window);
  15. </script>

项目初始化遇到的问题

  1. Cannot find module 'resolve'
  3. 解决方案: 重新安装依赖
  4. 删除 /node_modules
  5. npm clean cache
  6. npm install 
  7. npm start 重启服务
  9. 以上操作完美解决了问题

蓝湖 + ps 设计psd项目稿

  1. 参考链接: https://lanhuapp.com/
  2. 下载ps
  3. 备注: 如何使用自己去摸索

配置导航组件Nav

  1. 安装: npm install react-router-dom --save
  1. import React from 'react'
  2. import {HashRouter as Router, Route, Switch}  from 'react-router-dom'
  4. import Home from '../pages/Home/home'
  5. import Shop from '../pages/Shop/shop'
  6. import Mine from '../pages/Mine/mine'
  7. import Life from '../pages/Life/life'
  8. import NotFound from '../pages/NotFound/notFound'
  10. export default class Nav extends React.Component {
  11.     render () {
  12.         return (
  13.             <Router>
  14.                 <Switch>
  15.                     <Route exact path="/" component={Home}></Route>
  16.                     <Route exact path="/shop" component={Shop}></Route>
  17.                     <Route exact path="/mine" component={Mine}></Route>
  18.                     <Route exact path="/life" component={Life}></Route>
  19.                     <Route path="*" component={NotFound}></Route>
  20.                 </Switch>
  21.             </Router>
  22.         )
  23.     }
  24. }

轮播图

github地址: https://github.com/oliviertassinari/react-swipeable-views(点的样式和逻辑需要自己实现)

文档地址: https://react-swipeable-views.com/getting-started/installation/

自动轮播功能需要安装插件: npm install —save react-swipeable-views-utils(具体代码实现看文档实现)

安装: npm install —save react-swipeable-views

  1. import React from 'react';
  2. import SwipeableViews from 'react-swipeable-views';
  4. const styles = {
  5.   slide: {
  6.     padding: 15,
  7.     minHeight: 100,
  8.     color: '#fff',
  9.   },
  10.   slide1: {
  11.     background: '#FEA900',
  12.   },
  13.   slide2: {
  14.     background: '#B3DC4A',
  15.   },
  16.   slide3: {
  17.     background: '#6AC0FF',
  18.   },
  19. };
  21. const MyComponent = () => (
  22.   <SwipeableViews>
  23.     <div style={Object.assign({}, styles.slide, styles.slide1)}>
  24.       slide n°1
  25.     </div>
  26.     <div style={Object.assign({}, styles.slide, styles.slide2)}>
  27.       slide n°2
  28.     </div>
  29.     <div style={Object.assign({}, styles.slide, styles.slide3)}>
  30.       slide n°3
  31.     </div>
  32.   </SwipeableViews>
  33. );
  35. export default MyComponent;

搭建一个简易的express服务

参考资料: https://www.expressjs.com.cn/starter/installing.html

安装: npm install express —save
提示: 怎么搭建基本服务和配置路由官方文档都有详细的解释, 这里只是做一个指引.

掌握要点:
路由配置
中间件的使用
整合mysql以及sql的基本操作

  1. const express = require('express')
  2. const app = express()
  3. const router = express.Router()
  5. app.use(router)
  7. app.listen(3001, function(req, res) {
  8.     console.log('listening port in 3001')
  9. })

使用redux将城市信息保存在全局store中