Browse Source

框架完成

yee 8 years ago
parent
commit
232460cd5e

+ 10 - 0
build/admin/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>admin_index</title>
+</head>
+<body>
+    <div id="root"></div>
+<script type="text/javascript" src="../vendors.js"></script><script type="text/javascript" src="../admin/index.js"></script></body>
+</html>

+ 1 - 0
build/admin/index.js

@@ -0,0 +1 @@
+webpackJsonp([0],[function(e,t,n){"use strict";function l(e){return e&&e.__esModule?e:{default:e}}var u=n(1),d=l(u),a=n(28),r=l(a);r.default.render(d.default.createElement("div",null,d.default.createElement("span",null,"this is admin_index")),document.getElementById("root"))}]);

+ 10 - 0
build/user/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>user_index</title>
+</head>
+<body>
+    <div id="root"></div>
+<script type="text/javascript" src="../vendors.js"></script><script type="text/javascript" src="../user/index.js"></script></body>
+</html>

+ 1 - 0
build/user/index.js

@@ -0,0 +1 @@
+webpackJsonp([1],[function(e,t,n){"use strict";function l(e){return e&&e.__esModule?e:{default:e}}var u=n(1),d=l(u),a=n(28),r=l(a);r.default.render(d.default.createElement("div",null,d.default.createElement("span",null,"this is index")),document.getElementById("root"))}]);

File diff suppressed because it is too large
+ 1 - 0
build/user/login.css


+ 10 - 0
build/user/login.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>user_login</title>
+<link href="../user/login.css" rel="stylesheet"></head>
+<body>
+    <div id="root"></div>
+<script type="text/javascript" src="../vendors.js"></script><script type="text/javascript" src="../user/login.js"></script></body>
+</html>

File diff suppressed because it is too large
+ 9 - 0
build/user/login.js


File diff suppressed because it is too large
+ 43 - 0
build/vendors.js


+ 29 - 0
css/base.less

@@ -0,0 +1,29 @@
+body {
+    color: #333;
+    font-size: 12px;
+}
+
+#root {
+    width: 100%;
+    height: 100%;
+    min-width: 960px;
+}
+
+.header {
+    height: 120px;
+    border-bottom: 1px solid #eee;
+}
+
+.clearfix:before,
+.clearfix:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+    overflow: hidden;
+}
+
+.footer {
+    border-top: 1px solid #eee;
+}

+ 0 - 0
css/default.less


+ 129 - 0
css/login.less

@@ -0,0 +1,129 @@
+.wrap {
+    width: 960px;
+    margin: 0 auto;
+    .header {
+        .login-logo {
+            float: left;
+            height: 60px;
+            width: 540px;
+            margin: 16px 0 0 8px;
+            .logo {
+                width: 100px;
+                background: #eee;
+                padding-top: 60px;
+                float: left;
+                margin-right: 10px;
+                position: relative;
+                overflow: hidden;
+                img {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    height: 60px;
+                    width: 100px;
+                }
+            }
+            .logo-text {
+                float: left;
+                border-left: 1px solid #eee;
+                line-height: 60px;
+                font-size: 22px;
+                span {
+                    margin-left: 10px;
+                }
+            }
+        }
+        .back {
+            float: right;
+            line-height: 20px;
+            margin-top: 88px;
+        }
+        .text {
+            float: left;
+            width: 80%;
+            margin-left: 8px;
+            line-height: 40px;
+        }
+    }
+    .content {
+        margin: 16px 10px;
+        .login-left {
+            float: left;
+            width: 560px;
+        }
+        .login-right {
+            float: right;
+            width: 340px;
+            border-left: 1px solid #eee;
+            padding-left: 20px;
+        }
+        .login-form {
+            .ant-checkbox-wrapper {
+                width: 50%;
+                margin-right: 0;
+            }
+            button {
+                width: 100%;
+                margin: 10px 0;
+            }
+            .reg {
+                text-align: center;
+                .login-form-forgot {
+                    border-right: 1px solid #aaa;
+                    padding-right: 8px;
+                    margin-right: 8px;
+                }
+            }
+        }
+        .login-other {
+            ul {
+                width: 100%;
+                li {
+                    cursor: pointer;
+                    width: 33%;
+                    float: left;
+                    padding: 4px 10px;
+                    img {
+                        height: 24px;
+                        vertical-align: middle;
+                        float: left;
+                    }
+                    p {
+                        font-size: 14px;
+                        line-height: 24px;
+                        float: left;
+                        margin-left: 4px;
+                    }
+                }
+            }
+        }
+    }
+    .footer {
+        text-align: center;
+        p {
+            margin: 10px 0;
+        }
+    }
+    //antd样式更改    
+    .ant-tabs-nav {
+        width: 100%;
+        .ant-tabs-tab {
+            width: 50%;
+            text-align: center;
+            margin-right: 0;
+        }
+    }
+    .ant-input {
+        width: 81%;
+        margin-left: 10px;
+    }
+    .ant-form-item-control {
+        span {
+            font-size: 14px;
+        }
+    }
+    .ant-form-item {
+        margin-top:26px;
+        margin-bottom:0px;
+    }
+}

