(总页数: {total}), }} />
357 |
358 |
359 | {/* 编辑添加 */}
360 |
372 |
462 |
475 |
483 |
487 |
488 |
489 | {/* 添加图片 */}
490 |
497 |
498 |
499 | {this.state.imgList}
500 |
501 |
514 |
522 |
525 |
526 |
527 |
528 | );
529 | }
530 | }
531 | const ListInfo = Form.create()(List);
532 | List.propTypes = {};
533 | function mapStateToProps({ Hero }) {
534 | return { Hero };
535 | }
536 | export default connect(mapStateToProps)(ListInfo);
537 |
--------------------------------------------------------------------------------
/src/routes/list/List.less:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chengheai/mongo-react/665ed3208064b65f8787d7e765dcd13588e1211c/src/routes/list/List.less
--------------------------------------------------------------------------------
/src/routes/login/Login.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'dva';
3 | import { Form, Icon, Input, Button } from 'antd';
4 | import { Link, routerRedux } from 'dva/router';
5 | import './Login.less';
6 | import bg from '../../assets/bg.jpg';
7 | const FormItem = Form.Item;
8 |
9 | class NormalLoginForm extends React.Component {
10 | state = {
11 | userName: 'guest',
12 | password: 'guest'
13 | }
14 | handleSubmit = (e) => {
15 | const { dispatch } = this.props;
16 | e.preventDefault();
17 | this.props.form.validateFields((err, values) => {
18 | if (!err) {
19 | dispatch(routerRedux.replace('/list'));
20 | console.log('Received values of form: ', values);
21 | sessionStorage.setItem('guest', values.userName)
22 | }
23 | });
24 | }
25 | render() {
26 | const { getFieldDecorator } = this.props.form;
27 | const { userName, password } = this.state;
28 | const sty = {
29 | backgroundImage: `url(${bg})`,
30 | backgroundSize: 'cover',
31 | height: '100%',
32 | width: '100%',
33 | position: 'relative'
34 | }
35 | return (
36 |
37 |
60 |
61 | );
62 | }
63 | }
64 |
65 | const Login = Form.create()(NormalLoginForm);
66 |
67 | export default connect()(Login);
68 |
--------------------------------------------------------------------------------
/src/routes/login/Login.less:
--------------------------------------------------------------------------------
1 | .login-form{
2 | background: red;
3 | }
4 |
--------------------------------------------------------------------------------
/src/services/example.js:
--------------------------------------------------------------------------------
1 | import axios from '../utils/axios'
2 |
3 | // 获取英雄列表
4 | export async function get_heros(params) {
5 | return axios.get('/api/hero', { params });
6 | }
7 |
8 | // 编辑英雄信息
9 | export async function put_heros(params) {
10 | return axios.put(`/api/hero/${params._id}`, params);
11 | }
12 |
13 | // 添加新英雄
14 | export async function post_hero(params) {
15 | return axios.post(`/api/hero`, params);
16 | }
17 |
18 | // 删除英雄
19 | export async function delete_hero(params) {
20 | return axios.delete(`/api/hero/${params}`, params)
21 | }
22 |
23 | // 英雄添加图片
24 | export async function put_add_pic(params) {
25 | return axios.put(`/api/addpic/${params.id}`, params)
26 | }
27 |
28 | // 获取单个英雄详情
29 | export async function get_hero_detail(params) {
30 | return axios.get(`/api/hero/${params}`, params)
31 | }
32 |
--------------------------------------------------------------------------------
/src/services/hero.js:
--------------------------------------------------------------------------------
1 | import axios from '../utils/axios'
2 |
3 | // 获取英雄列表
4 | export async function get_heros(params) {
5 | return axios.get('/api/hero', { params });
6 | }
7 |
8 | // 编辑英雄信息
9 | export async function put_heros(params) {
10 | return axios.put(`/api/hero/${params._id}`, params);
11 | }
12 |
13 | // 添加新英雄
14 | export async function post_hero(params) {
15 | return axios.post(`/api/hero`, params);
16 | }
17 |
18 | // 删除英雄
19 | export async function delete_hero(params) {
20 | return axios.delete(`/api/hero/${params}`, params)
21 | }
22 |
23 | // 英雄添加图片
24 | export async function put_add_pic(params) {
25 | return axios.put(`/api/addpic/${params.id}`, params)
26 | }
27 | // 英雄b编辑图片
28 | export async function put_edit_pic(params) {
29 | return axios.put(`/api/editpic/${params.id}`, params)
30 | }
31 |
32 | // 获取单个英雄详情
33 | export async function get_hero_detail(params) {
34 | return axios.get(`/api/hero/${params}`, params)
35 | }
36 |
--------------------------------------------------------------------------------
/src/utils/axios.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 |
3 | // axios 配置
4 | var instance = axios.create({
5 | // 本地测试地址：
6 | // baseURL: 'http://localhost:8000',
7 | // 线上地址：
8 | // baseURL: 'http://144.34.148.126:3000',
9 | timeout: 5000
10 | })
11 |
12 | // 可以在这先申明错误代码表示的含义
13 |
14 | // 添加请求拦截器
15 | instance.interceptors.request.use(config => {
16 | // 在发送请求之前做些什么
17 | // config.data = JSON.stringify(config.data)
18 | config.headers = {
19 | 'Content-Type': 'application/json'
20 | }
21 | return config
22 | }, error => {
23 | // 对请求错误做些什么
24 | console.log(error) // for debug
25 | return Promise.reject(error)
26 | })
27 |
28 | // 添加响应拦截器
29 | instance.interceptors.response.use(response => {
30 | // 对响应数据做点什么
31 | // const res = response.data
32 | // 对错误代码做处理
33 | return response
34 | }, error => {
35 | // 对响应错误做点什么
36 | console.log('err' + error) // for debug
37 | return Promise.reject(error)
38 | })
39 |
40 | export default instance
41 |
42 | /**
43 | * post 请求方法
44 | * @param url
45 | * @param data
46 | * @returns {Promise}
47 | */
48 | export function post (url, data = {}) {
49 | return new Promise((resolve, reject) => {
50 | instance.post(url, data).then(response => {
51 | resolve(response.data)
52 | }, err => {
53 | reject(err)
54 | })
55 | })
56 | }
57 |
--------------------------------------------------------------------------------
/src/utils/request.js:
--------------------------------------------------------------------------------
1 | import fetch from 'dva/fetch';
2 |
3 | function parseJSON(response) {
4 | return response.json();
5 | }
6 |
7 | function checkStatus(response) {
8 | if (response.status >= 200 && response.status < 300) {
9 | return response;
10 | }
11 |
12 | const error = new Error(response.statusText);
13 | error.response = response;
14 | throw error;
15 | }
16 |
17 | /**
18 | * Requests a URL, returning a promise.
19 | *
20 | * @param {string} url The URL we want to request
21 | * @param {object} [options] The options we want to pass to "fetch"
22 | * @return {object} An object containing either "data" or "err"
23 | */
24 | export default function request(url, options) {
25 | return fetch(url, options)
26 | .then(checkStatus)
27 | .then(parseJSON)
28 | .then(data => ({ data }))
29 | .catch(err => ({ err }));
30 | }
31 |
--------------------------------------------------------------------------------
/vmodels/heroSchema.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose')
2 |
3 | const heroSchema = mongoose.Schema({
4 | name :String,
5 | nickname : String,
6 | sex : String,
7 | address : String,
8 | dowhat : [],
9 | imgArr:[],
10 | favourite:String,
11 | explain:String,
12 | createdAt : { type : Date, default : Date.now },
13 | }, { collection: 'myhero', timestamps: true})
14 | //这里mongoose.Schema要写上第二个参数，明确指定到数据库中的哪个表取数据
15 |
16 |
17 | const Hero = module.exports = mongoose.model('hero',heroSchema);
18 |
--------------------------------------------------------------------------------
/web/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM nginx
2 | COPY dist/ /usr/share/nginx/html/
3 | COPY nginx/default.conf /etc/nginx/conf.d/default.conf
4 |
--------------------------------------------------------------------------------
/web/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | LOL 英雄列表
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/web/dist/static/bg.7ea45f27.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chengheai/mongo-react/665ed3208064b65f8787d7e765dcd13588e1211c/web/dist/static/bg.7ea45f27.jpg
--------------------------------------------------------------------------------
/web/nginx/default.conf:
--------------------------------------------------------------------------------
1 | server {
2 | listen 10001;
3 | server_name localhost;
4 |
5 | #charset koi8-r;
6 | # access_log /var/log/nginx/host.access.log main;
7 | # error_log /var/log/nginx/error.log error;
8 |
9 | location / {
10 | root /usr/share/nginx/html;
11 | index index.html index.htm;
12 | }
13 |
14 | location /api {
15 | proxy_pass http://192.168.56.101:50002;
16 | index index.html; # 设置默认网页
17 | }
18 |
19 | #error_page 404 /404.html;
20 |
21 | # redirect server error pages to the static page /50x.html
22 | #
23 | error_page 500 502 503 504 /50x.html;
24 | location = /50x.html {
25 | root /usr/share/nginx/html;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
69 |