forest-map-back

#开发需要组件

npm i webpack webpack-dev-server webpack-cli -D

• vue-loader :处理.vue文件
• vue-style-loader:处理.vue里面的样式
• vue-template-compiler:编译.vue中template里面的内容 npm i css-loader file-loader url-loader babel-loader html-webpack-plugin less less-loader vue-loader vue-style-loader vue-template-compiler -D
• es6 转 es5 npm i @babel/core @babel/cli @babel/preset-env -D
• ui框架资源按需引入 npm i babel-plugin-component -D
• 处理 svg npm i raw-loader -D

#服务器打包组件

npm i child_process -S

#运行时组件

npm i vue -S npm i vue-router -S npm i vuex -S npm i md5 -S

• localStorage,sessionStorage,cookieStorage npm i js-storage -S
• UI框架 npm i element-ui -S
• json代码格式化 编辑框 npm i vue-json-editor -S
• 异步请求 npm i axios -S

• 模板端修改步骤
• 1、在通用组件中添加编辑组件 增加数据同步更新 功能需要 state = { data: { list: [] } } componentWillReceiveProps(props) { const {data} = props; this.setState({data}); } //data为数据 mId为组件唯一名称与tplMcode文件中对应-通过构造函数获取组件名称 upData函数用于数据同步跟新展示 <EditTpl data={data} mId={this.constructor.name} upData={data=>this.setState({data})}></EditTpl>

请求数据 及 组件 请求参数 { mId:'BaseInfo',//组件名称 id:'llx001',//数据ID 顶级直接写死 与 默认数据顶级数据ID相同 }

• 部署
• 1、后台前端
• 2、数据服务 代理 /defdata
• 3、大屏模板 代理 /screen
• 1、数据服务 代理 /defdata(如果不通过模板域名访问可不配置)
• 2、后台数据 代理 /htdata(如果不通过模板域名访问可不配置)
• 4、后台数据 代理 /htdata
• 5、配置穿透域名 lldp lldpscreen

nginx 反向代理配置

    location /htdata/
    {
        proxy_pass http://127.0.0.1:8104/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;

        add_header X-Cache $upstream_cache_status;

        #Set Nginx Cache

            add_header Cache-Control no-cache;
    }


    #PROXY-START/screen

    location /screen/
    {
        proxy_pass http://127.0.0.1/;
        proxy_set_header Host gzqlyxbight.hongweisoft.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;

        add_header X-Cache $upstream_cache_status;

        #Set Nginx Cache

            add_header Cache-Control no-cache;
    }

    #PROXY-END/screen


    #PROXY-START/amapData

    location /amapData/
    {
        proxy_pass http://restapi.amap.com/;
        proxy_set_header Host restapi.amap.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;

        add_header X-Cache $upstream_cache_status;

        #Set Nginx Cache

            add_header Cache-Control no-cache;
    }

    #PROXY-END/amapData

    #PROXY-START/forest-admin

    location /forest-admin/
    {
        proxy_pass http://127.0.0.1:9099/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;

        add_header X-Cache $upstream_cache_status;

        #Set Nginx Cache

            add_header Cache-Control no-cache;
    }

#PROXY-END/forest-admin