├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── polyfills.js
    ├── webpack.config.dev.js
    ├── webpack.config.prod.js
    └── webpackDevServer.config.js
├── images
    ├── 1.png
    ├── 2.png
    ├── 3.png
    ├── 4.png
    ├── 5.png
    └── 6.png
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── manifest.json
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
├── server
    ├── app.js
    ├── model
    │   └── model.js
    ├── routes
    │   ├── article.js
    │   ├── message.js
    │   ├── music.js
    │   └── user.js
    ├── upload
    │   ├── image-1519493311082.jpg
    │   ├── image-1520226979355.jpg
    │   ├── image-1520227864323.jpg
    │   ├── image-1520229547392.jpg
    │   ├── image-1520350000324.jpg
    │   ├── music-1520226984271.mp3
    │   ├── music-1520227879326.mp3
    │   └── music-1520229552446.mp3
    └── views
    │   └── index.ejs
└── src
    ├── Global.scss
    ├── actions
        └── actions.js
    ├── components
        ├── articleEditor
        │   ├── articleEditor.js
        │   └── articleEditor.scss
        ├── articlelist
        │   ├── articlelist.js
        │   └── articlelist.scss
        ├── articlepage
        │   ├── articlepage.js
        │   └── articlepage.scss
        ├── authRoute
        │   └── authRoute.js
        ├── categorylist
        │   ├── categoryList.scss
        │   └── categorylist.js
        ├── editArticleList
        │   ├── editArticleList.js
        │   └── editArticleList.scss
        ├── editMessageList
        │   ├── editMessageList.js
        │   └── editMessageList.scss
        ├── editMusicList
        │   ├── editMusicList.js
        │   └── editMusicList.scss
        ├── editUserPage
        │   ├── editUserPage.js
        │   └── editUserPage.scss
        ├── messagelist
        │   ├── messagelist.js
        │   └── messagelist.scss
        ├── messagepost
        │   ├── messagepost.js
        │   └── messagepost.scss
        ├── musicPlayer
        │   ├── musicPlayer.js
        │   └── musicPlayer.scss
        ├── navlist
        │   ├── navlist.js
        │   └── navlist.scss
        ├── uploadMusic
        │   ├── uploadMusic.js
        │   └── uploadMusic.scss
        └── userinfo
        │   ├── userinfo.js
        │   └── userinfo.scss
    ├── containers
        ├── admin
        │   ├── admin.js
        │   ├── admin.scss
        │   └── subpage
        │   │   ├── editArticle.js
        │   │   ├── editMessage.js
        │   │   ├── editMusic.js
        │   │   ├── editUser.js
        │   │   ├── postArticle.js
        │   │   └── updateArticle.js
        ├── blog
        │   ├── blog.js
        │   ├── blog.scss
        │   └── subpage
        │   │   ├── article.js
        │   │   └── blogindex.js
        ├── homepage
        │   ├── homepage.js
        │   └── homepage.scss
        ├── layout
        │   ├── layout.js
        │   └── layout.scss
        ├── message
        │   ├── message.js
        │   └── message.scss
        ├── music
        │   ├── music.js
        │   └── music.scss
        ├── register
        │   ├── register.js
        │   └── register.scss
        └── signin
        │   ├── signin.js
        │   └── signin.scss
    ├── index.js
    ├── logo.svg
    ├── reducers
        ├── article.js
        ├── message.js
        ├── music.js
        ├── reducers.js
        └── user.js
    ├── registerServiceWorker.js
    └── static
        ├── font
            ├── demo.css
            ├── demo_fontclass.html
            ├── demo_symbol.html
            ├── demo_unicode.html
            ├── iconfont.css
            ├── iconfont.eot
            ├── iconfont.js
            ├── iconfont.svg
            ├── iconfont.ttf
            └── iconfont.woff
        ├── images
            ├── avatar.jpg
            ├── blog-bg.png
            └── wrap-bg.png
        └── music
            └── 山丘.mp3


/README.md:
--------------------------------------------------------------------------------
 1 | 一款前后端分离，单页面的个人博客
 2 | ====
 3 | 所用技术栈
 4 | ------
 5 | 前端用React技术栈，React + Redux + React-Router， 
 6 | 前端后台管理界面antd， 
 7 | CSS预处理器用了Sass， 
 8 | 前后端数据传输用axios库， 
 9 | 后端用Node,express框架，数据库MongoDB。 
10 | 
11 | 简述
12 | ------
13 | 第一次从界面设计排版，到前后端编程，到部署上线都独立完成的一个项目（还在等域名备案。。。）
14 | 
15 | 写这个博客，一是想给自己平常所学的东西有个应用发挥的地方。二是平常可以给自己的学习有个记录备忘的地方。
16 | 
17 | 启动
18 | ------
19 | npm i
20 | 
21 | 后端启动: node server/app.js
22 | 
23 | 前端启动: npm start
24 | 
25 | 界面展示
26 | ------
27 | ![Alt text](https://github.com/jayo409/react-blog/blob/master/images/1.png)
28 | ![Alt text](https://github.com/jayo409/react-blog/blob/master/images/2.png)
29 | ![Alt text](https://github.com/jayo409/react-blog/blob/master/images/3.png)
30 | ![Alt text](https://github.com/jayo409/react-blog/blob/master/images/4.png)
31 | ![Alt text](https://github.com/jayo409/react-blog/blob/master/images/5.png)
32 | ![Alt text](https://github.com/jayo409/react-blog/blob/master/images/6.png)
33 | 


--------------------------------------------------------------------------------
/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.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce((env, key) => {
82 |       env[key] = JSON.stringify(raw[key]);
83 |       return env;
84 |     }, {}),
85 |   };
86 | 
87 |   return { raw, stringified };
88 | }
89 | 
90 | module.exports = getClientEnvironment;
91 | 


--------------------------------------------------------------------------------
/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/tutorial-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/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/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 <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 |           // "postcss" loader applies autoprefixer to our CSS.
155 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
156 |           // "style" loader turns CSS into JS modules that inject <style> tags.
157 |           // In production, we use a plugin to extract that CSS to a file, but
158 |           // in development "style" loader enables hot editing of CSS.
159 |           {
160 |             test: /\.css$/,
161 |             use: [
162 |               require.resolve('style-loader'),
163 |               {
164 |                 loader: require.resolve('css-loader'),
165 |                 options: {
166 |                   importLoaders: 1,
167 |                 
168 |                 },
169 |               },
170 |               {
171 |                 loader: require.resolve('postcss-loader'),
172 |                 options: {
173 |                   // Necessary for external CSS imports to work
174 |                   // https://github.com/facebookincubator/create-react-app/issues/2677
175 |                   ident: 'postcss',
176 |                   plugins: () => [
177 |                     require('postcss-flexbugs-fixes'),
178 |                     autoprefixer({
179 |                       browsers: [
180 |                         '>1%',
181 |                         'last 4 versions',
182 |                         'Firefox ESR',
183 |                         'not ie < 9', // React doesn't support IE8 anyway
184 |                       ],
185 |                       flexbox: 'no-2009',
186 |                     }),
187 |                   ],
188 |                 },
189 |               },
190 |             ],
191 |      
192 |           },
193 |           {
194 |             test: /\.scss$/,
195 |             loaders: ['style-loader', 'css-loader', 'sass-loader'],
196 |     
197 |           },
198 |           // "file" loader makes sure those assets get served by WebpackDevServer.
199 |           // When you `import` an asset, you get its (virtual) filename.
200 |           // In production, they would get copied to the `build` folder.
201 |           // This loader doesn't use a "test" so it will catch all modules
202 |           // that fall through the other loaders.
203 |           {
204 |             // Exclude `js` files to keep "css" loader working as it injects
205 |             // it's runtime that would otherwise processed through "file" loader.
206 |             // Also exclude `html` and `json` extensions so they get processed
207 |             // by webpacks internal loaders.
208 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
209 |             loader: require.resolve('file-loader'),
210 |             options: {
211 |               name: 'static/media/[name].[hash:8].[ext]',
212 |             },
213 |           },
214 |         ],
215 |       },
216 |       // ** STOP ** Are you adding a new loader?
217 |       // Make sure to add the new loader(s) before the "file" loader.
218 |     ],
219 |   },
220 |   plugins: [
221 |     // Makes some environment variables available in index.html.
222 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
223 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
224 |     // In development, this will be an empty string.
225 |     new InterpolateHtmlPlugin(env.raw),
226 |     // Generates an `index.html` file with the <script> injected.
227 |     new HtmlWebpackPlugin({
228 |       inject: true,
229 |       template: paths.appHtml,
230 |     }),
231 |     // Add module names to factory functions so they appear in browser profiler.
232 |     new webpack.NamedModulesPlugin(),
233 |     // Makes some environment variables available to the JS code, for example:
234 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
235 |     new webpack.DefinePlugin(env.stringified),
236 |     // This is necessary to emit hot updates (currently CSS only):
237 |     new webpack.HotModuleReplacementPlugin(),
238 |     // Watcher doesn't work well if you mistype casing in a path so we use
239 |     // a plugin that prints an error when you attempt to do this.
240 |     // See https://github.com/facebookincubator/create-react-app/issues/240
241 |     new CaseSensitivePathsPlugin(),
242 |     // If you require a missing module and then `npm install` it, you still have
243 |     // to restart the development server for Webpack to discover it. This plugin
244 |     // makes the discovery automatic so you don't have to restart.
245 |     // See https://github.com/facebookincubator/create-react-app/issues/186
246 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
247 |     // Moment.js is an extremely popular library that bundles large locale files
248 |     // by default due to how Webpack interprets its code. This is a practical
249 |     // solution that requires the user to opt into importing specific locales.
250 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
251 |     // You can remove this if you don't use Moment.js:
252 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
253 |   ],
254 |   // Some libraries import Node modules but don't use them in the browser.
255 |   // Tell Webpack to provide empty mocks for them so importing them works.
256 |   node: {
257 |     dgram: 'empty',
258 |     fs: 'empty',
259 |     net: 'empty',
260 |     tls: 'empty',
261 |     child_process: 'empty',
262 |   },
263 |   // Turn off performance hints during development because we don't do any
264 |   // splitting or minification in interest of speed. These warnings become
265 |   // cumbersome.
266 |   performance: {
267 |     hints: false,
268 |   },
269 | };
270 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.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 ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 | const ManifestPlugin = require('webpack-manifest-plugin');
  9 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 10 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 11 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const paths = require('./paths');
 14 | const getClientEnvironment = require('./env');
 15 | 
 16 | // Webpack uses `publicPath` to determine where the app is being served from.
 17 | // It requires a trailing slash, or the file assets will get an incorrect path.
 18 | const publicPath = paths.servedPath;
 19 | // Some apps do not use client-side routing with pushState.
 20 | // For these, "homepage" can be set to "." to enable relative asset paths.
 21 | const shouldUseRelativeAssetPaths = publicPath === './';
 22 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 23 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 24 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 25 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 26 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 27 | const publicUrl = publicPath.slice(0, -1);
 28 | // Get environment variables to inject into our app.
 29 | const env = getClientEnvironment(publicUrl);
 30 | 
 31 | // Assert this just to be safe.
 32 | // Development builds of React are slow and not intended for production.
 33 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 34 |   throw new Error('Production builds must have NODE_ENV=production.');
 35 | }
 36 | 
 37 | // Note: defined here because it will be used more than once.
 38 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 39 | 
 40 | // ExtractTextPlugin expects the build output to be flat.
 41 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 42 | // However, our output is structured with css, js and media folders.
 43 | // To have this structure working with relative paths, we have to use custom options.
 44 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 45 |   ? // Making sure that the publicPath goes back to to build folder.
 46 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 47 |   : {};
 48 | 
 49 | // This is the production configuration.
 50 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 51 | // The development configuration is different and lives in a separate file.
 52 | module.exports = {
 53 |   // Don't attempt to continue if there are any errors.
 54 |   bail: true,
 55 |   // We generate sourcemaps in production. This is slow but gives good results.
 56 |   // You can exclude the *.map files from the build during deployment.
 57 |   devtool: shouldUseSourceMap ? 'source-map' : false,
 58 |   // In production, we only want to load the polyfills and the app code.
 59 |   entry: [require.resolve('./polyfills'), paths.appIndexJs],
 60 |   output: {
 61 |     // The build folder.
 62 |     path: paths.appBuild,
 63 |     // Generated JS file names (with nested folders).
 64 |     // There will be one main bundle, and one file per asynchronous chunk.
 65 |     // We don't currently advertise code splitting but Webpack supports it.
 66 |     filename: 'static/js/[name].[chunkhash:8].js',
 67 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 68 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 69 |     publicPath: publicPath,
 70 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 71 |     devtoolModuleFilenameTemplate: info =>
 72 |       path
 73 |         .relative(paths.appSrc, info.absoluteResourcePath)
 74 |         .replace(/\\/g, '/'),
 75 |   },
 76 |   resolve: {
 77 |     // This allows you to set a fallback for where Webpack should look for modules.
 78 |     // We placed these paths second because we want `node_modules` to "win"
 79 |     // if there are any conflicts. This matches Node resolution mechanism.
 80 |     // https://github.com/facebookincubator/create-react-app/issues/253
 81 |     modules: ['node_modules', paths.appNodeModules].concat(
 82 |       // It is guaranteed to exist because we tweak it in `env.js`
 83 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 84 |     ),
 85 |     // These are the reasonable defaults supported by the Node ecosystem.
 86 |     // We also include JSX as a common component filename extension to support
 87 |     // some tools, although we do not recommend using it, see:
 88 |     // https://github.com/facebookincubator/create-react-app/issues/290
 89 |     // `web` extension prefixes have been added for better support
 90 |     // for React Native Web.
 91 |     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
 92 |     alias: {
 93 |       
 94 |       // Support React Native Web
 95 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 96 |       'react-native': 'react-native-web',
 97 |     },
 98 |     plugins: [
 99 |       // Prevents users from importing files from outside of src/ (or node_modules/).
100 |       // This often causes confusion because we only process files within src/ with babel.
101 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
102 |       // please link the files into your node_modules/ and let module-resolution kick in.
103 |       // Make sure your source files are compiled, as they will not be processed in any way.
104 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
105 |     ],
106 |   },
107 |   module: {
108 |     strictExportPresence: true,
109 |     rules: [
110 |       // TODO: Disable require.ensure as it's not a standard language feature.
111 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
112 |       // { parser: { requireEnsure: false } },
113 | 
114 |       // First, run the linter.
115 |       // It's important to do this before Babel processes the JS.
116 |       {
117 |         test: /\.(js|jsx|mjs)$/,
118 |         enforce: 'pre',
119 |         use: [
120 |           {
121 |             options: {
122 |               formatter: eslintFormatter,
123 |               eslintPath: require.resolve('eslint'),
124 |               
125 |             },
126 |             loader: require.resolve('eslint-loader'),
127 |           },
128 |         ],
129 |         include: paths.appSrc,
130 |       },
131 |       {
132 |         // "oneOf" will traverse all following loaders until one will
133 |         // match the requirements. When no loader matches it will fall
134 |         // back to the "file" loader at the end of the loader list.
135 |         oneOf: [
136 |           // "url" loader works just like "file" loader but it also embeds
137 |           // assets smaller than specified size as data URLs to avoid requests.
138 |           {
139 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
140 |             loader: require.resolve('url-loader'),
141 |             options: {
142 |               limit: 10000,
143 |               name: 'static/media/[name].[hash:8].[ext]',
144 |             },
145 |           },
146 |           // Process JS with Babel.
147 |           {
148 |             test: /\.(js|jsx|mjs)$/,
149 |             include: paths.appSrc,
150 |             loader: require.resolve('babel-loader'),
151 |             options: {
152 |               
153 |               compact: true,
154 |             },
155 |           },
156 |           // The notation here is somewhat confusing.
157 |           // "postcss" loader applies autoprefixer to our CSS.
158 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
159 |           // "style" loader normally turns CSS into JS modules injecting <style>,
160 |           // but unlike in development configuration, we do something different.
161 |           // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
162 |           // (second argument), then grabs the result CSS and puts it into a
163 |           // separate file in our build process. This way we actually ship
164 |           // a single CSS file in production instead of JS code injecting <style>
165 |           // tags. If you use code splitting, however, any async bundles will still
166 |           // use the "style" loader inside the async code so CSS from them won't be
167 |           // in the main CSS file.
168 |           {
169 |             test: /\.css$/,
170 |             loader: ExtractTextPlugin.extract(
171 |               Object.assign(
172 |                 {
173 |                   fallback: {
174 |                     loader: require.resolve('style-loader'),
175 |                     options: {
176 |                       hmr: false,
177 |                     },
178 |                   },
179 |                   use: [
180 |                     {
181 |                       loader: require.resolve('css-loader'),
182 |                       options: {
183 |                         importLoaders: 1,
184 |                         minimize: true,
185 |                         sourceMap: shouldUseSourceMap,
186 |                       },
187 |                     },
188 |                     {
189 |                       loader: require.resolve('postcss-loader'),
190 |                       options: {
191 |                         // Necessary for external CSS imports to work
192 |                         // https://github.com/facebookincubator/create-react-app/issues/2677
193 |                         ident: 'postcss',
194 |                         plugins: () => [
195 |                           require('postcss-flexbugs-fixes'),
196 |                           autoprefixer({
197 |                             browsers: [
198 |                               '>1%',
199 |                               'last 4 versions',
200 |                               'Firefox ESR',
201 |                               'not ie < 9', // React doesn't support IE8 anyway
202 |                             ],
203 |                             flexbox: 'no-2009',
204 |                           }),
205 |                         ],
206 |                       },
207 |                     },
208 |                   ],
209 |                 },
210 |                 extractTextPluginOptions
211 |               )
212 |             ),
213 |             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
214 |           },
215 |           // "file" loader makes sure assets end up in the `build` folder.
216 |           // When you `import` an asset, you get its filename.
217 |           // This loader doesn't use a "test" so it will catch all modules
218 |           // that fall through the other loaders.
219 |           {
220 |             loader: require.resolve('file-loader'),
221 |             // Exclude `js` files to keep "css" loader working as it injects
222 |             // it's runtime that would otherwise processed through "file" loader.
223 |             // Also exclude `html` and `json` extensions so they get processed
224 |             // by webpacks internal loaders.
225 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
226 |             options: {
227 |               name: 'static/media/[name].[hash:8].[ext]',
228 |             },
229 |           },
230 |           // ** STOP ** Are you adding a new loader?
231 |           // Make sure to add the new loader(s) before the "file" loader.
232 |         ],
233 |       },
234 |     ],
235 |   },
236 |   plugins: [
237 |     // Makes some environment variables available in index.html.
238 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
239 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
240 |     // In production, it will be an empty string unless you specify "homepage"
241 |     // in `package.json`, in which case it will be the pathname of that URL.
242 |     new InterpolateHtmlPlugin(env.raw),
243 |     // Generates an `index.html` file with the <script> injected.
244 |     new HtmlWebpackPlugin({
245 |       inject: true,
246 |       template: paths.appHtml,
247 |       minify: {
248 |         removeComments: true,
249 |         collapseWhitespace: true,
250 |         removeRedundantAttributes: true,
251 |         useShortDoctype: true,
252 |         removeEmptyAttributes: true,
253 |         removeStyleLinkTypeAttributes: true,
254 |         keepClosingSlash: true,
255 |         minifyJS: true,
256 |         minifyCSS: true,
257 |         minifyURLs: true,
258 |       },
259 |     }),
260 |     // Makes some environment variables available to the JS code, for example:
261 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
262 |     // It is absolutely essential that NODE_ENV was set to production here.
263 |     // Otherwise React will be compiled in the very slow development mode.
264 |     new webpack.DefinePlugin(env.stringified),
265 |     // Minify the code.
266 |     new webpack.optimize.UglifyJsPlugin({
267 |       compress: {
268 |         warnings: false,
269 |         // Disabled because of an issue with Uglify breaking seemingly valid code:
270 |         // https://github.com/facebookincubator/create-react-app/issues/2376
271 |         // Pending further investigation:
272 |         // https://github.com/mishoo/UglifyJS2/issues/2011
273 |         comparisons: false,
274 |       },
275 |       mangle: {
276 |         safari10: true,
277 |       },        
278 |       output: {
279 |         comments: false,
280 |         // Turned on because emoji and regex is not minified properly using default
281 |         // https://github.com/facebookincubator/create-react-app/issues/2488
282 |         ascii_only: true,
283 |       },
284 |       sourceMap: shouldUseSourceMap,
285 |     }),
286 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
287 |     new ExtractTextPlugin({
288 |       filename: cssFilename,
289 |     }),
290 |     // Generate a manifest file which contains a mapping of all asset filenames
291 |     // to their corresponding output file so that tools can pick it up without
292 |     // having to parse `index.html`.
293 |     new ManifestPlugin({
294 |       fileName: 'asset-manifest.json',
295 |     }),
296 |     // Generate a service worker script that will precache, and keep up to date,
297 |     // the HTML & assets that are part of the Webpack build.
298 |     new SWPrecacheWebpackPlugin({
299 |       // By default, a cache-busting query parameter is appended to requests
300 |       // used to populate the caches, to ensure the responses are fresh.
301 |       // If a URL is already hashed by Webpack, then there is no concern
302 |       // about it being stale, and the cache-busting can be skipped.
303 |       dontCacheBustUrlsMatching: /\.\w{8}\./,
304 |       filename: 'service-worker.js',
305 |       logger(message) {
306 |         if (message.indexOf('Total precache size is') === 0) {
307 |           // This message occurs for every build and is a bit too noisy.
308 |           return;
309 |         }
310 |         if (message.indexOf('Skipping static resource') === 0) {
311 |           // This message obscures real errors so we ignore it.
312 |           // https://github.com/facebookincubator/create-react-app/issues/2612
313 |           return;
314 |         }
315 |         console.log(message);
316 |       },
317 |       minify: true,
318 |       // For unknown URLs, fallback to the index page
319 |       navigateFallback: publicUrl + '/index.html',
320 |       // Ignores URLs starting from /__ (useful for Firebase):
321 |       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
322 |       navigateFallbackWhitelist: [/^(?!\/__).*/],
323 |       // Don't precache sourcemaps (they're large) and build asset manifest:
324 |       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
325 |     }),
326 |     // Moment.js is an extremely popular library that bundles large locale files
327 |     // by default due to how Webpack interprets its code. This is a practical
328 |     // solution that requires the user to opt into importing specific locales.
329 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
330 |     // You can remove this if you don't use Moment.js:
331 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
332 |   ],
333 |   // Some libraries import Node modules but don't use them in the browser.
334 |   // Tell Webpack to provide empty mocks for them so importing them works.
335 |   node: {
336 |     dgram: 'empty',
337 |     fs: 'empty',
338 |     net: 'empty',
339 |     tls: 'empty',
340 |     child_process: 'empty',
341 |   },
342 | };
343 | 


--------------------------------------------------------------------------------
/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 path = require('path');
  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 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 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: new RegExp(
 72 |         `^(?!${path
 73 |           .normalize(paths.appSrc + '/')
 74 |           .replace(/[\\]+/g, '\\\\')}).+[\\\\/]node_modules[\\\\/]`,
 75 |         'g'
 76 |       ),
 77 |     },
 78 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 79 |     https: protocol === 'https',
 80 |     host: host,
 81 |     overlay: false,
 82 |     historyApiFallback: {
 83 |       // Paths with dots should still use the history fallback.
 84 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
 85 |       disableDotRule: true,
 86 |     },
 87 |     public: allowedHost,
 88 |     proxy,
 89 |     before(app) {
 90 |       // This lets us open files from the runtime error overlay.
 91 |       app.use(errorOverlayMiddleware());
 92 |       // This service worker file is effectively a 'no-op' that will reset any
 93 |       // previous service worker registered for the same host:port combination.
 94 |       // We do this in development to avoid hitting the production cache if
 95 |       // it used the same host and port.
 96 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
 97 |       app.use(noopServiceWorkerMiddleware());
 98 |     },
 99 |   };
