├── .idea ├── .name ├── MUIReactWebpackExpressWebApp.iml ├── encodings.xml ├── jsLibraryMappings.xml ├── libraries │ └── MUIReactWebpackExpressWebApp_node_modules.xml ├── misc.xml ├── modules.xml ├── vcs.xml └── workspace.xml ├── README.md ├── app.js ├── bin └── www ├── client ├── output │ ├── about.bundle.js │ ├── index.bundle.js │ └── page.bundle.js └── src │ ├── css │ ├── about.css │ ├── home.css │ └── page.css │ └── js │ ├── About.js │ ├── Home.js │ ├── MovieCard.js │ └── Page.js ├── data_source └── MovieData.json ├── package.json ├── public └── stylesheets │ └── style.css ├── routes ├── about.js ├── index.js ├── movie.js └── page.js ├── views ├── about.ejs ├── error.ejs ├── index.ejs └── page.ejs └── webpack.config.js /.idea/.name: -------------------------------------------------------------------------------- 1 | MUIReactWebpackExpressWebApp -------------------------------------------------------------------------------- /.idea/MUIReactWebpackExpressWebApp.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.idea/libraries/MUIReactWebpackExpressWebApp_node_modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 179 | 180 | 181 | 182 | true 183 | 184 | 185 | 186 | 187 | 188 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 224 | 225 | 226 | 227 | 230 | 231 | 234 | 235 | 236 | 237 | 240 | 241 | 244 | 245 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 309 | 310 | 311 | 312 | 313 | 314 | true 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 1488503628691 335 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 367 | 370 | 371 | 372 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | 708 | 709 | 710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 | 747 | 748 | 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 一个简单的WebApp示例 可以接入 MongoDB 和 MySQL 2 | MUI+React+Webpack+Express WebApp 3 | ## Getting Start 4 | - git clone https://github.com/githubhaohao/MUIReactWebpackExpressWebApp.git 5 | - cd MUIReactWebpackExpressWebApp 6 | - npm install 7 | - npm start 8 | - [http://localhost:3003/page](http://localhost:3003/page) 9 | ## Preview 10 | ![a](http://i4.buimg.com/588795/28f577f83372d493.gif) 11 | ![b](http://i4.buimg.com/588795/23d47ce2f718deb2.gif) 12 | 13 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/githubhaohao/MUIReactWebpackExpressWebApp/7efd27c37cd20025f667896b42ea2f37a641af77/app.js -------------------------------------------------------------------------------- /bin/www: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * Module dependencies. 5 | */ 6 | 7 | var app = require('../app'); 8 | var debug = require('debug')('muireactwebpackexpresswebapp:server'); 9 | var http = require('http'); 10 | 11 | /** 12 | * Get port from environment and store in Express. 13 | */ 14 | 15 | var port = normalizePort(process.env.PORT || '3000'); 16 | app.set('port', port); 17 | 18 | /** 19 | * Create HTTP server. 20 | */ 21 | 22 | var server = http.createServer(app); 23 | 24 | /** 25 | * Listen on provided port, on all network interfaces. 26 | */ 27 | 28 | server.listen(port); 29 | server.on('error', onError); 30 | server.on('listening', onListening); 31 | 32 | /** 33 | * Normalize a port into a number, string, or false. 34 | */ 35 | 36 | function normalizePort(val) { 37 | var port = parseInt(val, 10); 38 | 39 | if (isNaN(port)) { 40 | // named pipe 41 | return val; 42 | } 43 | 44 | if (port >= 0) { 45 | // port number 46 | return port; 47 | } 48 | 49 | return false; 50 | } 51 | 52 | /** 53 | * Event listener for HTTP server "error" event. 54 | */ 55 | 56 | function onError(error) { 57 | if (error.syscall !== 'listen') { 58 | throw error; 59 | } 60 | 61 | var bind = typeof port === 'string' 62 | ? 'Pipe ' + port 63 | : 'Port ' + port; 64 | 65 | // handle specific listen errors with friendly messages 66 | switch (error.code) { 67 | case 'EACCES': 68 | console.error(bind + ' requires elevated privileges'); 69 | process.exit(1); 70 | break; 71 | case 'EADDRINUSE': 72 | console.error(bind + ' is already in use'); 73 | process.exit(1); 74 | break; 75 | default: 76 | throw error; 77 | } 78 | } 79 | 80 | /** 81 | * Event listener for HTTP server "listening" event. 82 | */ 83 | 84 | function onListening() { 85 | var addr = server.address(); 86 | var bind = typeof addr === 'string' 87 | ? 'pipe ' + addr 88 | : 'port ' + addr.port; 89 | debug('Listening on ' + bind); 90 | } 91 | -------------------------------------------------------------------------------- /client/src/css/about.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | div { 7 | font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 8 | } 9 | 10 | .container { 11 | margin: 0; 12 | padding: 0; 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | align-items: center; 17 | flex: 1; 18 | } 19 | 20 | .content { 21 | margin: 0; 22 | padding: 0; 23 | display: flex; 24 | flex: 1; 25 | justify-content: space-around; 26 | flex-wrap: wrap; 27 | } -------------------------------------------------------------------------------- /client/src/css/home.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | div { 7 | font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 8 | } 9 | 10 | #root { 11 | margin: 0; 12 | padding: 0; 13 | } 14 | 15 | .container { 16 | margin: 0; 17 | padding: 0; 18 | display: flex; 19 | flex-direction: column; 20 | flex: 1; 21 | } 22 | 23 | .content { 24 | display: flex; 25 | flex: 1; 26 | flex-direction: column; 27 | } -------------------------------------------------------------------------------- /client/src/css/page.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | div { 7 | font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 8 | } 9 | 10 | .container { 11 | margin: 0; 12 | padding: 0; 13 | display: flex; 14 | flex-direction: column; 15 | flex: 1; 16 | } 17 | 18 | .content { 19 | display: flex; 20 | margin-top: 100px; 21 | justify-content: center; 22 | align-items: center; 23 | } -------------------------------------------------------------------------------- /client/src/js/About.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Paper from 'material-ui/Paper'; 3 | import AppBar from 'material-ui/AppBar'; 4 | import Drawer from 'material-ui/Drawer'; 5 | import MenuItem from 'material-ui/MenuItem'; 6 | import Menu from 'material-ui/Menu'; 7 | import IconButton from 'material-ui/IconButton'; 8 | import FlatButton from 'material-ui/FlatButton'; 9 | import NavigationClose from 'material-ui/svg-icons/navigation/close'; 10 | import injectTapEventPlugin from 'react-tap-event-plugin'; 11 | import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 12 | import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card'; 13 | import ReactDOM from 'react-dom'; 14 | require('../css/about.css'); 15 | import MovieCard from './MovieCard.js'; 16 | injectTapEventPlugin(); 17 | 18 | const styles = { 19 | pagerStyle:{ 20 | marginTop:20, 21 | width:200, 22 | } 23 | } 24 | 25 | export default class About extends React.Component{ 26 | // 构造 27 | constructor(props) { 28 | super(props); 29 | // 初始状态 30 | this.state = { 31 | movies:[], 32 | zDepth:2, 33 | }; 34 | } 35 | 36 | componentDidMount() { 37 | fetch('/movie/data') 38 | .then(res => { 39 | return res.json(); 40 | }) 41 | .then(data => { 42 | console.log(data); 43 | this.initViews(data.subjects); 44 | }) 45 | .catch(error => { 46 | alert("Error : "+error); 47 | }) 48 | } 49 | 50 | initViews(movies){ 51 | let views = []; 52 | movies.forEach((movie,index) => { 53 | views.push() 54 | }); 55 | this.setState({ 56 | views:views 57 | }); 58 | } 59 | 60 | render(){ 61 | return ( 62 | 63 |
64 | } 66 | /> 67 |
68 | {this.state.views} 69 |
70 |
71 | 72 | 73 | 74 | ) 75 | } 76 | 77 | renderItemView(movie,index){ 78 | return ( 79 | 82 |
{ 84 | this.setState({ 85 | zDepth:4, 86 | views:this.state.views 87 | }); 88 | }} 89 | onMouseLeave={() => { 90 | console.log('onMouseLeave'); 91 | this.setState({ 92 | zDepth:2, 93 | views:this.state.views 94 | }); 95 | }} 96 | > 97 | 98 | 103 | 109 | } 110 | > 111 | 112 | 113 | 114 |
115 | 116 | 117 | ) 118 | } 119 | 120 | } 121 | 122 | ReactDOM.render(,document.getElementById('root')); -------------------------------------------------------------------------------- /client/src/js/Home.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/githubhaohao/MUIReactWebpackExpressWebApp/7efd27c37cd20025f667896b42ea2f37a641af77/client/src/js/Home.js -------------------------------------------------------------------------------- /client/src/js/MovieCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Paper from 'material-ui/Paper'; 3 | import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 4 | import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card'; 5 | 6 | const styles = { 7 | pagerStyle:{ 8 | marginTop:20, 9 | width:250, 10 | } 11 | } 12 | 13 | export default class MovieCard extends React.Component{ 14 | // 构造 15 | constructor(props) { 16 | super(props); 17 | // 初始状态 18 | this.state = { 19 | zDepth:0, 20 | }; 21 | } 22 | 23 | render(){ 24 | let movie = this.props.movie; 25 | return ( 26 | 29 |
{ 31 | this.setState({ 32 | zDepth:5, 33 | }); 34 | }} 35 | onMouseLeave={() => { 36 | console.log('onMouseLeave'); 37 | this.setState({ 38 | zDepth:0, 39 | }); 40 | }} 41 | > 42 | 43 | 44 | 49 | 55 | } 56 | > 57 | 58 | 59 | 60 | 61 |
62 | 63 | ) 64 | } 65 | } -------------------------------------------------------------------------------- /client/src/js/Page.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Paper from 'material-ui/Paper'; 4 | import AppBar from 'material-ui/AppBar'; 5 | import Drawer from 'material-ui/Drawer'; 6 | import MenuItem from 'material-ui/MenuItem'; 7 | import Menu from 'material-ui/Menu'; 8 | import IconButton from 'material-ui/IconButton'; 9 | import FlatButton from 'material-ui/FlatButton'; 10 | import NavigationClose from 'material-ui/svg-icons/navigation/close'; 11 | import injectTapEventPlugin from 'react-tap-event-plugin'; 12 | import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 13 | import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card'; 14 | require('../css/page.css') 15 | injectTapEventPlugin(); 16 | 17 | export default class Page extends React.Component{ 18 | // 构造 19 | constructor(props) { 20 | super(props); 21 | // 初始状态 22 | this.state = { 23 | zDepthA:0, 24 | zDepthB:0, 25 | zDepthC:0 26 | }; 27 | } 28 | 29 | componentDidMount() { 30 | } 31 | 32 | render(){ 33 | return ( 34 | 35 |
36 | 38 |
41 | { 43 | this.setState({ 44 | zDepthA:4, 45 | }); 46 | }} 47 | onMouseLeave={() => { 48 | console.log('onMouseLeave'); 49 | this.setState({ 50 | zDepthA:0, 51 | }); 52 | }} 53 | zDepth={this.state.zDepthA}> 54 | 55 | 56 | 61 | 67 | }> 68 | 69 | 70 | 71 | 72 | 73 | { 76 | this.setState({ 77 | zDepthB:4, 78 | }); 79 | }} 80 | onMouseLeave={() => { 81 | console.log('onMouseLeave'); 82 | this.setState({ 83 | zDepthB:0, 84 | }); 85 | }} 86 | zDepth={this.state.zDepthB}> 87 | 88 | 93 | 99 | }> 100 | 101 | 102 | 103 | 104 | { 107 | this.setState({ 108 | zDepthC:4, 109 | }); 110 | }} 111 | onMouseLeave={() => { 112 | console.log('onMouseLeave'); 113 | this.setState({ 114 | zDepthC:0, 115 | }); 116 | }} 117 | zDepth={this.state.zDepthC}> 118 | 119 | 124 | 130 | }> 131 | 132 | 133 | 134 | 135 |
136 |
137 | 138 | ) 139 | 140 | } 141 | } 142 | 143 | ReactDOM.render(,document.getElementById('root')); -------------------------------------------------------------------------------- /data_source/MovieData.json: -------------------------------------------------------------------------------- 1 | { 2 | "count": 10, 3 | "start": 0, 4 | "total": 250, 5 | "subjects": [ 6 | { 7 | "rating": { 8 | "max": 10, 9 | "average": 9.6, 10 | "stars": "50", 11 | "min": 0 12 | }, 13 | "genres": [ 14 | "犯罪", 15 | "剧情" 16 | ], 17 | "title": "肖申克的救赎", 18 | "casts": [ 19 | { 20 | "alt": "https://movie.douban.com/celebrity/1054521/", 21 | "avatars": { 22 | "small": "https://img3.doubanio.com/img/celebrity/small/17525.jpg", 23 | "large": "https://img3.doubanio.com/img/celebrity/large/17525.jpg", 24 | "medium": "https://img3.doubanio.com/img/celebrity/medium/17525.jpg" 25 | }, 26 | "name": "蒂姆·罗宾斯", 27 | "id": "1054521" 28 | }, 29 | { 30 | "alt": "https://movie.douban.com/celebrity/1054534/", 31 | "avatars": { 32 | "small": "https://img3.doubanio.com/img/celebrity/small/34642.jpg", 33 | "large": "https://img3.doubanio.com/img/celebrity/large/34642.jpg", 34 | "medium": "https://img3.doubanio.com/img/celebrity/medium/34642.jpg" 35 | }, 36 | "name": "摩根·弗里曼", 37 | "id": "1054534" 38 | }, 39 | { 40 | "alt": "https://movie.douban.com/celebrity/1041179/", 41 | "avatars": { 42 | "small": "https://img1.doubanio.com/img/celebrity/small/5837.jpg", 43 | "large": "https://img1.doubanio.com/img/celebrity/large/5837.jpg", 44 | "medium": "https://img1.doubanio.com/img/celebrity/medium/5837.jpg" 45 | }, 46 | "name": "鲍勃·冈顿", 47 | "id": "1041179" 48 | } 49 | ], 50 | "collect_count": 1032579, 51 | "original_title": "The Shawshank Redemption", 52 | "subtype": "movie", 53 | "directors": [ 54 | { 55 | "alt": "https://movie.douban.com/celebrity/1047973/", 56 | "avatars": { 57 | "small": "https://img3.doubanio.com/img/celebrity/small/230.jpg", 58 | "large": "https://img3.doubanio.com/img/celebrity/large/230.jpg", 59 | "medium": "https://img3.doubanio.com/img/celebrity/medium/230.jpg" 60 | }, 61 | "name": "弗兰克·德拉邦特", 62 | "id": "1047973" 63 | } 64 | ], 65 | "year": "1994", 66 | "images": { 67 | "small": "https://img3.doubanio.com/view/movie_poster_cover/ipst/public/p480747492.jpg", 68 | "large": "https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p480747492.jpg", 69 | "medium": "https://img3.doubanio.com/view/movie_poster_cover/spst/public/p480747492.jpg" 70 | }, 71 | "alt": "https://movie.douban.com/subject/1292052/", 72 | "id": "1292052" 73 | }, 74 | { 75 | "rating": { 76 | "max": 10, 77 | "average": 9.4, 78 | "stars": "50", 79 | "min": 0 80 | }, 81 | "genres": [ 82 | "剧情", 83 | "动作", 84 | "犯罪" 85 | ], 86 | "title": "这个杀手不太冷", 87 | "casts": [ 88 | { 89 | "alt": "https://movie.douban.com/celebrity/1025182/", 90 | "avatars": { 91 | "small": "https://img3.doubanio.com/img/celebrity/small/8833.jpg", 92 | "large": "https://img3.doubanio.com/img/celebrity/large/8833.jpg", 93 | "medium": "https://img3.doubanio.com/img/celebrity/medium/8833.jpg" 94 | }, 95 | "name": "让·雷诺", 96 | "id": "1025182" 97 | }, 98 | { 99 | "alt": "https://movie.douban.com/celebrity/1054454/", 100 | "avatars": { 101 | "small": "https://img3.doubanio.com/img/celebrity/small/2274.jpg", 102 | "large": "https://img3.doubanio.com/img/celebrity/large/2274.jpg", 103 | "medium": "https://img3.doubanio.com/img/celebrity/medium/2274.jpg" 104 | }, 105 | "name": "娜塔莉·波特曼", 106 | "id": "1054454" 107 | }, 108 | { 109 | "alt": "https://movie.douban.com/celebrity/1010507/", 110 | "avatars": { 111 | "small": "https://img3.doubanio.com/img/celebrity/small/104.jpg", 112 | "large": "https://img3.doubanio.com/img/celebrity/large/104.jpg", 113 | "medium": "https://img3.doubanio.com/img/celebrity/medium/104.jpg" 114 | }, 115 | "name": "加里·奥德曼", 116 | "id": "1010507" 117 | } 118 | ], 119 | "collect_count": 998737, 120 | "original_title": "Léon", 121 | "subtype": "movie", 122 | "directors": [ 123 | { 124 | "alt": "https://movie.douban.com/celebrity/1031876/", 125 | "avatars": { 126 | "small": "https://img3.doubanio.com/img/celebrity/small/33301.jpg", 127 | "large": "https://img3.doubanio.com/img/celebrity/large/33301.jpg", 128 | "medium": "https://img3.doubanio.com/img/celebrity/medium/33301.jpg" 129 | }, 130 | "name": "吕克·贝松", 131 | "id": "1031876" 132 | } 133 | ], 134 | "year": "1994", 135 | "images": { 136 | "small": "https://img3.doubanio.com/view/movie_poster_cover/ipst/public/p511118051.jpg", 137 | "large": "https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p511118051.jpg", 138 | "medium": "https://img3.doubanio.com/view/movie_poster_cover/spst/public/p511118051.jpg" 139 | }, 140 | "alt": "https://movie.douban.com/subject/1295644/", 141 | "id": "1295644" 142 | }, 143 | { 144 | "rating": { 145 | "max": 10, 146 | "average": 9.5, 147 | "stars": "50", 148 | "min": 0 149 | }, 150 | "genres": [ 151 | "剧情", 152 | "爱情", 153 | "同性" 154 | ], 155 | "title": "霸王别姬", 156 | "casts": [ 157 | { 158 | "alt": "https://movie.douban.com/celebrity/1003494/", 159 | "avatars": { 160 | "small": "https://img1.doubanio.com/img/celebrity/small/67.jpg", 161 | "large": "https://img1.doubanio.com/img/celebrity/large/67.jpg", 162 | "medium": "https://img1.doubanio.com/img/celebrity/medium/67.jpg" 163 | }, 164 | "name": "张国荣", 165 | "id": "1003494" 166 | }, 167 | { 168 | "alt": "https://movie.douban.com/celebrity/1050265/", 169 | "avatars": { 170 | "small": "https://img3.doubanio.com/img/celebrity/small/10381.jpg", 171 | "large": "https://img3.doubanio.com/img/celebrity/large/10381.jpg", 172 | "medium": "https://img3.doubanio.com/img/celebrity/medium/10381.jpg" 173 | }, 174 | "name": "张丰毅", 175 | "id": "1050265" 176 | }, 177 | { 178 | "alt": "https://movie.douban.com/celebrity/1035641/", 179 | "avatars": { 180 | "small": "https://img1.doubanio.com/img/celebrity/small/1399268395.47.jpg", 181 | "large": "https://img1.doubanio.com/img/celebrity/large/1399268395.47.jpg", 182 | "medium": "https://img1.doubanio.com/img/celebrity/medium/1399268395.47.jpg" 183 | }, 184 | "name": "巩俐", 185 | "id": "1035641" 186 | } 187 | ], 188 | "collect_count": 725262, 189 | "original_title": "霸王别姬", 190 | "subtype": "movie", 191 | "directors": [ 192 | { 193 | "alt": "https://movie.douban.com/celebrity/1023040/", 194 | "avatars": { 195 | "small": "https://img3.doubanio.com/img/celebrity/small/750.jpg", 196 | "large": "https://img3.doubanio.com/img/celebrity/large/750.jpg", 197 | "medium": "https://img3.doubanio.com/img/celebrity/medium/750.jpg" 198 | }, 199 | "name": "陈凯歌", 200 | "id": "1023040" 201 | } 202 | ], 203 | "year": "1993", 204 | "images": { 205 | "small": "https://img3.doubanio.com/view/movie_poster_cover/ipst/public/p1910813120.jpg", 206 | "large": "https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p1910813120.jpg", 207 | "medium": "https://img3.doubanio.com/view/movie_poster_cover/spst/public/p1910813120.jpg" 208 | }, 209 | "alt": "https://movie.douban.com/subject/1291546/", 210 | "id": "1291546" 211 | }, 212 | { 213 | "rating": { 214 | "max": 10, 215 | "average": 9.4, 216 | "stars": "50", 217 | "min": 0 218 | }, 219 | "genres": [ 220 | "剧情", 221 | "爱情" 222 | ], 223 | "title": "阿甘正传", 224 | "casts": [ 225 | { 226 | "alt": "https://movie.douban.com/celebrity/1054450/", 227 | "avatars": { 228 | "small": "https://img3.doubanio.com/img/celebrity/small/551.jpg", 229 | "large": "https://img3.doubanio.com/img/celebrity/large/551.jpg", 230 | "medium": "https://img3.doubanio.com/img/celebrity/medium/551.jpg" 231 | }, 232 | "name": "汤姆·汉克斯", 233 | "id": "1054450" 234 | }, 235 | { 236 | "alt": "https://movie.douban.com/celebrity/1002676/", 237 | "avatars": { 238 | "small": "https://img1.doubanio.com/img/celebrity/small/51737.jpg", 239 | "large": "https://img1.doubanio.com/img/celebrity/large/51737.jpg", 240 | "medium": "https://img1.doubanio.com/img/celebrity/medium/51737.jpg" 241 | }, 242 | "name": "罗宾·怀特", 243 | "id": "1002676" 244 | }, 245 | { 246 | "alt": "https://movie.douban.com/celebrity/1031848/", 247 | "avatars": { 248 | "small": "https://img3.doubanio.com/img/celebrity/small/1345.jpg", 249 | "large": "https://img3.doubanio.com/img/celebrity/large/1345.jpg", 250 | "medium": "https://img3.doubanio.com/img/celebrity/medium/1345.jpg" 251 | }, 252 | "name": "加里·西尼斯", 253 | "id": "1031848" 254 | } 255 | ], 256 | "collect_count": 892812, 257 | "original_title": "Forrest Gump", 258 | "subtype": "movie", 259 | "directors": [ 260 | { 261 | "alt": "https://movie.douban.com/celebrity/1053564/", 262 | "avatars": { 263 | "small": "https://img3.doubanio.com/img/celebrity/small/505.jpg", 264 | "large": "https://img3.doubanio.com/img/celebrity/large/505.jpg", 265 | "medium": "https://img3.doubanio.com/img/celebrity/medium/505.jpg" 266 | }, 267 | "name": "罗伯特·泽米吉斯", 268 | "id": "1053564" 269 | } 270 | ], 271 | "year": "1994", 272 | "images": { 273 | "small": "https://img1.doubanio.com/view/movie_poster_cover/ipst/public/p510876377.jpg", 274 | "large": "https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p510876377.jpg", 275 | "medium": "https://img1.doubanio.com/view/movie_poster_cover/spst/public/p510876377.jpg" 276 | }, 277 | "alt": "https://movie.douban.com/subject/1292720/", 278 | "id": "1292720" 279 | }, 280 | { 281 | "rating": { 282 | "max": 10, 283 | "average": 9.5, 284 | "stars": "50", 285 | "min": 0 286 | }, 287 | "genres": [ 288 | "剧情", 289 | "喜剧", 290 | "爱情" 291 | ], 292 | "title": "美丽人生", 293 | "casts": [ 294 | { 295 | "alt": "https://movie.douban.com/celebrity/1041004/", 296 | "avatars": { 297 | "small": "https://img3.doubanio.com/img/celebrity/small/26764.jpg", 298 | "large": "https://img3.doubanio.com/img/celebrity/large/26764.jpg", 299 | "medium": "https://img3.doubanio.com/img/celebrity/medium/26764.jpg" 300 | }, 301 | "name": "罗伯托·贝尼尼", 302 | "id": "1041004" 303 | }, 304 | { 305 | "alt": "https://movie.douban.com/celebrity/1000375/", 306 | "avatars": { 307 | "small": "https://img1.doubanio.com/img/celebrity/small/9548.jpg", 308 | "large": "https://img1.doubanio.com/img/celebrity/large/9548.jpg", 309 | "medium": "https://img1.doubanio.com/img/celebrity/medium/9548.jpg" 310 | }, 311 | "name": "尼可莱塔·布拉斯基", 312 | "id": "1000375" 313 | }, 314 | { 315 | "alt": "https://movie.douban.com/celebrity/1000368/", 316 | "avatars": { 317 | "small": "https://img3.doubanio.com/img/celebrity/small/45590.jpg", 318 | "large": "https://img3.doubanio.com/img/celebrity/large/45590.jpg", 319 | "medium": "https://img3.doubanio.com/img/celebrity/medium/45590.jpg" 320 | }, 321 | "name": "乔治·坎塔里尼", 322 | "id": "1000368" 323 | } 324 | ], 325 | "collect_count": 491407, 326 | "original_title": "La vita è bella", 327 | "subtype": "movie", 328 | "directors": [ 329 | { 330 | "alt": "https://movie.douban.com/celebrity/1041004/", 331 | "avatars": { 332 | "small": "https://img3.doubanio.com/img/celebrity/small/26764.jpg", 333 | "large": "https://img3.doubanio.com/img/celebrity/large/26764.jpg", 334 | "medium": "https://img3.doubanio.com/img/celebrity/medium/26764.jpg" 335 | }, 336 | "name": "罗伯托·贝尼尼", 337 | "id": "1041004" 338 | } 339 | ], 340 | "year": "1997", 341 | "images": { 342 | "small": "https://img3.doubanio.com/view/movie_poster_cover/ipst/public/p510861873.jpg", 343 | "large": "https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p510861873.jpg", 344 | "medium": "https://img3.doubanio.com/view/movie_poster_cover/spst/public/p510861873.jpg" 345 | }, 346 | "alt": "https://movie.douban.com/subject/1292063/", 347 | "id": "1292063" 348 | }, 349 | { 350 | "rating": { 351 | "max": 10, 352 | "average": 9.2, 353 | "stars": "50", 354 | "min": 0 355 | }, 356 | "genres": [ 357 | "剧情", 358 | "动画", 359 | "奇幻" 360 | ], 361 | "title": "千与千寻", 362 | "casts": [ 363 | { 364 | "alt": "https://movie.douban.com/celebrity/1023337/", 365 | "avatars": { 366 | "small": "https://img3.doubanio.com/img/celebrity/small/1463193210.13.jpg", 367 | "large": "https://img3.doubanio.com/img/celebrity/large/1463193210.13.jpg", 368 | "medium": "https://img3.doubanio.com/img/celebrity/medium/1463193210.13.jpg" 369 | }, 370 | "name": "柊瑠美", 371 | "id": "1023337" 372 | }, 373 | { 374 | "alt": "https://movie.douban.com/celebrity/1005438/", 375 | "avatars": { 376 | "small": "https://img5.doubanio.com/img/celebrity/small/44986.jpg", 377 | "large": "https://img5.doubanio.com/img/celebrity/large/44986.jpg", 378 | "medium": "https://img5.doubanio.com/img/celebrity/medium/44986.jpg" 379 | }, 380 | "name": "入野自由", 381 | "id": "1005438" 382 | }, 383 | { 384 | "alt": "https://movie.douban.com/celebrity/1045797/", 385 | "avatars": { 386 | "small": "https://img3.doubanio.com/img/celebrity/small/18785.jpg", 387 | "large": "https://img3.doubanio.com/img/celebrity/large/18785.jpg", 388 | "medium": "https://img3.doubanio.com/img/celebrity/medium/18785.jpg" 389 | }, 390 | "name": "夏木真理", 391 | "id": "1045797" 392 | } 393 | ], 394 | "collect_count": 799306, 395 | "original_title": "千と千尋の神隠し", 396 | "subtype": "movie", 397 | "directors": [ 398 | { 399 | "alt": "https://movie.douban.com/celebrity/1054439/", 400 | "avatars": { 401 | "small": "https://img5.doubanio.com/img/celebrity/small/616.jpg", 402 | "large": "https://img5.doubanio.com/img/celebrity/large/616.jpg", 403 | "medium": "https://img5.doubanio.com/img/celebrity/medium/616.jpg" 404 | }, 405 | "name": "宫崎骏", 406 | "id": "1054439" 407 | } 408 | ], 409 | "year": "2001", 410 | "images": { 411 | "small": "https://img5.doubanio.com/view/movie_poster_cover/ipst/public/p1910830216.jpg", 412 | "large": "https://img5.doubanio.com/view/movie_poster_cover/lpst/public/p1910830216.jpg", 413 | "medium": "https://img5.doubanio.com/view/movie_poster_cover/spst/public/p1910830216.jpg" 414 | }, 415 | "alt": "https://movie.douban.com/subject/1291561/", 416 | "id": "1291561" 417 | }, 418 | { 419 | "rating": { 420 | "max": 10, 421 | "average": 9.4, 422 | "stars": "50", 423 | "min": 0 424 | }, 425 | "genres": [ 426 | "剧情", 427 | "历史", 428 | "战争" 429 | ], 430 | "title": "辛德勒的名单", 431 | "casts": [ 432 | { 433 | "alt": "https://movie.douban.com/celebrity/1031220/", 434 | "avatars": { 435 | "small": "https://img5.doubanio.com/img/celebrity/small/44906.jpg", 436 | "large": "https://img5.doubanio.com/img/celebrity/large/44906.jpg", 437 | "medium": "https://img5.doubanio.com/img/celebrity/medium/44906.jpg" 438 | }, 439 | "name": "连姆·尼森", 440 | "id": "1031220" 441 | }, 442 | { 443 | "alt": "https://movie.douban.com/celebrity/1054393/", 444 | "avatars": { 445 | "small": "https://img1.doubanio.com/img/celebrity/small/1374649659.58.jpg", 446 | "large": "https://img1.doubanio.com/img/celebrity/large/1374649659.58.jpg", 447 | "medium": "https://img1.doubanio.com/img/celebrity/medium/1374649659.58.jpg" 448 | }, 449 | "name": "本·金斯利", 450 | "id": "1054393" 451 | }, 452 | { 453 | "alt": "https://movie.douban.com/celebrity/1006956/", 454 | "avatars": { 455 | "small": "https://img3.doubanio.com/img/celebrity/small/28941.jpg", 456 | "large": "https://img3.doubanio.com/img/celebrity/large/28941.jpg", 457 | "medium": "https://img3.doubanio.com/img/celebrity/medium/28941.jpg" 458 | }, 459 | "name": "拉尔夫·费因斯", 460 | "id": "1006956" 461 | } 462 | ], 463 | "collect_count": 470910, 464 | "original_title": "Schindler's List", 465 | "subtype": "movie", 466 | "directors": [ 467 | { 468 | "alt": "https://movie.douban.com/celebrity/1054440/", 469 | "avatars": { 470 | "small": "https://img3.doubanio.com/img/celebrity/small/34602.jpg", 471 | "large": "https://img3.doubanio.com/img/celebrity/large/34602.jpg", 472 | "medium": "https://img3.doubanio.com/img/celebrity/medium/34602.jpg" 473 | }, 474 | "name": "史蒂文·斯皮尔伯格", 475 | "id": "1054440" 476 | } 477 | ], 478 | "year": "1993", 479 | "images": { 480 | "small": "https://img3.doubanio.com/view/movie_poster_cover/ipst/public/p492406163.jpg", 481 | "large": "https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p492406163.jpg", 482 | "medium": "https://img3.doubanio.com/view/movie_poster_cover/spst/public/p492406163.jpg" 483 | }, 484 | "alt": "https://movie.douban.com/subject/1295124/", 485 | "id": "1295124" 486 | }, 487 | { 488 | "rating": { 489 | "max": 10, 490 | "average": 9.2, 491 | "stars": "45", 492 | "min": 0 493 | }, 494 | "genres": [ 495 | "剧情", 496 | "爱情", 497 | "灾难" 498 | ], 499 | "title": "泰坦尼克号", 500 | "casts": [ 501 | { 502 | "alt": "https://movie.douban.com/celebrity/1041029/", 503 | "avatars": { 504 | "small": "https://img3.doubanio.com/img/celebrity/small/470.jpg", 505 | "large": "https://img3.doubanio.com/img/celebrity/large/470.jpg", 506 | "medium": "https://img3.doubanio.com/img/celebrity/medium/470.jpg" 507 | }, 508 | "name": "莱昂纳多·迪卡普里奥", 509 | "id": "1041029" 510 | }, 511 | { 512 | "alt": "https://movie.douban.com/celebrity/1054446/", 513 | "avatars": { 514 | "small": "https://img1.doubanio.com/img/celebrity/small/53358.jpg", 515 | "large": "https://img1.doubanio.com/img/celebrity/large/53358.jpg", 516 | "medium": "https://img1.doubanio.com/img/celebrity/medium/53358.jpg" 517 | }, 518 | "name": "凯特·温丝莱特", 519 | "id": "1054446" 520 | }, 521 | { 522 | "alt": "https://movie.douban.com/celebrity/1031864/", 523 | "avatars": { 524 | "small": "https://img5.doubanio.com/img/celebrity/small/45186.jpg", 525 | "large": "https://img5.doubanio.com/img/celebrity/large/45186.jpg", 526 | "medium": "https://img5.doubanio.com/img/celebrity/medium/45186.jpg" 527 | }, 528 | "name": "比利·赞恩", 529 | "id": "1031864" 530 | } 531 | ], 532 | "collect_count": 820587, 533 | "original_title": "Titanic", 534 | "subtype": "movie", 535 | "directors": [ 536 | { 537 | "alt": "https://movie.douban.com/celebrity/1022571/", 538 | "avatars": { 539 | "small": "https://img3.doubanio.com/img/celebrity/small/33715.jpg", 540 | "large": "https://img3.doubanio.com/img/celebrity/large/33715.jpg", 541 | "medium": "https://img3.doubanio.com/img/celebrity/medium/33715.jpg" 542 | }, 543 | "name": "詹姆斯·卡梅隆", 544 | "id": "1022571" 545 | } 546 | ], 547 | "year": "1997", 548 | "images": { 549 | "small": "https://img3.doubanio.com/view/movie_poster_cover/ipst/public/p457760035.jpg", 550 | "large": "https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p457760035.jpg", 551 | "medium": "https://img3.doubanio.com/view/movie_poster_cover/spst/public/p457760035.jpg" 552 | }, 553 | "alt": "https://movie.douban.com/subject/1292722/", 554 | "id": "1292722" 555 | }, 556 | { 557 | "rating": { 558 | "max": 10, 559 | "average": 9.2, 560 | "stars": "50", 561 | "min": 0 562 | }, 563 | "genres": [ 564 | "剧情", 565 | "动作", 566 | "科幻" 567 | ], 568 | "title": "盗梦空间", 569 | "casts": [ 570 | { 571 | "alt": "https://movie.douban.com/celebrity/1041029/", 572 | "avatars": { 573 | "small": "https://img3.doubanio.com/img/celebrity/small/470.jpg", 574 | "large": "https://img3.doubanio.com/img/celebrity/large/470.jpg", 575 | "medium": "https://img3.doubanio.com/img/celebrity/medium/470.jpg" 576 | }, 577 | "name": "莱昂纳多·迪卡普里奥", 578 | "id": "1041029" 579 | }, 580 | { 581 | "alt": "https://movie.douban.com/celebrity/1101703/", 582 | "avatars": { 583 | "small": "https://img1.doubanio.com/img/celebrity/small/3517.jpg", 584 | "large": "https://img1.doubanio.com/img/celebrity/large/3517.jpg", 585 | "medium": "https://img1.doubanio.com/img/celebrity/medium/3517.jpg" 586 | }, 587 | "name": "约瑟夫·高登-莱维特", 588 | "id": "1101703" 589 | }, 590 | { 591 | "alt": "https://movie.douban.com/celebrity/1012520/", 592 | "avatars": { 593 | "small": "https://img1.doubanio.com/img/celebrity/small/118.jpg", 594 | "large": "https://img1.doubanio.com/img/celebrity/large/118.jpg", 595 | "medium": "https://img1.doubanio.com/img/celebrity/medium/118.jpg" 596 | }, 597 | "name": "艾伦·佩吉", 598 | "id": "1012520" 599 | } 600 | ], 601 | "collect_count": 901066, 602 | "original_title": "Inception", 603 | "subtype": "movie", 604 | "directors": [ 605 | { 606 | "alt": "https://movie.douban.com/celebrity/1054524/", 607 | "avatars": { 608 | "small": "https://img3.doubanio.com/img/celebrity/small/673.jpg", 609 | "large": "https://img3.doubanio.com/img/celebrity/large/673.jpg", 610 | "medium": "https://img3.doubanio.com/img/celebrity/medium/673.jpg" 611 | }, 612 | "name": "克里斯托弗·诺兰", 613 | "id": "1054524" 614 | } 615 | ], 616 | "year": "2010", 617 | "images": { 618 | "small": "https://img3.doubanio.com/view/movie_poster_cover/ipst/public/p513344864.jpg", 619 | "large": "https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p513344864.jpg", 620 | "medium": "https://img3.doubanio.com/view/movie_poster_cover/spst/public/p513344864.jpg" 621 | }, 622 | "alt": "https://movie.douban.com/subject/3541415/", 623 | "id": "3541415" 624 | }, 625 | { 626 | "rating": { 627 | "max": 10, 628 | "average": 9.3, 629 | "stars": "50", 630 | "min": 0 631 | }, 632 | "genres": [ 633 | "喜剧", 634 | "爱情", 635 | "科幻" 636 | ], 637 | "title": "机器人总动员", 638 | "casts": [ 639 | { 640 | "alt": "https://movie.douban.com/celebrity/1009535/", 641 | "avatars": { 642 | "small": "https://img1.doubanio.com/img/celebrity/small/13028.jpg", 643 | "large": "https://img1.doubanio.com/img/celebrity/large/13028.jpg", 644 | "medium": "https://img1.doubanio.com/img/celebrity/medium/13028.jpg" 645 | }, 646 | "name": "本·贝尔特", 647 | "id": "1009535" 648 | }, 649 | { 650 | "alt": "https://movie.douban.com/celebrity/1000389/", 651 | "avatars": { 652 | "small": "https://img5.doubanio.com/img/celebrity/small/1365856130.16.jpg", 653 | "large": "https://img5.doubanio.com/img/celebrity/large/1365856130.16.jpg", 654 | "medium": "https://img5.doubanio.com/img/celebrity/medium/1365856130.16.jpg" 655 | }, 656 | "name": "艾丽莎·奈特", 657 | "id": "1000389" 658 | }, 659 | { 660 | "alt": "https://movie.douban.com/celebrity/1018022/", 661 | "avatars": { 662 | "small": "https://img1.doubanio.com/img/celebrity/small/31068.jpg", 663 | "large": "https://img1.doubanio.com/img/celebrity/large/31068.jpg", 664 | "medium": "https://img1.doubanio.com/img/celebrity/medium/31068.jpg" 665 | }, 666 | "name": "杰夫·格尔林", 667 | "id": "1018022" 668 | } 669 | ], 670 | "collect_count": 584755, 671 | "original_title": "WALL·E", 672 | "subtype": "movie", 673 | "directors": [ 674 | { 675 | "alt": "https://movie.douban.com/celebrity/1036450/", 676 | "avatars": { 677 | "small": "https://img5.doubanio.com/img/celebrity/small/1467359656.96.jpg", 678 | "large": "https://img5.doubanio.com/img/celebrity/large/1467359656.96.jpg", 679 | "medium": "https://img5.doubanio.com/img/celebrity/medium/1467359656.96.jpg" 680 | }, 681 | "name": "安德鲁·斯坦顿", 682 | "id": "1036450" 683 | } 684 | ], 685 | "year": "2008", 686 | "images": { 687 | "small": "https://img3.doubanio.com/view/movie_poster_cover/ipst/public/p449665982.jpg", 688 | "large": "https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p449665982.jpg", 689 | "medium": "https://img3.doubanio.com/view/movie_poster_cover/spst/public/p449665982.jpg" 690 | }, 691 | "alt": "https://movie.douban.com/subject/2131459/", 692 | "id": "2131459" 693 | } 694 | ], 695 | "title": "豆瓣电影Top250" 696 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "muireactwebpackexpresswebapp", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "prestart": "webpack --progress --colors", 7 | "start": "node ./bin/www" 8 | }, 9 | "dependencies": { 10 | "body-parser": "~1.16.0", 11 | "cookie-parser": "~1.4.3", 12 | "debug": "~2.6.0", 13 | "ejs": "~2.5.5", 14 | "express": "~4.14.1", 15 | "material-ui": "latest", 16 | "morgan": "~1.7.0", 17 | "react": "^15.1.0", 18 | "react-dom": "^15.1.0", 19 | "react-pullload": "0.0.2", 20 | "react-tap-event-plugin": "latest", 21 | "serve-favicon": "~2.3.2" 22 | }, 23 | "devDependencies": { 24 | "babel-core": "^6.9.1", 25 | "babel-loader": "^6.2.4", 26 | "babel-preset-es2015": "^6.9.0", 27 | "babel-preset-react": "^6.5.0", 28 | "babel-preset-stage-1": "^6.5.0", 29 | "css-loader": "^0.26.2", 30 | "style-loader": "^0.13.2", 31 | "webpack": "^1.13.1" 32 | }, 33 | "babel": { 34 | "presets": [ 35 | "es2015", 36 | "react", 37 | "stage-1" 38 | ], 39 | "plugins": [] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /public/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | #root{ 11 | margin: 0; 12 | padding: 0; 13 | } 14 | 15 | .container{ 16 | margin: 0; 17 | padding: 0; 18 | display: flex; 19 | flex-direction: column; 20 | flex:1; 21 | } 22 | 23 | .content{ 24 | display: flex; 25 | flex-direction: column; 26 | flex:1; 27 | margin: 0; 28 | padding: 0; 29 | 30 | } 31 | 32 | .btn{ 33 | margin-top: 300px; 34 | } 35 | 36 | a { 37 | color: #00B7FF; 38 | } 39 | -------------------------------------------------------------------------------- /routes/about.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | /* GET home page. */ 5 | router.get('/', function(req, res, next) { 6 | res.render('about', { title: 'About' }); 7 | }); 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /routes/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | /* GET home page. */ 5 | router.get('/', function(req, res, next) { 6 | res.render('index', { title: 'Home' }); 7 | }); 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /routes/movie.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | var data = require('../data_source/MovieData.json'); 4 | 5 | /* GET users listing. */ 6 | router.get('/:id', function(req, res, next) { 7 | console.log('request id = ',req.params.id); 8 | res.send(data); 9 | }); 10 | 11 | module.exports = router; 12 | -------------------------------------------------------------------------------- /routes/page.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | /* GET home page. */ 5 | router.get('/', function(req, res, next) { 6 | res.render('page', { title: 'Page' }); 7 | }); 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /views/about.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%= title %> 7 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /views/error.ejs: -------------------------------------------------------------------------------- 1 |

<%= message %>

2 |

<%= error.status %>

3 | 
<%= error.stack %>
4 | -------------------------------------------------------------------------------- /views/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%= title %> 7 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /views/page.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%= title %> 7 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | entry: { 5 | index: './client/src/js/Home.js', 6 | about: './client/src/js/About.js', 7 | page: './client/src/js/Page.js' 8 | }, 9 | output: { 10 | path: path.join(__dirname, '/client/output'), 11 | filename: '[name].bundle.js' 12 | }, 13 | resolve: { 14 | extensions: ['', '.js', '.jsx'] 15 | }, 16 | module: { 17 | loaders: [ 18 | {test: /\.jsx?$/, loaders: ['babel']}, 19 | {test: /\.css$/, loader: 'style!css'} 20 | ] 21 | } 22 | } --------------------------------------------------------------------------------