前端小白学React系列之——浅仿一下炒股软件（雪球）

最新推荐文章于 2023-09-03 22:10:33 发布
最新推荐文章于 2023-09-03 22:10:33 发布
阅读量491 收藏
点赞数 1
文章标签： 前端 react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57210054/article/details/125591044
版权

请添加图片描述

前言

React是用于构建用户界面的JavaScript库,React组件化一直是React项目开发的重要学习过程。最近自己也在刚开始学习React组件化开发，就打算通过写一个小项目来巩固自己的学习成果，毕竟——知为行之始，行为知之成。

组件展示

请添加图片描述
请添加图片描述

既然在现实中A股实现不了，但是在自己写的项目中还是有机会实现一下千股涨停的对吧！ 😁😁😁

组件设计

项目准备

项目目录

请添加图片描述

api文件夹：用来存放与数据相关的链接，组件所有的数据资源都通过该文件夹中的request.js 获取,不在页面组件中获取，便于以后的操作管理

assets 文件夹：主要用来存放静态资源，像图片，视频之类的资源，达到静态资源的统一操作管理

pages 文件夹：用于放置路由跳转相关的页面

components 文件夹用来放置除去路由页面以外的组件

routes：管理组件的所有路由

技术栈

-   Html，CSS，JavaScript

-   axios

-   classnames

-   react/react-dom/react-router/react-router-dom

-   styled-components

-   swiper

安装依赖

```
npm i //用来安装模块到node_module目录中
npm i axios // 一个HTTP请求库,用来做数据请求 
npm i classnames // 一个简单的JavaScript工具库，可以将不同的的classname联合在一起,实现类名的复用
npm i react-dom react-router react-router-dom // 引入路由组件
npm i styled-components //是一种通过JavaScript来编写CSS样式的解决方案，即css in js
npm i swiper // 一款轻量级的轮播图插件，以移动端为主，可以快速做出一个轮播图

```

项目主要功能实现

底部导航栏高亮的实现👍

  • 实现的效果

请添加图片描述

  • 实现的代码
```
import React from 'react'
import {Link,useLocation} from 'react-router-dom'
import classnames from 'classnames'
import { FooterWrapper } from './style' 


export default function Footer() {
    const { pathname } = useLocation() 
      return (
    <div>
      <FooterWrapper>
        <Link to='/home' className={classnames({active: pathname.includes('/home') || pathname == '/' })}>
        <i className='iconfont icon-zhuye'></i>
        <span>雪球</span>
        </Link>
        <Link to='/stock' className={classnames({active:pathname.includes('/stock')})}>
        <i className='iconfont icon-gupiao'></i>
        <span>股票</span>
        </Link>
        <Link to='/fund' className={classnames({active:pathname.includes('/fund')})}>
          <i className='iconfont icon-jijin'></i>
        <span>基金</span>
        </Link>
        <Link to='/transaction' className={classnames({active:pathname.includes('/transaction')})}>
        <i className='iconfont icon-jiaoyi'></i>
        <span>交易</span>
        </Link>
      </FooterWrapper>
    </div>
  ) 
}

```
  • 根据路由的性质，Link 标签中的to属性会改变url的中pathname的值，此处还使用了classnames，在每个组件上添加一个动态的类，当地址包含设置的地址值时，将active效果施加给对应的Link
改进：尝试用NavLink标签，写法会比用classnames要方便

获取数据👍

在线接口工具fastmock,提供一个假接口进行在线模拟ajax请求，实现前端的页面数据展示。
点击前往fastmock

  • 实现代码
//请求接口
import axios from 'axios'

export const getHomeDetail = () =>
    axios.get("https://www.fastmock.site/mock/adeb272c51f4688e5e8fbb5b8991af89/detail/detail")

export const getStockDetail = () =>
    axios.get("https://www.fastmock.site/mock/adeb272c51f4688e5e8fbb5b8991af89/detail/stockdetail")



//接口数据导入
import React,{useState, useEffect } from 'react'
import { getStockDetail } from '../../../api/request'
import { Wrapper } from './style'

