├── public ├── favicon.ico ├── manifest.json └── index.html ├── src ├── static │ ├── img │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ └── reader.png │ └── svg │ │ ├── reader.svg │ │ ├── 1.svg │ │ ├── 2.svg │ │ ├── 3.svg │ │ ├── 4.svg │ │ └── logo.svg ├── css │ └── index.css ├── components │ ├── Search.scss │ ├── BookDetails.scss │ ├── BookDetails.js │ ├── Search.js │ ├── FilterWrap.js │ ├── FilterWrap.scss │ ├── InfoItemList.js │ ├── Bookstore.scss │ ├── InfoItemList.scss │ └── Bookstore.js ├── App.test.js ├── api │ ├── girl.json │ ├── Api.js │ ├── public.json │ └── boy.json ├── index.js ├── App.css ├── App.js └── registerServiceWorker.js ├── .gitignore ├── config ├── jest │ ├── fileTransform.js │ └── cssTransform.js ├── polyfills.js ├── paths.js ├── env.js ├── webpackDevServer.config.js ├── webpack.config.dev.js └── webpack.config.prod.js ├── README.md ├── scripts ├── test.js ├── start.js └── build.js └── package.json /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/infinityX3/reactApp/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/static/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/infinityX3/reactApp/HEAD/src/static/img/1.jpg -------------------------------------------------------------------------------- /src/static/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/infinityX3/reactApp/HEAD/src/static/img/2.jpg -------------------------------------------------------------------------------- /src/static/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/infinityX3/reactApp/HEAD/src/static/img/3.jpg -------------------------------------------------------------------------------- /src/static/img/reader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/infinityX3/reactApp/HEAD/src/static/img/reader.png -------------------------------------------------------------------------------- /src/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | font-size: 16px; 6 | font-family: 'Microsoft Yahei', '微软雅黑', sans-serif; 7 | } -------------------------------------------------------------------------------- /src/components/Search.scss: -------------------------------------------------------------------------------- 1 | .search { 2 | .nav-bar { 3 | background-color: #e87646 !important; 4 | color: #fff !important; 5 | .am-navbar-title { 6 | color: #fff !important; 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /src/components/BookDetails.scss: -------------------------------------------------------------------------------- 1 | .BookDetails { 2 | .nav-bar { 3 | background-color: #e87646 !important; 4 | color: #fff !important; 5 | .am-navbar-title { 6 | color: #fff !important; 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea/ 3 | .vscode/ 4 | node_modules/ 5 | dist/ 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | test/unit/coverage 10 | test/e2e/reports 11 | selenium-debug.log 12 | export_translation/i18n/ 13 | export_translation/i18n_copy/ 14 | export_translation/GCRM翻译*/ -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /src/api/girl.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [{ 3 | "imgSrc": "http://wfqqreader.3g.qq.com/cover/490/15313490/t3_15313490.jpg", 4 | "title": "大主宰", 5 | "des": "在破败中崛起，在寂灭中复苏。 沧海成尘，雷电枯竭，那一缕幽雾又一次临近大地，世间的枷锁被打开了，一个全新的世界就此揭开神秘的一角", 6 | "type": "希行 / 古言", 7 | "status": "end", 8 | "id": "1" 9 | }] 10 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import registerServiceWorker from './registerServiceWorker'; 5 | 6 | import './css/index.css'; 7 | import 'antd-mobile/dist/antd-mobile.css'; 8 | 9 | ReactDOM.render( 10 | , 11 | document.getElementById('root') 12 | ); 13 | registerServiceWorker(); 14 | -------------------------------------------------------------------------------- /config/jest/fileTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | // This is a custom Jest transformer turning file imports into filenames. 6 | // http://facebook.github.io/jest/docs/en/webpack.html 7 | 8 | module.exports = { 9 | process(src, filename) { 10 | return `module.exports = ${JSON.stringify(path.basename(filename))};`; 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // This is a custom Jest transformer turning style imports into empty objects. 4 | // http://facebook.github.io/jest/docs/en/webpack.html 5 | 6 | module.exports = { 7 | process() { 8 | return 'module.exports = {};'; 9 | }, 10 | getCacheKey() { 11 | // The output is always the same. 12 | return 'cssTransform'; 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | .App-intro a { 26 | display: inline-block; 27 | width: 100%; 28 | height: 30px; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { transform: rotate(0deg); } 33 | to { transform: rotate(360deg); } 34 | } 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # reactApp 2 | A React.js project （仿QQ浏览器小说-书城界面实现） 3 | 4 | > 项目使用creat-react-app构建 5 | 6 | ### 运行截图 7 | 8 | 9 | ### 使用技术 10 | - `React.js` 轻量级的MVVM框架 11 | - `react-router-dom` 前端路由 12 | - `axios` 基于 promise 的 HTTP 库 13 | - `Webpack` 构建工具 14 | - `ant-design-mobile` 基于React.js的UI组件库 15 | 16 | ## Build Setup 17 | 18 | ``` bash 19 | # install dependencies 20 | npm install 21 | 22 | # serve with hot reload at http://localhost:3000 23 | npm start 24 | 25 | # build for application with minification and using the release config. 26 | npm run build 27 | -------------------------------------------------------------------------------- /src/api/Api.js: -------------------------------------------------------------------------------- 1 | import Axios from 'axios'; 2 | 3 | export default { 4 | get (url, params) { 5 | return new Promise((resolve, reject) => { 6 | Axios.get(url, { params: params }) 7 | .then(response => { 8 | resolve(response); 9 | }) 10 | .catch(err => { 11 | reject(err); 12 | }); 13 | }); 14 | }, 15 | post (url, params) { 16 | return new Promise((resolve, reject) => { 17 | Axios.post(url, params) 18 | .then(response => { 19 | resolve(response); 20 | }) 21 | .catch(err => { 22 | reject(err); 23 | }); 24 | }); 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /scripts/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Do this as the first thing so that any code reading it knows the right env. 4 | process.env.BABEL_ENV = 'test'; 5 | process.env.NODE_ENV = 'test'; 6 | process.env.PUBLIC_URL = ''; 7 | 8 | // Makes the script crash on unhandled rejections instead of silently 9 | // ignoring them. In the future, promise rejections that are not handled will 10 | // terminate the Node.js process with a non-zero exit code. 11 | process.on('unhandledRejection', err => { 12 | throw err; 13 | }); 14 | 15 | // Ensure environment variables are read. 16 | require('../config/env'); 17 | 18 | const jest = require('jest'); 19 | const argv = process.argv.slice(2); 20 | 21 | // Watch unless on CI or in coverage mode 22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) { 23 | argv.push('--watch'); 24 | } 25 | 26 | 27 | jest.run(argv); 28 | -------------------------------------------------------------------------------- /src/api/public.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [{ 3 | "imgSrc": "http://wfqqreader.3g.qq.com/cover/200/835200/t3_835200.jpg", 4 | "title": "顾盼生辉", 5 | "des": "晋江人气作者夜蔓首部温暖之作，治愈每一段抱憾人生的手语之爱。因为遇见你，我才喜欢上雪天；也是因为遇见你，我才知道原来生活还有另一种可能。开间工作室，还有一家咖啡厅，里面放着翻不完的漫画书；养一只波斯猫，一个人的时候也不会觉得孤独。她想就这样过一辈子也挺好，如果陈绍宸没有出现的话……她一直记得那天，雪花纷飞，彻骨寒冷，他说：“你比画，我应该能看得懂。”从遇见她的那一刻起，他便以自己的方式守护她成长。宸，北极星的所在。永远北方的指向，航海的人们通过它来辨别方向，而陈绍宸是顾盼的方向。婚礼上，他拥着她，在她耳边沉声道：“从此，我便是你的声音，你比画，我来说。”只因遇见你，所有的遗憾便都不再是遗憾", 6 | "type": "夜蔓 / 青春", 7 | "status": "end", 8 | "id": "1" 9 | }, { 10 | "imgSrc": "http://wfqqreader.3g.qq.com/cover/826/913826/t3_913826.jpg", 11 | "title": "韩先生，我想请你结个婚", 12 | "des": "黑暗中，她为救他，成了他的女人，他却隔天清晨匆匆离去。六年后，她进入他的公司，与他擦肩而过，却互不相识，但一切却悄然发生改变，他有了自己爱的人，她有了爱自己的人......她带着女儿疲于奔命，他重新进入她的生活，当他决定娶她时，她却淡淡一笑，转身离开", 13 | "type": "顾伊雪 / 青春", 14 | "status": "update", 15 | "id": "2" 16 | }] 17 | } -------------------------------------------------------------------------------- /src/components/BookDetails.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { NavBar, Icon } from 'antd-mobile'; 3 | import './BookDetails.scss'; 4 | 5 | class BookDetails extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | }; 10 | this.back = this.back.bind(this); 11 | } 12 | componentDidMount() { 13 | } 14 | back() { 15 | this.props.history.push('/'); 16 | } 17 | render() { 18 | return ( 19 |
20 | , 26 | '书城' 27 | ]} 28 | >简介 29 |
30 | {this.props.match.params.id} 31 |
32 |
33 | ); 34 | } 35 | } 36 | 37 | export default BookDetails; 38 | -------------------------------------------------------------------------------- /config/polyfills.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | if (typeof Promise === 'undefined') { 4 | // Rejection tracking prevents a common issue where React gets into an 5 | // inconsistent state due to an error, but it gets swallowed by a Promise, 6 | // and the user has no idea what causes React's erratic future behavior. 7 | require('promise/lib/rejection-tracking').enable(); 8 | window.Promise = require('promise/lib/es6-extensions.js'); 9 | } 10 | 11 | // fetch() polyfill for making API calls. 12 | require('whatwg-fetch'); 13 | 14 | // Object.assign() is commonly used with React. 15 | // It will use the native implementation if it's present and isn't buggy. 16 | Object.assign = require('object-assign'); 17 | 18 | // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet. 19 | // We don't polyfill it in the browser--this is user's responsibility. 20 | if (process.env.NODE_ENV === 'test') { 21 | require('raf').polyfill(global); 22 | } 23 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | BrowserRouter as Router, 4 | Route 5 | } from 'react-router-dom'; 6 | import Bookstore from './components/Bookstore.js'; 7 | import BookDetails from './components/BookDetails.js'; 8 | import Search from './components/Search.js'; 9 | 10 | import './App.css'; 11 | import 'antd-mobile/dist/antd-mobile.css'; 12 | 13 | class App extends Component { 14 | constructor(props) { 15 | super(props); 16 | this.state = { 17 | }; 18 | } 19 | componentDidMount() { 20 | } 21 | render() { 22 | return ( 23 |
24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 |
32 | ); 33 | } 34 | } 35 | 36 | export default App; 37 | -------------------------------------------------------------------------------- /src/components/Search.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { NavBar, Icon, SearchBar } from 'antd-mobile'; 3 | import './Search.scss'; 4 | 5 | class Search extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | value: '' 10 | }; 11 | } 12 | componentDidMount() { 13 | } 14 | onChange= (value) => { 15 | this.setState({ value }); 16 | } 17 | render() { 18 | return (
19 | this.props.history.push('/')} 23 | leftContent={[ 24 | , 25 | '书城' 26 | ]} 27 | >搜索 28 | this.autoFocusInst = ref} 34 | /> 35 |
); 36 | } 37 | } 38 | 39 | export default Search; 40 | -------------------------------------------------------------------------------- /src/components/FilterWrap.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './FilterWrap.scss'; 3 | 4 | class FilterWrap extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = {}; 8 | } 9 | componentDidMount() { 10 | this.props.typeData&&this.getBookList(this.props.typeData[0].id); 11 | } 12 | getBookList (id, e) { 13 | this.props.getBookList(id); 14 | } 15 | render() { 16 | return ( 17 |
18 |
19 | 20 |

{this.props.title || '默认标题'}

21 | 22 |
23 |
    24 | { 25 | this.props.typeData&&this.props.typeData.map(item => ( 26 |
  • 30 | {item.name}
    • 31 | )) 32 | } 33 |
34 |
35 | ); 36 | } 37 | } 38 | 39 | 40 | export default FilterWrap; 41 | -------------------------------------------------------------------------------- /src/components/FilterWrap.scss: -------------------------------------------------------------------------------- 1 | .filter-wrap { 2 | padding: 16px 0; 3 | background-color: #fafafa; 4 | .filter-item-title { 5 | text-align: center; 6 | span { 7 | display: inline-block; 8 | vertical-align: middle; 9 | width: 16px; 10 | height: 1px; background-color: #e5e5e5; 11 | } 12 | span::after { 13 | content: ''; 14 | position: absolute; 15 | height: 1px; 16 | top: 0; 17 | -webkit-transform: scaleY(.5); 18 | -ms-transform: scaleY(.5); 19 | transform: scaleY(.5); 20 | -webkit-transform-origin: 0 0; 21 | -ms-transform-origin: 0 0; 22 | transform-origin: 0 0; 23 | pointer-events: none; 24 | left: 0; 25 | right: 0; 26 | background-color: #e5e5e5; 27 | } 28 | h1 { 29 | display: inline-block; 30 | margin: 0 16px;; 31 | font-size: 0.75rem; 32 | font-weight: 400; 33 | color: #8f8f8f; 34 | } 35 | } 36 | .filter-item-wrap { 37 | display: flex; 38 | list-style: none; 39 | padding: 0; 40 | margin-bottom: 0; 41 | li { 42 | flex: 1; 43 | font-size: 0.85rem; 44 | color: #242424; 45 | } 46 | li:nth-child(2) { 47 | border-left: 1px solid #e5e5e5; 48 | border-right: 1px solid #e5e5e5; 49 | } 50 | } 51 | } -------------------------------------------------------------------------------- /src/components/InfoItemList.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import './InfoItemList.scss'; 4 | 5 | class InfoItemList extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = {}; 9 | } 10 | componentDidMount() { 11 | } 12 | render() { 13 | return ( 14 | 38 | ); 39 | } 40 | } 41 | 42 | export default InfoItemList; 43 | -------------------------------------------------------------------------------- /src/api/boy.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [{ 3 | "imgSrc": "http://wfqqreader.3g.qq.com/cover/537/15808537/t3_15808537.jpg", 4 | "title": "大帝姬", 5 | "des": "穿越的薛青发现自己女扮男装在骗婚。不仅如此她还有一个更大的骗局。这是一个有很多秘密的人的故事", 6 | "type": "希行 / 古言", 7 | "status": "end", 8 | "id": "1" 9 | }, { 10 | "imgSrc": "http://wfqqreader.3g.qq.com/cover/305/20304305/t3_20304305.jpg", 11 | "title": "恰似寒光遇骄阳", 12 | "des": "这家伙，口味是有多重，这都下得去口？”一觉醒来，她看着镜子里的自己，爆炸头血腥纹身脸化得像鬼，多看一秒都辣眼睛。重生前，她另有所爱，一心逃离，与他发生关系后对他恨之入骨。重生后，她瞄了眼床上的美色，严肃思考，这事后留下阴影的，貌似应该是他？上一世脑子被门夹了放着绝色老公不要，被渣男贱女所害，被最信任的闺密洗脑，落了个众叛亲离的下场。这一世，任各路牛鬼蛇神处心积虑巴不得她离婚让位，不好意思，本小姐智商上线了！", 13 | "type": "囧囧有妖 / 现言", 14 | "status": "update", 15 | "id": "2" 16 | }, { 17 | "imgSrc": "http://wfqqreader.3g.qq.com/cover/200/835200/t3_835200.jpg", 18 | "title": "顾盼生辉", 19 | "des": "晋江人气作者夜蔓首部温暖之作，治愈每一段抱憾人生的手语之爱。因为遇见你，我才喜欢上雪天；也是因为遇见你，我才知道原来生活还有另一种可能。开间工作室，还有一家咖啡厅，里面放着翻不完的漫画书；养一只波斯猫，一个人的时候也不会觉得孤独。她想就这样过一辈子也挺好，如果陈绍宸没有出现的话……她一直记得那天，雪花纷飞，彻骨寒冷，他说：“你比画，我应该能看得懂。”从遇见她的那一刻起，他便以自己的方式守护她成长。宸，北极星的所在。永远北方的指向，航海的人们通过它来辨别方向，而陈绍宸是顾盼的方向。婚礼上，他拥着她，在她耳边沉声道：“从此，我便是你的声音，你比画，我来说。”只因遇见你，所有的遗憾便都不再是遗憾", 20 | "type": "夜蔓 / 青春", 21 | "status": "end", 22 | "id": "3" 23 | }, { 24 | "imgSrc": "http://wfqqreader.3g.qq.com/cover/826/913826/t3_913826.jpg", 25 | "title": "韩先生，我想请你结个婚", 26 | "des": "黑暗中，她为救他，成了他的女人，他却隔天清晨匆匆离去。六年后，她进入他的公司，与他擦肩而过，却互不相识，但一切却悄然发生改变，他有了自己爱的人，她有了爱自己的人......她带着女儿疲于奔命，他重新进入她的生活，当他决定娶她时，她却淡淡一笑，转身离开", 27 | "type": "顾伊雪 / 青春", 28 | "status": "update", 29 | "id": "4" 30 | }] 31 | } -------------------------------------------------------------------------------- /src/static/svg/reader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Bookstore.scss: -------------------------------------------------------------------------------- 1 | .Bookstore { 2 | background-color: #ebebeb; 3 | .nav-bar { 4 | background-color: #e87646 !important; 5 | color: #fff !important; 6 | .am-navbar-title { 7 | color: #fff !important; 8 | } 9 | } 10 | .am-carousel { 11 | .am-carousel-wrap { 12 | text-align: right; 13 | } 14 | } 15 | .am-grid { 16 | .am-flexbox { 17 | background: #fafafa !important; 18 | } 19 | &.am-grid-square { 20 | background-color: #fafafa; 21 | .am-grid-item { 22 | .am-grid-item-inner-content { 23 | .am-grid-icon { 24 | width: 40% !important; 25 | } 26 | .am-grid-text { 27 | font-size: 0.85rem !important; 28 | } 29 | } 30 | } 31 | } 32 | } 33 | .book-list-wrap { 34 | background-color: #fafafa; 35 | margin-top: 8px; 36 | h1 { 37 | position: relative; 38 | font-size: 0.85rem; 39 | font-weight: 400; 40 | margin: 0 16px; 41 | padding: 14px 0; 42 | text-align: left; 43 | color: #000; 44 | } 45 | h1::after { 46 | content: ''; 47 | position: absolute; 48 | height: 1px; 49 | bottom: 0; 50 | -webkit-transform: scaleY(.5); 51 | -ms-transform: scaleY(.5); 52 | transform: scaleY(.5); 53 | -webkit-transform-origin: 0 100%; 54 | -ms-transform-origin: 0 100%; 55 | transform-origin: 0 100%; 56 | pointer-events: none; 57 | left: 0; 58 | right: 0; 59 | background-color: #e5e5e5; 60 | } 61 | .b-tags { 62 | float: left; 63 | list-style: none; 64 | padding: 0 16px; 65 | li { 66 | float: left; 67 | display: inline-block; 68 | width: 52px; 69 | height: 30px; 70 | line-height: 30px; 71 | margin-right: 8px; 72 | font-size: 0.85rem; 73 | border: 1px solid #e5e5e5; 74 | border-radius: 40px; 75 | } 76 | } 77 | .b-view-more { 78 | height: 44px; 79 | line-height: 44px; 80 | font-size: 0.85rem; 81 | color: #666; 82 | } 83 | } 84 | } -------------------------------------------------------------------------------- /config/paths.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const fs = require('fs'); 5 | const url = require('url'); 6 | 7 | // Make sure any symlinks in the project folder are resolved: 8 | // https://github.com/facebookincubator/create-react-app/issues/637 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath); 11 | 12 | const envPublicUrl = process.env.PUBLIC_URL; 13 | 14 | function ensureSlash(path, needsSlash) { 15 | const hasSlash = path.endsWith('/'); 16 | if (hasSlash && !needsSlash) { 17 | return path.substr(path, path.length - 1); 18 | } else if (!hasSlash && needsSlash) { 19 | return `${path}/`; 20 | } else { 21 | return path; 22 | } 23 | } 24 | 25 | const getPublicUrl = appPackageJson => 26 | envPublicUrl || require(appPackageJson).homepage; 27 | 28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer 29 | // "public path" at which the app is served. 30 | // Webpack needs to know it to put the right 24 | 34 | React App 35 | 36 | 37 | 40 |
41 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /src/components/InfoItemList.scss: -------------------------------------------------------------------------------- 1 | .InfoItemList { 2 | clear: both; 3 | list-style: none; 4 | padding: 0; 5 | margin-bottom: 0; 6 | li { 7 | position: relative; 8 | padding: 16px; 9 | font-size: 0; 10 | .b-item-img { 11 | display: inline-block; 12 | width: 75px; 13 | height: 100px; 14 | margin-right: 12px; 15 | vertical-align: middle; 16 | img { 17 | width: 100%; 18 | height: 100%; 19 | } 20 | } 21 | .b-item-right { 22 | display: inline-block; 23 | width: calc(100% - 87px); 24 | vertical-align: middle; 25 | .b-item-title { 26 | font-size: 1rem; 27 | color: #242424; 28 | text-align: left; 29 | margin-bottom: 8px; 30 | } 31 | p { 32 | display: -webkit-box; 33 | width: 100%; 34 | font-size: 0.8rem; 35 | line-height: 20px; 36 | color: #8f8f8f; 37 | overflow : hidden; 38 | text-overflow: ellipsis; 39 | text-align: justify; 40 | -webkit-line-clamp: 2; 41 | -webkit-box-orient: vertical; 42 | } 43 | .b-item-info { 44 | position: relative; 45 | .b-item-type { 46 | float: left; 47 | display: inline-block; 48 | max-width: 40%; 49 | margin-left: 4px; 50 | overflow: hidden; 51 | text-overflow: ellipsis; 52 | white-space: nowrap; 53 | color: #8f8f8f; 54 | font-size: 0.7rem; 55 | text-align: left; 56 | } 57 | .icon-read { 58 | float: left; 59 | display: inline-block; 60 | width: 0.8rem; 61 | height: 0.8rem; 62 | left: 0; 63 | background-image: url('../static/img/reader.png'); 64 | background-size: cover; 65 | background-repeat: no-repeat; 66 | vertical-align: -2px; 67 | } 68 | } 69 | } 70 | } 71 | li::after { 72 | position: absolute; 73 | display: inline-block; 74 | content: ""; 75 | width: calc(100% - 32px); 76 | left: 16px; 77 | right: 0; 78 | height: 1px; 79 | bottom: 0; 80 | -webkit-transform: scaleY(.5); 81 | -ms-transform: scaleY(.5); 82 | transform: scaleY(.5); 83 | -webkit-transform-origin: 0 100%; 84 | -ms-transform-origin: 0 100%; 85 | transform-origin: 0 100%; 86 | pointer-events: none; 87 | background-color: #e5e5e5; 88 | } 89 | .b-view-more { 90 | height: 44px; 91 | line-height: 44px; 92 | font-size: 0.85rem; 93 | color: #666; 94 | } 95 | } -------------------------------------------------------------------------------- /src/static/svg/1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/static/svg/2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/static/svg/3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/static/svg/4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/static/svg/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "antd-mobile": "^2.1.6", 7 | "autoprefixer": "7.1.6", 8 | "axios": "^0.17.1", 9 | "babel-core": "6.26.0", 10 | "babel-eslint": "7.2.3", 11 | "babel-jest": "20.0.3", 12 | "babel-loader": "7.1.2", 13 | "babel-preset-react-app": "^3.1.1", 14 | "babel-runtime": "6.26.0", 15 | "case-sensitive-paths-webpack-plugin": "2.1.1", 16 | "chalk": "1.1.3", 17 | "css-loader": "0.28.7", 18 | "dotenv": "4.0.0", 19 | "dotenv-expand": "4.2.0", 20 | "eslint": "4.10.0", 21 | "eslint-config-react-app": "^2.1.0", 22 | "eslint-loader": "1.9.0", 23 | "eslint-plugin-flowtype": "2.39.1", 24 | "eslint-plugin-import": "2.8.0", 25 | "eslint-plugin-jsx-a11y": "5.1.1", 26 | "eslint-plugin-react": "7.4.0", 27 | "extract-text-webpack-plugin": "3.0.2", 28 | "file-loader": "1.1.5", 29 | "fs-extra": "3.0.1", 30 | "html-webpack-plugin": "2.29.0", 31 | "jest": "20.0.4", 32 | "object-assign": "4.1.1", 33 | "postcss-flexbugs-fixes": "3.2.0", 34 | "postcss-loader": "2.0.8", 35 | "promise": "8.0.1", 36 | "raf": "3.4.0", 37 | "react": "^16.2.0", 38 | "react-dev-utils": "^5.0.0", 39 | "react-dom": "^16.2.0", 40 | "react-router": "^4.0.0", 41 | "react-router-dom": "^4.2.2", 42 | "style-loader": "0.19.0", 43 | "sw-precache-webpack-plugin": "0.11.4", 44 | "url-loader": "0.6.2", 45 | "webpack": "3.8.1", 46 | "webpack-dev-server": "2.9.4", 47 | "webpack-manifest-plugin": "1.3.2", 48 | "whatwg-fetch": "2.0.3" 49 | }, 50 | "scripts": { 51 | "start": "node scripts/start.js", 52 | "build": "node scripts/build.js", 53 | "test": "node scripts/test.js --env=jsdom" 54 | }, 55 | "jest": { 56 | "collectCoverageFrom": [ 57 | "src/**/*.{js,jsx,mjs}" 58 | ], 59 | "setupFiles": [ 60 | "/config/polyfills.js" 61 | ], 62 | "testMatch": [ 63 | "/src/**/__tests__/**/*.{js,jsx,mjs}", 64 | "/src/**/?(*.)(spec|test).{js,jsx,mjs}" 65 | ], 66 | "testEnvironment": "node", 67 | "testURL": "http://localhost", 68 | "transform": { 69 | "^.+\\.(js|jsx|mjs)$": "/node_modules/babel-jest", 70 | "^.+\\.css$": "/config/jest/cssTransform.js", 71 | "^(?!.*\\.(js|jsx|mjs|css|json)$)": "/config/jest/fileTransform.js" 72 | }, 73 | "transformIgnorePatterns": [ 74 | "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$" 75 | ], 76 | "moduleNameMapper": { 77 | "^react-native$": "react-native-web" 78 | }, 79 | "moduleFileExtensions": [ 80 | "web.js", 81 | "mjs", 82 | "js", 83 | "json", 84 | "web.jsx", 85 | "jsx", 86 | "node" 87 | ] 88 | }, 89 | "babel": { 90 | "presets": [ 91 | "react-app" 92 | ] 93 | }, 94 | "eslintConfig": { 95 | "extends": "react-app" 96 | }, 97 | "devDependencies": { 98 | "babel-plugin-import": "^1.6.3", 99 | "node-sass": "^4.9.0", 100 | "sass": "^1.0.0-beta.5.2", 101 | "sass-loader": "^6.0.6" 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /config/env.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | const paths = require('./paths'); 6 | 7 | // Make sure that including paths.js after env.js will read .env variables. 8 | delete require.cache[require.resolve('./paths')]; 9 | 10 | const NODE_ENV = process.env.NODE_ENV; 11 | if (!NODE_ENV) { 12 | throw new Error( 13 | 'The NODE_ENV environment variable is required but was not specified.' 14 | ); 15 | } 16 | 17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use 18 | var dotenvFiles = [ 19 | `${paths.dotenv}.${NODE_ENV}.local`, 20 | `${paths.dotenv}.${NODE_ENV}`, 21 | // Don't include `.env.local` for `test` environment 22 | // since normally you expect tests to produce the same 23 | // results for everyone 24 | NODE_ENV !== 'test' && `${paths.dotenv}.local`, 25 | paths.dotenv, 26 | ].filter(Boolean); 27 | 28 | // Load environment variables from .env* files. Suppress warnings using silent 29 | // if this file is missing. dotenv will never modify any environment variables 30 | // that have already been set. Variable expansion is supported in .env files. 31 | // https://github.com/motdotla/dotenv 32 | // https://github.com/motdotla/dotenv-expand 33 | dotenvFiles.forEach(dotenvFile => { 34 | if (fs.existsSync(dotenvFile)) { 35 | require('dotenv-expand')( 36 | require('dotenv').config({ 37 | path: dotenvFile, 38 | }) 39 | ); 40 | } 41 | }); 42 | 43 | // We support resolving modules according to `NODE_PATH`. 44 | // This lets you use absolute paths in imports inside large monorepos: 45 | // https://github.com/facebookincubator/create-react-app/issues/253. 46 | // It works similar to `NODE_PATH` in Node itself: 47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders 48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. 49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. 50 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421 51 | // We also resolve them to make sure all tools using them work consistently. 52 | const appDirectory = fs.realpathSync(process.cwd()); 53 | process.env.NODE_PATH = (process.env.NODE_PATH || '') 54 | .split(path.delimiter) 55 | .filter(folder => folder && !path.isAbsolute(folder)) 56 | .map(folder => path.resolve(appDirectory, folder)) 57 | .join(path.delimiter); 58 | 59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be 60 | // injected into the application via DefinePlugin in Webpack configuration. 61 | const REACT_APP = /^REACT_APP_/i; 62 | 63 | function getClientEnvironment(publicUrl) { 64 | const raw = Object.keys(process.env) 65 | .filter(key => REACT_APP.test(key)) 66 | .reduce( 67 | (env, key) => { 68 | env[key] = process.env[key]; 69 | return env; 70 | }, 71 | { 72 | // Useful for determining whether we’re running in production mode. 73 | // Most importantly, it switches React into the correct mode. 74 | NODE_ENV: process.env.NODE_ENV || 'development', 75 | // Useful for resolving the correct path to static assets in `public`. 76 | // For example, . 77 | // This should only be used as an escape hatch. Normally you would put 78 | // images into the `src` and `import` them in code to get their paths. 79 | PUBLIC_URL: publicUrl, 80 | } 81 | ); 82 | // Stringify all values so we can feed into Webpack DefinePlugin 83 | const stringified = { 84 | 'process.env': Object.keys(raw).reduce((env, key) => { 85 | env[key] = JSON.stringify(raw[key]); 86 | return env; 87 | }, {}), 88 | }; 89 | 90 | return { raw, stringified }; 91 | } 92 | 93 | module.exports = getClientEnvironment; 94 | -------------------------------------------------------------------------------- /scripts/start.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Do this as the first thing so that any code reading it knows the right env. 4 | process.env.BABEL_ENV = 'development'; 5 | process.env.NODE_ENV = 'development'; 6 | 7 | // Makes the script crash on unhandled rejections instead of silently 8 | // ignoring them. In the future, promise rejections that are not handled will 9 | // terminate the Node.js process with a non-zero exit code. 10 | process.on('unhandledRejection', err => { 11 | throw err; 12 | }); 13 | 14 | // Ensure environment variables are read. 15 | require('../config/env'); 16 | 17 | const fs = require('fs'); 18 | const chalk = require('chalk'); 19 | const webpack = require('webpack'); 20 | const WebpackDevServer = require('webpack-dev-server'); 21 | const clearConsole = require('react-dev-utils/clearConsole'); 22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); 23 | const { 24 | choosePort, 25 | createCompiler, 26 | prepareProxy, 27 | prepareUrls, 28 | } = require('react-dev-utils/WebpackDevServerUtils'); 29 | const openBrowser = require('react-dev-utils/openBrowser'); 30 | const paths = require('../config/paths'); 31 | const config = require('../config/webpack.config.dev'); 32 | const createDevServerConfig = require('../config/webpackDevServer.config'); 33 | 34 | const useYarn = fs.existsSync(paths.yarnLockFile); 35 | const isInteractive = process.stdout.isTTY; 36 | 37 | // Warn and crash if required files are missing 38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { 39 | process.exit(1); 40 | } 41 | 42 | // Tools like Cloud9 rely on this. 43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; 44 | const HOST = process.env.HOST || '0.0.0.0'; 45 | 46 | if (process.env.HOST) { 47 | console.log( 48 | chalk.cyan( 49 | `Attempting to bind to HOST environment variable: ${chalk.yellow( 50 | chalk.bold(process.env.HOST) 51 | )}` 52 | ) 53 | ); 54 | console.log( 55 | `If this was unintentional, check that you haven't mistakenly set it in your shell.` 56 | ); 57 | console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`); 58 | console.log(); 59 | } 60 | 61 | // We attempt to use the default port but if it is busy, we offer the user to 62 | // run on a different port. `choosePort()` Promise resolves to the next free port. 63 | choosePort(HOST, DEFAULT_PORT) 64 | .then(port => { 65 | if (port == null) { 66 | // We have not found a port. 67 | return; 68 | } 69 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; 70 | const appName = require(paths.appPackageJson).name; 71 | const urls = prepareUrls(protocol, HOST, port); 72 | // Create a webpack compiler that is configured with custom messages. 73 | const compiler = createCompiler(webpack, config, appName, urls, useYarn); 74 | // Load proxy config 75 | const proxySetting = require(paths.appPackageJson).proxy; 76 | const proxyConfig = prepareProxy(proxySetting, paths.appPublic); 77 | // Serve webpack assets generated by the compiler over a web sever. 78 | const serverConfig = createDevServerConfig( 79 | proxyConfig, 80 | urls.lanUrlForConfig 81 | ); 82 | const devServer = new WebpackDevServer(compiler, serverConfig); 83 | // Launch WebpackDevServer. 84 | devServer.listen(port, HOST, err => { 85 | if (err) { 86 | return console.log(err); 87 | } 88 | if (isInteractive) { 89 | clearConsole(); 90 | } 91 | console.log(chalk.cyan('Starting the development server...\n')); 92 | openBrowser(urls.localUrlForBrowser); 93 | }); 94 | 95 | ['SIGINT', 'SIGTERM'].forEach(function(sig) { 96 | process.on(sig, function() { 97 | devServer.close(); 98 | process.exit(); 99 | }); 100 | }); 101 | }) 102 | .catch(err => { 103 | if (err && err.message) { 104 | console.log(err.message); 105 | } 106 | process.exit(1); 107 | }); 108 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/components/Bookstore.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { NavBar, Icon, Carousel, Grid, Toast } from 'antd-mobile'; 3 | import Api from '../api/Api.js'; 4 | import InfoItemList from './InfoItemList.js'; 5 | import FilterWrap from './FilterWrap.js'; 6 | import './Bookstore.scss'; 7 | 8 | const type1 = `data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='56' height='56' fill='%23F57749' rx='28'/%3E%3Cpath fill='%23FFF' d='M39.757 37.316L16.784 18.04C19.532 14.947 23.538 13 28 13c8.284 0 15 6.716 15 15 0 3.52-1.213 6.757-3.243 9.316zm-2.095 2.158C35.052 41.674 31.682 43 28 43c-8.284 0-15-6.716-15-15 -1-2.742.736-5.312 2.02-7.524l22.642 18.998z'/%3E%3Cpath fill='%23F57749' d='M30.423 25H35v3h-5v2h5v3h-5v5h-4v-5h-5v-3h5v-2h-5v-3h4.175L22 19.5l2.598-1.5 3.2 5.544L31 18l2.598 1.5-3.175 5.5z'/%3E%3C/g%3E%3C/svg%3E`; 9 | const type3 = `data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='56' height='56' fill='%2364A7FA' rx='28'/%3E%3Cpath fill='%23FFF' d='M32 30h6c1.105 0 2 .895 2 2v6c0 1.105-.895 2-2 2h-6c-1.105 0-2-.895-2-2v-6c0-1.105.895-2 2-2zM18 16h6c1.105 0 2 .895 2 2v6c0 1.105-.895 2-2 2h-6c-1.105 0-2-.895-2-2v-6c0-1.105.895-2 2-2zm14 0h6c1.105 0 2 .895 2 2v6c0 1.105-.895 2-2 2h-6c-1.105 0-2-.895-2-2v-6c0-1.105.895-2 2-2zM18 30h6c1.105 0 2 .895 2 2v6c0 1.105-.895 2-2 2h-6c-1.105 0-2-.895-2-2v-6c0-1.105.895-2 2-2z'/%3E%3C/g%3E%3C/svg%3E`; 10 | const type4 = `data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='56' height='56' fill='%2360BF99' rx='28'/%3E%3Cpath fill='%23FFF' d='M19.5 15h17c1.38 0 2.5 1.12 2.5 2.5v20c0 1.38-1.12 2.5-2.5 2.5h-17c-1.38 0-2.5-1.12-2.5-2.5v-20c0-1.38 1.12-2.5 2.5-2.5zm1.5 0v8l3.5-2 3.5 2v-8h-7z'/%3E%3C/g%3E%3C/svg%3E`; 11 | const cardData = [{icon: type1, text: '免费'}, {icon: type4, text: '排行'}, {icon: type3, text: '分类'}, {icon: type4, text: '完本'}]; 12 | const typeData = [{name: '男生小说', id: 'boy'}, {name: '女生小说', id: 'girl'}, {name: '出版书籍', id: 'pub'}] 13 | 14 | function BookTags (props) { 15 | return ( 16 |
    17 | { 18 | props.tags.map(item => ( 19 |
  • {item}
    • 20 | )) 21 | } 22 |
23 | ); 24 | } 25 | 26 | function BookListWrap (props) { 27 | return ( 28 |
29 |

{props.title || '默认标题'}

30 | {props.children} 31 |
32 | ); 33 | } 34 | 35 | class Bookstore extends Component { 36 | constructor(props) { 37 | super(props); 38 | this.state = { 39 | imgHeight: 176, 40 | slideIndex: 0, 41 | data: ['1', '2', '3'], 42 | tags: ['科幻', '游戏', '末世', '校花'], 43 | bookData: [], 44 | currentId: 'boy' 45 | }; 46 | } 47 | componentDidMount() { 48 | } 49 | getBookList (id) { 50 | // 请求阅读喜好类型的数据 51 | Api.get(`/${id}`) 52 | .then(response => { 53 | this.setState({ 54 | bookData: response.data.data, 55 | currentId: id 56 | }); 57 | }) 58 | .catch(error => { 59 | console.log(error); 60 | }); 61 | } 62 | goToSearch () { 63 | this.props.history.push('/search'); 64 | } 65 | failToast (text, e) { 66 | Toast.fail(text, 1); 67 | } 68 | render() { 69 | return ( 70 |
71 | , 76 | '书架' 77 | ]} 78 | rightContent={[ 79 | 80 | ]} 81 | >书城 82 | 87 | 91 | { 92 | this.state.data.map(val => ( 93 | 97 | {`${val}.jpg`} { 102 | window.dispatchEvent(new Event('resize')); 103 | this.setState({ imgHeight: 'auto' }); 104 | }} 105 | /> 106 | 107 | )) 108 | } 109 | 110 | 111 | , 115 | ] 116 | } 117 | /> 118 |
119 | ); 120 | } 121 | } 122 | 123 | export default Bookstore; 124 | -------------------------------------------------------------------------------- /scripts/build.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Do this as the first thing so that any code reading it knows the right env. 4 | process.env.BABEL_ENV = 'production'; 5 | process.env.NODE_ENV = 'production'; 6 | 7 | // Makes the script crash on unhandled rejections instead of silently 8 | // ignoring them. In the future, promise rejections that are not handled will 9 | // terminate the Node.js process with a non-zero exit code. 10 | process.on('unhandledRejection', err => { 11 | throw err; 12 | }); 13 | 14 | // Ensure environment variables are read. 15 | require('../config/env'); 16 | 17 | const path = require('path'); 18 | const chalk = require('chalk'); 19 | const fs = require('fs-extra'); 20 | const webpack = require('webpack'); 21 | const config = require('../config/webpack.config.prod'); 22 | const paths = require('../config/paths'); 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); 24 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); 25 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); 26 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); 27 | const printBuildError = require('react-dev-utils/printBuildError'); 28 | 29 | const measureFileSizesBeforeBuild = 30 | FileSizeReporter.measureFileSizesBeforeBuild; 31 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; 32 | const useYarn = fs.existsSync(paths.yarnLockFile); 33 | 34 | // These sizes are pretty large. We'll warn for bundles exceeding them. 35 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; 36 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; 37 | 38 | // Warn and crash if required files are missing 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { 40 | process.exit(1); 41 | } 42 | 43 | // First, read the current file sizes in build directory. 44 | // This lets us display how much they changed later. 45 | measureFileSizesBeforeBuild(paths.appBuild) 46 | .then(previousFileSizes => { 47 | // Remove all content but keep the directory so that 48 | // if you're in it, you don't end up in Trash 49 | fs.emptyDirSync(paths.appBuild); 50 | // Merge with the public folder 51 | copyPublicFolder(); 52 | // Start the webpack build 53 | return build(previousFileSizes); 54 | }) 55 | .then( 56 | ({ stats, previousFileSizes, warnings }) => { 57 | if (warnings.length) { 58 | console.log(chalk.yellow('Compiled with warnings.\n')); 59 | console.log(warnings.join('\n\n')); 60 | console.log( 61 | '\nSearch for the ' + 62 | chalk.underline(chalk.yellow('keywords')) + 63 | ' to learn more about each warning.' 64 | ); 65 | console.log( 66 | 'To ignore, add ' + 67 | chalk.cyan('// eslint-disable-next-line') + 68 | ' to the line before.\n' 69 | ); 70 | } else { 71 | console.log(chalk.green('Compiled successfully.\n')); 72 | } 73 | 74 | console.log('File sizes after gzip:\n'); 75 | printFileSizesAfterBuild( 76 | stats, 77 | previousFileSizes, 78 | paths.appBuild, 79 | WARN_AFTER_BUNDLE_GZIP_SIZE, 80 | WARN_AFTER_CHUNK_GZIP_SIZE 81 | ); 82 | console.log(); 83 | 84 | const appPackage = require(paths.appPackageJson); 85 | const publicUrl = paths.publicUrl; 86 | const publicPath = config.output.publicPath; 87 | const buildFolder = path.relative(process.cwd(), paths.appBuild); 88 | printHostingInstructions( 89 | appPackage, 90 | publicUrl, 91 | publicPath, 92 | buildFolder, 93 | useYarn 94 | ); 95 | }, 96 | err => { 97 | console.log(chalk.red('Failed to compile.\n')); 98 | printBuildError(err); 99 | process.exit(1); 100 | } 101 | ); 102 | 103 | // Create the production build and print the deployment instructions. 104 | function build(previousFileSizes) { 105 | console.log('Creating an optimized production build...'); 106 | 107 | let compiler = webpack(config); 108 | return new Promise((resolve, reject) => { 109 | compiler.run((err, stats) => { 110 | if (err) { 111 | return reject(err); 112 | } 113 | const messages = formatWebpackMessages(stats.toJson({}, true)); 114 | if (messages.errors.length) { 115 | // Only keep the first error. Others are often indicative 116 | // of the same problem, but confuse the reader with noise. 117 | if (messages.errors.length > 1) { 118 | messages.errors.length = 1; 119 | } 120 | return reject(new Error(messages.errors.join('\n\n'))); 121 | } 122 | if ( 123 | process.env.CI && 124 | (typeof process.env.CI !== 'string' || 125 | process.env.CI.toLowerCase() !== 'false') && 126 | messages.warnings.length 127 | ) { 128 | console.log( 129 | chalk.yellow( 130 | '\nTreating warnings as errors because process.env.CI = true.\n' + 131 | 'Most CI servers set it automatically.\n' 132 | ) 133 | ); 134 | return reject(new Error(messages.warnings.join('\n\n'))); 135 | } 136 | return resolve({ 137 | stats, 138 | previousFileSizes, 139 | warnings: messages.warnings, 140 | }); 141 | }); 142 | }); 143 | } 144 | 145 | function copyPublicFolder() { 146 | fs.copySync(paths.appPublic, paths.appBuild, { 147 | dereference: true, 148 | filter: file => file !== paths.appHtml, 149 | }); 150 | } 151 | -------------------------------------------------------------------------------- /config/webpackDevServer.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware'); 4 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware'); 5 | const ignoredFiles = require('react-dev-utils/ignoredFiles'); 6 | const config = require('./webpack.config.dev'); 7 | const paths = require('./paths'); 8 | 9 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; 10 | const host = process.env.HOST || '0.0.0.0'; 11 | 12 | module.exports = function(proxy, allowedHost) { 13 | return { 14 | // WebpackDevServer 2.4.3 introduced a security fix that prevents remote 15 | // websites from potentially accessing local content through DNS rebinding: 16 | // https://github.com/webpack/webpack-dev-server/issues/887 17 | // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a 18 | // However, it made several existing use cases such as development in cloud 19 | // environment or subdomains in development significantly more complicated: 20 | // https://github.com/facebookincubator/create-react-app/issues/2271 21 | // https://github.com/facebookincubator/create-react-app/issues/2233 22 | // While we're investigating better solutions, for now we will take a 23 | // compromise. Since our WDS configuration only serves files in the `public` 24 | // folder we won't consider accessing them a vulnerability. However, if you 25 | // use the `proxy` feature, it gets more dangerous because it can expose 26 | // remote code execution vulnerabilities in backends like Django and Rails. 27 | // So we will disable the host check normally, but enable it if you have 28 | // specified the `proxy` setting. Finally, we let you override it if you 29 | // really know what you're doing with a special environment variable. 30 | disableHostCheck: 31 | !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true', 32 | // Enable gzip compression of generated files. 33 | compress: true, 34 | // Silence WebpackDevServer's own logs since they're generally not useful. 35 | // It will still show compile warnings and errors with this setting. 36 | clientLogLevel: 'none', 37 | // By default WebpackDevServer serves physical files from current directory 38 | // in addition to all the virtual build products that it serves from memory. 39 | // This is confusing because those files won’t automatically be available in 40 | // production build folder unless we copy them. However, copying the whole 41 | // project directory is dangerous because we may expose sensitive files. 42 | // Instead, we establish a convention that only files in `public` directory 43 | // get served. Our build script will copy `public` into the `build` folder. 44 | // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%: 45 | // 46 | // In JavaScript code, you can access it with `process.env.PUBLIC_URL`. 47 | // Note that we only recommend to use `public` folder as an escape hatch 48 | // for files like `favicon.ico`, `manifest.json`, and libraries that are 49 | // for some reason broken when imported through Webpack. If you just want to 50 | // use an image, put it in `src` and `import` it from JavaScript instead. 51 | contentBase: paths.appPublic, 52 | // By default files from `contentBase` will not trigger a page reload. 53 | watchContentBase: true, 54 | // Enable hot reloading server. It will provide /sockjs-node/ endpoint 55 | // for the WebpackDevServer client so it can learn when the files were 56 | // updated. The WebpackDevServer client is included as an entry point 57 | // in the Webpack development configuration. Note that only changes 58 | // to CSS are currently hot reloaded. JS changes will refresh the browser. 59 | hot: true, 60 | // It is important to tell WebpackDevServer to use the same "root" path 61 | // as we specified in the config. In development, we always serve from /. 62 | publicPath: config.output.publicPath, 63 | // WebpackDevServer is noisy by default so we emit custom message instead 64 | // by listening to the compiler events with `compiler.plugin` calls above. 65 | quiet: true, 66 | // Reportedly, this avoids CPU overload on some systems. 67 | // https://github.com/facebookincubator/create-react-app/issues/293 68 | // src/node_modules is not ignored to support absolute imports 69 | // https://github.com/facebookincubator/create-react-app/issues/1065 70 | watchOptions: { 71 | ignored: ignoredFiles(paths.appSrc), 72 | }, 73 | // Enable HTTPS if the HTTPS environment variable is set to 'true' 74 | https: protocol === 'https', 75 | host: host, 76 | overlay: false, 77 | historyApiFallback: { 78 | // Paths with dots should still use the history fallback. 79 | // See https://github.com/facebookincubator/create-react-app/issues/387. 80 | disableDotRule: true, 81 | }, 82 | public: allowedHost, 83 | proxy, 84 | before(app) { 85 | const boy = require('../src/api/boy.json'); 86 | const girl = require('../src/api/girl.json'); 87 | const pub = require('../src/api/public.json'); 88 | app.get('/boy', (req, res) => { 89 | res.send(boy); 90 | }); 91 | app.get('/girl', (req, res) => { 92 | res.send(girl); 93 | }); 94 | app.get('/pub', (req, res) => { 95 | res.send(pub); 96 | }); 97 | // This lets us open files from the runtime error overlay. 98 | app.use(errorOverlayMiddleware()); 99 | // This service worker file is effectively a 'no-op' that will reset any 100 | // previous service worker registered for the same host:port combination. 101 | // We do this in development to avoid hitting the production cache if 102 | // it used the same host and port. 103 | // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432 104 | app.use(noopServiceWorkerMiddleware()); 105 | }, 106 | }; 107 | }; 108 | -------------------------------------------------------------------------------- /config/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const autoprefixer = require('autoprefixer'); 4 | const path = require('path'); 5 | const webpack = require('webpack'); 6 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 7 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); 8 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); 9 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); 10 | const eslintFormatter = require('react-dev-utils/eslintFormatter'); 11 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); 12 | const getClientEnvironment = require('./env'); 13 | const paths = require('./paths'); 14 | 15 | // Webpack uses `publicPath` to determine where the app is being served from. 16 | // In development, we always serve from the root. This makes config easier. 17 | const publicPath = '/'; 18 | // `publicUrl` is just like `publicPath`, but we will provide it to our app 19 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. 20 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. 21 | const publicUrl = ''; 22 | // Get environment variables to inject into our app. 23 | const env = getClientEnvironment(publicUrl); 24 | 25 | // This is the development configuration. 26 | // It is focused on developer experience and fast rebuilds. 27 | // The production configuration is different and lives in a separate file. 28 | module.exports = { 29 | // You may want 'eval' instead if you prefer to see the compiled output in DevTools. 30 | // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343. 31 | devtool: 'cheap-module-source-map', 32 | // These are the "entry points" to our application. 33 | // This means they will be the "root" imports that are included in JS bundle. 34 | // The first two entry points enable "hot" CSS and auto-refreshes for JS. 35 | entry: [ 36 | // We ship a few polyfills by default: 37 | require.resolve('./polyfills'), 38 | // Include an alternative client for WebpackDevServer. A client's job is to 39 | // connect to WebpackDevServer by a socket and get notified about changes. 40 | // When you save a file, the client will either apply hot updates (in case 41 | // of CSS changes), or refresh the page (in case of JS changes). When you 42 | // make a syntax error, this client will display a syntax error overlay. 43 | // Note: instead of the default WebpackDevServer client, we use a custom one 44 | // to bring better experience for Create React App users. You can replace 45 | // the line below with these two lines if you prefer the stock client: 46 | // require.resolve('webpack-dev-server/client') + '?/', 47 | // require.resolve('webpack/hot/dev-server'), 48 | require.resolve('react-dev-utils/webpackHotDevClient'), 49 | // Finally, this is your app's code: 50 | paths.appIndexJs, 51 | // We include the app code last so that if there is a runtime error during 52 | // initialization, it doesn't blow up the WebpackDevServer client, and 53 | // changing JS code would still trigger a refresh. 54 | ], 55 | output: { 56 | // Add /* filename */ comments to generated require()s in the output. 57 | pathinfo: true, 58 | // This does not produce a real file. It's just the virtual path that is 59 | // served by WebpackDevServer in development. This is the JS bundle 60 | // containing code from all our entry points, and the Webpack runtime. 61 | filename: 'static/js/bundle.js', 62 | // There are also additional JS chunk files if you use code splitting. 63 | chunkFilename: 'static/js/[name].chunk.js', 64 | // This is the URL that app is served from. We use "/" in development. 65 | publicPath: publicPath, 66 | // Point sourcemap entries to original disk location (format as URL on Windows) 67 | devtoolModuleFilenameTemplate: info => 68 | path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'), 69 | }, 70 | resolve: { 71 | // This allows you to set a fallback for where Webpack should look for modules. 72 | // We placed these paths second because we want `node_modules` to "win" 73 | // if there are any conflicts. This matches Node resolution mechanism. 74 | // https://github.com/facebookincubator/create-react-app/issues/253 75 | modules: ['node_modules', paths.appNodeModules].concat( 76 | // It is guaranteed to exist because we tweak it in `env.js` 77 | process.env.NODE_PATH.split(path.delimiter).filter(Boolean) 78 | ), 79 | // These are the reasonable defaults supported by the Node ecosystem. 80 | // We also include JSX as a common component filename extension to support 81 | // some tools, although we do not recommend using it, see: 82 | // https://github.com/facebookincubator/create-react-app/issues/290 83 | // `web` extension prefixes have been added for better support 84 | // for React Native Web. 85 | extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'], 86 | alias: { 87 | 88 | // Support React Native Web 89 | // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 90 | 'react-native': 'react-native-web', 91 | }, 92 | plugins: [ 93 | // Prevents users from importing files from outside of src/ (or node_modules/). 94 | // This often causes confusion because we only process files within src/ with babel. 95 | // To fix this, we prevent you from importing files out of src/ -- if you'd like to, 96 | // please link the files into your node_modules/ and let module-resolution kick in. 97 | // Make sure your source files are compiled, as they will not be processed in any way. 98 | new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), 99 | ], 100 | }, 101 | module: { 102 | strictExportPresence: true, 103 | rules: [ 104 | // TODO: Disable require.ensure as it's not a standard language feature. 105 | // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176. 106 | // { parser: { requireEnsure: false } }, 107 | 108 | // First, run the linter. 109 | // It's important to do this before Babel processes the JS. 110 | { 111 | test: /\.(js|jsx|mjs)$/, 112 | enforce: 'pre', 113 | use: [ 114 | { 115 | options: { 116 | formatter: eslintFormatter, 117 | eslintPath: require.resolve('eslint'), 118 | 119 | }, 120 | loader: require.resolve('eslint-loader'), 121 | }, 122 | ], 123 | include: paths.appSrc, 124 | }, 125 | { 126 | // "oneOf" will traverse all following loaders until one will 127 | // match the requirements. When no loader matches it will fall 128 | // back to the "file" loader at the end of the loader list. 129 | oneOf: [ 130 | // "url" loader works like "file" loader except that it embeds assets 131 | // smaller than specified limit in bytes as data URLs to avoid requests. 132 | // A missing `test` is equivalent to a match. 133 | { 134 | test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], 135 | loader: require.resolve('url-loader'), 136 | options: { 137 | limit: 10000, 138 | name: 'static/media/[name].[hash:8].[ext]', 139 | }, 140 | }, 141 | // Process JS with Babel. 142 | { 143 | test: /\.(js|jsx|mjs)$/, 144 | include: paths.appSrc, 145 | loader: require.resolve('babel-loader'), 146 | options: { 147 | 148 | // This is a feature of `babel-loader` for webpack (not Babel itself). 149 | // It enables caching results in ./node_modules/.cache/babel-loader/ 150 | // directory for faster rebuilds. 151 | cacheDirectory: true, 152 | }, 153 | }, 154 | { 155 | test: /\.scss$/, 156 | use: [ 157 | require.resolve('style-loader'), 158 | { 159 | loader: require.resolve('css-loader'), 160 | options: { 161 | importLoaders: 1, 162 | }, 163 | }, 164 | { 165 | loader: require.resolve('postcss-loader'), 166 | options: { 167 | // Necessary for external CSS imports to work 168 | // https://github.com/facebookincubator/create-react-app/issues/2677 169 | ident: 'postcss', 170 | plugins: () => [ 171 | require('postcss-flexbugs-fixes'), 172 | autoprefixer({ 173 | browsers: [ 174 | '>1%', 175 | 'last 4 versions', 176 | 'Firefox ESR', 177 | 'not ie < 9', // React doesn't support IE8 anyway 178 | ], 179 | flexbox: 'no-2009', 180 | }), 181 | ], 182 | }, 183 | }, 184 | { 185 | loader: require.resolve('sass-loader'), 186 | options: { 187 | modifyVars: { 188 | "@primary-color": "#1DA57A" 189 | } 190 | }, 191 | }, 192 | ], 193 | }, 194 | // "postcss" loader applies autoprefixer to our CSS. 195 | // "css" loader resolves paths in CSS and adds assets as dependencies. 196 | // "style" loader turns CSS into JS modules that inject