feat: login page && build script

fe/app/op-management/app.js

+const Koa = require('koa');
+const views = require('koa-views');
+const serve = require('koa-static');
+const bodyParser = require('koa-bodyparser');
+const path = require('path');
+const router = require('./server/router');
+const config = require('./server/config');
+
+const env = process.env.NODE_ENV;
+console.log(3333, env)
+const app = new Koa();
+
+app.use(serve(path.join(__dirname, './public')));
+app.use(bodyParser());
+// app.use(views(path.join(__dirname + '/../views'), { extension: 'ejs' }));
+app.use(router.routes(), router.allowedMethods());
+
+app.use(async(ctx)=>{
+  console.log(222, ctx)
+})
+
+app.listen(config.port, () => {
+  console.info(
+    'Listening on port %s in %s mode, Open up http://127.0.0.1:%s/ in your browser.',
+    config.port,
+    config.env,
+    config.port
+  );
+});

fe/app/op-management/bin/autobuild.sh

+npm run build
\ No newline at end of file

fe/app/op-management/bin/start.sh

+#!/bin/bash
+
+#开发测试环境第二个参数传入端口号，默认3030
+
+env=$1
+port=$2
+
+if [ ! -n "$port" ]
+then
+  port="3030"
+fi
+
+if [ $env != "production" ]
+then
+  name="op_management_$port"
+  isExist=`pm2 show $name`
+  if [ -n "$isExist" ]
+  then
+    echo "$name 已存在，需要先删除"
+    pm2 delete $name
+    echo "$name 删除成功"
+  fi
+
+  PORT=$port NODE_ENV=$env pm2 start app.js --name $name --watch --node-args="--inspect"
+  echo "NODE_ENV：$env"
+  echo "PORT：$port"
+  echo "PM2 App Name：$name"
+fi
+
+if [ $env == "development" ]
+then
+  pm2 logs $name
+fi
\ No newline at end of file

fe/app/op-management/package.json

@@ -2,9 +2,11 @@
   "name": "op-management",
   "version": "0.1.0",
   "private": true,
+  "main": "app.js",
   "scripts": {
-    "start": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "start": "cross-env NODE_ENV=development vue-cli-service serve",
+    "build": "cross-env NODE_ENV=production vue-cli-service build",
+    "koa": "cross-env NODE_ENV=development nodemon app.js",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint"
   },
@@ -12,7 +14,14 @@
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "element-plus": "^1.0.2-beta.44",
-    "vue": "^3.0.0",
+    "koa": "^2.13.1",
+    "koa-bodyparser": "^4.3.0",
+    "koa-router": "^10.0.0",
+    "koa-static": "^5.0.0",
+    "koa-views": "^7.0.1",
+    "nodemon": "^2.0.7",
+    "request": "^2.88.2",
+    "vue": "^3.0.11",
     "vue-router": "^4.0.0-beta.12",
     "vuex": "^4.0.0-beta.4"
   },
@@ -25,11 +34,13 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "^2.0.0-alpha.1",
     "babel-eslint": "^10.1.0",