BIN
image/login_qq.png


BIN
image/login_weibo.png


BIN
image/login_weixin.png


+ 9 - 0
js/admin/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(
+    <div>
+        <span>this is admin_index</span>
+    </div>,
+    document.getElementById('root')
+)

+ 53 - 0
js/component/login/loginFrom.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Form, Icon, Input, Button, Checkbox } from 'antd';
+const FormItem = Form.Item;
+
+const LoginForm = Form.create()(React.createClass({
+    handleSubmit(e) {
+        e.preventDefault();
+        this.props.form.validateFields((err, values) => {
+            if (!err) {
+                console.log('Received values of form: ', values);
+            }
+        });
+    },
+    render() {
+        const { getFieldDecorator } = this.props.form;
+        return (
+            <Form onSubmit={this.handleSubmit} className="login-form">
+                <FormItem>
+                    {getFieldDecorator('userName', {
+                        rules: [{ required: true, message: 'Please input your username!' }],
+                    })(
+                        <div>
+                            <span>用 &nbsp;&nbsp; 户 :</span><Input placeholder="Username" />
+                        </div>
+                        )}
+                </FormItem>
+                <FormItem>
+                    {getFieldDecorator('password', {
+                        rules: [{ required: true, message: 'Please input your Password!' }],
+                    })(
+                        <div>
+                            <span>密 &nbsp;&nbsp; 码 :</span><Input type="password" placeholder="Password" />
+                        </div>
+                        )}
+                </FormItem>
+                <FormItem>
+                    {getFieldDecorator('remember', {
+                        valuePropName: 'checked',
+                        initialValue: true,
+                    })(
+                        <Checkbox>记住我</Checkbox>
+                        )}
+                    <Button type="primary" htmlType="submit" className="login-form-button">
+                        登录
+                    </Button>
+                    <p className="reg"><a className="login-form-forgot">忘记密码</a><a>加入我们</a></p>
+                </FormItem>
+            </Form>
+        );
+    },
+}));
+
+export default LoginForm;

+ 9 - 0
js/user/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(
+    <div>
+        <span>this is index</span>
+    </div>,
+    document.getElementById('root')
+)

