{"id":15041645,"url":"https://github.com/adengweb/react-wangyiyun-shop","last_synced_at":"2026-01-20T01:57:45.304Z","repository":{"id":41633971,"uuid":"266821470","full_name":"adengweb/react-wangyiyun-shop","owner":"adengweb","description":"云音乐商城是专注于音乐场景打造的音乐购物平台，包含音乐人周边、3c影音数码、音乐市集等，和我们一起让音乐购有趣，给生活加点料","archived":false,"fork":false,"pushed_at":"2023-01-05T20:37:30.000Z","size":2034,"stargazers_count":3,"open_issues_count":22,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T17:53:19.674Z","etag":null,"topics":["antd-mobile","axios","json-server","node-sass","react","react-router"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adengweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-25T15:58:54.000Z","updated_at":"2022-03-01T09:20:51.000Z","dependencies_parsed_at":"2023-02-04T15:32:30.741Z","dependency_job_id":null,"html_url":"https://github.com/adengweb/react-wangyiyun-shop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adengweb%2Freact-wangyiyun-shop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adengweb%2Freact-wangyiyun-shop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adengweb%2Freact-wangyiyun-shop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adengweb%2Freact-wangyiyun-shop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adengweb","download_url":"https://codeload.github.com/adengweb/react-wangyiyun-shop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247478330,"owners_count":20945267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd-mobile","axios","json-server","node-sass","react","react-router"],"created_at":"2024-09-24T20:46:19.537Z","updated_at":"2026-01-20T01:57:45.298Z","avatar_url":"https://github.com/adengweb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React-wangyiyun-shop React仿网易云商城\n\n云音乐商城是专注于音乐场景打造的音乐购物平台，包含音乐人周边、3c影音数码、音乐市集等，和我们一起让音乐购有趣，给生活加点料\n\n## 使用插件\n\n``` bash\n  Ant Design Mobile  // 蚂蚁金服React UI框架\n  node-sass  // css预处理   yarn add node-sass\n  React router  //路由\n  axios  //  使用Promise管理异步的http库\n  redux   // 状态管理模式   npm install redux\n  JSON-server   // 启动API服务器\n  iconfont\n```\n\n## 服务启动\n\n``` bash\n  启动API： json-server --watch --port 3200 db.json\n\n  开发环境： yarn start        npm run start\n  打包环境： yarn build        npm run build\n```\n\n## API\n\n``` bash\nhttp://localhost:3200/user  // 用户数据\nhttp://localhost:3200/welfareInfo  // 用户福利社 需要用户status = 1展示\nhttp://localhost:3200/banners   // 首页banner\nhttp://localhost:3200/hotProduct   // 热门推荐\nhttp://localhost:3200/gettopics   // 首页分类\nhttp://localhost:3200/categoryList  // 分类\nhttp://localhost:3200/searchConfigKey  //搜索关键字\n  \n```\n\n## Project issue\n\n``` bash\nReact组件的写法\n1、函数式\nfunction Comp(props){\n  return(...)\n}\n\n2、类\nclass Comp extends React.Component {\n  render(){\n    return ( ... )\n  }\n}\n\n属性\n\u003cComp name=\"\" style={{...}} /\u003e  //单个属性直接传，多个属性用对象\n\n状态\nclass Comp{\n  state = {}\n  componentDidMount(){\n    this.setState({prop:val})  //直接设置值\n    this.setState((state) =\u003e({prop:val}))  // funtion设置\n  }\n}\n\n条件和循环\n\n{this.state.isLogin ? {userInfo.name} : 登录}  //三元表达式\n{this.state.msg \u0026\u0026 \u003cp\u003e{this.state.msg}\u003c/p\u003e}  // 如果前面不为空就输出\n{this.state.list.map( u =\u003e \u003cli\u003e{u.name}\u003c/li\u003e)}  //循环\n\n事件\n1、onChange = () =\u003e {} //注意this的指向\n\u003cinput onChange = {this.onChange}\u003e\n\n\u003cinput onChange = {()=\u003ethis.onChange(val)}\u003e\n\n父组件向子组件传值\n\n// 父组件\n\u003cToggleButton hotProductData=\"Toggle me\" /\u003e\n// 子组件\nconstructor(props) {\n  super(props)\n  console.log(this.props.hotProductData)\n}\n\n本地存储 localStorage\n\nlocalStorage.setItem('user', JSON.stringify(user));  // 存储值：将对象转换为Json字符串\nvar userJsonStr = localStorage.getItem('user');  // 取值时：把获取到的Json字符串转换回对象\nlocalStorage.removeItem(\"job\");  // removeItem删除key\nlocalStorage.clear();  // clear清除所有的key/value\n\nJSON.parse(localStorage.getItem('cart_history')) //解析字符串\nlocalStorage.setItem('searchHistory', JSON.stringify(h_arr))   //变成字符串\n\nreact 用.map方法如何遍历指定的数据数量\nstudents.slice(0, 10).map();\n\n\n  \n```\n\n## vs code代码片段\n\n点选「首选项：配置用户代码片片段」；\n点击界面最左侧竖栏（也即活动栏）最下方的齿轮按钮，在弹出来的菜单中点选「用户代码片段」；\n\n自定义React常用的代码片段  body内容用\\n换行  $ {1：name}来指定新建后的鼠标位置（1参数：第几个指针，2参数：指针选择的内容）；\n``` bash\n  \"Print to rapp\": {\n    \"prefix\": \"rapp\",\n    \"body\": [\n      \"import React from 'react'\\n\\nconst App = () =\u003e (\\n  \u003cdiv\u003e$1\\n  \u003c/div\u003e\\n)\\n\\nexport default App\",\n      \"$2\"\n    ],\n    \"description\": \"新建react模板\"\n  },\n  \"Print to rappc\": {\n    \"prefix\": \"rappc\",\n    \"body\": [\n      \"import React, { Component } from 'react';\\n\\nclass ${1:Name} extends Component{\\n  state = {\\n  }\\n  componentDidMount(){\\n  }\\n  render(){\\n    return (\\n      \u003cdiv\u003e${2:Name}\u003c/div\u003e\\n    )\\n  }\\n}\\n\\nexport default ${3:Name}\"\n    ],\n    \"description\": \"新建react组件\"\n  }\n```\n原文链接：https://blog.csdn.net/maokelong95/java/article/details/54379046\n\n## 图片展示\n\n\u003cimg src=\"http://1eng.vip/wangyiyun-shop-img/shouye.png\" /\u003e首页\n\u003cimg src=\"http://1eng.vip/wangyiyun-shop-img/fenlei.png\" /\u003e分类\n\u003cimg src=\"http://1eng.vip/wangyiyun-shop-img/denglu.png\" /\u003e登录\n\u003cimg src=\"http://1eng.vip/wangyiyun-shop-img/gerenzhongxin.png\" /\u003e个人中心\n\n## License\n\nMIT\n[前端蜗牛](http://adeng.vip)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadengweb%2Freact-wangyiyun-shop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadengweb%2Freact-wangyiyun-shop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadengweb%2Freact-wangyiyun-shop/lists"}