Git Product home page Git Product logo

react-music-lhy's Introduction

一个适合练手的react项目

项目以及项目笔记会不断更新
体会vue与react项目区别
声明:本项目参考了滴滴大佬的vue项目,原vue项目请关注ustbhuangyi

项目运行

后端项目启动

安装mysql
启动mysql服务:net start <mysql程序名称>
登录用户: mysql -uroot -p
输入密码
创建数据库:CREATE DATABASE music;
利用server/sql/music.sql中的查询语句创建数据表user
启动一个终端,切换到server文件夹下
npm install
npm start

前端项目启动

npm install
npm run dev
项目中用到的一些自定义types在common/js/typings目录下
可以通过dts-gen为没有types的npm包自动生成d.ts声明文件

项目笔记

D1

D2

D3

D4

D5

D6

部署

node后端

ToDo

  • 完善项目中typescript类型
    • store,action类型
    • 数据类型
    • 无状态组件 React.SFC
    • 有状态组件 readonly state : Readonly<IState>,react已经对props、props的属性与state的属性作了只读处理
    • react事件类型
    • ref类型 React.RefObject<Scroll> --> <Scroll ref={this.toplist}></Scroll>
    • 媒体事件类型 const { currentTime } : { currentTime: number } = e.target as HTMLMediaElement
  • 项目本地部署
  • 数据与视图分离
  • 组件优化
  • 项目结构的思考,总结
  • 用户详情页组件实现,利用cookie中的信息获取数据库中用户数据渲染用户详情页组件
  • create-react-app优化打包
  • electron构建exe
  • 个人中心管理系统
    • mysql数据库表的设计
    • 登录注册
    • koa2-cors解决跨域
    • koa-bodyparser解决post数据的解析与提取
    • 后端API功能实现、postman测试、前端测试:getDataByPage, addFavorite, deleteFavorite
    • cookie:利用webpack的webpack-dev-server代理实现本地cookie跨域调试。
    • session
    • 利用cookie中的信息获取数据库中用户信息
    • 缓存
    • 数据上传,下载
    • nginx负载均衡,redis存储
    • 压力测试
    • 日志
    • 部署,pm2
    • websocket, https

页面展示

react-music-lhy's People

Contributors

buptlhuanyu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.