+ 55 - 0
js/user/login.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Icon, Tabs } from 'antd';
+import '../../css/base.less';
+import '../../css/login.less';
+
+import LoginFrom from '../component/login/loginFrom.jsx';
+import loginqq from '../../image/login_qq.png';
+import loginweixin from '../../image/login_weixin.png';
+import loginweibo from '../../image/login_weibo.png';
+
+const TabPane = Tabs.TabPane;
+
+ReactDOM.render(
+    <div className="wrap">
+        <div className="header">
+            <div className="login-logo">
+                <div className="logo">
+                    <img src="" alt="" />
+                </div>
+                <div className="logo-text">
+                    <span>logo-text</span>
+                </div>
+            </div>
+            <p className="back"><a href="./index.html"><Icon type="left" />返回首页</a></p>
+            <p className="text">卓越的能力应用与技术交易平台</p>
+        </div>
+        <div className="content clearfix">
+            <div className="login-left">
+                <img src="" alt="" />
+            </div>
+            <div className="login-right">
+                <Tabs defaultActiveKey="1" className="login-from">
+                    <TabPane tab="个人登录" key="1">
+                        <LoginFrom />
+                    </TabPane>
+                    <TabPane tab="公司登录" key="2">
+                        <LoginFrom />
+                    </TabPane>
+                </Tabs>
+                <div className="login-other">
+                    <ul className="clearfix">
+                        <li><img src={loginqq} alt="" /><p>QQ登录</p></li>
+                        <li><img src={loginweixin} alt="" /><p>微信登录</p></li>
+                        <li><img src={loginweibo} alt="" /><p>微博登录</p></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div className="footer">
+            <p>Copyright © 2016-2017 阿凡提 版权所有   技术支持:湖南智明科技有限公司</p>
+        </div>
+    </div>,
+    document.getElementById('root')
+)

+ 46 - 0
package.json

@@ -0,0 +1,46 @@
+{
+  "name": "afanti",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --progress --colors",
+    "pro": "webpack --config webpack.config.pro.js --progress --colors",
+    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.coding.net/seirios/AFT-WEB-INF.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.20.0",
+    "babel-loader": "^6.2.9",
+    "babel-plugin-antd": "^0.5.1",
+    "babel-plugin-import": "^1.1.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "css-loader": "^0.26.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.9.0",
+    "html-webpack-plugin": "^2.24.1",
+    "jquery": "^3.1.1",
+    "jsx-loader": "^0.13.2",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "react-hot-loader": "^1.3.1",
+    "react-router": "^3.0.0",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.14.0",
+    "webpack-dev-server": "^1.16.2"
+  },
+  "dependencies": {
+    "antd": "^2.5.2",
+    "jquery": "^3.1.1",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1"
+  }
+}

+ 10 - 0
template/template.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>

+ 100 - 0
webpack.config.js

@@ -0,0 +1,100 @@
+const webpack = require('webpack');
+const path = require('path');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+let theme = {
+    '@primary-color': '#1DA57A',
+    '@link-color': '#1DA57A',
+    '@border-radius-base': '8px'
+};
+
+module.exports = {
+    entry: {
+        'user/index': ['webpack-dev-server/client?http://0.0.0.0:8080', // WebpackDevServer host and port
+            'webpack/hot/only-dev-server',
+            './js/user/index.js'
+        ],
+        'user/login': ['webpack-dev-server/client?http://0.0.0.0:8080', // WebpackDevServer host and port
+                'webpack/hot/only-dev-server',
+                './js/user/login.js'
+        ],
+        'admin/index': ['webpack-dev-server/client?http://0.0.0.0:8080', // WebpackDevServer host and port
+                'webpack/hot/only-dev-server',
+                './js/admin/index.js'
+        ]
+            //vendors: ['jquery','antd']
+            //path.resolve(__dirname, './js/index.js'),
+    },
+    output: {
+        path: path.resolve(__dirname, './build'),
+        filename: '[name].js',
+    },
+    module: {
+        loaders: [{
+                test: /\.jsx?$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader',
+                query: {
+                    "presets": ["es2015", "react"],
+                    "plugins": [
+                        ["antd", {
+                            "style": true
+                        }]
+                    ]
+                }
+                //loaders: ['babel-loader?presets[]=es2015,presets[]=react'] 
+            },
+            //{
+                //test: /\.module\.less$/,
+                //loader: 'style!css!less?{"modifyVars":{"@primary-color": "#1DA57A"}}'
+            //}, 
+            {
+                test: /\.css$/,
+                loader: 'style!css'
+            }, {
+                test: /\.less$/,
+                loader: `style!css!less?{"modifyVars":${JSON.stringify(theme)}}`
+            }, {
+                test: /\.(png|jpg)$/,
+                loader: 'url?limit=8192&name=[path][name].[ext]'
+            }
+            //{test: /\.(png|jpg)$/, loader: 'file' }
+        ]
+    },
+    resolve: {
+        extensions: ['', '.js', '.jsx']
+    },
+    plugins: [
+        new ExtractTextPlugin('[name].bundle.css', {
+            allChunks: true
+        }),
+
+        //user
+        new HtmlWebpackPlugin({
+            title: 'user_index',
+            filename: 'user/index.html',
+            template: './template/template.html',
+            chunks:['user/index','vendors']
+        }),
+        new HtmlWebpackPlugin({
+            title: 'user_login',
+            filename: 'user/login.html',
+            template: './template/template.html',
+            chunks:['user/login','vendors']
+        }),
+
+        //admin
+        new HtmlWebpackPlugin({
+            title: 'admin_index',
+            filename: 'admin/index.html',
+            template: './template/template.html',
+            chunks:['admin/index','vendors']
+        })
+
+        //这个使用uglifyJs压缩你的js代码
+        //new webpack.optimize.UglifyJsPlugin({minimize: true}),
+        //把入口文件里面的数组打包成verdors.js
+        //new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
+    ]
+};