export default function StockCurviews() {
    const [stockDetail,setStockDetail] = useState([])
   
    useEffect(() => {
        (async () => {
        let { data } = await getStockDetail()
        setStockDetail(data)
        console.log( data )     //提前在控制台看看数据是否导入
        })()
    }, [])
    
  return (
      <div>
      <Wrapper>
        {
          stockDetail.map(  
            item => (
                <div className="father" key={item.id}>
                    <div className="detail-contentleft">
                    <div className="detail-contentleft-top">
                      <span>{item.name}</span>  
                    </div>
                    <div className="detail-contentleft-footer">
                        {item.id}
                    </div>
                    </div>
                    <div className="detail-contentmid">
                        <span>{item.curprice}</span>
                    </div>
                    <div className="detail-contentright">
                        <div className="box">
                        <span>
                        {item.increase}
                        </span>
                        </div>
                    </div>
                </div>
            )
          )
        }
        
      </Wrapper>
      </div>
  )
}

  • api目录下的request.js只负责做axios的数据请求

  • useEffect中使用async + await 实现数据导入

  • 数据导入后通过数组的map方法展示到组件中

轮播图👍

  • 实现的效果

请添加图片描述

  • 实现的代码
import React,{useEffect} from 'react'
import { Link } from 'react-router-dom'
import { HomeHeaderWrapper } from './style'
import Swiper from 'swiper'
import img from '../../../assets/images/头像.jpg' 

export default function HomeHeader() {
  let swiper = null;
  useEffect(() => {
      if (swiper) return 
      swiper = new Swiper('.home-top-bar-mid',{
        direction: 'vertical', //实现垂直方向上的轮播
        autoplay:true,
        loop:true
      }
      )
  }, [])
  let topdetail = [
    { id: 1, words:'光伏板块全面爆发,相关基金怎...'},
    { id: 2, words:'房地产板块大涨,滨江集团等多...'},
    { id: 3, words:'酿酒股持续走强,茅台青岛齐创...'},
    { id: 4, words:'基金半年考!哪些基金表现最好?'},
    { id: 5, words:'A股重回3400点!'}
]
  return (
    <div>
      <HomeHeaderWrapper>
        <div className="home-top">
          <div className="home-top-bar">
            <div className="home-top-bar-left">
                <img src={img} alt="" />
            </div>
         
            <div className="home-top-bar-mid swiper-container">
              <div className="home-top-bar-mid-input swiper-wrapper">{

                 topdetail.map(item => 
                  (  
                      <div key={item.id} className="swiper-slide">
                      <i className='iconfont icon-sousuo'></i>
                      <input type="text" placeholder={item.words} />
                      </div> 
                  )
                 
                 )
              }
                
               
              </div>
            </div>

            <div className="home-top-bar-right">
              <div className="home-top-bar-right-i">
                <i className="iconfont icon-youjian1"></i>
              </div>
            </div>
          </div>
        </div>
      </HomeHeaderWrapper>
    </div> 
  )
}

  • useEffect需要传一个[]即空数组当第二个参数，传空数组则表示轮播图的更新什么都不依赖。

  • swiper轮播实现的：固定的html结构 .swiper-container>.swiper-wrapper>.swiper-slide{n}

    改进： 这里文字轮播数据比较少，我就偷了一点小懒，没有去用fastmock去创建一个接口，把这些数据写入接口中。

模态框👍

  • 实现的效果

请添加图片描述

  • 实现的代码
//home组件
import React,{useState,useEffect} from 'react' 
...

export default function Home() {
  const [visible, setVisible] = useState(false)

  const onModalClose = () => {
    setVisible(false)
  }
  const onModalConfirm = () => {
    setVisible(false)
  }

  const navigate = useNavigate()
    useEffect(() => {
      navigate('/home/care')
      console.log('--------')
  },[])

  return (
    <div>
      <Wrapper>
      <HomeHeader/>
      <HomeNav/>
      <Outlet/> 
      <Modal 
        visible={visible}
        title="是否进入市场了解更多？"
        onClose={onModalClose}
        onConfirm={onModalConfirm}
      />
      <div className="public" onClick={() => setVisible(true)}>
        <i className='iconfont icon-jiahao'></i>
      </div>
      </Wrapper>
    </div>
    
  )
}