100 | };
101 | 


--------------------------------------------------------------------------------
/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/images/1.png


--------------------------------------------------------------------------------
/images/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/images/2.png


--------------------------------------------------------------------------------
/images/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/images/3.png


--------------------------------------------------------------------------------
/images/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/images/4.png


--------------------------------------------------------------------------------
/images/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/images/5.png


--------------------------------------------------------------------------------
/images/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/images/6.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "myBlog",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "antd": "^3.0.3",
  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.0",
 14 |     "babel-runtime": "6.26.0",
 15 |     "body-parser": "^1.18.2",
 16 |     "braft-editor": "^1.4.3",
 17 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
 18 |     "chalk": "1.1.3",
 19 |     "cookie-parser": "^1.4.3",
 20 |     "cookies": "^0.7.1",
 21 |     "css-loader": "0.28.7",
 22 |     "dotenv": "4.0.0",
 23 |     "ejs": "^2.5.7",
 24 |     "eslint": "4.10.0",
 25 |     "eslint-config-react-app": "^2.0.1",
 26 |     "eslint-loader": "1.9.0",
 27 |     "eslint-plugin-flowtype": "2.39.1",
 28 |     "eslint-plugin-import": "2.8.0",
 29 |     "eslint-plugin-jsx-a11y": "5.1.1",
 30 |     "eslint-plugin-react": "7.4.0",
 31 |     "express": "^4.16.2",
 32 |     "extract-text-webpack-plugin": "3.0.2",
 33 |     "file-loader": "1.1.5",
 34 |     "fs-extra": "3.0.1",
 35 |     "html-webpack-plugin": "2.29.0",
 36 |     "jest": "20.0.4",
 37 |     "md5": "^2.2.1",
 38 |     "mongoose": "^4.13.7",
 39 |     "multer": "^1.3.0",
 40 |     "node-sass": "^4.7.2",
 41 |     "object-assign": "4.1.1",
 42 |     "postcss-flexbugs-fixes": "3.2.0",
 43 |     "postcss-loader": "2.0.8",
 44 |     "promise": "8.0.1",
 45 |     "raf": "3.4.0",
 46 |     "react": "^16.2.0",
 47 |     "react-dev-utils": "^4.2.1",
 48 |     "react-dom": "^16.2.0",
 49 |     "react-redux": "^5.0.6",
 50 |     "react-router-dom": "^4.2.2",
 51 |     "redux": "^3.7.2",
 52 |     "redux-thunk": "^2.2.0",
 53 |     "sass": "^1.0.0-beta.4",
 54 |     "sass-loader": "^6.0.6",
 55 |     "style-loader": "0.19.0",
 56 |     "sw-precache-webpack-plugin": "0.11.4",
 57 |     "url-loader": "0.6.2",
 58 |     "webpack": "3.8.1",
 59 |     "webpack-dev-server": "2.9.4",
 60 |     "webpack-manifest-plugin": "1.3.2",
 61 |     "whatwg-fetch": "2.0.3"
 62 |   },
 63 |   "scripts": {
 64 |     "start": "node scripts/start.js",
 65 |     "build": "node scripts/build.js",
 66 |     "test": "node scripts/test.js --env=jsdom"
 67 |   },
 68 |   "jest": {
 69 |     "collectCoverageFrom": [
 70 |       "src/**/*.{js,jsx,mjs}"
 71 |     ],
 72 |     "setupFiles": [
 73 |       "<rootDir>/config/polyfills.js"
 74 |     ],
 75 |     "testMatch": [
 76 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
 77 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
 78 |     ],
 79 |     "testEnvironment": "node",
 80 |     "testURL": "http://localhost",
 81 |     "transform": {
 82 |       "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
 83 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 84 |       "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 85 |     },
 86 |     "transformIgnorePatterns": [
 87 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
 88 |     ],
 89 |     "moduleNameMapper": {
 90 |       "^react-native$": "react-native-web"
 91 |     },
 92 |     "moduleFileExtensions": [
 93 |       "web.js",
 94 |       "mjs",
 95 |       "js",
 96 |       "json",
 97 |       "web.jsx",
 98 |       "jsx",
 99 |       "node"
100 |     ]
101 |   },
102 |   "babel": {
103 |     "presets": [
104 |       "react-app"
105 |     ]
106 |   },
107 |   "eslintConfig": {
108 |     "extends": "react-app"
109 |   },
110 |   "proxy": "http://localhost:8082",
111 |   "devDependencies": {
112 |     "supervisor": "^0.12.0"
113 |   }
114 | }
115 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>吴加勇 -个人博客</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/server/app.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const app = express();
 3 | 
 4 | const bodyParser = require('body-parser');
 5 | const cookieParser = require('cookie-parser');
 6 | 
 7 | const userRouter = require('./routes/user');
 8 | const articleRouter = require('./routes/article');
 9 | const messageRouter = require('./routes/message');
10 | const musicRouter = require('./routes/music');
11 | 
12 | app.use( bodyParser.json() );
13 | app.use( '/server', express.static( __dirname ) );
14 | app.use(cookieParser())
15 | 
16 | app.use('/user', userRouter);
17 | app.use('/article', articleRouter);
18 | app.use('/message', messageRouter);
19 | app.use('/music', musicRouter);
20 | 
21 | app.listen(8082)


--------------------------------------------------------------------------------
/server/model/model.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose');
 2 | const DB_URL = 'mongodb://localhost:27017/react-blog';
 3 | mongoose.Promise = global.Promise;
 4 | mongoose.connect(DB_URL,{useMongoClient:true});
 5 | 
 6 | const models = {
 7 | 	user: {
 8 | 		account:  { type: String, 'require': true },
 9 | 		username: { type: String, 'require': true },
10 | 		password: { type: String, 'require': true },
11 | 		avatar: { type: String, 'require': true }
12 | 	},
13 | 	article: {
14 | 		title:{ type: String, },
15 | 		date:{ type: String, },
16 | 		category: { type: String },
17 | 		abstract:{ type: String },
18 | 		content:{ type: String }
19 | 	},
20 | 	message: {
21 | 		username: { type: String },
22 | 		date: { type: String },
23 | 		contact: { type: String },
24 | 		content: { type: String }
25 | 	},
26 | 	music: {
27 | 		title: { type: String },
28 | 		author: { type: String },
29 | 		cover: { type: String }, 
30 | 		content: { type: String }
31 | 	}
32 | }
33 | 
34 | for( let m in models){
35 | 	mongoose.model( m, new mongoose.Schema(models[m]) );
36 | }
37 | 
38 | module.exports = {
39 | 	getModel: function( name ){
40 | 		return mongoose.model(name);
41 | 	}
42 | }


--------------------------------------------------------------------------------
/server/routes/article.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const Router = express.Router();
 3 | const model = require('../model/model');
 4 | const Article = model.getModel('article') ;
 5 | const multer = require('multer');
 6 | const domain = 'http://localhost:8082';
 7 | const storage = multer.diskStorage({
 8 | 	destination: function (req, file, cb) {
 9 | 		cb(null,  'server/upload/')
10 | 	},
11 | 	filename: function (req, file, cb) {
12 | 		var fileFormat = (file.originalname).split(".");
13 | 		cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
14 | 	}
15 | });
16 | const upload = multer({
17 | 	storage: storage
18 | });
19 | 
20 | Router.post('/postArticle', ( req, res) => {
21 | 	const { title, content, category, abstract } = req.body;
22 | 	const  myDate= new Date();
23 | 	const  date = `${myDate.getFullYear()}-${myDate.getMonth()+1}-${myDate.getDate()}`;
24 | 	const articleModel = new Article({title, content, date, category, abstract});
25 | 	articleModel.save( (err,doc) =>{
26 | 		if(!err){
27 | 			Article.find( (e,d) =>{
28 | 				if( !e ){
29 | 					return res.json({code: 1, data: d})
30 | 				}
31 | 			})
32 | 		}
33 | 	});
34 | })
35 | 
36 | Router.post('/uploadImg', upload.single('image'), (req, res) => {
37 | 	const imageURL = `${domain}/server/upload/${req.file.filename}`;
38 | 	return res.json({code: 1, URL: imageURL})
39 | })
40 | 
41 | 
42 | Router.post('/initArticleList', ( req, res ) =>{
43 | 	const { category } = req.body;
44 | 
45 | 	if( category === '全部' ){
46 | 		Article.find( (e, d) =>{
47 | 			if( !e ){
48 | 				return res.json({data: d})
49 | 			}
50 | 		})
51 | 	} else {
52 | 		Article.find({ category }, (e, d) =>{
53 | 			if( !e ){
54 | 				return res.json({data: d})
55 | 			}
56 | 		})	
57 | 	}
58 | })
59 | 
60 | Router.post('/updateArticle', (req, res ) =>{
61 | 	const { title, abstract, category, content, _id } = req.body;
62 | 	Article.update({_id}, {title, abstract, category, content}, (e,d) =>{
63 | 		if(!e){
64 | 			return res.json({code: 1})
65 | 		}
66 | 	})
67 | })
68 | 
69 | Router.post('/delArticle', (req, res) =>{
70 | 	const { id } = req.body;
71 | 
72 | 	Article.remove( {_id : id}, ( e, d ) =>{
73 | 		if(!e){
74 | 			return res.json({code: 1})
75 | 		}
76 | 	})
77 | })
78 | 
79 | module.exports = Router


--------------------------------------------------------------------------------
/server/routes/message.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const Router = express.Router();
 3 | const model = require('../model/model');
 4 | const Message = model.getModel('message') ;
 5 | 
 6 | Router.post('/postMessage', (req, res) =>{
 7 | 	const { username, contact, content } = req.body;
 8 | 	const myDate= new Date();
 9 | 	const date = `${myDate.getFullYear()}-${myDate.getMonth()+1}-${myDate.getDate()} ${myDate.getHours()}:${myDate.getMinutes()}:${myDate.getSeconds()}`;
10 | 	const messageModel = new Message({ username, contact, content, date });
11 | 	messageModel.save( (err, doc) =>{
12 | 		if( !err ){
13 | 			return res.json({code: 0});
14 | 		}
15 | 	})
16 | })
17 | 
18 | Router.get('/initMessage', (req, res) =>{
19 | 	Message.find( (err, doc) =>{
20 | 		if( !err ){
21 | 			return res.json({code: 0, data: doc})
22 | 		}
23 | 	})
24 | })
25 | 
26 | Router.post('/delMessage', (req, res) =>{
27 | 	const { id } = req.body;
28 | 	Message.remove( { _id: id }, ( err, doc ) =>{
29 | 		if( !err){
30 | 			return res.json({ code: 0 })
31 | 		}
32 | 	})
33 | })
34 | 
35 | module.exports = Router


--------------------------------------------------------------------------------
/server/routes/music.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const Router = express.Router();
 3 | const model = require('../model/model');
 4 | const Music = model.getModel('music') ;
 5 | const multer = require('multer');
 6 | const domain = 'http://localhost:8082';
 7 | const storage = multer.diskStorage({
 8 | 	destination: function (req, file, cb) {
 9 | 		cb(null,  'server/upload/')
10 | 	},
11 | 	filename: function (req, file, cb) {
12 | 		var fileFormat = (file.originalname).split(".");
13 | 		cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
14 | 	}
15 | });
16 | const upload = multer({
17 | 	storage: storage
18 | });
19 | 
20 | Router.get('/initMusic', (req, res) =>{
21 | 	Music.find( (err, doc) =>{
22 | 		if( !err ){
23 | 			return res.json({code: 0, data: doc})
24 | 		}
25 | 	})
26 | })
27 | 
28 | Router.post('/addMusic', (req, res) =>{
29 | 	const { title, author, cover, content } = req.body;
30 | 	const musicModel = new Music({ title, author, cover, content });
31 | 	musicModel.save( (err, doc) =>{
32 | 		if( !err ){
33 | 			return res.json({ code: 0 })
34 | 		}
35 | 	})
36 | })
37 | 
38 | Router.post('/uploadImg', upload.single('image'), (req, res) => {
39 | 	const imageURL = `${domain}/server/upload/${req.file.filename}`;
40 | 	return res.json({code: 1, URL: imageURL})
41 | })
42 | 
43 | Router.post('/uploadMusic', upload.single('music'), (req, res) => {
44 | 	const musicURL = `${domain}/server/upload/${req.file.filename}`;
45 | 	return res.json({code: 0, URL: musicURL})
46 | })
47 | 
48 | Router.post('/delMusic', (req, res) =>{
49 | 	const { id } = req.body;
50 | 	Music.remove( {_id : id}, ( e, d ) =>{
51 | 		if(!e){
52 | 			return res.json({ code: 0 })
53 | 		}
54 | 	})
55 | })
56 | 
57 | module.exports = Router


--------------------------------------------------------------------------------
/server/routes/user.js:
--------------------------------------------------------------------------------
  1 | const express = require('express');
  2 | const md5 = require('md5');
  3 | const Router = express.Router();
  4 | const model = require('../model/model');
  5 | const multer = require('multer');
  6 | const User = model.getModel('user');
  7 | const domain = 'http://localhost:8082';
  8 | const storage = multer.diskStorage({
  9 | 	destination: function (req, file, cb) {
 10 | 		cb(null,  'server/upload/')
 11 | 	},
 12 | 	filename: function (req, file, cb) {
 13 | 		var fileFormat = (file.originalname).split(".");
 14 | 		cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
 15 | 	}
 16 | });
 17 | const upload = multer({
 18 | 	storage: storage
 19 | });
 20 | 
 21 | 
 22 | Router.post('/register', ( req, res ) =>{
 23 | 	const { account, password } = req.body;
 24 | 	User.findOne({account}, (err, doc) =>{
 25 | 		if( doc ){
 26 | 			return res.json('用户名重复!');
 27 | 		}
 28 | 		const pwd = md5(md5(password));
 29 | 		const userModel = new User({ account, password: pwd });
 30 | 		userModel.save((e,d)=>{
 31 | 			res.cookie('userid', d._id);
 32 | 			return res.json({code: 0, data: d})
 33 | 		});
 34 | 	})
 35 | })
 36 | 
 37 | Router.post('/signin', ( req, res )=>{
 38 | 	const { account, password } = req.body;
 39 | 	const pwd = md5(md5(password));
 40 | 	User.findOne({account, password: pwd}, (err, doc)=>{
 41 | 		if( !doc ){
 42 | 			return res.json('账号或密码错误!');
 43 | 		}
 44 | 		res.cookie('userid', doc._id);
 45 | 		return res.json({code: 0, data: doc});
 46 | 	})
 47 | })
 48 | 
 49 | Router.get('/info', ( req, res )=>{
 50 | 	const { userid } = req.cookies;
 51 | 	if( !userid ){
 52 | 		return res.json({code: 1});
 53 | 	}
 54 | 	User.findOne({_id: userid}, (err, doc)=>{
 55 | 		if( !err ){
 56 | 			res.json({code: 0, data:doc})
 57 | 		}
 58 | 	})
 59 | })
 60 | 
 61 | Router.get('/blogInfo', ( req, res ) =>{
 62 | 	User.findOne( {account: 'jayo409'}, (err, doc) =>{
 63 | 		if( doc ){
 64 | 
 65 | 			res.json({code: 0, data: doc});
 66 | 		}
 67 | 	})
 68 | })
 69 | 
 70 | Router.post('/uploadImg', upload.single('image'), (req, res) => {
 71 | 	const imageURL = `${domain}/server/upload/${req.file.filename}`;
 72 | 	return res.json({code: 1, URL: imageURL})
 73 | })
 74 | 
 75 | Router.post('/updatePwd', (req, res) =>{
 76 | 	const { oldpassword, newpassword } = req.body;
 77 | 	const { userid } = req.cookies;
 78 | 	User.findOne({ _id: userid }, (err, doc) =>{
 79 | 		if(!err){	
 80 | 			if( md5(md5(oldpassword)) === doc.password ){
 81 | 				User.update({_id: userid}, { password: newpassword }, (e,d) =>{
 82 | 					if( !e ){
 83 | 						return res.json({code: 0})
 84 | 					}
 85 | 					
 86 | 				})
 87 | 			} else {
 88 | 				return res.json({ code: 1})			
 89 | 			}		
 90 | 		}
 91 | 	})
 92 | })
 93 | 
 94 | Router.post('/updateusername', (req, res) =>{
 95 | 	const { value } = req.body;
 96 | 	const { userid } = req.cookies;
 97 | 	User.update({ _id: userid}, { username: value }, (e, d) =>{
 98 | 		if( !e ){
 99 | 			return res.json({ code: 0})
100 | 		}
101 | 	})
102 | })
103 | 
104 | Router.post('/updateavatar', (req, res) =>{
105 | 	const { value } = req.body;
106 | 	const { userid } = req.cookies;
107 | 	
108 | 	User.update({ _id: userid}, { avatar: value }, (e, d) =>{
109 | 		if( !e ){
110 | 			return res.json({ code: 0})
111 | 		}
112 | 	})
113 | })
114 | 
115 | module.exports = Router


--------------------------------------------------------------------------------
/server/upload/image-1519493311082.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/server/upload/image-1519493311082.jpg


--------------------------------------------------------------------------------
/server/upload/image-1520226979355.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/server/upload/image-1520226979355.jpg


--------------------------------------------------------------------------------
/server/upload/image-1520227864323.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/server/upload/image-1520227864323.jpg


--------------------------------------------------------------------------------
/server/upload/image-1520229547392.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/server/upload/image-1520229547392.jpg


--------------------------------------------------------------------------------
/server/upload/image-1520350000324.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/server/upload/image-1520350000324.jpg


--------------------------------------------------------------------------------
/server/upload/music-1520226984271.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/server/upload/music-1520226984271.mp3


--------------------------------------------------------------------------------
/server/upload/music-1520227879326.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/server/upload/music-1520227879326.mp3


--------------------------------------------------------------------------------
/server/upload/music-1520229552446.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/server/upload/music-1520229552446.mp3


--------------------------------------------------------------------------------
/server/views/index.ejs:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html>
3 | <head>
4 | 	<title></title>
5 | </head>
6 | <body>
7 | </body>
8 | </html>


--------------------------------------------------------------------------------
/src/Global.scss:
--------------------------------------------------------------------------------
 1 | @import '~antd/dist/antd.css';
 2 | *, ul, a, i{
 3 | 	padding: 0;margin: 0;
 4 | }
 5 | input, button{
 6 | 	border: none;outline:none;
 7 | }
 8 | a{text-decoration: none;}
 9 | li{
10 | 	list-style: none;
11 | }
12 | button{
13 | 	cursor: pointer;
14 | }
15 | @mixin WH( $w, $h: $w ){
16 | 	width: $w;height: $h;
17 | }
18 | @mixin ts( $time: .5s, $m: ease, $s: all, $delay: 0s ){
19 | 	transition: $s $time $m $delay;
20 | }
21 | @mixin Sp( $fz, $c, $lh: $fz, $a: center ){
22 | 	font-size: $fz;color: $c;line-height: $lh;text-align: $a;
23 | }
24 | #root{
25 | 	@include WH( 100% );
26 | }


--------------------------------------------------------------------------------
/src/actions/actions.js:
--------------------------------------------------------------------------------
  1 | import axios from 'axios';
  2 | 
  3 | export const ADD_NUM = 'ADD_NUM';
  4 | export const DEL_NUM = 'DEL_NUM';
  5 | export const ERROR_MSG = 'ERROR_MSG';
  6 | export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';
  7 | export const SIGN_SUCCESS ='SIGN_SUCCESS';
  8 | export const CLEAR_MSG = 'CLEAR_MSG';
  9 | export const INIT_ARTICLE = 'INIT_ARTICLE';
 10 | export const INIT_USERINFO = 'INIT_USERINFO';
 11 | export const INIT_MESSAGE = 'INIT_MESSAGE';
 12 | export const INIT_MUSIC = 'INIT_MUSIC';
 13 | export const CHANGE_MUSIC = 'CHANGE_MUSIC';
 14 | 
 15 | export function errorMsg(msg){
 16 | 	return {type: ERROR_MSG, msg };
 17 | }
 18 | export function signSuccess(v){
 19 | 	const { password, ...data } = v;
 20 | 	return {type: SIGN_SUCCESS, payload: data};
 21 | }
 22 | 
 23 | export const clearMsg = (payload) => ({
 24 |     type: CLEAR_MSG,
 25 |     payload
 26 | });
 27 | 
 28 | export const initArticle = (payload) =>({
 29 | 	type: INIT_ARTICLE,
 30 | 	payload
 31 | });
 32 | 
 33 | export const initUserInfo = (payload) =>({
 34 | 	type: INIT_USERINFO,
 35 | 	payload
 36 | });
 37 | 
 38 | export const initMessage = (payload) =>({
 39 | 	type: INIT_MESSAGE,
 40 | 	payload
 41 | })
 42 | 
 43 | export const initMusic = (payload) =>({
 44 | 	type: INIT_MUSIC,
 45 | 	id: 0,
 46 | 	payload
 47 | })
 48 | 
 49 | export const changeMusic = (id) =>({
 50 | 	type: CHANGE_MUSIC,
 51 | 	id
 52 | })
 53 | 
 54 | export function register({account, password, repassword}){
 55 | 	return dispatch=>{
 56 | 		axios.post('/user/register', { account, password })
 57 | 			.then(( res ) => {
 58 | 				if( res.status === 200 && res.data.code === 0){
 59 | 					dispatch(signSuccess({account, password}))
 60 | 				} else {
 61 | 					dispatch(errorMsg(res.data));
 62 | 				}
 63 | 			})
 64 | 	}
 65 | }
 66 | 
 67 | export function signin({account, password}){
 68 | 	return dispatch=>{
 69 | 		axios.post('/user/signin', {account, password})
 70 | 			.then( res=>{
 71 | 				if(res.status === 200 && res.data.code === 0 ){
 72 | 					dispatch(signSuccess(res.data.data))
 73 | 				} else {
 74 | 					dispatch(errorMsg(res.data));
 75 | 				}
 76 | 			})
 77 | 	}
 78 | }
 79 | 
 80 | 
 81 | export function initArticleList( category ){
 82 | 	return dispatch =>{
 83 | 		axios.post('/article/initArticleList', { category })
 84 | 			.then( res => {
 85 | 				if( res.status === 200 ){
 86 | 					dispatch(initArticle(res.data.data))
 87 | 				}
 88 | 			})
 89 | 	}
 90 | }
 91 | 
 92 | export function delArticle( id ){
 93 | 	return dispatch =>{
 94 | 		axios.post('/article/delArticle', {id})
 95 | 			.then( res => {
 96 | 				if( res.status === 200 && res.data.code === 1 ){
 97 | 					alert('删除成功！');
 98 | 				}
 99 | 			})
100 | 			.then( ()=>{
101 | 				dispatch(initArticleList('全部'));
102 | 			})
103 | 	}
104 | }
105 | 
106 | export function getUserInfo(){
107 | 	return dispatch =>{
108 | 		axios.get('/user/info')
109 | 			.then( res => {
110 | 				if( res.status === 200 && res.data.code === 0){
111 | 					dispatch(initUserInfo(res.data.data));
112 | 				}
113 | 			})
114 | 	}
115 | }
116 | 
117 | export function getBlogInfo(){
118 | 	return dispatch =>{
119 | 		axios.get('/user/blogInfo')
120 | 			.then( res => {
121 | 				if( res.status === 200 && res.data.code === 0){
122 | 					dispatch(initUserInfo(res.data.data));
123 | 				}
124 | 			})
125 | 	}
126 | }
127 | 
128 | export function getMessage(){
129 | 	return dispatch =>{
130 | 		axios.get('/message/initMessage')
131 | 			.then( res =>{
132 | 				if( res.status === 200 && res.data.code === 0){
133 | 					dispatch(initMessage(res.data.data))
134 | 				}
135 | 			})
136 | 	}
137 | }
138 | 
139 | export function delMessage(id){
140 | 	return dispatch =>{
141 | 		axios.post('/message/delMessage', {id})
142 | 			.then( res =>{
143 | 				if( res.status === 200 && res.data.code === 0){
144 | 					dispatch(getMessage())
145 | 				}
146 | 			})
147 | 	}
148 | }
149 | 
150 | export function postMessage( value){
151 | 	return dispatch =>{
152 | 		axios.post('/message/postMessage', value)
153 | 			.then( res =>{
154 | 				if( res.status === 200 && res.data.code === 0){
155 | 					dispatch(getMessage());
156 | 				}
157 | 			})
158 | 	}
159 | }
160 | 
161 | export function getMusicList(){
162 | 	return dispatch =>{
163 | 		axios.get('/music/initMusic')
164 | 			.then( res =>{
165 | 				if( res.status === 200 && res.data.code === 0 ){
166 | 					dispatch( initMusic(res.data.data) )
167 | 				}
168 | 			})
169 | 	}
170 | }
171 | 


