├── .editorconfig
├── .gitattributes
├── .gitignore
├── .yarnrc
├── LICENSE
├── README.md
├── app.config.js
├── assets
├── icon.png
└── logo.png
├── config
├── env.js
├── jest
│ ├── cssTransform.js
│ └── fileTransform.js
├── paths.js
├── webpack.config.js
└── webpackDevServer.config.js
├── main.js
├── notes
├── api.md
├── issues.md
└── tech.md
├── package.json
├── public
├── favicon.ico
├── index.html
├── manifest.json
├── play.html
└── renderer.js
├── scripts
├── build.js
├── start.js
└── test.js
├── server
├── app.js
├── package.json
└── yarn.lock
├── src
├── App.css
├── App.test.tsx
├── App.tsx
├── api
│ └── index.ts
├── assets
│ ├── banner-001.jpg
│ ├── banner-002.jpg
│ ├── banner-003.jpg
│ ├── banner-004.jpg
│ ├── banner-005.jpg
│ ├── banner-blur-bg.png
│ ├── douban-logo.png
│ └── loading.svg
├── components
│ ├── Footer.tsx
│ └── TopNav.tsx
├── config
│ └── index.ts
├── css
│ ├── Detail.css
│ ├── Home.css
│ ├── NotFound.css
│ └── Search.css
├── errors
│ └── NotFound.tsx
├── global.d.ts
├── index.css
├── index.tsx
├── logo.svg
├── pages
│ ├── Box.tsx
│ ├── Detail.tsx
│ ├── Home.tsx
│ └── Search.tsx
├── react-app-env.d.ts
├── router
│ ├── RouterView.tsx
│ └── config.ts
├── serviceWorker.ts
├── setupProxy.js
├── skeletons
│ ├── Detail.tsx
│ └── Home.tsx
├── store
│ └── index.ts
└── utils
│ └── index.ts
├── tsconfig.json
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8 # 编码格式
6 | end_of_line = lf # 换行符
7 | indent_size = 2 # 缩进大小
8 | indent_style = space # 缩进风格
9 | insert_final_newline = true # 是否使文件以一个空白行结尾
10 | max_line_length = 80 # 单行最大字符数
11 | trim_trailing_whitespace = true # 是否将行尾空格自动删除
12 |
13 | [*.md]
14 | max_line_length = 0
15 | trim_trailing_whitespace = false
16 |
17 | [COMMIT_EDITMSG]
18 | max_line_length = 0
19 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
4 | # JS files must always use LF for tools to work
5 | *.js eol=lf
6 |
7 | *.ts eol=lf
8 | *.tsx eol=lf
9 |
10 | *.tsx linguist-language=typescript
11 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_*
2 | *.log
3 | logs
4 | **/*.backup.*
5 | **/*.back.*
6 |
7 | node_modules
8 | bower_componets
9 |
10 | *.sublime*
11 |
12 | psd
13 | thumb
14 | sketch
15 |
16 |
17 | /build
18 | /server/build
19 | /src/api/mock.js
20 | dist
21 | tree.txt
22 |
--------------------------------------------------------------------------------
/.yarnrc:
--------------------------------------------------------------------------------
1 | registry "https://registry.npm.taobao.org/"
2 | sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
3 | electron_mirror "https://npm.taobao.org/mirrors/electron/"
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 杨帆
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## douban-movie-electron
2 |
3 |
4 |
5 |
6 | 
7 |
8 |
9 | 
12 | 
15 | 
18 |
19 |
20 | > 基于 Electron, React, React-router, Typescript 一款桌面豆瓣电影应用
21 |
22 | ---
23 |
24 |
25 |
26 | ### Start
27 |
28 | ```bash
29 | # install fe pkg
30 | $ yarn
31 | # preivew
32 | $ yarn electron-dev
33 | # build
34 | $ yarn build
35 | # pack
36 | $ yarn dist
37 |
38 | ```
39 |
40 |
41 | ### Preview
42 |
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 |
50 | ### Todo & Done
51 |
52 | #### 首页
53 |
54 | - [x] banner
55 | - [x] 历史记录
56 | - [x] 检索建议
57 | - [x] 正在热映
58 | - [x] 新片榜
59 | - [x] 北美票房榜
60 | - [x] 一周口碑榜
61 | - [x] Top250
62 | - [x] footer
63 |
64 | #### 电影详情页
65 |
66 | - [x] 电影评分、基本信息
67 | - [x] 剧照
68 | - [x] 预告片（点击打开播放虚拟页）
69 | - [x] 评论
70 | - [x] 热评
71 |
72 | #### 搜索详情页
73 |
74 | - [x] 搜索信息列表
75 |
76 |
77 | ### Tech
78 |
79 | - React(react-hooks)
80 | - React-router
81 | - Typescript
82 | ----
83 | - ant-design
84 | - react-lazy-load
85 | ----
86 | - axios
87 | - lodash
88 | ----
89 | - Koa
90 |
91 |
92 | ### MIT license
93 | Copyright (c) 2019 yangfan2016 <15234408101@163.com>
94 |
95 | Permission is hereby granted, free of charge, to any person obtaining a copy
96 | of this software and associated documentation files (the "Software"), to deal
97 | in the Software without restriction, including without limitation the rights
98 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99 | copies of the Software, and to permit persons to whom the Software is
100 | furnished to do so, subject to the following conditions:
101 |
102 | The above copyright notice and this permission notice shall be included in
103 | all copies or substantial portions of the Software.
104 |
105 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
106 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
107 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
108 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
109 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
110 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
111 | THE SOFTWARE.
112 |
113 | ---
114 | built upon love by [docor](https://github.com/turingou/docor.git) v0.3.0
115 |
--------------------------------------------------------------------------------
/app.config.js:
--------------------------------------------------------------------------------
1 | const PORT = 9876;
2 | const config = {
3 | server: {
4 | port: PORT,
5 | url: `http://localhost:${PORT}`,
6 | },
7 | };
8 | module.exports = config;
9 |
--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yangfan2016/douban-movie-electron/586b2f533eaf484565cb9379c0aada9e9fc83c75/assets/icon.png
--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yangfan2016/douban-movie-electron/586b2f533eaf484565cb9379c0aada9e9fc83c75/assets/logo.png
--------------------------------------------------------------------------------
/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/facebook/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/facebook/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 | const assetFilename = JSON.stringify(path.basename(filename));
11 |
12 | if (filename.match(/\.svg$/)) {
13 | return `const React = require('react');
14 | module.exports = {
15 | __esModule: true,
16 | default: ${assetFilename},
17 | ReactComponent: React.forwardRef((props, ref) => ({
18 | $$typeof: Symbol.for('react.element'),
19 | type: 'svg',
20 | ref: ref,
21 | key: null,
22 | props: Object.assign({}, props, {
23 | children: ${assetFilename}
24 | })
25 | })),
26 | };`;
27 | }
28 |
29 | return `module.exports = ${assetFilename};`;
30 | },
31 | };
32 |
--------------------------------------------------------------------------------
/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/facebook/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(inputPath, needsSlash) {
15 | const hasSlash = inputPath.endsWith('/');
16 | if (hasSlash && !needsSlash) {
17 | return inputPath.substr(0, inputPath.length - 1);
18 | } else if (!hasSlash && needsSlash) {
19 | return `${inputPath}/`;
20 | } else {
21 | return inputPath;
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
43 |
44 |
45 |