//Model组件
import React from 'react'
import {  useState,useEffect } from 'react'
import './modal.css' 

export default function Modal(props) {
    const [visible,setVisible] = useState(false)
    const {visible:show,children, title } = props
    const {onClose,onConfirm} = props

    useEffect(() => {
        setVisible(show)
        console.log(show)
    },[show])
    
    const closeModal = () => {
        console.log('想要关闭吗？')
        setVisible(false)
        // onClose && 
        onClose()
    }
    const confirm = () => {
        console.log('想要确定吗？')
        setVisible(false)
        // onConfirm && 
        onConfirm()
    }
    const maskClick = () => {
        setVisible(false)
        //  onClose && 
         onClose()
    }

    return (
        visible && <div className="modal-wrapper">
        <div className="modal">
            <div className="modal-title">{title}</div>
            <div className="modal-content">{children}</div>
            <div className="modal-operator">
                <button 
                    onClick={closeModal}
                    className="modal-operator-close">取消</button>
                <button 
                    onClick={confirm}
                    className="modal-operator-confirm">确定</button>
            </div>
        </div>
        <div className="mask" onClick={maskClick}></div>
    </div>
    )
}

  • 父子组价传值：父组件向子组件传值，通过props，将父组件的state传递给了子组件

  • 子组件通过调用父组件传递到子组件的方法向父组件传递消息的。父组件收到参数后将值赋给父组件的state。

    父组件 => home组件 通过onModalClose(),onModalConfirm()将方法传递给子组件 => Modal组件

    子组件 => Modal 通过调用自己的closeModal() confirm() maskClick()方法去执行父组件=>home的onModalClose(),onModalConfirm()方法

  • 子组件Modal中

return (
        visible && <div className="modal-wrapper">
        <div className="modal">
            <div className="modal-title">{title}</div>
            <div className="modal-content">{children}</div>
            <div className="modal-operator">
                <button 
                    onClick={closeModal}
                    className="modal-operator-close">取消</button>
                <button 
                    onClick={confirm}
                    className="modal-operator-confirm">确定</button>
            </div>
        </div>
        <div className="mask" onClick={maskClick}></div>
    </div>
    )

只有当visble为true时，模态框才得以真正体现

二级路由实现👍

  • 实现的效果

请添加图片描述

  • 实现的代码
//Stock主页面下的index.jsx
import React,{useEffect} from 'react'
// import StockDetail from './StockDetail'
import StockHead from './StockHead'
import StockNav from './StockNav'
import { Outlet,useNavigate } from 'react-router'
import { Wrapper } from './style'

export default function Stock() {
  const navigate = useNavigate()
    useEffect(() => {
      navigate('/stock/curviews')
      console.log('--------')
  },[])
  return (
    <div>
      <Wrapper>

          <StockHead/>
          <StockNav/>
          ...
          <Outlet/>
      </Wrapper>
    </div>
  )
}


//routes目录下的index.jsx
import React, { lazy } from 'react'
import { Routes, Route} from 'react-router-dom'
import Home from '../pages/Home'

...
const StockCurviews = lazy(() => import('../components/Stock/StockCurviews'))
const StockBaijiu = lazy(() => import('../components/Stock/StockBaijiu'))
const StockMedicine = lazy(() => import('../components/Stock/StockMedicine'))
const StockViews = lazy(() => import('../components/Stock/StockViews'))
const StockZh = lazy(() => import('../components/Stock/StockZh'))