--------------------------------------------------------------------------------
/src/components/articleEditor/articleEditor.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import axios from 'axios';
  3 | import { Input, Row, Col, Select, Button  } from 'antd';
  4 | import BraftEditor from 'braft-editor';
  5 | import 'braft-editor/dist/braft.css';
  6 | 
  7 | import './articleEditor.scss';
  8 | 
  9 | const Option = Select.Option;
 10 | class ArticleEditor extends React.Component {
 11 | 	constructor(props){
 12 | 		super(props);
 13 | 		this.state = {
 14 | 			title: this.props.title,
 15 | 			category: this.props.category,
 16 | 			content: this.props.content,
 17 | 			abstract: this.props.abstract
 18 | 		}
 19 | 	}
 20 | 	componentWillUnmount(){ 
 21 | 		this.setState = (state,callback)=>{
 22 | 		  return;
 23 | 		};  
 24 | 	}
 25 | 
 26 | 	handleChange(key, v){
 27 | 		this.setState({
 28 | 			[key]: v.target ? v.target.value : v
 29 | 		})
 30 | 	}
 31 | 	handleClickSave = () =>{
 32 | 		this.props.handleClickSave(this.state);
 33 | 	}
 34 | 
 35 | 	render() {
 36 | 		const uploadFn = (param) => {
 37 | 			const fd = new FormData();
 38 | 			fd.append('image', param.file);
 39 | 			const successFn = (res) => {
 40 | 				param.success({
 41 | 					url: res.data.URL
 42 | 				})
 43 | 			}
 44 | 			const progressFn = (event) => {
 45 | 				param.progress(event.loaded / event.total * 100)
 46 | 			}
 47 | 			axios.post('/article/uploadImg', fd, progressFn)
 48 | 				.then((res)=>{
 49 | 					successFn(res);
 50 | 				})
 51 | 		}
 52 | 		const editorProps = {
 53 | 			onHTMLChange: v => this.handleChange('content', v),
 54 | 			controls: [
 55 | 				'undo', 'redo', 'split', 'font-size', 'font-family', 'text-color',
 56 | 				'bold', 'italic', 'underline', 'strike-through', 'superscript',
 57 | 				'subscript', 'text-align', 'split', 'headings', 'list_ul', 'list_ol',
 58 | 				'blockquote', 'code','split', 'link', 'split', 'media'
 59 | 			],
 60 | 			viewWrapper: '.braft-editor',
 61 | 			media: {
 62 | 				image: true,
 63 | 				validateFn: null,
 64 | 				uploadFn: v => uploadFn(v) 
 65 | 			},
 66 | 			contentFormat: 'html',
 67 | 			initialContent: this.props.content
 68 |     	}
 69 | 		return (
 70 | 			<div className='article-editor'>
 71 | 				<Row>
 72 | 					<Col span={16}>
 73 | 						<Input placeholder='文章标题' onChange={v => this.handleChange('title', v)} defaultValue={this.props.title} />
 74 | 					</Col>
 75 | 					<Col span={3} offset={1}>
 76 | 						<Select defaultValue={this.props.category} className='article-category' onChange={ v => this.handleChange('category', v)}>
 77 | 							<Option value="javasrcipt">javasrcipt</Option>
 78 | 							<Option value="css">css</Option>
 79 | 							<Option value="html">html</Option>
 80 | 							<Option value="nodejs">nodejs</Option>
 81 | 							<Option value="React">React</Option>
 82 | 							<Option value="杂记">杂记</Option>
 83 | 							<Option value="转载">转载</Option>
 84 | 						</Select>
 85 | 					</Col>
 86 | 				</Row>
 87 | 				<Row style={{'marginTop': '20px'}}>
 88 | 					<Col span={16}>
 89 | 						<Input placeholder='文章摘要' onChange={v => this.handleChange('abstract', v)} defaultValue={this.props.abstract} />
 90 | 					</Col>
 91 | 					<Col span={1} offset={2}>
 92 | 						<Button type="primary" onClick={this.handleClickSave }>保存</Button>
 93 | 					</Col>
 94 | 				</Row>
 95 | 				<div className='braft-editor'>
 96 | 					<BraftEditor {...editorProps} />
 97 | 				</div>
 98 | 			</div>
 99 | 		);
100 | 	}
101 | }
102 | 
103 | export default ArticleEditor
104 | 


--------------------------------------------------------------------------------
/src/components/articleEditor/articleEditor.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .article-editor{
 4 | 	@include WH( 100% );
 5 | 	.article-category{
 6 | 		width: 100%;
 7 | 	}
 8 | 	.braft-editor{
 9 | 		@include WH(100%, 650px);background-color: #FFF;margin-top: 20px;border: 1px solid #ccc;border-radius: 10px;
10 | 	}
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/articlelist/articlelist.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | 
 4 | import './articlelist.scss';
 5 | 
 6 | class ArticleList extends React.Component {
 7 | 
 8 | 	render() {
 9 | 
10 | 		if( this.props.articlelist.length === 0 ){
11 | 			return <div>暂无此分类文章！</div>
12 | 		}
13 | 		return (
14 | 			<ul className='articlelist'>
15 | 				{this.props.articlelist.map( (v) => (
16 | 					<li key={v._id} className='articlelist-item'>
17 | 						<Link to={'/blog/article/'+v._id} className='articlelist-title'>{v.title}</Link>
18 | 						<div className='articlelist-abstract'>
19 | 							{v.abstract}
20 | 						</div>
21 | 						<div className='articlelist-bot'>
22 | 							<span>时间：{v.date}</span>
23 | 							<span>分类：{v.category}</span>
24 | 						</div>
25 | 					</li>
26 | 				))}
27 | 			</ul>
28 | 		);
29 | 	}
30 | }
31 | export default ArticleList


--------------------------------------------------------------------------------
/src/components/articlelist/articlelist.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .articlelist{
 4 | 	@include WH(100%, auto);
 5 | 	.articlelist-item{
 6 | 		@include WH( 100%, 110px );margin-bottom: 20px;border-bottom: 1px solid #ccc;
 7 | 		.articlelist-title{
 8 | 			@include Sp( 20px, rgba(0,0,0,0.65), 20px, left );@include WH(100%, 20px);@include ts;
 9 | 			&:hover{
10 | 				color: #973444;
11 | 			}
12 | 		}
13 | 		.articlelist-abstract{
14 | 			@include Sp( 14px, rgba( 0,0,0,0.65 ), 22px, left );@include WH( 100%, 52px );margin-top: 5px;
15 | 		}
16 | 		.articlelist-bot{
17 | 			display: flex;justify-content: space-between;
18 | 			
19 | 		}
20 | 	}
21 | 
22 | }


--------------------------------------------------------------------------------
/src/components/articlepage/articlepage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import './articlepage.scss';
 4 | 
 5 | class ArticlePage extends React.Component {
 6 | 
 7 | 	render() {
 8 | 		const {currentArticle} = this.props;
 9 | 
10 | 		return (
11 | 			
12 | 			
13 | 			<div className='container-article' key='container-article'>
14 | 				<span className='article-title'>{currentArticle.title}</span>
15 | 				<span className='article-date'>{currentArticle.date}</span>
16 | 				<div dangerouslySetInnerHTML={{__html: currentArticle.content}} className='article-body'></div>
17 | 			</div>	
18 | 			
19 | 		);
20 | 	}
21 | }
22 | 
23 | export default ArticlePage


--------------------------------------------------------------------------------
/src/components/articlepage/articlepage.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .container-article{
 4 | 	@include WH( 80%, auto );position: absolute;right: 10%;top: 5%;background: #f5f5dc url(../../static/images/wrap-bg.png);box-sizing: border-box;padding: 40px;min-height: 90%;
 5 | 	.article-title{
 6 | 		@include Sp( 28px, #973444 );display: block;@include WH( 100%, 40px);
 7 | 	}
 8 | 	.article-date{
 9 | 		@include Sp( 12px, rgba( 0,0,0,0.65) );display: block;@include WH( 100%, 20px);
10 | 	}
11 | 	.article-body{
12 | 		display: block;margin-top: 30px;
13 | 		pre{
14 | 			background-color: #363532;box-sizing: border-sizing;padding: 20px;border-radius: 20px;@include WH( auto, auto);
15 | 			div{
16 | 				@include WH( auto );
17 | 			}
18 | 			code{
19 | 				color: #c03f3c;
20 | 			}
21 | 		}
22 | 	}
23 | }


--------------------------------------------------------------------------------
/src/components/authRoute/authRoute.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import axios from 'axios';
 3 | import { withRouter } from 'react-router-dom';
 4 | 
 5 | class AuthRoute extends React.Component{
 6 | 	componentDidMount(){
 7 | 		axios.get('/user/info')
 8 | 			.then(res =>{
 9 | 				if( res.status === 200 ){
10 | 					if( res.data.code === 0 ){
11 | 						return null
12 | 					} else {
13 | 						this.props.history.push('/signin')
14 | 					}
15 | 				} 
16 | 			})
17 | 	}
18 | 	render(){
19 | 		return null
20 | 	}
21 | }
22 | 
23 | export default withRouter(AuthRoute)


--------------------------------------------------------------------------------
/src/components/categorylist/categoryList.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .categoryList{
 4 | 	margin-top: 50px;@include WH( 100%, auto );
 5 | 	li{
 6 | 		margin-top: 10px;cursor: pointer;text-align: center;@include WH( 50%, 30px );float: left;
 7 | 		&.ac{
 8 | 			color: #973444;
 9 | 		}
10 | 	}
11 | }


--------------------------------------------------------------------------------
/src/components/categorylist/categorylist.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import './categoryList.scss';
 4 | 
 5 | class CategoryList extends React.Component {
 6 | 
 7 | 	constructor(props){
 8 | 		super(props);
 9 | 		this.state = {
10 | 			select: '全部'
11 | 		}
12 | 	}
13 | 
14 | 	handleClickSelect(v){
15 | 		this.setState({
16 | 			select: v
17 | 		})
18 | 		this.props.handleClickSelect(v);
19 | 	}
20 | 
21 | 	render() {
22 | 		return (
23 | 			<ul className='categoryList'>
24 | 				{ this.props.categorylist.map( (v, i)=>(
25 | 					<li key={i} 
26 | 						onClick={() => this.handleClickSelect(v)} 
27 | 						className={ this.state.select === v ? 'ac' : null }
28 | 					>{v}</li>
29 | 				))}
30 | 			</ul>
31 | 		);
32 | 	}
33 | }
34 | 
35 | export default CategoryList
36 | 


--------------------------------------------------------------------------------
/src/components/editArticleList/editArticleList.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | import { Button } from 'antd';
 4 | 
 5 | import './editArticleList.scss';
 6 | 
 7 | class EditArticleList extends React.Component{
 8 | 
 9 | 	handleClickDel(id){
10 | 		this.props.handleClickDel(id)
11 | 	}
12 | 	
13 | 	render(){
14 | 		if(this.props.articlelist.length === 0) {
15 | 			return <div>暂无文章可编辑。</div>
16 | 		}
17 | 		return (
18 | 		
19 | 			<ul className='edit-article-list'>
20 | 				{this.props.articlelist.map( (v) => (
21 | 					<li key={v._id} className='edit-article-item'>
22 | 						<span className='edit-article-title'>{v.title}</span>
23 | 						<Button type="primary" ><Link to={'/admin/updateArticle/'+ v._id}>编辑</Link></Button>
24 | 						<Button type="primary" onClick={ () => this.handleClickDel(v._id)}>删除</Button>
25 | 						<Button type="primary"><Link to={'/blog/article/'+ v._id}>查看</Link></Button>
26 | 					</li>
27 | 				))}
28 | 			</ul>
29 | 		
30 | 		)
31 | 	}
32 | }
33 | 
34 | export default EditArticleList


--------------------------------------------------------------------------------
/src/components/editArticleList/editArticleList.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .edit-article-list{
 4 | 	@include WH( 100%, auto );
 5 | 	.edit-article-item{
 6 | 		display: flex;justify-content: space-between;border-bottom: 1px dotted #ccc;@include WH( 100%, 50px );align-items: center;
 7 | 		.edit-article-title{
 8 | 			@include Sp( 16px, rgba(0,0,0,0.65), 50px, left );@include WH( 70%, 100% );
 9 | 		}
10 | 	}
11 | }


--------------------------------------------------------------------------------
/src/components/editMessageList/editMessageList.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button } from 'antd';
 3 | 
 4 | import './editMessageList.scss';
 5 | 
 6 | export default class EditMessageList extends React.Component {
 7 | 
 8 | 	render() {
 9 | 		if( this.props.messagelist.length === 0){
10 | 			return (
11 | 				<div>暂无留言！</div>
12 | 			)
13 | 		}
14 | 		return (
15 | 			<ul className='edit-message'>
16 | 				{this.props.messagelist.map( (v, i) =>(
17 | 					<li key={i}>
18 | 						<div className='edit-message-item'>
19 | 							<span>发表自：{v.username}</span>
20 | 							<span>时间： {v.date}</span>
21 | 							<span>内容： {v.content}</span>
22 | 							<span>联系方式：{v.contact}</span>
23 | 						</div>
24 | 						<Button type='primary' onClick={() => this.props.handleClickDel(v._id)}>删除</Button>
25 | 					</li>
26 | 				))}
27 | 			</ul>
28 | 		);
29 | 	}
30 | }


--------------------------------------------------------------------------------
/src/components/editMessageList/editMessageList.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .edit-message{
 4 | 	@include WH( 100%, auto );
 5 | 	li{
 6 | 		@include WH( 100%, 100px );border-bottom: 1px dotted rgba(0,0,0,0.65);display: flex;justify-content: space-between;align-items: flex-end;padding: 10px 0;
 7 | 		.edit-message-item{
 8 | 			display: flex;flex-flow: column nowrap;justify-content: space-between;
 9 | 		}
10 | 	}
11 | }


--------------------------------------------------------------------------------
/src/components/editMusicList/editMusicList.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button } from 'antd';
 3 | 
 4 | import './editMusicList.scss';
 5 | 
 6 | class EditMuiscList extends React.Component {
 7 | 
 8 | 	handleClickDel(id){
 9 | 		this.props.handleClickDel(id);
10 | 	}
11 | 
12 |     render() {
13 |     	console.log('render渲染');
14 |     	if( this.props.musicList.length === 0 ){
15 |     		return (
16 | 				<div>暂无歌曲!</div>
17 |     		)
18 |     	}
19 |         return (
20 | 			<ul className='edit-music-list'>
21 | 				{this.props.musicList.map( (v, i) =>(
22 | 					<li key={i} className='edit-music-item'>
23 | 						<div className='edit-music-col'>
24 | 							<div>歌曲名：{v.title}</div>
25 | 							<div>歌手名：{v.author}</div>
26 | 						</div>
27 | 						<span>封面图：</span>
28 | 						<div className='edit-music-col' >
29 | 							<img src={v.cover} alt="" />
30 | 						</div>
31 | 						<Button type="primary" className='edit-music-btn' onClick={ () => this.handleClickDel(v._id)}>删除</Button>
32 | 					</li>
33 | 				))}
34 | 			</ul>
35 |         );
36 |     }
37 | 
38 | }
39 | 
40 | export default EditMuiscList;


--------------------------------------------------------------------------------
/src/components/editMusicList/editMusicList.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .edit-music-list{
 4 | 	.edit-music-item{
 5 | 		@include WH( 100%, 150px );display: flex;padding: 20px 0;position: relative;border-bottom: 1px dotted #ccc;
 6 | 		.edit-music-col{
 7 | 			display: flex;flex-flow: column nowrap;justify-content: space-between;margin-right: 130px;width: 150px;
 8 | 		}
 9 | 		img{
10 | 			@include WH(100px)
11 | 		}
12 | 		.edit-music-btn{
13 | 			position: absolute;right: 20px;bottom: 10px;
14 | 		}
15 | 	}
16 | }


--------------------------------------------------------------------------------
/src/components/editUserPage/editUserPage.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Upload, Icon, message, Input, Button } from 'antd';
  3 | 
  4 | import './editUserPage.scss';
  5 | 
  6 | function getBase64(img, callback) {
  7 | 	const reader = new FileReader();
  8 | 	reader.addEventListener('load', () => callback(reader.result));
  9 | 	reader.readAsDataURL(img);
 10 | }
 11 | 
 12 | function beforeUpload(file) {
 13 | 	const isJPG = file.type === 'image/jpeg';
 14 | 	if (!isJPG) {
 15 | 		message.error('You can only upload JPG file!');
 16 | 	}
 17 | 	const isLt2M = file.size / 1024 / 1024 < 2;
 18 | 	if (!isLt2M) {
 19 | 		message.error('Image must smaller than 2MB!');
 20 | 	}
 21 | 	return isJPG && isLt2M;
 22 | }
 23 | class EditUserPage extends React.Component{
 24 | 	constructor(props){
 25 | 		super(props);
 26 | 		this.state = {
 27 | 			loading: false,
 28 | 			avatar: '',
 29 | 			username: '0',
 30 | 			oldpassword: '0',
 31 | 			newpassword: '0',
 32 | 			repassword: ''
 33 | 		};
 34 | 	}
 35 | 
 36 | 	handleChange(key, v){
 37 | 		this.setState({
 38 | 			[key]: v.target.value
 39 | 		})
 40 | 
 41 | 	}
 42 | 
 43 | 	handleClickSave(key){
 44 | 		this.props.handleClickSave(this.state, key)
 45 | 	}
 46 | 
 47 | 	handleChangeImg = (info) => {
 48 | 		console.log(info)
 49 | 		if (info.file.status === 'uploading') {
 50 | 			this.setState({ loading: true });
 51 | 			return;
 52 | 		}
 53 | 		if (info.file.status === 'done') {
 54 | 			// Get this url from response in real world.
 55 | 			getBase64(info.file.originFileObj, avatar => this.setState({
 56 | 				avatar: info.file.response.URL,
 57 | 				loading: false,
 58 | 			}));
 59 |    		}
 60 | 	}
 61 | 	render(){
 62 |     	const uploadButton = (
 63 |     		<div>
 64 |     			<Icon type={this.state.loading ? 'loading' : 'plus'} />
 65 |     			<div className="ant-upload-text">Upload</div>
 66 |     		</div>
 67 |     	);
 68 |     	const avatar = this.state.avatar;
 69 | 		return (
 70 | 			<div className='container-editUser'>
 71 | 				<div className='avatar-edit'>
 72 | 					<span className='avatar-edit-title'>编辑头像</span>
 73 | 					<div className='avatar-edit-content'>
 74 | 						<span style={{'marginRight': '30px'}}>原本头像:</span>
 75 | 						<img src={ this.props.avatar } alt="" className='avatar-edit-default' />
 76 | 						<span style={{'marginLeft': '30px'}}>上传新头像:</span>
 77 | 						<Upload
 78 |     						name="image"
 79 |     						listType="picture-card"
 80 |     						className="avatar-uploader"
 81 |     						showUploadList={false}
 82 |     						action="/user/uploadImg"
 83 |     						beforeUpload={beforeUpload}
 84 |     						onChange={this.handleChangeImg}
 85 |     					>
 86 |     						{avatar ? <img src={avatar} alt="" /> : uploadButton}
 87 |     					</Upload>
 88 |     					<Button type="primary" className='edit-btn' onClick={() => this.handleClickSave('avatar')}>保存</Button>
 89 | 					</div>
 90 | 					
 91 | 				</div>
 92 | 				<div className='username-edit'>
 93 | 					<span>编辑用户名</span>
 94 | 					<div className='username-edit-content'>
 95 | 						<span>原用户名:</span>
 96 | 						<span style={{'marginLeft': '10px'}}>{this.props.username}</span>
 97 | 						<span style={{'margin': '0 10px 0 30px'}}>修改用户名: </span>
 98 | 						<Input className='username-edit-input' onChange={(v) => this.handleChange('username', v)}/>
 99 | 						<Button type="primary" className='edit-btn' onClick={() => this.handleClickSave('username')}>保存</Button>
100 | 					</div>
101 | 				</div>
102 | 				<div className='password-edit'>
103 | 					<span>编辑用户名</span>
104 | 					<div className='password-edit-content'>
105 | 						<span style={{'margin': '0 10px 0 0'}}>输入旧密码:</span>
106 | 						<Input className='password-edit-input' type='password' onChange={(v) => this.handleChange('oldpassword', v)}/>
107 | 						<span style={{'margin': '0 10px 0 30px'}}>输入新密码: </span>
108 | 						<Input className='password-edit-input' type='password' onChange={(v) => this.handleChange('newpassword', v)}/>
109 | 						<span style={{'margin': '0 10px 0 30px'}}>核对新密码: </span>
110 | 						<Input className='password-edit-input' type='password' onChange={(v) => this.handleChange('repassword', v)}/>
111 | 						<Button type="primary" className='edit-btn' onClick={() => this.handleClickSave('password')}>保存</Button>
112 | 					</div>
113 | 				</div>
114 | 
115 | 			</div>
116 | 		)
117 | 	}
118 | }
119 | 
120 | export default EditUserPage


--------------------------------------------------------------------------------
/src/components/editUserPage/editUserPage.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .avatar-edit{
 4 | 	border-bottom: 1px dotted #ccc;padding-bottom: 30px;
 5 | 	.avatar-edit-content{
 6 | 		margin-top: 30px;display: flex;align-items: center;position: relative;
 7 | 		.avatar-edit-default{
 8 | 			@include WH( 110px );
 9 | 		}
10 | 		.avatar-uploader > .ant-upload {
11 | 			@include WH( 110px );margin: 0;margin-left: 30px;
12 | 			img{
13 | 				@include WH( 110px, 110px );
14 | 			}
15 | 		}
16 | 		.edit-btn{
17 | 			position: absolute;right: 20px;bottom: 0px; 
18 | 		}
19 | 	}	
20 | }
21 | .username-edit{
22 | 	border-bottom: 1px dotted #ccc;padding-bottom: 30px;margin: 20px 0;
23 | 	.username-edit-content{
24 | 		margin-top: 30px;display: flex;align-items: center;position: relative;
25 | 		.username-edit-input{
26 | 			width: 200px;
27 | 		}
28 | 		.edit-btn{
29 | 			position: absolute;right: 20px;bottom: 0px; 
30 | 		}
31 | 	}
32 | 
33 | }
34 | .password-edit{
35 | 	border-bottom: 1px dotted #ccc;padding-bottom: 30px;margin: 20px 0;
36 | 	.password-edit-content{
37 | 		margin-top: 30px;display: flex;align-items: center;position: relative;
38 | 		.password-edit-input{
39 | 			width: 200px;
40 | 		}
41 | 		.edit-btn{
42 | 			position: absolute;right: 20px;bottom: 0px; 
43 | 		}
44 | 	}
45 | }