+    "cross-env": "^7.0.3",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^7.0.0-alpha.0",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
+    "pm2": "^4.5.6",
     "prettier": "^1.19.1"
   },
   "browserslist": [

fe/app/op-management/server/config.js

+const env = process.env.NODE_ENV || 'development';
+const port = process.env.PORT || 8066;
+
+const LOGIN_URI = {
+  'development': "http://web-rest.int.yidian-inc.com",
+  'test': "http://web-rest.int.yidian-inc.com",
+  'production': "http://web-rest.int.yidian-inc.com"
+}
+
+
+
+module.exports = {
+  env: env,
+  port: port,
+  LOGIN_URI: LOGIN_URI[env],
+};

fe/app/op-management/server/controllers/system.js

+const LOGIN_URI = require('../config.js').LOGIN_URI
+const req = require('../utils/request').httpReq
+
+
+exports.login = async (ctx, next) => {
+  var url = `${LOGIN_URI}/api/v1/pandora/auth`;
+  var opts = {
+    url: url,
+    method: 'POST',
+    json: true,
+    timeout: 8000,
+    body : ctx.request.body
+  }
+  ctx.body = await req(ctx, opts)
+}
+

fe/app/op-management/server/router.js

+const Router = require('koa-router');
+const system = require('./controllers/system')
+// const index = require('./controllers/index');
+// const about = require('./controllers/about');
+// const api = require('./controllers/api/index');
+// const apiPosts = require('./controllers/api/posts');
+
+const router = Router();
+
+router.post('/login', system.login);
+
+
+module.exports = router;

fe/app/op-management/server/utils/request.js

+const request = require('request')
+
+exports.httpReq = (ctx, opts) => {
+  opts.timeout = opts.timeout || 1000
+  return new Promise((resolve, reject) => {
+    var time_start = +new Date()
+    request(opts, (err, res, body) => {
+      //console.info(`[Api] httpReq (${opts.url},${opts.headers && opts.headers.cookie}) spent: ${+new Date() - time_start}ms`)
+      if (!err) {
+        resolve(body)
+      } else {
+        reject(err)
+        console.error(opts.url, err)
+      }
+    })
+  })
+}
\ No newline at end of file

fe/app/op-management/src/App.vue

 <template>
   <div id="app">
-    <layout>
-      <router-view />
-    </layout>
+    <router-view />
+    <!-- <layout>
+    </layout> -->
   </div>
 </template>
 
 <script>
 // Layout 为布局组件，控制页面基础布局，通过 slot 实现
-import Layout from '@/layouts';
+// import Layout from '@/layouts';
 
 export default {
-  components: {
-    Layout,
-  },
+  // components: {
+  //   Layout,
+  // },
 };
 </script>
 

fe/app/op-management/src/components/PageHeader/index.vue

 <template>
-  <div>
+  <div id="pageheader">
     <div class="line"></div>
     <el-menu
       class="el-menu-demo"
       mode="horizontal"
-      router=true
+      :router="true"
       @select="handleSelect"
       background-color="#545c64"
       text-color="#fff"
@@ -14,11 +14,9 @@
       <el-menu-item
         v-for="item in menuItems"
         :index="item.path"
-        :key="item.path"
-        @select="() => handleSelect(item.path)"
+        :key="item.name"
       >
         {{ item.name }}
-        <!-- <router-link :to="item.path" class="menu-router">{{ item.name }}</router-link> -->
       </el-menu-item>
     </el-menu>
   </div>
@@ -33,22 +31,22 @@ export default {
   data() {
     return {
       menuItems,
-      activeMenu: "",
       basicPath: "/app/op-management",
     };
   },
-  methods: {
-    handleSelect(path) {
-      this.activeMenu = path;
+  computed: {
+    activeMenu: function () {
+      return this.$route.path;
     },
   },
+  methods: {},
 };
 </script>
 
 <style lang="less">
-  .menu-router {
-    display: inline-block;
-    line-height: 60px;
-    width: 100%;
-  }
+.menu-router {
+  display: inline-block;
+  line-height: 60px;
+  width: 100%;
+}
 </style>

fe/app/op-management/src/config/app.config.js

@@ -7,5 +7,5 @@ const API_URI = {
 }
 
 export default {
-  API_URI: API_URI[currEnv]
+  API_URI: API_URI[currEnv],
 }
\ No newline at end of file

fe/app/op-management/src/layouts/index.vue

@@ -9,17 +9,17 @@
     </div>
 
     <!-- 页面公共 footer -->
-    <page-footer class="page-footer"></page-footer>
+    <!-- <page-footer class="page-footer"></page-footer> -->
   </div>
 </template>
 <script>
 import PageHeader from '@/components/PageHeader';
-import PageFooter from '@/components/PageFooter';
+// import PageFooter from '@/components/PageFooter';
 
 export default {
   components: {
     PageHeader,
-    PageFooter,
+    // PageFooter,
   },
 };
 </script>

fe/app/op-management/src/pages/About/index.vue

 <template>
-  <div class="page-about">
-    <ul class="doc-list">
-      <li>
-        <a href="https://v3.vuejs.org/guide/introduction.html" target="_blank"
-          >Vue3 使用指南</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://next.router.vuejs.org/guide/migration/#new-features"
-          target="_blank"
-          >Vue Router for Vue3</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vuex/tree/4.0#breaking-changes"
-          target="_blank"
-        >
-          Vuex for Vue3</a
-        >
-      </li>
-    </ul>
-    <h3><router-link to="/">返回首页</router-link></h3>
-  </div>
+  <layout>
+    <div class="page-about">
+      <ul class="doc-list">
+        <li>
+          <a href="https://v3.vuejs.org/guide/introduction.html" target="_blank"
+            >Vue3 使用指南</a
+          >
+        </li>
+        <li>
+          <a
+            href="https://next.router.vuejs.org/guide/migration/#new-features"
+            target="_blank"
+            >Vue Router for Vue3</a
+          >
+        </li>
+        <li>
+          <a
+            href="https://github.com/vuejs/vuex/tree/4.0#breaking-changes"
+            target="_blank"
+          >
+            Vuex for Vue3</a
+          >
+        </li>
+      </ul>
+      <h3><router-link to="/">返回首页</router-link></h3>
+    </div>
+  </layout>
 </template>
 
+<script>
+
+  import Layout from '@/layouts';
+  export default {
+    components: {
+      Layout,
+    },
+  };
+</script>
+
 <style lang="less">
 .page-about {
   padding-top: 100px;

fe/app/op-management/src/pages/Home/index.vue

 <template>
-  <div class="page-home">
-    home
+  <div>
+    <layout>
+      homesssss
+    </layout>
   </div>
 </template>
 
 <script>
-export default {};
+  import Layout from '@/layouts';
+  export default {
+    components: {
+      Layout,
+    },
+  };
 </script>
 
 <style lang="less" src="./index.less">

fe/app/op-management/src/pages/Login/index.vue

+<template>
+  <div id="login-page">
+    <div class="title">OP 运营管理系统</div>
+    <div class="form">
+      <el-input
+        v-model="userInfo.email"
+        placeholder="请输入邮箱"
+        class="form-input"
+      ></el-input>
+      <el-input
+        v-model="userInfo.password"
+        type="password"
+        placeholder="请输入密码"
+        class="form-input"
+      ></el-input>
+    </div>
+    <div class="login">
+      <el-button @click="login">登录</el-button>
+    </div>
+    <div class="tip">
+      <p>1. 请使用一点邮箱登录，登录密码为当前的邮箱密码。</p>
+      <p>2. 用户默认无功能权限，请联系管理员开通。</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { userLogin } from "../../service/common";
+export default {
+  name: "Login",
+  data() {
+    return {
+      userInfo: {
+        email: "",
+        password: "",
+      },
+    };
+  },
+  created() {},
+  methods: {
+    async login() {
+      const { email, password } = this.userInfo;
+      console.log(34333, email, password);
+      if (!email) {
+        console.error("请输入用户邮箱");
+        return;
+      }
+      // if (urlParams.auth && !pwdSec.value) {
+      //   message.error("请输入二次验证码!")
+      //   return
+      // }
+      try {
+        const emailAddress =
+          email.indexOf("@") === -1 ? email + "@yidian-inc.com" : email;
+        const res = await userLogin(emailAddress, password);
+        console.log(111111, res);
+        if (!res || !res.token) return;
+
+        // const storage = window.localStorage
+        // storage["YD_PANDORA_auth"] = JSON.stringify(res.auth || {})
+        // storage["YD_PANDORA_JWT_TOKEN"] = (res.type + " " + res.token) || ''
+        // storage["YD_PANDORA_user"] = JSON.stringify(res.userInfo || {})
+        // setCookie('uid', res.userInfo && res.userInfo.id, 16)
+        // setCookie('YD_PANDORA_UID', res.userInfo && res.userInfo.id, 16)
+        // setCookie('userid', res.userInfo && res.userInfo.id, 16)
+        // setCookie('username', res.userInfo && res.userInfo.email, 16)
+        // setCookie('nickname', res.userInfo && res.userInfo.displayName, 16)
+        // setCookie('YD_PANDORA_JWT_TOKEN', (res.type + " " + res.token) || '', 16)
+
+        // if (urlParams.callback) {
+        //   // window.location.href = `${callback}${callback.indexOf('?') >= 0 ? '&' : '?'}token=${res.token}`
+        //   window.location.href = `${urlParams.callback}`
+        // } else {
+        //   window.location.href = `/?tid=${toolId}`
+        // }
+      } catch (e) {
+        console.log(e);
+        // message.error("登录不成功，请检查登录信息后重试!")
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scope>
+#login-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: url("../../assets/img/banner1.jpg") center top no-repeat;
+  background-size: cover;
+  color: #fff;
+
+  .title {
+    font-size: 40px;
+  }
+
+  .form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-top: 32px;
+    .form-input {
+      margin-bottom: 20px;
+      width: 300px;
+      height: 50px;
+      font-size: 16px;
+      .el-input__inner {
+        background-color: rgba(0, 0, 0, 0.12);
+        height: 50px;
+        border: none;
+        color: #fff;
+      }
+    }
+  }
+  .tip {
+    margin-top: 20px;
+    font-size: 14px;
+  }
+}
+</style>

fe/app/op-management/src/router/index.js

-import { createRouter, createWebHistory } from 'vue-router';
-import Home from '../pages/Home';
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "../pages/Home";
+import Login from "../pages/Login";
 
 const routes = [
   {
-    path: '/',
-    name: 'Home',
+    path: "/home",
+    name: "Home",
     component: Home,
   },
   {
-    path: '/about',
-    name: 'About',
-    component: () => import(/* webpackChunkName: "about" */ '../pages/About'),
+    path: "/login",
+    name: "Login",
+    component: Login,
+  },
+  {
+    path: "/about",
+    name: "About",
+    component: () => import(/* webpackChunkName: "about" */ "../pages/About"),
   },
 ];
 
 const router = createRouter({
-  history: createWebHistory('/app/op-management'),
+  history: createWebHistory("/app/op-management"),
   routes,
 });
 

fe/app/op-management/src/service/common.js

+import axios from '../utils/request';
+
+export async function userLogin(email, password) {
+  let res = await axios.post(`api/login`, {
+    email, password, authCode: ''
+  });
+  return res.data;
+}
\ No newline at end of file

fe/app/op-management/src/store/index.js

-import Vuex from 'vuex';
+import Vuex from "vuex";
 
 export default Vuex.createStore({
   state: {},

fe/app/op-management/src/utils/request.js

 /**
  * axios封装
  */
-import axios from 'axios';
-import { ElMessage } from 'element-plus';
-import { setToken, formatDate } from '/@/libs/utils';
-import { APP_URI } from '../config/app.config';
-import config from '/@/config';
-import router from '/@/router';
-import md5 from 'js-md5';
-
+import axios from "axios";
+import { ElMessage } from "element-plus";
+// import { APP_URI } from "../config/app.config";
 /**
  * show error tip
  * @param mgs
  */
-const showErrorMessage = (mgs) => {
+const showErrorMessage = mgs => {
   ElMessage({
     message: mgs,
-    type: 'error',
+    type: "error",
     showClose: true
   });
 };
@@ -25,17 +20,16 @@ const showErrorMessage = (mgs) => {
  * default axios config
  */
 export const defaultConfig = {
-  baseURL: APP_URI,
+  // baseURL: APP_URI,
   timeout: 10000
-  // baseURL: '/',
 };
 
 /**
  * default params
  * @returns {}
  */
-const getDefaultParams = () => {};
-const getDefaultHeaders = () => {};
+const getDefaultParams = () => { };
+const getDefaultHeaders = () => { };
 
 /**
  * axios instance
@@ -50,13 +44,13 @@ instance.interceptors.request.use(
   function (config) {
     // network error
     if (navigator.onLine !== undefined && navigator.onLine === false) {
-      return Promise.reject({ message: '网络未链接', code: -1 });
+      return Promise.reject({ message: "网络未链接", code: -1 });
     }
 
     /**
      * merge headers
      */
-    config.headers = {...getDefaultHeaders(), ...config.headers}
+    config.headers = { ...getDefaultHeaders(), ...config.headers }
 
     /**
      * merge params
@@ -79,50 +73,50 @@ instance.interceptors.response.use(
     const { data = {} } = response;
     const code = data.code ?? -1;
     if (code !== 0) {
-      const msg = data.reason || '未定义错误';
+      const msg = data.reason || "未定义错误";
       showErrorMessage(data.reason);
       return Promise.reject({ code, msg });
     }
     if (data.message) {
-      Message({
+      ElMessage({
         message: data.reason,
-        type: 'info',
+        type: "info",
         showClose: true
       });
     }
     return data;
   },
   function (error) {
-    if (!(error.code && error.code === -1)) error.message = '接口请求错误';
+    if (!(error.code && error.code === -1)) error.message = "接口请求错误";
     showErrorMessage(error.message);
     return Promise.reject(error);
   }
 );
 
-/**
- * Get
- * @param {*} url
- * @param {*} params
- */
-export const get = (url, params) => {
-  return instance.request({
-    url,
-    method: 'get',
-    params
-  });
-};
+// /**
+//  * Get
+//  * @param {*} url
+//  * @param {*} params
+//  */
+// export const get = ({url, params, headers}) => {
+//   return instance.request({
+//     url,
+//     method: "get",
+//     params
+//   });
+// };
 
-/**
- * Post
- * @param {*} url
- * @param {*} params
- */
-export const post = (url, data) => {
-  return instance.request({
-    url,
-    method: 'post',
-    data
-  });
-};
+// /**
+//  * Post
+//  * @param {*} url
+//  * @param {*} params
+//  */
+// export const post = ({url, data, headers}) => {
+//   return instance.request({
+//     url,
+//     method: "post",
+//     data
+//   });
+// };
 
 export default instance;

fe/app/op-management/vue.config.js

@@ -10,8 +10,9 @@ module.exports = {
   configureWebpack: {
     devServer: {
       proxy: {
-        '/api': {
-          target: 'http://dev.yidian-inc.com:4000',
+        '/app/op-management/api': {
+          target: 'http://localhost:8066',
+          pathRewrite: { '^/app/op-management/api': '' },
           changeOrigin: true,
         },
       },