export default function RoutesConfig() {
  return (
    <div>
        <Routes>
            ...
            <Route path='/stock' element={<Stock/>}>
              <Route path='/stock/curviews' element={<StockCurviews/>}></Route>
              <Route path='/stock/baijiu' element={<StockBaijiu/>}></Route>
              <Route path='/stock/medicine' element={<StockMedicine/>}></Route>
              <Route path='/stock/views' element={<StockViews/>}></Route>
              <Route path='/stock/Zh' element={<StockZh/>}></Route>
            </Route>
        </Routes>
    </div>
  )
}

  • Stock主页面中的Outlet为二级路由的出口，当/routes目录下的index.jsx的Route匹配到了对应的组件，就从Outlet中渲染

  • /routes目录下的index.jsx实现了路由的懒加载:当react项目非常庞大的时候，因为需要先请求加载资源之后，才会渲染页面，这就会严重影响到页面的首批加载,如果能运用懒加载则会代码分割，按需进行加载

小结

万事开头难，但是只要开始做项目就已经成功了一半。该项目还存在着许多不足和不严谨的地方，我将在后续继续对该项目进行完善，欢迎各位大佬指正以及希望对像我这样的前端小白尽一份绵薄之力啦~😁😁😁
请添加图片描述

月落沾衣
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【React】react项目引入echarts插件 K线图
记得我所记得的
06-08 1308
参考npm文档：https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步：npm安装echarts-for-react npm install --save echarts-for-react npm install e...
react-stockcharts, 带有ReactJS和d3的高度定制的股价图.zip
09-18
react-stockcharts, 带有ReactJS和d3的高度定制的股价图 响应 Stockcharts 创建高度可以定制的股票图表内置反应 JS 和 d3 。多个快速启动示例svg和canvas以提高性能。触摸设备上的平移和缩放图表类型散点图区域线条K 线图OHLCHeik
reactiveStock:React式 R 股票市场可视化
07-02
瓦特 只是在 R React（{}）中完成的React数据可视化服务器的一个例子 - 缓存哈希映射输入：输出，如果遇到多个相同的输入，则给出缓存输出（无需重新计算！）。 演示 如何 需要 R 3.1.2+ 转到 R 控制台： install.packages('quantmod') install.packages('shiny') library('shiny') runGitHub('reactiveStock', 'syzer') 或克隆存储库： git clone [email protected]:syzer/reactiveStock.git 在 R 控制台中： library('quantmod') library('shiny') runApp('reactiveStock')
Android 自定义View与ViewGroup
yanhuomatou2015的博客
08-30 316
自定义View与ViewGroup 一、概述： （一）、View和ViewGroup的职责 1、ViewGroup的职责是什么？ ViewGroup相当于一个放置View的容器，在写布局xml的时候，会告诉容器（凡是以layout开头的属性，都是为用于告诉容器），容器宽度（layout_width）、高度（layout_height）、对齐方式（layout_gravity），还有margin等。因此ViewGroup的职能为：给childView计算出建议的宽和高和测量模式 ，决定childView的位置
基于AChartEngine绘制股票走势图----K线图一（绘制阴线阳线）
JOL的博客
01-05 3103
K线图
jquery实现股票的各种效果
DoubleEO---爱就是性，性就是死
09-24 208
[code="html"] 动态股票信息 上证指数 浦发银行 昨收： 今开： 当前： [/code] [code="js"] var obj; var sid; $(function() { var stockNode = $("#stock").css("b...
PythonStock（38）全栈股票系统：Python全栈股票系统，使用vue进行前端界面开发，修改接口可以展示股票数据，持续开发中。
freewebsys的专栏
11-24 2828
使用Python开发一个web股票项目。主要使用开发语言是python。使用的lib库是pandas，tushare，TensorFlow，tornado等。本文的原文连接是:目前股票系统，迁移使用 vue 做界面，正在开发中。只是把一个股票数据进行展示的，但是需要研究下动态表单的方法。之前是通过 html 页面循环属性的方式的。这个需要再开发一个接口，返回要展示的属性。也不难。慢慢开发吧。
Echarts绘制K线图，文末源码地址！
高级数据分析师，分享Python知识
05-30 1932
Echarts支持的图表类型包括折线图、柱状图、饼图、散点图、雷达图、K线图等等，用户可以根据自己的需求选择合适的图表类型。总之，Apache Echarts是一款非常优秀的可视化图表库，它提供了丰富的图表类型和交互方式，可以帮助用户快速构建交互式的数据可视化应用程序。K线图所需数据：时间，开盘价，收盘价，最低价，最高价，我们可以使用JavaScript数组来存储数据。总之，K线图是一种非常重要的股票价格走势图表，投资者可以通过观察K线图来了解股票价格的变化趋势，从而更好地做出投资决策。
基于java+springboot+vue前后端分离股票交易模拟系统的设计与实现
qq_1694456187的博客
09-03 156
股票交易模拟系统是针对目前股票交易模拟管理的实际需求，从实际工作出发，对过去的股票交易模拟管理系统存在的问题进行分析，完善客户的使用体会。采用计算机系统来管理信息，取代人工管理模式，查询便利，信息准确率高，节省了开支，提高了工作的效率。本系统结合计算机系统的结构、概念、模型、原理、方法，在计算机各种优势的情况下，采用JAVA语言，结合SpringBoot框架与Vue框架以及MYSQL数据库设计并实现的。股票交易模拟系统主要包括个人中心、买入账户管理、卖出账户管理、股票类别管理等多个模块。
react-kline:基于react的k线图组件
05-10
react-kline 基于React的K线图组件 演示地址 安装和使用 安装 $ npm install react-kline 使用 import React from 'react'; import ReactDOM from 'react-dom'; import ReactKline from 'react-kline'; class App extends React.Component { onRequestData(param,callback){ let data={}; //请求数据 //... callback(data); } render() { return
股票跟踪器：这个React应用程序是我在Finance中的第一个个人项目，它使用Finnhub JS API在设定的时间间隔内呈现实时股票价格
02-19
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESL
React:用react+redux仿京东首页
05-18
React 进入目录 cd myshop 开发中...... 启动项目 cnpm start 用react仿京东首页
React-jianshu：React模仿简书首页
02-20
该项目是通过。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 更新到新版本 Create React App分为两个包： create-react-app是用于创建新项目的全局命令行实用程序。 react-scripts是所生成项目（包括此项目）中的开发依赖项。 您几乎几乎不需要更新create-react-app本身：它将所有设置委派给react-scripts 。 当您运行create-react-app ，它将始终使用最新版本的react-scripts创建项目，因此您将自动获得新创建的应用程序中的所有新功能和改进。 要将现有项目更新为新版本的react-scripts ，请 ，找到当前使用的版本（如果不确定，请检查此文件夹中的package.json ），然后为较新的版本应用迁移说明版本。 在大多数情况下，package.jso
react-用React仿哔哩哔哩移动端
08-14
用React仿哔哩哔哩移动端
react pro——————————
04-14
react pro——————————
前端+react框架+源码资源+学习视频
最新发布
05-09
适用于零基础想学习前端react框架的小白
react学习入门_react入门_react前端学习
09-20
适合react入门学习，通俗易懂，注解丰富，便于理解
react的前端学习资料
01-01
react的前端学习资料
wmsFrontEnd-main WMS系统前端项目源码 React
01-05
wmsFrontEnd-main WMS系统前端项目源码React
前端分页插件_免费开源的React前端框架——ReactAdmin
05-26
ReactAdmin 是一个免费开源的 React 前端框架，用于快速构建管理后台应用程序。它提供了许多可重用的组件和工具，包括前端分页插件。 ReactAdmin 的前端分页插件是一个高度可定制的组件，可以与任何 API 集成，并支持多个数据源。它具有许多功能，例如支持自定义分页大小、排序和筛选。此外，它还支持异步加载和无限滚动等高级功能。 ReactAdmin 还提供了许多其他功能，例如表单生成器、图表、数据导出和多语言支持等。它还支持与多个数据源集成，例如 REST 和 GraphQL。 总之，ReactAdmin 是一个功能强大且易于使用的前端框架，适用于构建管理后台应用程序。如果您需要在您的项目中使用前端分页插件，ReactAdmin 是一个不错的选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值