--------------------------------------------------------------------------------
/src/components/messagelist/messagelist.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import './messagelist.scss';
 4 | 
 5 | class MessageList extends React.Component {
 6 | 
 7 | 	render() {
 8 | 		if( this.props.messagelist.length === 0 ){
 9 | 			return (
10 | 				<div>暂无留言！</div>
11 | 			)
12 | 		}
13 | 		return (
14 | 			<ul className='message-list'>
15 | 				{ this.props.messagelist.map( (v, i) =>(
16 | 					<li key={i}>
17 | 						<p>{v.content}</p>
18 | 						<div >
19 | 							<span>来自于：{v.username}</span>
20 | 							<span>发表时间：{v.date}</span>
21 | 						</div>
22 | 					</li>
23 | 				))}
24 | 			</ul>
25 | 		);
26 | 	}
27 | }
28 | 
29 | export default MessageList
30 | 


--------------------------------------------------------------------------------
/src/components/messagelist/messagelist.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .message-list{
 4 | 	@include WH( 100%, auto );
 5 | 	li{
 6 | 		@include WH( 100%, 80px );display: flex;flex-flow: column nowrap;border-bottom: 1px dotted rgba(0,0,0,0.65);margin-bottom: 30px;
 7 | 		p{
 8 | 			@include WH( 100%, 40px );
 9 | 		}
10 | 		div{
11 | 			@include WH( 100%, 40px );display: flex;justify-content: space-between;
12 | 		}
13 | 	}
14 | }


--------------------------------------------------------------------------------
/src/components/messagepost/messagepost.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import './messagepost.scss';
 4 | 
 5 | class MessagePost extends React.Component{
 6 | 
 7 | 	constructor(props){
 8 | 		super(props);
 9 | 		this.state = {
10 | 			username: '',
11 | 			contact: '',
12 | 			content: ''
13 | 		}
14 | 	}
15 | 
16 | 	handleChange(v, key){
17 | 		this.setState({
18 | 			[key]: v.target.value
19 | 		})
20 | 	}
21 | 
22 | 	handleClickPost = () =>{
23 | 		if( this.state.username === '' || this.state.contact === '' || this.state.content === ''){
24 | 			return alert('内容还未填写！');
25 | 		}
26 | 		if( this.state.content.length > 180 ){
27 | 			return alert('留言最大180个字符！');
28 | 		}
29 | 		if( this.state.username.length > 10 ){
30 | 			return alert('用户名最大10个字符！');
31 | 		}
32 | 		if( this.state.contact.length > 50 ){
33 | 			return alert('联系方式最大50个字符！');
34 | 		}
35 | 		this.props.postMessage(this.state);
36 | 		this.setState({
37 | 			username: '',
38 | 			contact: '',
39 | 			content: ''			
40 | 		})
41 | 	}
42 | 
43 | 	render(){
44 | 		return (
45 | 			<div className='message-post'>
46 | 				<div className='message-edit'>
47 | 					<div className='message-username'>
48 | 						<span>发表用户名：</span>
49 | 						<input type="text" onChange={ (v) => this.handleChange(v, 'username') } value={this.state.username} />
50 | 					</div>
51 | 					<div className='message-contact'>
52 | 						<span>联系方式(只显示给博主)：</span>
53 | 						<input type="text" onChange={ (v) => this.handleChange(v, 'contact') } value={this.state.contact} />
54 | 					</div>
55 | 					<textarea className='message-content' onChange={ (v) => this.handleChange(v, 'content') } value={this.state.content} placeholder='在此输入留言，最大180个字符。'></textarea>
56 | 				</div>
57 | 				<button className='message-btn' onClick={this.handleClickPost}>发表</button>
58 | 			</div>
59 | 		)
60 | 	}
61 | }
62 | 
63 | export default MessagePost


--------------------------------------------------------------------------------
/src/components/messagepost/messagepost.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | @mixin input{
 4 | 	border: 1px solid #37444b;border-radius: 5px;@include ts;box-sizing: border-box;padding-left: 20px;
 5 | 	&:hover{
 6 | 		border: 1px solid #3f3f3c;box-shadow: 1px 1px 2px #3f3f3c;
 7 | 	}
 8 | 	&:focus{
 9 | 		border: 1px solid #973444;
10 | 	}
11 | }
12 | 
13 | .message-post{
14 | 	@include WH( 100%, auto );display: flex;align-items: flex-end;margin-top: 150px;
15 | 	.message-edit{
16 | 		@include WH( 50%, auto );display: flex;flex-flow: column nowrap;
17 | 		.message-username{
18 | 			@include WH( 100%, 35px );display: flex;justify-content: space-between;margin-bottom: 20px;
19 | 			input{
20 | 				@include input;@include WH( 60%, 35px);
21 | 			}
22 | 		}
23 | 		.message-contact{
24 | 			@include WH( 100%, 35px );display: flex;justify-content: space-between;margin-bottom: 20px;
25 | 			input{
26 | 				@include input;@include WH( 60%, 35px);
27 | 			}
28 | 		}
29 | 		.message-content{
30 | 			@include WH( 100%, 200px );@include input;padding: 20px;
31 | 		}	
32 | 	}
33 | 	.message-btn{
34 | 		@include WH( 60px, 30px );color: #fffafa;background: #973444;border-radius: 8px;margin-left: 30px;
35 | 	}
36 | }


--------------------------------------------------------------------------------
/src/components/musicPlayer/musicPlayer.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | 
  3 | import './musicPlayer.scss';
  4 | 
  5 | export default class MusicPlayer extends React.Component {
  6 | 	constructor(props){
  7 | 		super(props);
  8 | 		this.state = {
  9 | 			isPlay: false,
 10 | 			currentTime: '',
 11 | 			allTime: '',
 12 | 			isMuted: false,
 13 | 			volume: 100,
 14 | 			volumeDisplay: false
 15 | 		}
 16 | 	}
 17 | 
 18 | 	controlAudio(type, value){
 19 | 		let audio = this.audio;
 20 | 		switch(type){
 21 | 			case 'play':
 22 | 				audio.play();
 23 | 				this.setState({
 24 | 					isPlay: true
 25 | 				})
 26 | 				break;
 27 | 			case 'pause':
 28 | 				audio.pause()
 29 | 				this.setState({
 30 | 					isPlay: false
 31 | 				})
 32 | 				break;
 33 | 			case 'allTime':
 34 | 				this.setState({
 35 | 					allTime: audio.duration
 36 | 				});
 37 | 				break;
 38 | 			case 'changeCurrentTime':
 39 | 				this.setState({
 40 | 					currentTime: value.target.value
 41 | 				})
 42 | 				audio.currentTime = value.target.value;
 43 | 				if(value === audio.duration) {
 44 | 					this.setState({
 45 | 						isPlay: false
 46 | 					})
 47 | 				}
 48 | 				break;
 49 | 			case 'getCurrentTime':
 50 | 				this.setState({
 51 | 					currentTime: audio.currentTime
 52 | 				})
 53 | 				if(audio.currentTime === audio.duration) {
 54 | 					this.setState({
 55 | 						isPlay: false
 56 | 					})
 57 | 				}
 58 | 				break;
 59 | 			case 'changeVolume':
 60 | 				audio.volume = value.target.value / 100
 61 | 				this.setState({
 62 | 					volume: value.target.value,
 63 | 					isMuted: !value.target.value
 64 | 				})
 65 | 				break;
 66 | 			default:
 67 | 				return;		
 68 | 		}
 69 | 	}
 70 | 
 71 | 	handleEnded = () => {
 72 | 		console.log(1);
 73 | 	}
 74 | 
 75 | 	handleMouseVolume = () =>{
 76 | 		this.setState({
 77 | 			volumeDisplay: this.state.volumeDisplay ? false : true
 78 | 		})
 79 | 	}
 80 | 	handleClickChange(id){
 81 | 		this.setState({
 82 | 			isPlay: false
 83 | 		})	
 84 | 		this.props.handleClickChange(id);
 85 | 
 86 | 	}
 87 | 
 88 | 	_millisecondToDate(time) {
 89 | 		const second = Math.floor(time % 60)
 90 | 		let minite = Math.floor(time / 60)
 91 | 		return `${minite}:${second >= 10 ? second : `0${second}`}`
 92 | 	}
 93 | 
 94 | 	render() {
 95 | 		const { isPlay, currentTime, allTime, isMuted, volume, volumeDisplay } = this.state;
 96 | 		const { musicList, currentMusic } = this.props;
 97 | 		if( musicList.length === 0 || currentMusic === undefined){
 98 | 			return <div  className='container-music'>暂无歌曲！</div>
 99 | 		}
100 | 		return (
101 | 			<div className='container-music'>
102 | 				<audio 
103 | 					src={ currentMusic.content }
104 | 					ref={ ref => this.audio = ref }
105 | 					onCanPlay={() => this.controlAudio('allTime')}
106 | 					onTimeUpdate={(e) => this.controlAudio('getCurrentTime')}
107 | 					onEnded={this.handleEnded}
108 | 				/>
109 | 				<div className='music-player'>
110 | 					<img className={`music-avatar ${isPlay ? 'rotate' : null}`} src={currentMusic.cover} alt=''/>
111 | 					<div className='music-title'>
112 | 						{currentMusic.title}
113 | 					</div>
114 | 					<div className='music-author'>
115 | 						{currentMusic.author}
116 | 					</div>
117 | 					<div className='music-row'>
118 | 						<span className="music-current">
119 | 							{this._millisecondToDate(currentTime)+'/'+this._millisecondToDate(allTime)}
120 | 						</span>
121 | 						<div className='music-volume' onMouseOver={ this.handleMouseVolume } onMouseOut={ () => this.handleMouseVolume()}>
122 | 							<i className={ volume > 66 ? 'iconfont icon-yinliang3' : ( volume > 33 ? 'iconfont icon-yinliang2' : 'iconfont icon-yinliang1') } />
123 | 							<input
124 | 								type="range"
125 | 								onChange={(value) => this.controlAudio('changeVolume',value)}
126 | 								value={isMuted ? 0 : volume}
127 | 								style={ volumeDisplay ? { opacity: '100'} : {opacity: '0'}}
128 | 							/>
129 | 						</div>
130 | 					</div>
131 | 					<input 
132 | 						type="range" 
133 | 						className="music-time"
134 | 						step="0.01" 
135 | 						max={allTime}     
136 | 						value={currentTime ? currentTime : 0}
137 | 						onChange={(value) => this.controlAudio('changeCurrentTime',value)}
138 | 					/>
139 | 					<div className='music-row'>
140 | 						<div className='music-lbtn'><i className='iconfont icon-xiangzuo' /></div>
141 | 						<div 
142 | 							onClick={() => this.controlAudio(isPlay ? 'pause' : 'play')} 
143 | 							className='music-playbtn'
144 | 						>
145 | 							<i 
146 | 								className={`iconfont ${isPlay ? 'icon-zanting' : 'icon-bofang'}`  }
147 | 							/>
148 | 						</div>
149 | 						<div className='music-rbtn'><i className='iconfont icon-xiangyou' /></div>
150 | 					</div>
151 | 				</div>
152 | 				<div className='music-list'>
153 | 					<div className='music-list-top'>
154 | 						私人歌单:
155 | 					</div>
156 | 					{musicList.map( (v,i) =>(
157 | 						<div className='music-item' key={i} onClick={() =>this.handleClickChange(i)}>
158 | 							<span>{v.title}</span>
159 | 							<span>-{v.author}</span>
160 | 						</div>
161 | 					))}
162 | 				</div>
163 | 			</div>
164 | 		);
165 | 	}
166 | }


--------------------------------------------------------------------------------
/src/components/musicPlayer/musicPlayer.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | @keyframes rotate
 4 | {
 5 |     0% {transform: rotate(0);}
 6 |     100% {transform: rotate(360deg);}
 7 | }
 8 | .container-music{
 9 | 	i,a,li,div{
10 | 		font-family: 'KaiTi';
11 | 	}
12 | 	@include WH( 80%, 90% );position: absolute;right: 10%;top: 5%;display: flex;justify-content: center;align-items: center;
13 | 	.music-player{
14 | 		@include WH( 600px, 300px );display: flex;justify-content: space-between;position: relative;flex-flow: column nowrap;
15 | 		.music-avatar{
16 | 			@include WH(120px);border-radius: 50%;position: absolute;top: 0;right: 0;animation: rotate 10s linear infinite paused;z-index: 1;display: block;
17 | 			&.rotate{
18 | 				animation-play-state: running;
19 | 			}
20 | 		}
21 | 		.music-title{
22 | 			font-size: 36px;color: #e7e5d0;font-weight: bold;text-indent: 30px;
23 | 		}
24 | 		.music-author{
25 | 			font-size: 18px;color: #e7e5d0;
26 | 		}
27 | 		.music-current{
28 | 			font-size: 14px;color: #e7e5d0;
29 | 		}
30 | 		.music-row{
31 | 			display: flex;align-items: center;
32 | 		}
33 | 		.music-volume{
34 | 			@include WH( 150px, 30px);margin-left: 25px;display: flex;
35 | 			i{
36 | 				font-size: 30px;color: #e7e5d0;@include ts;line-height: 30px;cursor: pointer;
37 | 			}
38 | 			input[type="range"] {
39 | 				-webkit-appearance: none;margin-top: 13px;margin-left: 10px;background-color: #e7e5d0;width: 100px;height:4px;padding: 0;border: none;cursor: pointer;border-radius: 5px;@include ts;
40 | 			}
41 | 			input[type="range"]::-webkit-slider-thumb {
42 | 				-webkit-appearance: none;cursor: default;top: 0;@include WH( 10px ); transform: translateY(0px);background: #973444;border-radius: 50%;cursor: pointer;
43 | 			}
44 | 		}
45 | 		.music-time{
46 | 			-webkit-appearance: none;background-color: #e7e5d0;width: 100%;height:6px;padding: 0;border: none;cursor: pointer;border-radius: 5px;
47 | 		}
48 | 		.music-time::-webkit-slider-thumb {
49 | 			-webkit-appearance: none;cursor: default;top: 0;@include WH( 15px ); transform: translateY(0px);background: #973444;border-radius: 50%;cursor: pointer;
50 | 		}
51 | 		.music-playbtn, .music-lbtn, .music-rbtn{
52 | 			@include WH( 40px );border-radius: 50%;cursor: pointer;margin-right: 30px;
53 | 			i{
54 | 				font-size: 40px;@include ts;color: #fffafa;
55 | 				&:hover{
56 | 					color: #973444;
57 | 				}
58 | 			}
59 | 		}
60 | 	}
61 | 	.music-list{
62 | 		@include WH( 150px, 300px);margin-left: 50px;
63 | 		.music-list-top{
64 | 			@include WH( 100%, 30px );color: #fffafa;margin-bottom: 15px;
65 | 		}
66 | 		.music-item{
67 | 			@include WH( 100%, 30px );display: flex;justify-content: space-between;cursor: pointer;
68 | 			span{
69 | 				color: #fffafa;@include ts;
70 | 			}			
71 | 			&:hover{
72 | 				span{
73 | 					color: #973444;
74 | 				}
75 | 			}
76 | 
77 | 		}
78 | 	}
79 | }
80 | 


--------------------------------------------------------------------------------
/src/components/navlist/navlist.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link, withRouter } from 'react-router-dom';
 3 | 
 4 | import './navlist.scss';
 5 | 
 6 | class Navlist extends React.Component{
 7 |     
 8 |     render(){
 9 | 		const navlist = [
10 |             {
11 |                 title: '首页',
12 |                 icon: 'icon-home',
13 |                 path: '/'
14 |             },
15 | 			{
16 | 				title: '博客',
17 | 				icon: 'icon-bokexinwen',
18 | 				path: '/blog'
19 | 			},
20 | 
21 | 			{
22 | 				title: '音乐',
23 | 				icon: 'icon-yinle',
24 | 				path: '/music'
25 | 			},
26 | 			{
27 | 				title: '留言',
28 | 				icon: 'icon-liuyanpinglun',
29 | 				path: '/message'
30 | 			},			
31 | 			{
32 | 				title: '简历',
33 | 				icon: 'icon-gerenjianli',
34 | 				path: '/resume'
35 | 			},
36 | 			{
37 | 				title: '管理',
38 | 				icon: 'icon-guanli',
39 | 				path: '/admin'
40 | 			}
41 |         ];
42 |         return (
43 |             <nav className='navlist'>
44 |                 {
45 |                     navlist.map( v => (
46 |                         <Link
47 |                             to={v.path}
48 |                             className={ `navlink iconfont ${v.icon} ${this.props.match.url === v.path ? 'ac' : null}`}
49 |                             key={v.path}
50 |                         >
51 |                         <span>{v.title}</span>
52 |                         </Link>
53 |                     ))
54 |                 }
55 |             </nav>
56 |         )
57 |     }
58 | }
59 | 
60 | export default withRouter(Navlist)


--------------------------------------------------------------------------------
/src/components/navlist/navlist.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .navlist{
 4 |     position: fixed;@include WH( 50px, 90% );left: 0;top: 5%;background: #f2de76;
 5 |     .navlink{
 6 |         display: block;@include WH( 100%, 70px );font-size: 25px;text-align: center;line-height: 60px;color: #363532;position: relative;@include ts;background: #f2de76;margin-top: 3px;;
 7 |         span{
 8 |             @include Sp( 14px, #973444 );position: absolute;@include ts;@include WH( 100%, 16px );left: 0;bottom: 20px;opacity: 0; 
 9 |         }
10 |         &:hover{
11 |             color: #973444;box-shadow: 3px 0 3px #363632;width: 70px;
12 |             span{
13 |                 bottom: 5px;opacity: 1;
14 |             }
15 |         }
16 |         &.ac{
17 |             color: #973444;box-shadow: 3px 0 3px #363632;width: 70px;
18 |             span{
19 |                 bottom: 5px;opacity: 1;
20 |             }
21 |         }
22 |     }
23 | }


--------------------------------------------------------------------------------
/src/components/uploadMusic/uploadMusic.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Row, Col, Input, Upload, message, Icon, Button } from 'antd';
  3 | 
  4 | import './uploadMusic.scss';
  5 | 
  6 | function getBase64(img, callback) {
  7 | 	const reader = new FileReader();
  8 | 	reader.addEventListener('load', () => callback(reader.result));
  9 | 	reader.readAsDataURL(img);
 10 | }
 11 | 
 12 | function beforeUpload(file) {
 13 | 	const isJPG = file.type === 'image/jpeg';
 14 | 	if (!isJPG) {
 15 | 		message.error('You can only upload JPG file!');
 16 | 	}
 17 | 	const isLt2M = file.size / 1024 / 1024 < 2;
 18 | 	if (!isLt2M) {
 19 | 		message.error('Image must smaller than 2MB!');
 20 | 	}
 21 | 	return isJPG && isLt2M;
 22 | }
 23 | 
 24 | class UploadMuisc extends React.Component {
 25 | 
 26 | 	constructor(props){
 27 | 		super(props);
 28 | 		this.state = {
 29 | 			title: '',
 30 | 			author: '',
 31 | 			cover: '',
 32 | 			content: '',
 33 | 		};
 34 | 	}
 35 | 
 36 | 	handleChangeImg = (info) => {
 37 | 		if (info.file.status === 'uploading') {
 38 | 			this.setState({ loading: true });
 39 | 			return;
 40 | 		}
 41 | 		if (info.file.status === 'done') {
 42 | 			// Get this url from response in real world.
 43 | 			getBase64(info.file.originFileObj, cover => this.setState({
 44 | 				cover: info.file.response.URL,
 45 | 				loading: false,
 46 | 			}));
 47 |    		}
 48 | 	}
 49 | 
 50 | 	handleChange(v, key){
 51 | 		this.setState({
 52 | 			[key]: v.target.value
 53 | 		})
 54 | 	}
 55 | 
 56 | 	handleClickSave = () =>{
 57 | 		const {title, author, cover, content} = this.state;
 58 | 		if( title === '' || author === '' || cover === '' || content === ''){
 59 | 			return alert('内容不能为空！');
 60 | 		}
 61 | 		this.props.handleClickSave(this.state);
 62 | 	}
 63 | 
 64 |     render() {
 65 |     	const uploadButton = (
 66 |     		<div>
 67 |     			<Icon type={this.state.loading ? 'loading' : 'plus'} />
 68 |     			<div className="ant-upload-text">Upload</div>
 69 |     		</div>
 70 |     	);
 71 |     	const { cover } = this.state;
 72 | 		const props = {
 73 | 			name: 'music',
 74 | 			action: '/music/uploadMusic',
 75 | 			headers: {
 76 | 				authorization: 'authorization-text',
 77 | 			},
 78 | 			onChange: (info)=> {
 79 | 				if (info.file.status !== 'uploading') {
 80 | 					console.log(info.file, info.fileList);
 81 | 				}
 82 | 				if (info.file.status === 'done') {
 83 | 					this.setState({
 84 | 						content: info.file.response.URL
 85 | 					})
 86 | 					message.success(`${info.file.name} file uploaded successfully`);
 87 | 				} else if (info.file.status === 'error') {
 88 | 					message.error(`${info.file.name} file upload failed.`);
 89 | 				}
 90 | 			},
 91 | 		};
 92 | 
 93 |         return (
 94 |             <div className='music-upload'>
 95 | 				<Row>
 96 | 					<Col span={4} >
 97 | 						<div>
 98 | 							<span>歌曲名：</span>
 99 | 							<Input onChange={ (v) => this.handleChange(v, 'title')}></Input>
100 | 						</div>
101 | 						<div style={{'marginTop': '30px'}}>
102 | 							<span>歌手名：</span>
103 | 							<Input onChange={ (v) => this.handleChange(v, 'author')}></Input>
104 | 						</div>
105 | 					</Col>
106 | 					<Col span={4} offset={2} >
107 | 						<div>
108 | 							<div style={{'marginBottom': '20px'}}>上传封面：</div>
109 | 							<Upload
110 |     							name="image"
111 |     							listType="picture-card"
112 |     							className="cover-uploader"
113 |     							showUploadList={false}
114 |     							action="/music/uploadImg"
115 |     							beforeUpload={beforeUpload}
116 |     							onChange={this.handleChangeImg}
117 |     						>
118 |     							{cover ? <img src={cover} alt="" /> : uploadButton}
119 |     						</Upload>
120 | 						</div>
121 | 					</Col>
122 | 					<Col span={4} offset={1} >
123 | 						<div>
124 | 							<div style={{marginBottom: '30px'}}>上传音乐文件：</div>
125 | 							<Upload {...props}>
126 | 								<Button>
127 | 									<Icon type="upload" /> Click to Upload
128 | 								</Button>
129 | 							</Upload>
130 | 						</div>
131 | 					</Col>
132 | 					<Button 
133 | 						className='music-upload-btn' 
134 | 						type="primary" 
135 | 						onClick={this.handleClickSave }
136 | 					>保存</Button>						
137 | 				</Row>
138 |             </div>
139 |         );
140 |     }
141 | }
142 | 
143 | export default UploadMuisc;
144 | 