+ 92 - 0
webpack.config.pro.js

@@ -0,0 +1,92 @@
+const webpack = require('webpack');
+const path = require('path');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+let theme = {
+    '@primary-color': '#1DA57A',
+    '@link-color': '#1DA57A',
+    '@border-radius-base': '8px'
+};
+
+module.exports = {
+    entry: {
+        'user/index': './js/user/index.js',
+        'user/login': './js/user/login.js',
+        'admin/index':'./js/admin/index.js',
+        vendors: ['jquery']
+    },
+    output: {
+        path: path.resolve(__dirname, './build'),
+        filename: '[name].js',
+    },
+    module: {
+        loaders: [{
+            test: /\.jsx?$/,
+            exclude: /node_modules/,
+            loader: 'babel-loader',
+            query: {
+                "presets": ["es2015", "react"],
+                "plugins": [
+                    ["antd", {
+                        "style": true
+                    }]
+                ]
+            }
+            //loaders: ['babel-loader?presets[]=es2015,presets[]=react'] 
+        }, {
+            test: /\.css$/,
+            loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
+        }, {
+            test: /\.less$/,
+            loader: ExtractTextPlugin.extract('style', `css!less?{"modifyVars":${JSON.stringify(theme)}}`)
+        }, {
+            test: /\.(png|jpg)$/,
+            loader: 'url?limit=8192&name=[path][name].[ext]'
+        }]
+    },
+    resolve: {
+        extensions: ['', '.js', '.jsx']
+    },
+    plugins: [
+        //这个使用uglifyJs压缩你的js代码
+        new webpack.optimize.UglifyJsPlugin({
+            minimize: true,
+            compress: {
+                warnings: true
+            }
+        }),
+        new webpack.DefinePlugin({
+            "process.env": { 
+                NODE_ENV: JSON.stringify("production") 
+            }
+        }),
+        new ExtractTextPlugin('[name].css', {
+            allChunks: true
+        }),
+        //把入口文件里面的数组打包成verdors.js
+        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
+
+        //user
+        new HtmlWebpackPlugin({
+            title: 'user_index',
+            filename: 'user/index.html',
+            template: './template/template.html',
+            chunks:['user/index','vendors']
+        }),
+        new HtmlWebpackPlugin({
+            title: 'user_login',
+            filename: 'user/login.html',
+            template: './template/template.html',
+            chunks:['user/login','vendors']
+        }),
+
+        //admin
+        new HtmlWebpackPlugin({
+            title: 'admin_index',
+            filename: 'admin/index.html',
+            template: './template/template.html',
+            chunks:['admin/index','vendors']
+        })
+    ]
+};