# elementanalyse

**Repository Path**: lanxiujuan/elementanalyse

## Basic Information

- **Project Name**: elementanalyse
- **Description**: portal门户项目
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-12-22
- **Last Updated**: 2021-12-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 简介：

该项目是由实际项目中演变而来，前后端分离，独立部署。项目主要灵感来源于数据中台概念，由中台系统作为**数据集成**，**权限分发**，**路由拦截**等功能，同时也拥有聚合不同技术栈项目的能力，该方案实现主要是使用了阿里开源框架**qiankun**。
主要技术栈
前端:Vue2  +vue全家桶 + elementUI+qiankun
后端:node.js+koa+mysql
服务端:nginx

## 关于single-spa
首先建立基座(vue)应用项目
main.js

```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false
import {registerApplication,start} from "single-spa"

async function loadScript(url){
  return new Promise((resolve,reject)=>{
    let script = document.createElement("script")
    script.src = url
    script.onload = resolve
    script.onerror = reject
    document.head.appendChild(script)
  })
}
registerApplication("myVueApp",async ()=>{
  await loadScript('http://192.168.12.10:10000/js/chunk-vendors.js') // 子项目运行环境
  await loadScript('http://192.168.12.10:10000/js/app.js') // 子项目运行环境
  return window.singleVue // bootstrap mount unmount
},
  location =>location.pathname.startsWith("/vue")
)
start()
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

```

子应用:
vue.config.js

```javascript
module.exports = {
    configureWebpack:{
        output:{
            library:"singleVue",
            libraryTarget:"umd"
        },
        devServer:{
            port:10000
        }
    }
}

```
router.js

```javascript
const router = new VueRouter({
  mode: 'history',
  base: '/vue',
  routes
})
```
main.js

```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import singleSpaVue from "single-spa-vue"
Vue.config.productionTip = false

const appOptions = {
  el:"#vue",
  router,
  render: h => h(App)
}
const lifeCycle = singleSpaVue({
  Vue,
  appOptions
})

if(window.singleSpaNavigate){
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = `//localhost:10000/`;
} else {
  delete appOptions.el
  new Vue(appOptions).$mount("#app")
}
export const bootstrap = lifeCycle.bootstrap
export const mount = lifeCycle.mount
export const unmount = lifeCycle.unmount

```


## 关于后端：

由于是前后端分离项目，那么就我们就先要部署后后端服务并且运行起来。MD文档中会告知如何跑起项目。
后端地址：[node地址](https://gitee.com/huangkanghui/node-server)

## 关于跨域问题：

由于该应用是能够聚合不同子应用的，所以强烈建议使用nginx跨域。

```javascript
#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

	#main
    server {
        listen       8000;
        server_name  127.0.0.1;

		location / {
			add_header Cache-Control no-cache;
			add_header Access-Control-Allow-Origin *;
			add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
			add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
			if ($request_method = 'OPTIONS') {
				return 204;
			}
			root   html/dist/main;
			index  index.html index.htm;
			try_files $uri $uri/ /index.html;
		}
	}
	
	#sub01模块
    server {
        listen       8010;
        server_name  localhost;
		location / {
			add_header Cache-Control no-cache;
			add_header Access-Control-Allow-Origin *;
			add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
			add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
			if ($request_method = 'OPTIONS') {
				return 204;
			}
			root   html/dist/sub01;
			index  index.html index.htm;
			try_files $uri $uri/ /index.html;
		}   
    }

	#sub02模块
    server {
        listen       8020;
        server_name  localhost;
		location / {
			add_header Cache-Control no-cache;
			add_header Access-Control-Allow-Origin *;
			add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
			add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
			if ($request_method = 'OPTIONS') {
				return 204;
			}
			root   html/dist/sub02;
			index  index.html index.htm;
			try_files $uri $uri/ /index.html;
		}   
    }

    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

```

## 项目截图

![在这里插入图片描述](https://img-blog.csdnimg.cn/731eabe951c549648cf3f41c4ee8e246.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA562J5LiN5Zue5aSp5Lqu562J5pe25YWJ,size_20,color_FFFFFF,t_70,g_se,x_16)
![在这里插入图片描述](https://img-blog.csdnimg.cn/8f8fa6b446c343f69a291aa7a1d3b565.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA562J5LiN5Zue5aSp5Lqu562J5pe25YWJ,size_20,color_FFFFFF,t_70,g_se,x_16)
![在这里插入图片描述](https://img-blog.csdnimg.cn/415f198957d94829ba2bc860f977240d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA562J5LiN5Zue5aSp5Lqu562J5pe25YWJ,size_20,color_FFFFFF,t_70,g_se,x_16)

## 前端目录说明

```bash
|--- src                            项目源码目录
|    |--- api                       服务端api存放目录
|    |--- assets                    静态资源文件
|         |--- icon                 图标
|    |--- components                公共组件目录
|    |--- router                    路由
|    |--- store                     状态管理
|    |--- style                     样式
|    |--- utils                     工具类，公共js
|    |--- views                     单页面目录
|    |--- App.vue                   根组件
```