--------------------------------------------------------------------------------
/src/components/uploadMusic/uploadMusic.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .music-upload{
 4 | 	border-bottom: 1px dotted #ccc;padding-bottom: 20px;position: relative;
 5 | 	.cover-uploader{
 6 | 		@include WH( 100px );
 7 | 		img{
 8 | 			@include WH( 100px );
 9 | 		}
10 | 	}
11 | 	.music-upload-btn{
12 | 		position: absolute;right: 20px;bottom: 0px;
13 | 	}
14 | }


--------------------------------------------------------------------------------
/src/components/userinfo/userinfo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import './userinfo.scss';
 4 | 
 5 | class UserInfo extends React.Component {
 6 | 
 7 | 	render() {
 8 | 		return (
 9 | 			<div className='userinfo'>
10 | 				<img src={this.props.avatar} alt="" />
11 | 				<span>{this.props.username}</span>
12 | 			</div>
13 | 		);
14 | 	}
15 | }
16 | 
17 | export default UserInfo
18 | 


--------------------------------------------------------------------------------
/src/components/userinfo/userinfo.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .userinfo{
 4 | 	display: flex;flex-flow: column nowrap;align-items: center;
 5 | 	img{
 6 | 		@include WH( 120px );
 7 | 	}
 8 | 	span{
 9 | 		display: block;margin-top: 20px;
10 | 	}
11 | }


--------------------------------------------------------------------------------
/src/containers/admin/admin.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { withRouter, Switch, Route, Link } from 'react-router-dom';
  3 | import { connect } from 'react-redux';
  4 | import { Layout, Menu, Icon, Avatar } from 'antd';
  5 | import axios from 'axios';
  6 | 
  7 | import { getUserInfo } from '../../actions/actions';
  8 | import PostArticle from './subpage/postArticle';
  9 | import EditArticle from './subpage/editArticle';
 10 | import EditUser from './subpage/editUser';
 11 | import UpdateArticle from './subpage/updateArticle';
 12 | import EditMessage from './subpage/editMessage';
 13 | import EditMusic from './subpage/editMusic';
 14 | 
 15 | import './admin.scss';
 16 | 
 17 | const { Sider, Header, Content } = Layout;
 18 | 
 19 | class Admin extends React.Component {
 20 | 	state = {
 21 | 		collapsed: false,
 22 | 	};
 23 | 	toggle = () => {
 24 | 		this.setState({
 25 | 			collapsed: !this.state.collapsed,
 26 | 		});
 27 | 	}
 28 | 
 29 | 	componentWillMount() {
 30 | 		axios.get('/user/info')
 31 | 			.then(res =>{
 32 | 				if( res.status === 200 && res.data.code === 0){
 33 | 						return null
 34 | 				} else {
 35 | 						this.props.history.push('/signin')
 36 | 					}
 37 | 				}
 38 | 			)
 39 | 		this.props.getUserInfo();
 40 | 	}
 41 | 
 42 | 	render() {
 43 | 		const location = this.props.location.pathname;
 44 | 		return (
 45 | 			<Layout style={{ minHeight: '100vh' }} key='layout'>
 46 | 				<Sider
 47 |           			trigger={null}
 48 |           			collapsible
 49 |           			collapsed={this.state.collapsed}
 50 | 				>
 51 | 				    <Menu theme="dark" mode="inline" selectedKeys={[location]} >
 52 | 				        <Menu.Item key='/'>
 53 | 				        	<Link to='/'>
 54 | 				            	<Icon type="home" />
 55 | 				            	<span>网站首页</span>
 56 | 				            </Link>
 57 | 				        </Menu.Item>
 58 | 				        <Menu.Item key='/admin'>
 59 | 				        	<Link to='/admin'>
 60 | 								<Icon type="user" />
 61 | 								<span>用户管理</span>
 62 | 							</Link>
 63 | 				        </Menu.Item>
 64 | 				        <Menu.Item key='/admin/postArticle'>
 65 | 				        	<Link to='/admin/postArticle'>
 66 | 								<Icon type="file-add" />
 67 | 								<span>文章发表</span>
 68 | 							</Link>
 69 | 				        </Menu.Item>
 70 | 				        <Menu.Item key='/admin/editArticle'>
 71 | 				        	<Link to='/admin/editArticle'>
 72 | 				            	<Icon type="edit" />
 73 | 				            	<span>文章管理</span>
 74 | 				            </Link>
 75 | 				        </Menu.Item>
 76 | 				        <Menu.Item key='/admin/editMessage'>
 77 | 				        	<Link to='/admin/editMessage'>
 78 | 				            	<Icon type="tool" />
 79 | 				            	<span>留言管理</span>
 80 | 				            </Link>
 81 | 				        </Menu.Item>
 82 | 				         <Menu.Item key='/admin/editMusic'>
 83 | 				        	<Link to='/admin/editMusic'>
 84 | 				            	<Icon type="play-circle-o" />
 85 | 				            	<span>音乐管理</span>
 86 | 				            </Link>
 87 | 				        </Menu.Item>
 88 | 				    </Menu>
 89 | 				</Sider>
 90 | 				<Layout>
 91 | 				    <Header style={{ background: '#fff', padding: 0 }} className='admin-header'>
 92 |           				<Icon
 93 |           				  className="trigger"
 94 |           				  type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
 95 |           				  onClick={this.toggle}
 96 |           				/>
 97 |           				<Avatar 
 98 | 							src={this.props.user.avatar ? this.props.user.avatar : require('../../static/images/avatar.jpg')}
 99 | 							className='user-avatar'
100 | 							size='large'
101 |           				/>
102 |           			</Header>
103 |           			<Content style={{ margin: '16px' }}>
104 | 						<Switch>
105 | 							<Route path={`${this.props.match.url}/`} exact component={EditUser} />
106 | 							<Route path={`${this.props.match.url}/postArticle`} component={PostArticle} />
107 | 							<Route path={`${this.props.match.url}/editArticle`} component={EditArticle} />
108 | 							<Route path={`${this.props.match.url}/updateArticle/:name`} component={UpdateArticle} />
109 | 							<Route path={`${this.props.match.url}/editMessage`} component={EditMessage} />
110 | 							<Route path={`${this.props.match.url}/editMusic`} component={EditMusic} />
111 | 						</Switch>
112 | 					</Content>
113 | 				</Layout>
114 | 			</Layout>
115 | 			
116 | 		);
117 | 	}
118 | }
119 | 
120 | const mapStateToProps = (state) => {
121 | 	return {
122 | 		user: state.user
123 | 	}
124 | }
125 | 
126 | const mapDispatchToProps = (dispatch) =>{
127 | 	return {
128 | 		getUserInfo: () => dispatch(getUserInfo())
129 | 	}
130 | }
131 | 
132 | export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Admin))
133 | 


--------------------------------------------------------------------------------
/src/containers/admin/admin.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .trigger {
 4 |   font-size: 18px;
 5 |   line-height: 64px;
 6 |   padding: 0 24px;
 7 |   cursor: pointer;
 8 |   transition: color .3s;
 9 | }
10 | .trigger:hover {
11 |   color: #1890ff;
12 | }
13 | 
14 | .admin-header{
15 | 	display: flex;justify-content: space-between;align-items: center;
16 | 	.user-avatar{
17 | 		margin-right: 20px;
18 | 	}
19 | }


--------------------------------------------------------------------------------
/src/containers/admin/subpage/editArticle.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | 
 4 | import EditArticleList from '../../../components/editArticleList/editArticleList';
 5 | import { initArticleList, delArticle } from '../../../actions/actions';
 6 | 
 7 | class EditArticle extends React.Component {
 8 | 
 9 | 	componentWillMount() {
10 | 		this.props.initArticleList('全部');
11 | 	}
12 | 	handleClickDel = (id) =>{
13 | 		this.props.delArticle(id);
14 | 	}
15 | 
16 | 	render() {
17 | 		return (
18 | 			<EditArticleList 
19 | 				articlelist={this.props.articlelist} 
20 | 				handleClickDel= {this.handleClickDel}
21 | 			/>
22 | 		);
23 | 	}
24 | }
25 | 
26 | const mapStateToProps = (state) => {
27 | 	return {
28 | 		articlelist: state.article,
29 | 	}
30 | }
31 | 
32 | const mapDispatchToProps = (dispatch) => {
33 | 	return {
34 | 		initArticleList: (v) => dispatch(initArticleList(v)),
35 | 		delArticle: (id) => dispatch(delArticle(id))
36 | 	}
37 | }
38 | 
39 | 
40 | export default connect(mapStateToProps, mapDispatchToProps )(EditArticle)
41 | 


--------------------------------------------------------------------------------
/src/containers/admin/subpage/editMessage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | 
 4 | import { getMessage, delMessage } from '../../../actions/actions';
 5 | import EditMessageList from '../../../components/editMessageList/editMessageList';
 6 | 
 7 | class EditMessage extends React.Component{
 8 | 
 9 | 	componentWillMount() {
10 | 		this.props.getMessage();
11 | 	}
12 | 
13 | 	handleClickDel(id){
14 | 		this.props.delMessage(id);
15 | 	}
16 | 
17 | 	render(){
18 | 		return (
19 | 			<EditMessageList 
20 | 				messagelist={this.props.messagelist}
21 | 				handleClickDel={ (id) =>this.handleClickDel(id)}
22 | 			/>
23 | 		)
24 | 	}
25 | }
26 | 
27 | const mapStateToProps = (state) => {
28 | 	return {
29 | 		messagelist: state.message,
30 | 	}
31 | }
32 | 
33 | const mapDispatchToProps = (dispatch) => {
34 | 	return {
35 | 		getMessage: () => dispatch(getMessage()),
36 | 		delMessage: (id) => dispatch(delMessage(id))
37 | 	}
38 | }
39 | 
40 | 
41 | export default connect(mapStateToProps, mapDispatchToProps )(EditMessage)


--------------------------------------------------------------------------------
/src/containers/admin/subpage/editMusic.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | import axios from 'axios';
 4 | 
 5 | import UploadMusic from '../../../components/uploadMusic/uploadMusic';
 6 | import EditMusicList from '../../../components/editMusicList/editMusicList';
 7 | import { getMusicList } from '../../../actions/actions';
 8 | 
 9 | class EditMusic extends React.Component {
10 | 
11 | 	componentWillMount() {
12 | 		this.props.getMusicList();
13 | 	}
14 | 
15 | 	handleClickSave = (value) =>{
16 | 		const { title, author, cover, content } = value;
17 | 		axios.post('/music/addMusic', { title, author, cover, content })
18 | 			.then( res =>{
19 | 				if( res.status === 200 && res.data.code === 0 ){
20 | 					alert('上传成功！');
21 | 				}
22 | 			})
23 | 			.then( () =>{
24 | 				this.props.history.replace('/music');
25 | 			})
26 | 	}
27 | 	
28 | 	handleClickDel = (id) =>{
29 | 		axios.post('/music/delMusic', { id })
30 | 			.then( res =>{
31 | 				if( res.status === 200 && res.data.code === 0 ){
32 | 					this.props.getMusicList();
33 | 				}
34 | 			})
35 | 	}
36 | 
37 | 	render() {
38 | 		return (
39 | 			[
40 | 				<UploadMusic 
41 | 					key='uploadMuisc'
42 | 					handleClickSave={ this.handleClickSave }
43 | 				/>,
44 | 				<EditMusicList 
45 | 					key='editMuiscList'
46 | 					musicList={this.props.musicList}
47 | 					handleClickDel={this.handleClickDel}
48 | 				/>
49 | 			]
50 | 		);
51 | 	}
52 | }
53 | 
54 | const mapStateToProps = (state) => {
55 | 	return {
56 | 		musicList: state.music.musicList
57 | 	}
58 | }
59 | 
60 | const mapDispatchToProps = (dispatch) => {
61 | 	return {
62 | 		getMusicList: () => dispatch(getMusicList())
63 | 	}
64 | }
65 | 
66 | export default connect(mapStateToProps, mapDispatchToProps )(EditMusic)


--------------------------------------------------------------------------------
/src/containers/admin/subpage/editUser.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | import axios from 'axios';
 4 | import { withRouter } from 'react-router-dom';
 5 | 
 6 | import EditUserPage from '../../../components/editUserPage/editUserPage';
 7 | 
 8 | class EditUser extends React.Component {
 9 | 
10 | 	handleClickSave(obj, key){
11 | 		if( key === 'password'){
12 | 			const { oldpassword, newpassword, repassword } = obj;
13 | 			const pPattern = /^[a-zA-Z0-9_]{6,16}$/;
14 | 			if( repassword === '' || newpassword === ''|| oldpassword === ''){
15 | 				return alert('内容不能为空！');
16 | 			}
17 | 			if( newpassword !== repassword ){
18 | 				return alert('两次密码输入不一致！');
19 | 			}
20 | 			if (!pPattern.test(newpassword)) {
21 | 				return alert('密码不规范！');
22 | 			}
23 | 			axios.post('/user/updatePwd', {oldpassword, newpassword})
24 | 				.then( res =>{
25 | 					if( res.status === 200 ){
26 | 						if( res.data.code === 0){
27 | 							alert('修改成功！');
28 | 						} else {
29 | 							alert('旧密码输入不正确！');
30 | 						}
31 | 					}
32 | 				})
33 | 				.then( () =>{
34 | 					this.props.history.replace();
35 | 				})
36 | 		} else {
37 | 			const value = obj[key];
38 | 			console.log(value)
39 | 			axios.post(`/user/update${key}`, {value})
40 | 				.then( res =>{
41 | 					if(res.status === 200 ){
42 | 						if( res.data.code === 0){
43 | 							alert('修改成功！');
44 | 						}
45 | 					}
46 | 				})
47 | 				.then( () =>{
48 | 					window.location.reload();
49 | 				})
50 | 		}
51 | 	}
52 | 
53 | 	render() {
54 | 		if( this.props.user._id == null ){
55 | 			return null;
56 | 		}
57 | 		return (
58 | 			<EditUserPage
59 | 				avatar={this.props.user.avatar || require('../../../static/images/avatar.jpg')}
60 | 				username={this.props.user.username || ''}
61 | 				handleClickSave={(obj, key) => this.handleClickSave(obj, key)}
62 | 			></EditUserPage>
63 | 		);
64 | 	}
65 | }
66 | 
67 | const mapStateToProps = (state) =>{
68 | 	return {
69 | 		user: state.user
70 | 	}
71 | }
72 | 
73 | export default withRouter(connect(mapStateToProps)(EditUser))
74 | 


--------------------------------------------------------------------------------
/src/containers/admin/subpage/postArticle.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { withRouter } from 'react-router-dom';
 3 | import axios from 'axios';
 4 | 
 5 | import ArticleEditor from '../../../components/articleEditor/articleEditor';
 6 | 
 7 | 
 8 | class PostArticle extends React.Component {
 9 | 
10 | 	
11 | 	handleClickSave = (obj) =>{
12 | 		const { title, content, category, abstract } = obj;
13 | 		if( title === '' || content === '' || abstract === ''){
14 | 			return alert('内容不能为空！');
15 | 		}
16 | 		axios.post('/article/postArticle', {title, content, category, abstract} )
17 | 			.then( res =>{
18 | 				if( res.status === 200 && res.data.code === 1 ){
19 | 					alert('保存成功！');
20 | 				}
21 | 			})
22 | 			.then( ()=>{
23 | 				this.props.history.push('editArticle');
24 | 			})
25 | 	}
26 | 
27 | 
28 | 	render() {
29 | 
30 | 		return (
31 | 			<ArticleEditor 
32 | 				title= {''}
33 | 				category={'杂记'}
34 | 				abstract={''}
35 | 				content={''}
36 | 				handleClickSave={this.handleClickSave }
37 | 			/>
38 | 		);
39 | 
40 | 	}
41 | }
42 | 
43 | 
44 | 
45 | export default withRouter(PostArticle)
46 | 


--------------------------------------------------------------------------------
/src/containers/admin/subpage/updateArticle.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | import axios from 'axios';
 4 | 
 5 | import {initArticleList} from '../../../actions/actions';
 6 | import ArticleEditor from '../../../components/articleEditor/articleEditor';
 7 | 
 8 | class UpdateArticle extends React.Component {
 9 | 	componentWillMount() {
10 | 		this.props.initArticleList('全部');
11 | 		console.log(this.props.match.params.name)
12 | 	}
13 | 	handleClickSave = (obj) =>{
14 | 		const { title, content, category, abstract } = obj;
15 | 		if( title === '' || content === '' || abstract === ''){
16 | 			return alert('内容不能为空！');
17 | 		}
18 | 		axios.post('/article/updateArticle', {title, content, category, abstract, _id: this.props.match.params.name } )
19 | 			.then( res =>{
20 | 				if( res.status === 200 && res.data.code === 1 ){
21 | 					alert('修改成功！');
22 | 				}
23 | 			})
24 | 			.then( ()=>{
25 | 				this.props.history.replace('/admin/editArticle');
26 | 			})
27 | 	}
28 | 
29 | 	render() {
30 | 		const currentArticle = this.props.articlelist.filter(v=>{
31 | 			return v._id === this.props.match.params.name;
32 | 		})[0];
33 | 		console.log(currentArticle)
34 | 		return (
35 | 			this.props.articlelist.length === 0 ?  null :
36 | 			<ArticleEditor 
37 | 				title= {currentArticle.title}
38 | 				category={currentArticle.category}
39 | 				abstract={currentArticle.abstract}
40 | 				content={currentArticle.content}
41 | 				handleClickSave={this.handleClickSave}
42 | 			/>
43 | 			
44 | 		);
45 | 	}
46 | }
47 | 
48 | const mapStateToProps = (state) =>{
49 | 	return {
50 | 		articlelist: state.article
51 | 	}
52 | }
53 | 
54 | const mapDispatchToProps = (dispatch) =>{
55 | 	return {
56 | 		initArticleList: (v) => dispatch(initArticleList(v))
57 | 	}
58 | }
59 | 
60 | export default connect(mapStateToProps, mapDispatchToProps)(UpdateArticle)
61 | 


--------------------------------------------------------------------------------
/src/containers/blog/blog.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Switch, Route } from 'react-router-dom';
 3 | 
 4 | import BlogIndex from './subpage/blogindex';
 5 | import Article from './subpage/article';
 6 | 
 7 | import './blog.scss';
 8 | 
 9 | class Blog extends React.Component {
10 | 	render() {
11 | 		return (
12 | 			[
13 | 			<div className='blog-bg' key='blog-bg'></div>,
14 | 			<Switch key='Switch'>
15 | 				<Route exact path={`${this.props.match.url}/`} component={BlogIndex}></Route>
16 | 				<Route path={`${this.props.match.url}/article/:name`} component={Article} />
17 | 			</Switch>
18 | 			]
19 | 
20 | 		);
21 | 	}
22 | }
23 | export default Blog


