最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【整理】ReactJS-AdminLTE中的代码调用逻辑

AdminLTE crifan 2753浏览 0评论

折腾:

【已解决】ReactJS-AdminLTE中如何调试和哪部分代码是首页的源码

期间,经过一番折腾,终于大体上看懂了ReactJS-AdminLTE,即adminlte-reactjs的development模式时的代码的基本逻辑了。

1.命令行中运行:npm run dev

匹配到

ReactJS-AdminLTE/package.json

中的:

  “scripts”: {
    “dev”: “node server.js”,
  },

2.node server.js调用:

ReactJS-AdminLTE/server.js

其中前半段代码:

var http = require(“http”);  //1
var url = require(“url”);  //2
var express = require(“express”);
var consolidate = require(‘consolidate’);
var handlebars = require(‘handlebars’);
var bodyParser = require(‘body-parser’);
var routes = require(‘./routes’);
var app = express();
app.set(‘views’, ‘views’); //Set the folder-name from where you serve the html page. ]
app.set(‘view engine’, ‘html’);
app.engine(‘html’, consolidate.handlebars);
app.use(express.static(‘./public’)); //Set the folder from where you serve all static files like images, css, javascripts, libraries etc
app.use(bodyParser.urlencoded({ extended: true }));
var portNumber = process.argv[2] || 8000;
http.createServer(app).listen(portNumber, function(){
    console.log(‘Server listening at port ‘+ portNumber);
    routes.initialize(app);
});

中,核心的是:

用http.createServer创建了一个http的服务器?

更关键的是:

var routes = require(‘./routes’);
routes.initialize(app);

3.其中调用了:

ReactJS-AdminLTE/routes.js

function initialize(app){
    //These are the API end points that you can write.
    //Setting up an event listener for GET request to ‘/’
    app.get(‘/’, function(req, res){
        console.log(‘request to / received’);
        res.render(‘dashboard.html’);        
    });
}

即,当我们在浏览器中输入地址:

http://localhost:8000/

就匹配到了 “/“ 这个路由,所以调用显示dashboard.html

4.网页模板

ReactJS-AdminLTE/views/dashboard.html

中,之前已改为用development模式的React Hot Loader的代码:

    <script src=”https://code.jquery.com/jquery-3.1.1.min.js” integrity=”sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=” crossorigin=”anonymous”></script>
        <script src=”http://localhost:3000/dist/js/app.js”></script>
        <script src=”http://localhost:3000/dist/js/vendors.js”></script>      
        <script src=”http://localhost:3000/dist/js/chartVendors.bundle.js”></script>
        <script src=”http://localhost:3000/dist/js/dashboardV1.bundle.js”></script>

其中调用了:

http://localhost:3000

其下的文件

-》实际上指的是:

webpackDevServer所监听的端口3000,会动态编译出对应的dist/js/app.js等源文件的

5.而此处的dist/js/app.js等源文件,又是来自于上面提到的:

ReactJS-AdminLTE/server.js

的后半段代码(已去掉注释)

let webpackListenPort = 3000;
var webpack = require(‘webpack’);
var WebpackDevServer = require(‘webpack-dev-server’);
var config = require(‘./webpack.config’);
new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    inline: true,
    historyApiFallback: true
}).listen(webpackListenPort, ‘localhost’, function (err, result) {
    if (err) {
        console.log(err);
    }
      console.log(`Listening at localhost:${webpackListenPort}`);
});

WebpackDevServer监听了3000端口,然后根据对应的

‘./webpack.config’

的配置去生成对应的文件的。

6.而此处的

ReactJS-AdminLTE/webpack.config.js

中,除了之前提到的相关hot reloader的配置:

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
。。。
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) // to not to load all locales
    ],

之外,还定义了对应的entry和output:

    entry: {
        dashboardV1: ‘./src/pages/dashboardV1/js/dashboard’,
        widgets: [‘./src/pages/widgets-page/js/widgets-page’],
        timeline: ‘./src/pages/timeline-page/js/timeline-page’,
        generalUIElements: ‘./src/pages/ui-elements-page/general/js/page-ui-elements’,
        vendors: [‘react’, ‘react-dom’, ‘jquery’, ‘velocity-animate’, ‘jqueryUi’, ‘bootstrap’, ‘moment’, ‘bootstrapDatepicker’],
        chartVendors: [‘jquery’, ‘raphael’, ‘morris’, ‘jvectormap’, ‘jvectormapWorld’],
    },
    output: {
        path: path.join(__dirname, “public”),
        filename: “dist/js/[name].bundle.js”,
        libraryTarget: “umd”,
        umdNamedDefine: true,
    },

指的就是说此处有多个entry入口和每个入口对应所依赖的源文件,比如:

dashboardV1,就依赖着源文件:

‘./src/pages/dashboardV1/js/dashboard’

即:

AdminLTE_Demo/ReactJS-AdminLTE/src/pages/dashboardV1/js/dashboard.js

其中的代码,主要就是ReactJS的代码,包括常见的:

React.createClass

componentDidMount

componentDidUpdate

render

且:

ReactDOM.render(<Dashboard />,  document.getElementById(‘dashboard-container’));

对应着:

ReactJS-AdminLTE/views/dashboard.html

中的:

    <body class=”skin-blue sidebar-mini wysihtml5-supported”>
        <div id=”dashboard-container”>
            <!– Dashboard component gets rendered here –>
        </div>

同理,其他页面,比如:

widgets,也依赖着:

‘./src/pages/widgets-page/js/widgets-page’

对应着的:

ReactJS-AdminLTE/src/pages/widgets-page/js/widgets-page.js

7.且

AdminLTE_Demo/ReactJS-AdminLTE/src/pages/dashboardV1/js/dashboard.js

中,所define中的,相当于import,导入了其他的子页面或组件:

比如:

‘./components/navigation-menu’

对应着

/ReactJS-AdminLTE/src/pages/dashboardV1/js/components/navigation-menu.js

比如其中修改的内容:

中文文字,去掉了搜索框等内容,在页面上就可以体现出来了:

转载请注明:在路上 » 【整理】ReactJS-AdminLTE中的代码调用逻辑

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.177 seconds, using 22.18MB memory