--------------------------------------------------------------------------------
/src/containers/blog/blog.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .blog-bg{
 4 |     @include WH(100%);background: #363532 url(../../static/images/blog-bg.png);position: fixed;left: 0;top: 0;
 5 | }
 6 | .container-blog{
 7 |     @include WH( 80%, auto );position: absolute;right: 10%;top: 5%;background: #f5f5dc url(../../static/images/wrap-bg.png);box-sizing: border-box;padding: 40px;display: flex;justify-content: space-between;min-height: 90%;
 8 |     .container-left{
 9 |         @include WH( 70%, 100% );
10 |     }
11 |     .container-right{
12 |         @include WH( 20%, 100% );
13 |     }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/containers/blog/subpage/article.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | 
 4 | import {initArticleList} from '../../../actions/actions';
 5 | import ArticlePage from '../../../components/articlepage/articlepage';
 6 | 
 7 | class Article extends React.Component {
 8 | 	componentWillMount() {
 9 | 		this.props.initArticleList('全部');
10 | 	}
11 | 
12 | 	render() {
13 | 		const currentArticle = this.props.articlelist.filter(v=>{
14 | 			return v._id === this.props.match.params.name;
15 | 		})[0];
16 | 		return(
17 | 			this.props.articlelist.length === 0 ?  null :
18 | 			<ArticlePage currentArticle={currentArticle}></ArticlePage>
19 | 		);
20 | 	}
21 | }
22 | 
23 | 
24 | const mapStateToProps = (state) =>{
25 | 	return {
26 | 		articlelist: state.article
27 | 	}
28 | }
29 | 
30 | const mapDispatchToProps = (dispatch) =>{
31 | 	return {
32 | 		initArticleList: (v) => dispatch(initArticleList(v))
33 | 	}
34 | }
35 | 
36 | export default connect(mapStateToProps, mapDispatchToProps)(Article)


--------------------------------------------------------------------------------
/src/containers/blog/subpage/blogindex.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | 
 4 | import { initArticleList, getBlogInfo } from '../../../actions/actions';
 5 | import ArticleList from '../../../components/articlelist/articlelist';
 6 | import UserInfo from '../../../components/userinfo/userinfo';
 7 | import CategoryList from '../../../components/categorylist/categorylist';
 8 | 
 9 | 
10 | class BlogIndex extends React.Component {
11 | 
12 | 	componentWillMount() {
13 | 		this.props.initArticleList('全部');
14 | 		this.props.getBlogInfo();
15 | 	}
16 | 
17 | 	handleClickSelect = (value) =>{
18 | 		this.props.initArticleList(value);
19 | 	}
20 | 
21 | 	render() {
22 | 		const categorylist = [
23 | 			'全部', 'javascript', 'css', 'html', 'nodejs', 'React', '杂记', '转载'
24 | 		]
25 | 		return (
26 | 			<div className='container-blog'>
27 | 				<div className='container-left'>
28 | 					<ArticleList articlelist={this.props.articlelist} />
29 | 				</div>
30 | 				<div className='container-right'>
31 | 					<UserInfo 
32 | 						username={this.props.user.username}
33 | 						avatar={this.props.user.avatar}
34 | 					/>
35 | 					<CategoryList 
36 | 						categorylist={categorylist}
37 | 						handleClickSelect={this.handleClickSelect}
38 | 					/>
39 | 				</div>
40 | 			</div>
41 | 		)
42 | 	}
43 | }
44 | const mapStateToProps = (state) => {
45 | 	return {
46 | 		articlelist: state.article,
47 | 		user: state.user
48 | 	}
49 | }
50 | 
51 | const mapDispatchToProps = (dispatch) => {
52 | 	return {
53 | 		initArticleList: (v) => dispatch(initArticleList(v)),
54 | 		getBlogInfo: () => dispatch(getBlogInfo())
55 | 	}
56 | }
57 | 
58 | export default connect(mapStateToProps, mapDispatchToProps)(BlogIndex)


--------------------------------------------------------------------------------
/src/containers/homepage/homepage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | import './homepage.scss';
 4 | 
 5 | export default class Homepage extends React.Component {
 6 | 
 7 | 	render() {
 8 | 		const homenav = [
 9 | 			{
10 | 				title: '博客',
11 | 				icon: 'icon-bokexinwen',
12 | 				path: '/blog'
13 | 			},
14 | 			{
15 | 				title: '个人简历',
16 | 				icon: 'icon-gerenjianli',
17 | 				path: '/resume'
18 | 			},
19 | 
20 | 			{
21 | 				title: '音乐',
22 | 				icon: 'icon-yinle',
23 | 				path: '/music'
24 | 			},
25 | 			{
26 | 				title: '留言区',
27 | 				icon: 'icon-liuyanpinglun',
28 | 				path: '/message'
29 | 			},
30 | 			{
31 | 				title: '后台管理',
32 | 				icon: 'icon-guanli',
33 | 				path: '/admin'
34 | 			}
35 | 		];
36 | 		return (
37 | 			<div className='homepage'>
38 | 				<div className='homepage-nav'>
39 | 					{homenav.map(v => (
40 | 						<div key={v.path} className='navlink-wrap'>
41 | 							<div className='navlink-con'>
42 | 								<Link
43 | 									to={v.path}
44 | 									className='navlink-item item1'
45 | 								>
46 | 									<div className='navlink-icon'>
47 | 										<i className={`iconfont ${v.icon}`}></i>
48 | 										<span>{v.title}</span>
49 | 									</div>
50 | 								</Link>
51 | 								<Link
52 | 									to={v.path}
53 | 									className='navlink-item item2'
54 | 								>
55 | 									<div className='navlink-icon'>
56 | 										<i className={`iconfont ${v.icon}`}></i>
57 | 										<span>{v.title}</span>
58 | 									</div>
59 | 								</Link>
60 | 							</div>
61 | 						</div>
62 | 					))}
63 | 				</div>
64 | 			</div>
65 | 		);
66 | 	}
67 | }


--------------------------------------------------------------------------------
/src/containers/homepage/homepage.scss:
--------------------------------------------------------------------------------
  1 | @import '../../Global.scss';
  2 | @mixin set( $i, $s, $w, $h, $f: column ){
  3 | 	.navlink-icon{
  4 | 		display: flex;flex-flow: $f;justify-content: space-between;@include WH( $w, $h );align-items: center;
  5 | 	}
  6 | 	i{
  7 | 		font-size: $i;display: block;height: $i;line-height: $i;
  8 | 	}
  9 | 	span{
 10 | 		font-size: $s;display: block;height: $s;line-height: $s;
 11 | 	}
 12 | }
 13 | .homepage{
 14 | 	@include WH(100%); display: flex;justify-content: center;align-items: center;
 15 | }
 16 | .homepage-nav{
 17 | 	@include WH(35%, 52.5%);position: relative;
 18 | 	.navlink-wrap{
 19 | 		position: absolute;perspective: 100px;overflow: hidden;  transform-style: preserve-3d;perspective-origin: 50% 50%;
 20 | 		.navlink-con{
 21 | 			position: absolute;@include WH(100%);
 22 | 			.navlink-item{
 23 | 				display: flex;justify-content: center;align-items: center;@include ts;@include WH( 100% );position: absolute;
 24 | 			}
 25 | 			.item1{
 26 | 				transform: translateY(0) rotateX(0deg);transform-origin: top;z-index: 10;
 27 | 				span, i{
 28 | 					color: #fffafa;
 29 | 				}
 30 | 			}
 31 | 			.item2{
 32 | 				transform: translateY(-100%) rotateX(45deg);transform-origin: bottom;z-index: 1;
 33 | 			}
 34 | 			&:hover{
 35 | 				.item1{
 36 | 					transform: translateY(100%) rotateX(-45deg);z-index: 1;
 37 | 				}
 38 | 				.item2{
 39 | 					transform: translateY(0) rotateX(0deg);z-index: 10;
 40 | 				}
 41 | 			}
 42 | 
 43 | 		}
 44 | 		&:first-child{
 45 | 			@include WH( 31%, 65% );left: 0;top :0;
 46 | 			.navlink-con{
 47 | 				.item1{
 48 | 					@include set( 40px, 16px, 80px, 70px );background: #3d6e53;transform: translateX(0) rotateY(0deg);transform-origin: left;
 49 | 				}
 50 | 				.item2{
 51 | 					@include set( 40px, 16px, 80px, 70px );background: #fffafa;transform: translateX(-100%) rotateY(-45deg);transform-origin: right;
 52 | 					span,i{
 53 | 						color: #3d6e53;
 54 | 					}
 55 | 				}
 56 | 				&:hover{
 57 | 					.item1{
 58 | 						transform: translateX(100%) rotateY(45deg);
 59 | 					}
 60 | 					.item2{
 61 | 						transform: translateX(0) rotateY(0deg);
 62 | 					}
 63 | 				}				
 64 | 			}
 65 | 
 66 | 		}
 67 | 		&:nth-child(2){
 68 | 			@include WH( 66%, 30% );right: 0;top: 0;
 69 | 			.item1{
 70 | 				@include set( 40px, 20px, 130px, 40px, row );background: #17507d;
 71 | 			}
 72 | 			.item2{
 73 | 				@include set( 40px, 20px, 130px, 40px, row );background: #fffafa;
 74 | 				span,i{
 75 | 					color: #17507d;
 76 | 				}
 77 | 			}
 78 | 
 79 | 		}
 80 | 		&:nth-child(3){
 81 | 			@include WH( 32%, 31% );right: 0;top: 34%;
 82 | 			.item1{
 83 | 				@include set( 34px, 16px, 50px, 60px );background: #b8844f;
 84 | 			}
 85 | 			.item2{
 86 | 				@include set( 34px, 16px, 50px, 60px );background: #fffafa;
 87 | 				span,i{
 88 | 					color: #b8844f;
 89 | 				}
 90 | 			}
 91 | 		}
 92 | 		&:nth-child(4){
 93 | 			@include WH( 31% );top: 34%;left: 34%;
 94 | 			.item1{
 95 | 				@include set( 34px, 16px, 90px, 70px, row );background: #c03f3c;
 96 | 			}
 97 | 			.item2{
 98 | 				@include set( 34px, 16px, 90px, 70px, row );background: #fffafa;
 99 | 				span,i{
100 | 					color: #c03f3c;
101 | 				}
102 | 			}
103 | 		}
104 | 		&:nth-child(5){
105 | 			@include WH( 100%, 31% );bottom: 0;left: 0;
106 | 			.item1{
107 | 				@include set( 40px, 20px, 130px, 40px, row );background: #973444;
108 | 			}
109 | 			.item2{
110 | 				@include set( 40px, 20px, 130px, 40px, row );background: #fffafa;
111 | 				span,i{
112 | 					color: #973444;
113 | 				}
114 | 			}
115 | 		}
116 | 	}
117 | }
118 | 


--------------------------------------------------------------------------------
/src/containers/layout/layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Route, Switch } from 'react-router-dom';
 3 | 
 4 | import Homepage from '../homepage/homepage';
 5 | import Blog from '../blog/blog';
 6 | import Message from '../message/message';
 7 | import Admin from '../admin/admin';
 8 | import Navlist from '../../components/navlist/navlist';
 9 | import Signin from '../signin/signin';
10 | import Register from '../register/register';
11 | import Music from '../music/music';
12 | 
13 | import './layout.scss'
14 | 
15 | class Layout extends React.Component {
16 | 	render() {
17 | 		return (
18 | 			<div className='wrap'>
19 | 				<Switch>
20 | 					<Route exact path="/" component={Homepage} />
21 | 					<Route path="/blog" component={Blog} />
22 | 					<Route path="/message" component={Message} />
23 | 					<Route path="/music" component={Music} />
24 | 				</Switch>
25 | 				<Switch>
26 | 					<Route path='/admin' component={Admin} />
27 | 					<Route path='/signin' component={Signin} />
28 | 					<Route path='/register' component={Register} />
29 | 					<Route path="/:name" component={Navlist} />
30 | 				</Switch>	
31 | 			</div>
32 | 		)
33 | 	}
34 | }
35 | 
36 | export default Layout


--------------------------------------------------------------------------------
/src/containers/layout/layout.scss:
--------------------------------------------------------------------------------
1 | @import '../../Global.scss';
2 | 
3 | .wrap{
4 | 	@include WH( 100% );background: #363532 url(../../static/images/wrap-bg.png) repeat;min-width: 1300px;min-height: 600px;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/containers/message/message.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | 
 4 | import MessageList from '../../components/messagelist/messagelist';
 5 | import MessagePost from '../../components/messagepost/messagepost';
 6 | import { getMessage, postMessage } from '../../actions/actions';
 7 | 
 8 | import './message.scss';
 9 | 
10 | class Message extends React.Component {
11 | 
12 | 	componentWillMount() {
13 | 		this.props.getMessage();
14 | 	}
15 | 
16 | 	render() {
17 | 		return (
18 | 			[
19 | 				<div className='blog-bg' key='blog-bg'></div>,
20 | 				<div className='container-message' key='container-message'>
21 | 					<MessageList messagelist={this.props.messageList}/>
22 | 					<MessagePost postMessage={this.props.postMessage}/>
23 | 				</div>
24 | 			]
25 | 		);
26 | 	}
27 | }
28 | 
29 | const mapStateToProps = (state) =>{
30 | 	return {
31 | 		messageList: state.message
32 | 	}
33 | }
34 | const mapDispatchToProps = (dispatch) =>{
35 | 	return {
36 | 		getMessage: () => dispatch(getMessage()),
37 | 		postMessage: (value) => dispatch(postMessage(value))
38 | 	}
39 | }
40 | 
41 | export default connect(mapStateToProps, mapDispatchToProps)(Message)


--------------------------------------------------------------------------------
/src/containers/message/message.scss:
--------------------------------------------------------------------------------
1 | @import '../../Global.scss';
2 | 
3 | .container-message{
4 |     @include WH( 80%, auto );position: absolute;right: 10%;top: 5%;background: #f5f5dc url(../../static/images/wrap-bg.png);box-sizing: border-box;padding: 40px;display: flex;min-height: 90%;flex-flow: column nowrap;justify-content: space-between;
5 | }


--------------------------------------------------------------------------------
/src/containers/music/music.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | 
 4 | import { getMusicList, changeMusic } from '../../actions/actions';
 5 | import MusicPlayer from '../../components/musicPlayer/musicPlayer';
 6 | 
 7 | import './music.scss';
 8 | 
 9 | class Music extends React.Component {
10 | 
11 | 	componentWillMount() {
12 | 		this.props.getMusicList();
13 | 	}
14 | 	
15 | 	handleClickChange = (id) =>{
16 | 		this.props.changeMusic(id);
17 | 	}
18 | 
19 | 	render() {
20 | 		return (
21 | 				<MusicPlayer 
22 | 					musicList={this.props.musicList}
23 | 					currentMusic={this.props.musicList[this.props.id]}
24 | 					handleClickChange={this.handleClickChange}
25 | 					currentId={this.props.id}
26 | 				/>
27 | 		);
28 | 	}
29 | }
30 | 
31 | const mapStateToProps = (state) => {
32 | 	return {
33 | 		musicList: state.music.musicList,
34 | 		id: state.music.currentMusic
35 | 	}
36 | }
37 | 
38 | const mapDispatchToProps = (dispatch) => {
39 | 	return {
40 | 		getMusicList: () => dispatch(getMusicList()),
41 | 		changeMusic: (id) => dispatch(changeMusic(id))
42 | 	}
43 | }
44 | 
45 | export default connect(mapStateToProps, mapDispatchToProps )(Music)


--------------------------------------------------------------------------------
/src/containers/music/music.scss:
--------------------------------------------------------------------------------
1 | @import '../../Global.scss';
2 | 
3 | 


--------------------------------------------------------------------------------
/src/containers/register/register.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | import { Redirect } from 'react-router-dom';
 4 | 
 5 | import { errorMsg, register, clearMsg } from '../../actions/actions';
 6 | 
 7 | import './register.scss';
 8 | 
 9 | class Register extends React.Component {
10 | 	constructor(props) {
11 | 		super(props);
12 | 		this.state = {
13 | 			account: '',
14 | 			password: '',
15 | 			repassword: ''
16 | 		}
17 | 	}
18 | 	handleChange(key, v) {
19 | 		this.setState({
20 | 			[key]: v.target.value
21 | 		})
22 | 	}
23 | 	handleBack = () =>{
24 | 		this.props.history.push('signin');
25 | 	}
26 | 	handleRegister = () =>{
27 | 		const { account, password, repassword } = this.state;
28 | 		const uPattern = /^[a-zA-Z0-9_]{6,16}$/;
29 | 		const pPattern = /^[a-zA-Z0-9_]{6,16}$/;
30 | 
31 | 		if (!account || !password || !repassword) {
32 | 			return this.props.errorMsg('注册信息不能为空!');
33 | 		}
34 | 		if (!uPattern.test(account)) {
35 | 			return this.props.errorMsg('Account number is not required!');
36 | 		}
37 | 		if (repassword !== password) {
38 | 			return this.props.errorMsg('Confirm the inconsistency of ciphers!');
39 | 		}
40 | 		if (!pPattern.test(password)) {
41 | 			return this.props.errorMsg('Password undesirable!');
42 | 		}
43 | 		this.props.register(this.state)
44 | 	}
45 | 	clearMsg() {
46 | 		if (this.props.msg) {
47 | 			this.props.clearMsg();
48 | 		}
49 | 	}
50 | 	render() {
51 | 		return (
52 | 			<div className='container-register' onClick={this.clearMsg.bind(this)}>
53 | 				{this.props.redirectTo ? <Redirect to={'/admin'}/> : null}
54 | 				<form className='register'>
55 | 					{this.props.msg ? <p className='register-msg'>{this.props.msg}</p> : null}
56 | 					<input type='text' className='register-input' placeholder='注册账号' onChange={v => this.handleChange('account', v)}></input>
57 | 					<input type='password' className='register-input' placeholder='注册密码' onChange={v => this.handleChange('password', v)}></input>
58 | 					<input type='password' className='register-input' placeholder='再输入密码' onChange={v => this.handleChange('repassword', v)}></input>
59 | 					<div className='register-btn'>
60 | 						<button type='button' onClick={this.handleBack}>后退</button>
61 | 						<button type='button' onClick={this.handleRegister}>注册</button>
62 | 					</div>
63 | 				</form>
64 | 			</div>
65 | 		)
66 | 	}
67 | }
68 | 
69 | const mapStateToProps = (state) => {
70 | 	return {
71 | 		msg: state.user.msg,
72 | 		redirectTo: state.user.redirectTo
73 | 	}
74 | }
75 | 
76 | const mapDispatchToProps = (dispatch, ownProps) => {
77 | 	return {
78 | 		register: (...text) => dispatch(register(...text)),
79 | 		errorMsg: (...text) => dispatch(errorMsg(...text)),
80 | 		clearMsg: () => dispatch(clearMsg())
81 | 	}
82 | }
83 | 
84 | 
85 | export default connect(mapStateToProps, mapDispatchToProps)(Register);;
86 | 
87 | 
88 | 


--------------------------------------------------------------------------------
/src/containers/register/register.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .container-register{
 4 | 	@include WH(100%);display: flex;justify-content: center;align-items: center;
 5 | }
 6 | .register{
 7 | 	@include WH( 280px, 300px );display: flex;flex-flow: column wrap;justify-content: space-around;align-items: center;position: relative;
 8 | 	.register-input{
 9 | 		@include WH( 100%, 50px );@include ts( .5s );@include Sp( 16px, #fff, 50px );background: #363532;border: 1px solid #f2de76;
10 | 		&::-webkit-input-placeholder{
11 | 			color: #fff;
12 | 		}
13 | 		&:hover{
14 | 			box-shadow:  0 0 2px 2px #241f1f inset;
15 | 		}
16 | 		&:focus{
17 | 			box-shadow:  0 0 2px 2px #241f1f;
18 | 		}
19 | 	}
20 | 	.register-msg{
21 | 		position: absolute;color: #fe2b2b;@include WH( 280px, 20px );top: -10%;left: 0;@include Sp( 14px, #fff, 20px );@include ts( .3s );
22 | 	}
23 | 	.register-btn{
24 | 		@include WH( 240px, 40px );display: flex;justify-content: space-between;
25 | 		button{
26 | 			@include ts( .5s );@include Sp( 16px, #fff, 40px );border-radius: 8px;background: #363532;
27 | 		}
28 | 	}
29 | }
30 | 


--------------------------------------------------------------------------------
/src/containers/signin/signin.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | import { withRouter } from 'react-router-dom';
 4 | import { Redirect } from 'react-router-dom';
 5 | 
 6 | import AuthRoute from '../../components/authRoute/authRoute';
 7 | import { errorMsg, signin, clearMsg } from '../../actions/actions';
 8 | 
 9 | import './signin.scss';
10 | 
11 | class Signin extends React.Component {
12 | 	constructor(props) {
13 | 		super(props);
14 | 		this.state = {
15 | 			account: '',
16 | 			password: ''
17 | 		}
18 | 	}
19 | 	register = () =>{
20 | 		this.props.history.push('/register');
21 | 	}
22 | 	signin = () =>{
23 | 		const { account, password } = this.state;
24 | 		if (!account || !password) {
25 | 			return this.props.errorMsg('账号或密码为空!');
26 | 		}
27 | 		this.props.signin({ account, password });
28 | 	}
29 | 	handleChange(key, v) {
30 | 		this.setState({
31 | 			[key]: v.target.value
32 | 		})
33 | 	}
34 | 	clearMsg = () => {
35 | 		if (this.props.msg) {
36 | 			this.props.clearMsg();
37 | 		}
38 | 	}
39 | 	render() {
40 | 		return (
41 | 			[
42 | 				<AuthRoute key='authRoute'/>,
43 | 				<div className='container-signin' onClick={this.clearMsg} key='container-signin'>
44 | 					{this.props.redirectTo ? <Redirect to='/admin' /> : null}
45 | 					<form className='signin'>
46 | 						<input placeholder='用户名' onChange={v => this.handleChange('account', v)} className='signin-input'></input>
47 | 						<input placeholder='密码' onChange={v => this.handleChange('password', v)} className='signin-input' type='password'></input>
48 | 						{this.props.msg ? <p className='signin-msg'>{this.props.msg}</p> : null}
49 | 						<div className='signin-btn'>
50 | 							<button type='button' onClick={this.signin}>登陆</button>
51 | 							<button type='button' onClick={this.register}>注册</button>
52 | 						</div>
53 | 					</form>
54 | 				</div>
55 | 			]
56 | 		)
57 | }
58 | }
59 | 
60 | function mapStateToProps(state) {
61 | 	return {
62 | 		msg: state.user.msg,
63 | 		redirectTo: state.user.redirectTo
64 | 	}
65 | }
66 | 
67 | function mapDispatchToProps(dispatch) {
68 | 	return {
69 | 		errorMsg: (...text) => dispatch(errorMsg(...text)),
70 | 		signin: (...text) => dispatch(signin(...text)),
71 | 		clearMsg: () => dispatch(clearMsg())
72 | 	}
73 | }
74 | 
75 | export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Signin));


--------------------------------------------------------------------------------
/src/containers/signin/signin.scss:
--------------------------------------------------------------------------------
 1 | @import '../../Global.scss';
 2 | 
 3 | .container-signin{
 4 | 	@include WH(100%);display: flex;justify-content: center;align-items: center;
 5 | }
 6 | .signin{
 7 | 	@include WH( 280px, 200px );display: flex;flex-flow: column wrap;justify-content: space-around;align-items: center;position: relative;
 8 | 	.signin-input{
 9 | 		@include WH( 100%, 50px );@include ts( .5s );@include Sp( 16px, #fff, 50px );background: #363532;border: 1px solid #f2de76;
10 | 		&::-webkit-input-placeholder{
11 | 			color: #fff;
12 | 		}
13 | 		&:hover{
14 | 			box-shadow:  0 0 2px 2px #241f1f inset;
15 | 		}
16 | 		&:focus{
17 | 			box-shadow:  0 0 2px 2px #241f1f;
18 | 		}
19 | 	}
20 | 	.signin-msg{
21 | 		position: absolute;color: #fe2b2b;@include WH( 280px, 20px );top: -10%;left: 0;@include Sp( 14px, #fff, 20px );@include ts( .3s );
22 | 	}
23 | 	.signin-btn{
24 | 		@include WH( 240px, 40px );display: flex;justify-content: space-between;
25 | 		button{
26 | 			@include ts( .5s );@include Sp( 16px, #fff, 40px );border-radius: 8px;background: #363532;
27 | 		}
28 | 	}
29 | }
30 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { createStore, applyMiddleware } from 'redux';
 4 | import thunk from 'redux-thunk';
 5 | import { BrowserRouter } from 'react-router-dom';
 6 | import { Provider } from 'react-redux';
 7 | 
 8 | import Layout from './containers/layout/layout';
 9 | import reducers from './reducers/reducers';
10 | import registerServiceWorker from './registerServiceWorker';
11 | 
12 | import './Global.scss';
13 | import './static/font/iconfont.css';
14 | 
15 | const store = createStore(
16 | 	reducers, 
17 | 	applyMiddleware(thunk)
18 | )
19 | 
20 | ReactDOM.render(
21 | 	(<Provider store = {store}>
22 | 		<BrowserRouter>
23 | 			<Layout />
24 | 		</BrowserRouter>
25 | 	</Provider>), 
26 | 	document.getElementById('root')
27 | );
28 | 
29 | registerServiceWorker();


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/reducers/article.js:
--------------------------------------------------------------------------------
 1 | import { INIT_ARTICLE } from '../actions/actions';
 2 | 
 3 | export function article(state = [], action){
 4 | 	switch(action.type){
 5 | 		case INIT_ARTICLE :
 6 | 			return [...action.payload];
 7 | 		default :
 8 | 			return [...state];
 9 | 	}
10 | }
11 | 
12 | 
13 | 


--------------------------------------------------------------------------------
/src/reducers/message.js:
--------------------------------------------------------------------------------
 1 | import { INIT_MESSAGE } from '../actions/actions';
 2 | 
 3 | export function message(state = [], action){
 4 | 	switch(action.type){
 5 | 		case INIT_MESSAGE :
 6 | 			return [...action.payload];
 7 | 		default :
 8 | 			return [...state];
 9 | 	}
10 | }
11 | 
12 | 
13 | 


--------------------------------------------------------------------------------
/src/reducers/music.js:
--------------------------------------------------------------------------------
 1 | import { INIT_MUSIC, CHANGE_MUSIC } from '../actions/actions';
 2 | 
 3 | const initState = {
 4 | 	musicList: [],
 5 | 	currentMusic: 0
 6 | }
 7 | 
 8 | export function music(state = initState, action){
 9 | 	switch(action.type){
10 | 		case INIT_MUSIC :
11 | 			return { musicList: [...action.payload], currentMusic:action.id };
12 | 		case CHANGE_MUSIC:
13 | 			return { ...state, currentMusic: action.id }
14 | 		default :
15 | 			return { ...state };
16 | 	}
17 | }
18 | 
19 | 
20 | 


--------------------------------------------------------------------------------
/src/reducers/reducers.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux';
 2 | 
 3 | import { user } from './user';
 4 | import { article } from './article';
 5 | import { message } from './message';
 6 | import { music } from './music';
 7 | 
 8 | const reducers = combineReducers({
 9 | 	user,
10 | 	article,
11 | 	message,
12 | 	music
13 | })
14 | 
15 | export default reducers


--------------------------------------------------------------------------------
/src/reducers/user.js:
--------------------------------------------------------------------------------
 1 | import { ERROR_MSG, SIGN_SUCCESS, CLEAR_MSG, INIT_USERINFO } from '../actions/actions';
 2 | 
 3 | const initState = {
 4 | 	msg: '',
 5 | 	redirectTo: '',
 6 | }
 7 | 
 8 | export function user(state = initState, action){
 9 | 	switch(action.type){
10 | 		case ERROR_MSG :
11 | 			return {...state, msg: action.msg };
12 | 		case SIGN_SUCCESS:
13 | 			return { ...state, ...action.payload, redirectTo: '/admin' };
14 | 		case CLEAR_MSG:
15 | 			return { ...state, msg:'' };
16 | 		case INIT_USERINFO:
17 | 			return { ...state, ...action.payload };
18 | 		default :
19 | 			return { ...state };
20 | 	}
21 | }


--------------------------------------------------------------------------------
/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 |       } else {
 39 |         // Is not local host. Just register service worker
 40 |         registerValidSW(swUrl);
 41 |       }
 42 |     });
 43 |   }
 44 | }
 45 | 
 46 | function registerValidSW(swUrl) {
 47 |   navigator.serviceWorker
 48 |     .register(swUrl)
 49 |     .then(registration => {
 50 |       registration.onupdatefound = () => {
 51 |         const installingWorker = registration.installing;
 52 |         installingWorker.onstatechange = () => {
 53 |           if (installingWorker.state === 'installed') {
 54 |             if (navigator.serviceWorker.controller) {
 55 |               // At this point, the old content will have been purged and
 56 |               // the fresh content will have been added to the cache.
 57 |               // It's the perfect time to display a "New content is
 58 |               // available; please refresh." message in your web app.
 59 |               console.log('New content is available; please refresh.');
 60 |             } else {
 61 |               // At this point, everything has been precached.
 62 |               // It's the perfect time to display a
 63 |               // "Content is cached for offline use." message.
 64 |               console.log('Content is cached for offline use.');
 65 |             }
 66 |           }
 67 |         };
 68 |       };
 69 |     })
 70 |     .catch(error => {
 71 |       console.error('Error during service worker registration:', error);
 72 |     });
 73 | }
 74 | 
 75 | function checkValidServiceWorker(swUrl) {
 76 |   // Check if the service worker can be found. If it can't reload the page.
 77 |   fetch(swUrl)
 78 |     .then(response => {
 79 |       // Ensure service worker exists, and that we really are getting a JS file.
 80 |       if (
 81 |         response.status === 404 ||
 82 |         response.headers.get('content-type').indexOf('javascript') === -1
 83 |       ) {
 84 |         // No service worker found. Probably a different app. Reload the page.
 85 |         navigator.serviceWorker.ready.then(registration => {
 86 |           registration.unregister().then(() => {
 87 |             window.location.reload();
 88 |           });
 89 |         });
 90 |       } else {
 91 |         // Service worker found. Proceed as normal.
 92 |         registerValidSW(swUrl);
 93 |       }
 94 |     })
 95 |     .catch(() => {
 96 |       console.log(
 97 |         'No internet connection found. App is running in offline mode.'
 98 |       );
 99 |     });
100 | }
101 | 
102 | export function unregister() {
103 |   if ('serviceWorker' in navigator) {
104 |     navigator.serviceWorker.ready.then(registration => {
105 |       registration.unregister();
106 |     });
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/src/static/font/demo.css:
--------------------------------------------------------------------------------
  1 | *{margin: 0;padding: 0;list-style: none;}
  2 | /*
  3 | KISSY CSS Reset
  4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
  5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
  6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
  7 | 特色：1. 适应中文；2. 基于最新主流浏览器。
  8 | 维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
  9 |  */
 10 | 
 11 | /** 清除内外边距 **/
 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
 14 | pre, /* text formatting elements 文本格式元素 */
 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
 16 | th, td /* table elements 表格元素 */ {
 17 |   margin: 0;
 18 |   padding: 0;
 19 | }
 20 | 
 21 | /** 设置默认字体 **/
 22 | body,
 23 | button, input, select, textarea /* for ie */ {
 24 |   font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
 25 | }
 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; }
 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
 30 | 
 31 | /** 重置列表元素 **/
 32 | ul, ol { list-style: none; }
 33 | 
 34 | /** 重置文本格式元素 **/
 35 | a { text-decoration: none; }
 36 | a:hover { text-decoration: underline; }
 37 | 
 38 | 
 39 | /** 重置表单元素 **/
 40 | legend { color: #000; } /* for ie6 */
 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
 43 | /* 注：optgroup 无法扶正 */
 44 | 
 45 | /** 重置表格元素 **/
 46 | table { border-collapse: collapse; border-spacing: 0; }
 47 | 
 48 | /* 清除浮动 */
 49 | .ks-clear:after, .clear:after {
 50 |   content: '\20';
 51 |   display: block;
 52 |   height: 0;
 53 |   clear: both;
 54 | }
 55 | .ks-clear, .clear {
 56 |   *zoom: 1;
 57 | }
 58 | 
 59 | .main {
 60 |   padding: 30px 100px;
 61 | width: 960px;
 62 | margin: 0 auto;
 63 | }
 64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
 65 | 
 66 | .helps{margin-top:40px;}
 67 | .helps pre{
 68 |   padding:20px;
 69 |   margin:10px 0;
 70 |   border:solid 1px #e7e1cd;
 71 |   background-color: #fffdef;
 72 |   overflow: auto;
 73 | }
 74 | 
 75 | .icon_lists{
 76 |   width: 100% !important;
 77 | 
 78 | }
 79 | 
 80 | .icon_lists li{
 81 |   float:left;
 82 |   width: 100px;
 83 |   height:180px;
 84 |   text-align: center;
 85 |   list-style: none !important;
 86 | }
 87 | .icon_lists .icon{
 88 |   font-size: 42px;
 89 |   line-height: 100px;
 90 |   margin: 10px 0;
 91 |   color:#333;
 92 |   -webkit-transition: font-size 0.25s ease-out 0s;
 93 |   -moz-transition: font-size 0.25s ease-out 0s;
 94 |   transition: font-size 0.25s ease-out 0s;
 95 | 
 96 | }
 97 | .icon_lists .icon:hover{
 98 |   font-size: 100px;
 99 | }
100 | 
101 | 
102 | 
103 | .markdown {
104 |   color: #666;
105 |   font-size: 14px;
106 |   line-height: 1.8;
107 | }
108 | 
109 | .highlight {
110 |   line-height: 1.5;
111 | }
112 | 
113 | .markdown img {
114 |   vertical-align: middle;
115 |   max-width: 100%;
116 | }
117 | 
118 | .markdown h1 {
119 |   color: #404040;
120 |   font-weight: 500;
121 |   line-height: 40px;
122 |   margin-bottom: 24px;
123 | }
124 | 
125 | .markdown h2,
126 | .markdown h3,
127 | .markdown h4,
128 | .markdown h5,
129 | .markdown h6 {
130 |   color: #404040;
131 |   margin: 1.6em 0 0.6em 0;
132 |   font-weight: 500;
133 |   clear: both;
134 | }
135 | 
136 | .markdown h1 {
137 |   font-size: 28px;
138 | }
139 | 
140 | .markdown h2 {
141 |   font-size: 22px;
142 | }
143 | 
144 | .markdown h3 {
145 |   font-size: 16px;
146 | }
147 | 
148 | .markdown h4 {
149 |   font-size: 14px;
150 | }
151 | 
152 | .markdown h5 {
153 |   font-size: 12px;
154 | }
155 | 
156 | .markdown h6 {
157 |   font-size: 12px;
158 | }
159 | 
160 | .markdown hr {
161 |   height: 1px;
162 |   border: 0;
163 |   background: #e9e9e9;
164 |   margin: 16px 0;
165 |   clear: both;
166 | }
167 | 
168 | .markdown p,
169 | .markdown pre {
170 |   margin: 1em 0;
171 | }
172 | 
173 | .markdown > p,
174 | .markdown > blockquote,
175 | .markdown > .highlight,
176 | .markdown > ol,
177 | .markdown > ul {
178 |   width: 80%;
179 | }
180 | 
181 | .markdown ul > li {
182 |   list-style: circle;
183 | }
184 | 
185 | .markdown > ul li,
186 | .markdown blockquote ul > li {
187 |   margin-left: 20px;
188 |   padding-left: 4px;
189 | }
190 | 
191 | .markdown > ul li p,
192 | .markdown > ol li p {
193 |   margin: 0.6em 0;
194 | }
195 | 
196 | .markdown ol > li {
197 |   list-style: decimal;
198 | }
199 | 
200 | .markdown > ol li,
201 | .markdown blockquote ol > li {
202 |   margin-left: 20px;
203 |   padding-left: 4px;
204 | }
205 | 
206 | .markdown code {
207 |   margin: 0 3px;
208 |   padding: 0 5px;
209 |   background: #eee;
210 |   border-radius: 3px;
211 | }
212 | 
213 | .markdown pre {
214 |   border-radius: 6px;
215 |   background: #f7f7f7;
216 |   padding: 20px;
217 | }
218 | 
219 | .markdown pre code {
220 |   border: none;
221 |   background: #f7f7f7;
222 |   margin: 0;
223 | }
224 | 
225 | .markdown strong,
226 | .markdown b {
227 |   font-weight: 600;
228 | }
229 | 
230 | .markdown > table {
231 |   border-collapse: collapse;
232 |   border-spacing: 0px;
233 |   empty-cells: show;
234 |   border: 1px solid #e9e9e9;
235 |   width: 95%;
236 |   margin-bottom: 24px;
237 | }
238 | 
239 | .markdown > table th {
240 |   white-space: nowrap;
241 |   color: #333;
242 |   font-weight: 600;
243 | 
244 | }
245 | 
246 | .markdown > table th,
247 | .markdown > table td {
248 |   border: 1px solid #e9e9e9;
249 |   padding: 8px 16px;
250 |   text-align: left;
251 | }
252 | 
253 | .markdown > table th {
254 |   background: #F7F7F7;
255 | }
256 | 
257 | .markdown blockquote {
258 |   font-size: 90%;
259 |   color: #999;
260 |   border-left: 4px solid #e9e9e9;
261 |   padding-left: 0.8em;
262 |   margin: 1em 0;
263 |   font-style: italic;
264 | }
265 | 
266 | .markdown blockquote p {
267 |   margin: 0;
268 | }
269 | 
270 | .markdown .anchor {
271 |   opacity: 0;
272 |   transition: opacity 0.3s ease;
273 |   margin-left: 8px;
274 | }
275 | 
276 | .markdown .waiting {
277 |   color: #ccc;
278 | }
279 | 
280 | .markdown h1:hover .anchor,
281 | .markdown h2:hover .anchor,
282 | .markdown h3:hover .anchor,
283 | .markdown h4:hover .anchor,
284 | .markdown h5:hover .anchor,
285 | .markdown h6:hover .anchor {
286 |   opacity: 1;
287 |   display: inline-block;
288 | }
289 | 
290 | .markdown > br,
291 | .markdown > p > br {
292 |   clear: both;
293 | }
294 | 
295 | 
296 | .hljs {
297 |   display: block;
298 |   background: white;
299 |   padding: 0.5em;
300 |   color: #333333;
301 |   overflow-x: auto;
302 | }
303 | 
304 | .hljs-comment,
305 | .hljs-meta {
306 |   color: #969896;
307 | }
308 | 
309 | .hljs-string,
310 | .hljs-variable,
311 | .hljs-template-variable,
312 | .hljs-strong,
313 | .hljs-emphasis,
314 | .hljs-quote {
315 |   color: #df5000;
316 | }
317 | 
318 | .hljs-keyword,
319 | .hljs-selector-tag,
320 | .hljs-type {
321 |   color: #a71d5d;
322 | }
323 | 
324 | .hljs-literal,
325 | .hljs-symbol,
326 | .hljs-bullet,
327 | .hljs-attribute {
328 |   color: #0086b3;
329 | }
330 | 
331 | .hljs-section,
332 | .hljs-name {
333 |   color: #63a35c;
334 | }
335 | 
336 | .hljs-tag {
337 |   color: #333333;
338 | }
339 | 
340 | .hljs-title,
341 | .hljs-attr,
342 | .hljs-selector-id,
343 | .hljs-selector-class,
344 | .hljs-selector-attr,
345 | .hljs-selector-pseudo {
346 |   color: #795da3;
347 | }
348 | 
349 | .hljs-addition {
350 |   color: #55a532;
351 |   background-color: #eaffea;
352 | }
353 | 
354 | .hljs-deletion {
355 |   color: #bd2c00;
356 |   background-color: #ffecec;
357 | }
358 | 
359 | .hljs-link {
360 |   text-decoration: underline;
361 | }
362 | 
363 | pre{
364 |   background: #fff;
365 | }
366 | 
367 | 
368 | 
369 | 
370 | 
371 | 


--------------------------------------------------------------------------------
/src/static/font/demo_fontclass.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 | <head>
  5 |     <meta charset="utf-8"/>
  6 |     <title>IconFont</title>
  7 |     <link rel="stylesheet" href="demo.css">
  8 |     <link rel="stylesheet" href="iconfont.css">
  9 | </head>
 10 | <body>
 11 |     <div class="main markdown">
 12 |         <h1>IconFont 图标</h1>
 13 |         <ul class="icon_lists clear">
 14 |             
 15 |                 <li>
 16 |                 <i class="icon iconfont icon-bokexinwen"></i>
 17 |                     <div class="name">博客新闻</div>
 18 |                     <div class="fontclass">.icon-bokexinwen</div>
 19 |                 </li>
 20 |             
 21 |                 <li>
 22 |                 <i class="icon iconfont icon-icon"></i>
 23 |                     <div class="name">登录 用户</div>
 24 |                     <div class="fontclass">.icon-icon</div>
 25 |                 </li>
 26 |             
 27 |                 <li>
 28 |                 <i class="icon iconfont icon-shunxubofang"></i>
 29 |                     <div class="name">顺序播放</div>
 30 |                     <div class="fontclass">.icon-shunxubofang</div>
 31 |                 </li>
 32 |             
 33 |                 <li>
 34 |                 <i class="icon iconfont icon-home"></i>
 35 |                     <div class="name">首页</div>
 36 |                     <div class="fontclass">.icon-home</div>
 37 |                 </li>
 38 |             
 39 |                 <li>
 40 |                 <i class="icon iconfont icon-application"></i>
 41 |                     <div class="name">应用</div>
 42 |                     <div class="fontclass">.icon-application</div>
 43 |                 </li>
 44 |             
 45 |                 <li>
 46 |                 <i class="icon iconfont icon-danquxunhuan"></i>
 47 |                     <div class="name">单曲循环</div>
 48 |                     <div class="fontclass">.icon-danquxunhuan</div>
 49 |                 </li>
 50 |             
 51 |                 <li>
 52 |                 <i class="icon iconfont icon-liuyanpinglun"></i>
 53 |                     <div class="name">留言评论</div>
 54 |                     <div class="fontclass">.icon-liuyanpinglun</div>
 55 |                 </li>
 56 |             
 57 |                 <li>
 58 |                 <i class="icon iconfont icon-suijibofang"></i>
 59 |                     <div class="name">随机播放_32</div>
 60 |                     <div class="fontclass">.icon-suijibofang</div>
 61 |                 </li>
 62 |             
 63 |                 <li>
 64 |                 <i class="icon iconfont icon-xiangzuo"></i>
 65 |                     <div class="name">向左</div>
 66 |                     <div class="fontclass">.icon-xiangzuo</div>
 67 |                 </li>
 68 |             
 69 |                 <li>
 70 |                 <i class="icon iconfont icon-xiangyou"></i>
 71 |                     <div class="name">向右</div>
 72 |                     <div class="fontclass">.icon-xiangyou</div>
 73 |                 </li>
 74 |             
 75 |                 <li>
 76 |                 <i class="icon iconfont icon-guanli"></i>
 77 |                     <div class="name">管理</div>
 78 |                     <div class="fontclass">.icon-guanli</div>
 79 |                 </li>
 80 |             
 81 |                 <li>
 82 |                 <i class="icon iconfont icon-bofang"></i>
 83 |                     <div class="name">播放</div>
 84 |                     <div class="fontclass">.icon-bofang</div>
 85 |                 </li>
 86 |             
 87 |                 <li>
 88 |                 <i class="icon iconfont icon-zanting"></i>
 89 |                     <div class="name">暂停</div>
 90 |                     <div class="fontclass">.icon-zanting</div>
 91 |                 </li>
 92 |             
 93 |                 <li>
 94 |                 <i class="icon iconfont icon-gerenjianli"></i>
 95 |                     <div class="name">个人简历</div>
 96 |                     <div class="fontclass">.icon-gerenjianli</div>
 97 |                 </li>
 98 |             
 99 |                 <li>
100 |                 <i class="icon iconfont icon-yinle"></i>
101 |                     <div class="name">音乐</div>
102 |                     <div class="fontclass">.icon-yinle</div>
103 |                 </li>
104 |             
105 |                 <li>
106 |                 <i class="icon iconfont icon-yinliang2"></i>
107 |                     <div class="name">音量-2</div>
108 |                     <div class="fontclass">.icon-yinliang2</div>
109 |                 </li>
110 |             
111 |                 <li>
112 |                 <i class="icon iconfont icon-yinliang1"></i>
113 |                     <div class="name">音量-1</div>
114 |                     <div class="fontclass">.icon-yinliang1</div>
115 |                 </li>
116 |             
117 |                 <li>
118 |                 <i class="icon iconfont icon-yinliang3"></i>
119 |                     <div class="name">音量-3</div>
120 |                     <div class="fontclass">.icon-yinliang3</div>
121 |                 </li>
122 |             
123 |         </ul>
124 | 
125 |         <h2 id="font-class-">font-class引用</h2>
126 |         <hr>
127 | 
128 |         <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
129 |         <p>与unicode使用方式相比，具有如下特点：</p>
130 |         <ul>
131 |         <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
132 |         <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
133 |         <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
134 |         <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
135 |         </ul>
136 |         <p>使用步骤如下：</p>
137 |         <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
138 | 
139 | 
140 |         <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
141 |         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
142 |         <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
143 |         <blockquote>
144 |         <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
145 |         </blockquote>
146 |     </div>
147 | </body>
148 | </html>
149 | 


--------------------------------------------------------------------------------
/src/static/font/demo_symbol.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 | <head>
  5 |     <meta charset="utf-8"/>
  6 |     <title>IconFont</title>
  7 |     <link rel="stylesheet" href="demo.css">
  8 |     <script src="iconfont.js"></script>
  9 | 
 10 |     <style type="text/css">
 11 |         .icon {
 12 |           /* 通过设置 font-size 来改变图标大小 */
 13 |           width: 1em; height: 1em;
 14 |           /* 图标和文字相邻时，垂直对齐 */
 15 |           vertical-align: -0.15em;
 16 |           /* 通过设置 color 来改变 SVG 的颜色/fill */
 17 |           fill: currentColor;
 18 |           /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
 19 |              normalize.css 中也包含这行 */
 20 |           overflow: hidden;
 21 |         }
 22 | 
 23 |     </style>
 24 | </head>
 25 | <body>
 26 |     <div class="main markdown">
 27 |         <h1>IconFont 图标</h1>
 28 |         <ul class="icon_lists clear">
 29 |             
 30 |                 <li>
 31 |                     <svg class="icon" aria-hidden="true">
 32 |                         <use xlink:href="#icon-bokexinwen"></use>
 33 |                     </svg>
 34 |                     <div class="name">博客新闻</div>
 35 |                     <div class="fontclass">#icon-bokexinwen</div>
 36 |                 </li>
 37 |             
 38 |                 <li>
 39 |                     <svg class="icon" aria-hidden="true">
 40 |                         <use xlink:href="#icon-icon"></use>
 41 |                     </svg>
 42 |                     <div class="name">登录 用户</div>
 43 |                     <div class="fontclass">#icon-icon</div>
 44 |                 </li>
 45 |             
 46 |                 <li>
 47 |                     <svg class="icon" aria-hidden="true">
 48 |                         <use xlink:href="#icon-shunxubofang"></use>
 49 |                     </svg>
 50 |                     <div class="name">顺序播放</div>
 51 |                     <div class="fontclass">#icon-shunxubofang</div>
 52 |                 </li>
 53 |             
 54 |                 <li>
 55 |                     <svg class="icon" aria-hidden="true">
 56 |                         <use xlink:href="#icon-home"></use>
 57 |                     </svg>
 58 |                     <div class="name">首页</div>
 59 |                     <div class="fontclass">#icon-home</div>
 60 |                 </li>
 61 |             
 62 |                 <li>
 63 |                     <svg class="icon" aria-hidden="true">
 64 |                         <use xlink:href="#icon-application"></use>
 65 |                     </svg>
 66 |                     <div class="name">应用</div>
 67 |                     <div class="fontclass">#icon-application</div>
 68 |                 </li>
 69 |             
 70 |                 <li>
 71 |                     <svg class="icon" aria-hidden="true">
 72 |                         <use xlink:href="#icon-danquxunhuan"></use>
 73 |                     </svg>
 74 |                     <div class="name">单曲循环</div>
 75 |                     <div class="fontclass">#icon-danquxunhuan</div>
 76 |                 </li>
 77 |             
 78 |                 <li>
 79 |                     <svg class="icon" aria-hidden="true">
 80 |                         <use xlink:href="#icon-liuyanpinglun"></use>
 81 |                     </svg>
 82 |                     <div class="name">留言评论</div>
 83 |                     <div class="fontclass">#icon-liuyanpinglun</div>
 84 |                 </li>
 85 |             
 86 |                 <li>
 87 |                     <svg class="icon" aria-hidden="true">
 88 |                         <use xlink:href="#icon-suijibofang"></use>
 89 |                     </svg>
 90 |                     <div class="name">随机播放_32</div>
 91 |                     <div class="fontclass">#icon-suijibofang</div>
 92 |                 </li>
 93 |             
 94 |                 <li>
 95 |                     <svg class="icon" aria-hidden="true">
 96 |                         <use xlink:href="#icon-xiangzuo"></use>
 97 |                     </svg>
 98 |                     <div class="name">向左</div>
 99 |                     <div class="fontclass">#icon-xiangzuo</div>
100 |                 </li>
101 |             
102 |                 <li>
103 |                     <svg class="icon" aria-hidden="true">
104 |                         <use xlink:href="#icon-xiangyou"></use>
105 |                     </svg>
106 |                     <div class="name">向右</div>
107 |                     <div class="fontclass">#icon-xiangyou</div>
108 |                 </li>
109 |             
110 |                 <li>
111 |                     <svg class="icon" aria-hidden="true">
112 |                         <use xlink:href="#icon-guanli"></use>
113 |                     </svg>
114 |                     <div class="name">管理</div>
115 |                     <div class="fontclass">#icon-guanli</div>
116 |                 </li>
117 |             
118 |                 <li>
119 |                     <svg class="icon" aria-hidden="true">
120 |                         <use xlink:href="#icon-bofang"></use>
121 |                     </svg>
122 |                     <div class="name">播放</div>
123 |                     <div class="fontclass">#icon-bofang</div>
124 |                 </li>
125 |             
126 |                 <li>
127 |                     <svg class="icon" aria-hidden="true">
128 |                         <use xlink:href="#icon-zanting"></use>
129 |                     </svg>
130 |                     <div class="name">暂停</div>
131 |                     <div class="fontclass">#icon-zanting</div>
132 |                 </li>
133 |             
134 |                 <li>
135 |                     <svg class="icon" aria-hidden="true">
136 |                         <use xlink:href="#icon-gerenjianli"></use>
137 |                     </svg>
138 |                     <div class="name">个人简历</div>
139 |                     <div class="fontclass">#icon-gerenjianli</div>
140 |                 </li>
141 |             
142 |                 <li>
143 |                     <svg class="icon" aria-hidden="true">
144 |                         <use xlink:href="#icon-yinle"></use>
145 |                     </svg>
146 |                     <div class="name">音乐</div>
147 |                     <div class="fontclass">#icon-yinle</div>
148 |                 </li>
149 |             
150 |                 <li>
151 |                     <svg class="icon" aria-hidden="true">
152 |                         <use xlink:href="#icon-yinliang2"></use>
153 |                     </svg>
154 |                     <div class="name">音量-2</div>
155 |                     <div class="fontclass">#icon-yinliang2</div>
156 |                 </li>
157 |             
158 |                 <li>
159 |                     <svg class="icon" aria-hidden="true">
160 |                         <use xlink:href="#icon-yinliang1"></use>
161 |                     </svg>
162 |                     <div class="name">音量-1</div>
163 |                     <div class="fontclass">#icon-yinliang1</div>
164 |                 </li>
165 |             
166 |                 <li>
167 |                     <svg class="icon" aria-hidden="true">
168 |                         <use xlink:href="#icon-yinliang3"></use>
169 |                     </svg>
170 |                     <div class="name">音量-3</div>
171 |                     <div class="fontclass">#icon-yinliang3</div>
172 |                 </li>
173 |             
174 |         </ul>
175 | 
176 | 
177 |         <h2 id="symbol-">symbol引用</h2>
178 |         <hr>
179 | 
180 |         <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
181 |         这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
182 |         <ul>
183 |           <li>支持多色图标了，不再受单色限制。</li>
184 |           <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
185 |           <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
186 |           <li>浏览器渲染svg的性能一般，还不如png。</li>
187 |         </ul>
188 |         <p>使用步骤如下：</p>
189 |         <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
190 |         <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
191 |         <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
192 |         <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
193 | .icon {
194 |    width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
195 |    vertical-align: <span class="hljs-number">-0.15</span>em;
196 |    fill: currentColor;
197 |    overflow: hidden;
198 | }
199 | &lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
200 |         <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
201 |         <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
202 |   &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
203 | </span>&lt;<span class="hljs-regexp">/svg&gt;
204 |         </span></code></pre>
205 |     </div>
206 | </body>
207 | </html>
208 | 


--------------------------------------------------------------------------------
/src/static/font/demo_unicode.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 | <head>
  5 |     <meta charset="utf-8"/>
  6 |     <title>IconFont</title>
  7 |     <link rel="stylesheet" href="demo.css">
  8 | 
  9 |     <style type="text/css">
 10 | 
 11 |         @font-face {font-family: "iconfont";
 12 |           src: url('iconfont.eot'); /* IE9*/
 13 |           src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
 14 |           url('iconfont.woff') format('woff'), /* chrome, firefox */
 15 |           url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 16 |           url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
 17 |         }
 18 | 
 19 |         .iconfont {
 20 |           font-family:"iconfont" !important;
 21 |           font-size:16px;
 22 |           font-style:normal;
 23 |           -webkit-font-smoothing: antialiased;
 24 |           -webkit-text-stroke-width: 0.2px;
 25 |           -moz-osx-font-smoothing: grayscale;
 26 |         }
 27 | 
 28 |     </style>
 29 | </head>
 30 | <body>
 31 |     <div class="main markdown">
 32 |         <h1>IconFont 图标</h1>
 33 |         <ul class="icon_lists clear">
 34 |             
 35 |                 <li>
 36 |                 <i class="icon iconfont">&#xe6fd;</i>
 37 |                     <div class="name">博客新闻</div>
 38 |                     <div class="code">&amp;#xe6fd;</div>
 39 |                 </li>
 40 |             
 41 |                 <li>
 42 |                 <i class="icon iconfont">&#xe61b;</i>
 43 |                     <div class="name">登录 用户</div>
 44 |                     <div class="code">&amp;#xe61b;</div>
 45 |                 </li>
 46 |             
 47 |                 <li>
 48 |                 <i class="icon iconfont">&#xe671;</i>
 49 |                     <div class="name">顺序播放</div>
 50 |                     <div class="code">&amp;#xe671;</div>
 51 |                 </li>
 52 |             
 53 |                 <li>
 54 |                 <i class="icon iconfont">&#xe60a;</i>
 55 |                     <div class="name">首页</div>
 56 |                     <div class="code">&amp;#xe60a;</div>
 57 |                 </li>
 58 |             
 59 |                 <li>
 60 |                 <i class="icon iconfont">&#xe63c;</i>
 61 |                     <div class="name">应用</div>
 62 |                     <div class="code">&amp;#xe63c;</div>
 63 |                 </li>
 64 |             
 65 |                 <li>
 66 |                 <i class="icon iconfont">&#xe607;</i>
 67 |                     <div class="name">单曲循环</div>
 68 |                     <div class="code">&amp;#xe607;</div>
 69 |                 </li>
 70 |             
 71 |                 <li>
 72 |                 <i class="icon iconfont">&#xe61c;</i>
 73 |                     <div class="name">留言评论</div>
 74 |                     <div class="code">&amp;#xe61c;</div>
 75 |                 </li>
 76 |             
 77 |                 <li>
 78 |                 <i class="icon iconfont">&#xe66b;</i>
 79 |                     <div class="name">随机播放_32</div>
 80 |                     <div class="code">&amp;#xe66b;</div>
 81 |                 </li>
 82 |             
 83 |                 <li>
 84 |                 <i class="icon iconfont">&#xe617;</i>
 85 |                     <div class="name">向左</div>
 86 |                     <div class="code">&amp;#xe617;</div>
 87 |                 </li>
 88 |             
 89 |                 <li>
 90 |                 <i class="icon iconfont">&#xe618;</i>
 91 |                     <div class="name">向右</div>
 92 |                     <div class="code">&amp;#xe618;</div>
 93 |                 </li>
 94 |             
 95 |                 <li>
 96 |                 <i class="icon iconfont">&#xe626;</i>
 97 |                     <div class="name">管理</div>
 98 |                     <div class="code">&amp;#xe626;</div>
 99 |                 </li>
100 |             
101 |                 <li>
102 |                 <i class="icon iconfont">&#xe600;</i>
103 |                     <div class="name">播放</div>
104 |                     <div class="code">&amp;#xe600;</div>
105 |                 </li>
106 |             
107 |                 <li>
108 |                 <i class="icon iconfont">&#xe601;</i>
109 |                     <div class="name">暂停</div>
110 |                     <div class="code">&amp;#xe601;</div>
111 |                 </li>
112 |             
113 |                 <li>
114 |                 <i class="icon iconfont">&#xe60e;</i>
115 |                     <div class="name">个人简历</div>
116 |                     <div class="code">&amp;#xe60e;</div>
117 |                 </li>
118 |             
119 |                 <li>
120 |                 <i class="icon iconfont">&#xe631;</i>
121 |                     <div class="name">音乐</div>
122 |                     <div class="code">&amp;#xe631;</div>
123 |                 </li>
124 |             
125 |                 <li>
126 |                 <i class="icon iconfont">&#xe632;</i>
127 |                     <div class="name">音量-2</div>
128 |                     <div class="code">&amp;#xe632;</div>
129 |                 </li>
130 |             
131 |                 <li>
132 |                 <i class="icon iconfont">&#xe633;</i>
133 |                     <div class="name">音量-1</div>
134 |                     <div class="code">&amp;#xe633;</div>
135 |                 </li>
136 |             
137 |                 <li>
138 |                 <i class="icon iconfont">&#xe635;</i>
139 |                     <div class="name">音量-3</div>
140 |                     <div class="code">&amp;#xe635;</div>
141 |                 </li>
142 |             
143 |         </ul>
144 |         <h2 id="unicode-">unicode引用</h2>
145 |         <hr>
146 | 
147 |         <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
148 |         <ul>
149 |         <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
150 |         <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
151 |         <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
152 |         </ul>
153 |         <blockquote>
154 |         <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
155 |         </blockquote>
156 |         <p>unicode使用步骤如下：</p>
157 |         <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
158 |         <pre><code class="lang-js hljs javascript">@font-face {
159 |   font-family: <span class="hljs-string">'iconfont'</span>;
160 |   src: url(<span class="hljs-string">'iconfont.eot'</span>);
161 |   src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
162 |   url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
163 |   url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
164 |   url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
165 | }
166 | </code></pre>
167 |         <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
168 |         <pre><code class="lang-js hljs javascript">.iconfont{
169 |   font-family:<span class="hljs-string">"iconfont"</span> !important;
170 |   font-size:<span class="hljs-number">16</span>px;font-style:normal;
171 |   -webkit-font-smoothing: antialiased;
172 |   -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
173 |   -moz-osx-font-smoothing: grayscale;
174 | }
175 | </code></pre>
176 |         <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
177 |         <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
178 | 
179 |         <blockquote>
180 |         <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
181 |         </blockquote>
182 |     </div>
183 | 
184 | 
185 | </body>
186 | </html>
187 | 


--------------------------------------------------------------------------------
/src/static/font/iconfont.css:
--------------------------------------------------------------------------------
 1 | 
 2 | @font-face {font-family: "iconfont";
 3 |   src: url('iconfont.eot?t=1520087058915'); /* IE9*/
 4 |   src: url('iconfont.eot?t=1520087058915#iefix') format('embedded-opentype'), /* IE6-IE8 */
 5 |   url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABE4AAsAAAAAHIgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZXAkjuY21hcAAAAYAAAADzAAAC1JuJNAhnbHlmAAACdAAADBoAABP4oNjNVmhlYWQAAA6QAAAAMQAAADYQn+YNaGhlYQAADsQAAAAgAAAAJAfeA5RobXR4AAAO5AAAABgAAABQT+n//mxvY2EAAA78AAAAKgAAACow8CvybWF4cAAADygAAAAfAAAAIAErARBuYW1lAAAPSAAAAUUAAAJtPlT+fXBvc3QAABCQAAAAqAAAAPyrGDj9eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/s84gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDz7y9zwv4EhhrmBYQpQmBEkBwA5HA2EeJzFks1qAkEQhGvU+LOa9e+goEgIQXLIRcWbb+TJ2z6VD+TJUz2BV9HqrSWgkNxCuvl2me6BLqYawAuAuvgSDSCdkRBxUjWV9Tqyst7AUecFBqrkKJjYYsacU8655IZb7rjngdfbTfcKoupPOFN/9dT/OZJmLPBW5Ts+lJ/fGf1XzW9JeV/KulLTRk+qhhhhjCY6UlrTteavU/400v+Nfoxe+b1Up7EoKiSRMHpPMBm9rHwziH9mYk+YG707ODGxG5waeQHOTOwU50b+gEsTirgy8gxcG7kHbox8BLcmNHNn5C24N3IZPJjYW14Nane3ZlMbAHicvVdrkBTVFe5zb/ftx0x3bz+mZ2eWndmZngcL7LI7szPDQ3cBQV0XEINR1JWHBoIYCb7AIFJrHmiljFhqjIkpXYMFlfyI0bI0KQXBVAWNf1JKlQRZ35WXGq1IqhLd6c253buKFVKxUpqe6Xv7nntu9znnnvOdcwVJECZep0/RVsERpgu9wmJhhSAAmwl5g7RDrtzXTWZCIiclkq5By345J/v5bno6JPPM9Sr1vlKSycwEAzJQzVXq5W5ShlpfP5kPFa8dINWWXmkXp9n0DtBay5nvBOeQn0Ai608z+7uCwVkDbqXDUbbFbTtl27cpTJIUQkTTgKuSniqpGgseksx04qlsJ8lCPFVOL71I72iz193at7m9mFQBRkbAaesw9g1YaQv/O9KeY6fkFl1pTet+wYVtb8VanXh76U0BLwV1fU4E2hCoIAsxwQx1niX0CIKTS+QSVcsH3k/+wK91QzlnQMJyvWSuH2pWX4nmrJzjW9U7yWDziePHoQiF4PjUTQpXgdsyfrwlkWihj2P7m2aBHL9zcJBcMnjVhABCcbA4WIDHn2hxIWIMezJoJppPkOPIzMVE6YSJr9GnyTuCLtSEOu5HBpIGyChNPzR6oa/ewL4WDXHKY3ICuwzIOEYqsuJwLsDEgaYkNQ/s5+3+4K+xmLW8VkP6hjWXbQYoVqddVIzH6KJBEN995JF3RRg6g7yD/AfGJWn8AK5tspgtKhnNrO9ZunELwNVf7Xx4iS236pIXnzd66aNvS9Lbj65+cD7KLKPMf6YP041Ci5AWSkJFWC6sEa5C2fOzodSoD0DdS3rcURoy62VZaPSVnY81MIBGQocK0HwpUjHSxWX5Um2Kr5EvlZHcDf1c4aTLIN9b5vzz0UgGwCpNXW1Sam5VLaaRFDFiWwHomhT5ZmSFSLe9Y5I0tnfvK6L4yl4my2zFlYRcuQJbJaaQ7cPD2wnZ/j6T0b+ukBjV2DXfJUpwCGzO6zAFFLCUpYbdwmZSSdZbro8b980ASpdtE0kwII1PfmX/OF0oju3bOyaKY3v3jTUfUuIykE0rzttEyKbzJEWRhrdTun34khufU6TN+7KgxSTIPb5NUmAIUBJ+c39Ar5g4RA/SBcIM4RxBkHL50ungJwzw8als+flSA+qVLKCRorBLei5GsOWyctXitHLI77LZANWKl7CqNW4vfKLrgqai/QA0OfhQ1mBuXFXh55IurUfK9xXtDqbJ87V/voqjadewqxPKDcG32hTtDU15UtEGNOXECUXTFDiSVGCrKF40xEdv3yS1aMEsRSvAi4p2OVNeXxdT5Y3BY5oSdJ2QYzE5jMMRUaAjYQT6QlloCPOFIeFc9BaZcX/pGwgV8tyinGxADjcc9WjkcMMtdBUMQSvUvJ9jjjdFS+I8hiqTJ/kdpNH3j7V0trxsmi9jd8wMPjh69KXmT4PDrR0AHa0wN+qDwzD3VLTDfMAfp6aCw2TZMdP85J3vHH3ppab5qWXYX42LD3ekYE6qoyMVPJvilGdvh5Pf1NoR7Ia50d7eQp+nm4R+4QLU3y/5CDhesjcK+Slv53EiVxmGeb2RaJTlkgFeFnhweMkw9KthuEh5uVdOcLZqpdHbwB7JFkYUAzVm2mAuvxDEI6OOZS9ZKS6/AMTf/nAGtICb1W4eAS1rQ7zrlx+IGy6h67/suon9H0qwIXhSVa5EFlNV6uBkbAQs8hjDsaXW96wZPSIC0WaL+PijF7TOmGM4RIebboY4uBmtS/vHr65+up/N0QlIH+7fcmgXWwKaY9rM/8h0wDFhnmlHNoj8oYAZCBGDybiNPm4jIm69isjbV+I4LFuoao5r1FcCr4JO31fKy8Bc+qphQ7Z1/G+t2Wwriem2rTf/Xl0MsLhKDezt8ffUNpUcUZ201uzSSNExmieSHZBN0hbs7Dabs46/Hy0hccMJzlFV8qKWdjl/ehKTj2EMFoQu9NP1glDsxt1hCRe3oYQAVIZuwJ1zvSrKyPFaxm10vUaFI19fmXYDS7rhlpnAM+cA3xnOk4FKyAF5Do4zgb8DYzNaVqLLJF0xXUXqXFwjhAa39Fx3pum6ZmO4ALsKq3p7ZDVpKrp0eTy+QUungWmdjcvK16po/C0dQ51dCCVO2rxC05pjprbNX9ZD+Wrav2H2dk0z/sAYcU3ZkDqVmSKB79XmgNtuQVdnsKm9KM1iLbLpEEQpvUMnd8VF19Q466zSVi3laluRpSuUTtugTdOCPer2fI6v7+q8Ca2tRja7n7xA1woG5oQZuLOYAlxU2ueAXa1whbuBWyKDVgHPQEtGsZ8B8hSTVFWKM91xdDZnqZJOUCVsH9gMKxSaSKnBqCzvjBUMeikRtbQmSk7auXutRq1ULGyfvy04P5ayqAYHVU8dNVhOmJLpdyfJhPWLywOIFzN+Pgs8ZmajXAZkARgPONwJxCRMLov/s0zBL0KZYO3/IJOIMh2kh+hCrEmSwo1AQ+8ql+qfSo2VOg9wNN1AJA/6C0NcR0b0Oznhyr1skuoicjLuSWFZgIg/SeOOluzF/MCpvILoh0kqfx9mhKiq4Ljj8/fgn2MwdhyTI0J76KQ8AfE1EXkKsSPCTC5SmIq4D0fkKTyPCLg2TD/JBJcqIlcmvxQReDJPwvvrb1XEe67dchel969ffSOIN1y8eiel+KBJkqinUotSZ6d0SYN651BnHSRJiqfPRmJKF0UMhDrghMpEipwL02eldVFiUJ++dDpOaKKOlIXpdFyUJI1T6nFo96YzSpkiUtGPxxfFC3peZIplqwxa7fO9DFNtS2E4V9AX6jhHREWmhE3nhS5fS6isIDGv43Qh7k+uzXhDyMBUy8a1eZxYFI+Ha/m3+Nob1VvWX/8ApXd//bp74C26c/VFN4g7Vg/vWBlDHc9OL0R9qMjUKX0QBkKFUHUxNqk6V2dSc0JYpM/0T4yEqk8a6Wf/JoqP2oai9DitpzCAJIXcqN+QlwFp0gK6P2UBlYUWyGRC/ZkikXApMkRLVQmXTsbdwbCGYUKrcAbGnethwLEQ/Rrcb/LoW71YaXM4RVxNYhL8uOb1kjUPA7SBeaBU/rhSLFGpA6/gPlX+IyK4+YbabtswrrqGLXaCeHTPnqMitmvOlVXdhpg6vDmqh7EFste27aJtB1lpl+o66rc1WyfBe7oD11tgG6oM566JlmML+Dbb0EyxB6Ll2G6J4vbXGLdnII7UhUXCIGr12YUvYjar1PmZIs+SFj9M8UydZ43IMHT3Z9KjeYinL/wfCrMYNs9wm5AVn1GLruAgRzNYwJPmSc/fiMyDJxBhYjfdTIdPOjMlhTYhi3VbF2brmnApao2VVhnvk09P/OdUE34C7yTeRTxe5Wp+ImcBjigeocpYwWLirPXWBwg3TR/iG1b9/DjjIZz5TEYkSPZSoemTsf7mA2Rd8/fwWtBx8h0cx0scG4OdbnN0gLwSzB4b637ttRkw/bTpILW5oIsySEAtOlMyCJEVoDE0kkSHx3/cT/4UXJnvy3fiTdbzB//NgWbKXE7XB3/xIRl81Asx04x1eXFF0VwsginxY1RzlCzBgwJYmqrFuW+TiWDiXqxf1mIdu5Bbg5cqLuY2wrWpo254PCa8bsmdmoy4XuOFDq/d6WjzIEZ0Yf7cMsnPzdgpzapeOk9csPbyeUBGTkmGenObbZAFhk3XYpg3F2R7XatyWp+niGlf0gurvrJyWu5Lfdxep54h+MWJUcO2jdHJ8yc2K8k6YbFwvrARNSqWmIxpyA/PXXxXvH5E+TApIlxXvXrDkXCep81wvh/joPTxNHq2Uy810M9dnv95+dPgxU0+TLwuiyi8yiMrgiNqnCySE8m47cjTbEMUVZPJpmL4c/Sib0i5LqMfxHmsqHKGNsdRDYYHKckoNIySbzG/Bw/B2l5mxdlZZ7G4xVY+yJ8dvPgolU6TuWVQleBwIkbRCBaleD5klom4KheW1BUKrUWYmQ+OeRoQsQ0ZJCJbZsjl8/l8Bk5TDSwCWtjQM0P85Re+qfGR01Pvcfg4NXDmwOS5DZu3Qjuu+pysmPwCrbbqC7HUolPaRgx97BC5N7TNRmHH5+pln7aP/H/0vBNcyUqtVuE2nDN//q4v3BMv5vatjuweqfDXz9k9enviv/vmvwD0qEZNAAB4nGNgZGBgAOKzc97siee3+crAzcIAAtcOXBSC0f///c9hYWRuAHI5GJhAogCGhw2uAAAAeJxjYGRgYG7438AQw8Lw/9///yyMDEARFCACAKC8Bnl4nGNhYGBgfsnAwMJALv7/D5kPAGw/AzYAAAAAAHYAygEkAdICOgLAA0IDlAQuBHgEwgY0Bp4HEAeiCAoIrgk8CfwAAHicY2BkYGAQYWRh4GUAASYg5gJCBob/YD4DAAwPAT0AeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicbYtbDoJAEAS3FVHAt3gQ9USrrjC4zqIwceH0Qkj4sj86lVRKTdSwWP1figmmCDBDiDkWiBAjwRIrrLHBFjvscUCKo4KPr+5pPPHXcEA3x8sqF/ZydQ/NWZC7l0l0WVq66Zo6e9f8Fi+ci+aVJWk0l8SZFU4qoYKGbuGp+1bcAI2TMOsCS+Hg563musuSzHwMF9SrWUNsTdR/35xHOo10UeoHBNxCyA==') format('woff'),
 6 |   url('iconfont.ttf?t=1520087058915') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 7 |   url('iconfont.svg?t=1520087058915#iconfont') format('svg'); /* iOS 4.1- */
 8 | }
 9 | 
10 | .iconfont {
11 |   font-family:"iconfont" !important;
12 |   font-size:16px;
13 |   font-style:normal;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 | }
17 | 
18 | .icon-bokexinwen:before { content: "\e6fd"; }
19 | 
20 | .icon-icon:before { content: "\e61b"; }
21 | 
22 | .icon-shunxubofang:before { content: "\e671"; }
23 | 
24 | .icon-home:before { content: "\e60a"; }
25 | 
26 | .icon-application:before { content: "\e63c"; }
27 | 
28 | .icon-danquxunhuan:before { content: "\e607"; }
29 | 
30 | .icon-liuyanpinglun:before { content: "\e61c"; }
31 | 
32 | .icon-suijibofang:before { content: "\e66b"; }
33 | 
34 | .icon-xiangzuo:before { content: "\e617"; }
35 | 
36 | .icon-xiangyou:before { content: "\e618"; }
37 | 
38 | .icon-guanli:before { content: "\e626"; }
39 | 
40 | .icon-bofang:before { content: "\e600"; }
41 | 
42 | .icon-zanting:before { content: "\e601"; }
43 | 
44 | .icon-gerenjianli:before { content: "\e60e"; }
45 | 
46 | .icon-yinle:before { content: "\e631"; }
47 | 
48 | .icon-yinliang2:before { content: "\e632"; }
49 | 
50 | .icon-yinliang1:before { content: "\e633"; }
51 | 
52 | .icon-yinliang3:before { content: "\e635"; }
53 | 
54 | 


--------------------------------------------------------------------------------
/src/static/font/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/src/static/font/iconfont.eot


--------------------------------------------------------------------------------
/src/static/font/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/src/static/font/iconfont.ttf


--------------------------------------------------------------------------------
/src/static/font/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/src/static/font/iconfont.woff


--------------------------------------------------------------------------------
/src/static/images/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/src/static/images/avatar.jpg


--------------------------------------------------------------------------------
/src/static/images/blog-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/src/static/images/blog-bg.png


--------------------------------------------------------------------------------
/src/static/images/wrap-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/src/static/images/wrap-bg.png


--------------------------------------------------------------------------------
/src/static/music/山丘.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jayo409/react-blog/6b429e549a479329a61e2ebd061a366f56493df2/src/static/music/山丘.mp3


--------------------------------------------------------------------------------