First

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

app.js

@@ -0,0 +1,44 @@
+const Koa = require('koa')
+const app = new Koa()
+const views = require('koa-views')
+const json = require('koa-json')
+const onerror = require('koa-onerror')
+const bodyparser = require('koa-bodyparser')
+const logger = require('koa-logger')
+
+const index = require('./routes/index')
+const users = require('./routes/users')
+
+// error handler
+onerror(app)
+
+// middlewares
+app.use(bodyparser({
+  enableTypes:['json', 'form', 'text']
+}))
+app.use(json())
+app.use(logger())
+app.use(require('koa-static')(__dirname + '/public'))
+
+app.use(views(__dirname + '/views', {
+  extension: 'ejs'
+}))
+
+// logger
+app.use(async (ctx, next) => {
+  const start = new Date()
+  await next()
+  const ms = new Date() - start
+  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
+})
+
+// routes
+app.use(index.routes(), index.allowedMethods())
+app.use(users.routes(), users.allowedMethods())
+
+// error-handling
+app.on('error', (err, ctx) => {
+  console.error('server error', err, ctx)
+});
+
+module.exports = app

bin/www

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var debug = require('debug')('demo:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+// app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app.callback());
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  debug('Listening on ' + bind);
+}

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "X71291",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "start": "node bin/www",
+    "dev": ".\\node_modules\\.bin\\nodemon bin\\www",
+    "prd": "pm2 start bin/www",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "debug": "^4.1.1",
+    "ejs": "~2.3.3",
+    "koa": "^2.7.0",
+    "koa-bodyparser": "^4.2.1",
+    "koa-convert": "^1.2.0",
+    "koa-json": "^2.0.2",
+    "koa-logger": "^3.2.0",
+    "koa-onerror": "^4.1.0",
+    "koa-router": "^7.4.0",
+    "koa-static": "^5.0.0",
+    "koa-views": "^6.2.0"
+  },
+  "devDependencies": {
+    "nodemon": "^1.19.1"
+  }
+}

public/javascripts/index.js

@@ -0,0 +1,151 @@
+window.onload = () => {
+    const body = document.body;
+    let username, password
+
+    // 开局提示
+    const welcomeElement = document.createElement('div');
+    body.append(welcomeElement);
+    const welcomeText = `Welcome To XY.\nYou Are About To Enter The Top Management Interface.`;
+    renderText(welcomeText, welcomeElement, () => {
+        // 询问是否继续
+        const askElement = document.createElement('div');
+        body.append(askElement);
+        const askText = 'Can Verify Your Identity Now? (Yes / No):'
+        renderText(askText, askElement, () => {
+            // 确认输入
+            const answerElement = document.createElement('div');
+            body.append(answerElement);
+            inputText(answerElement, text => {
+                const answer = text.toLowerCase()
+                if(answer == 'y' || answer == 'yes'){
+                    // 用户名提示
+                    const userText = 'USERNAME: '
+                    const usernameElement = document.createElement('div');
+                    const userHeaderElement = document.createElement('span');
+                    const userBodyElement = document.createElement('span');
+                    body.append(usernameElement)
+                    usernameElement.append(userHeaderElement)
+                    usernameElement.append(userBodyElement)
+                    renderText(userText, userHeaderElement, () => {
+                        inputText(userBodyElement, usernameText => {
+                            username = usernameText
+                            // 密码提示
+                            const passwdText = 'PASSWORD: '
+                            const passwdElement = document.createElement('div');
+                            const passwdHeaderElement = document.createElement('span');
+                            const passwdBodyElement = document.createElement('span');
+                            body.append(passwdElement)
+                            passwdElement.append(passwdHeaderElement)
+                            passwdElement.append(passwdBodyElement)
+                            renderText(passwdText, passwdHeaderElement, () => {
+                                inputText(passwdBodyElement, passwdText => {
+                                    password = passwdText
+                                    Entry()
+                                }, null, true)
+                            }, 0, 0)
+                        }, null)
+                    }, 0, 0)
+                }else{
+                    setTimeout(() => {
+                        window.close()
+                    }, 3000)
+                    console.log('Window On Close in 3000ms!')
+                    return;
+                }
+            }, true)
+        }, 0, 0)
+    })
+}
+
+function renderText(text, element, callback, startWait = 2000, endWait= 1000){
+    const textElement = document.createElement('span');
+    const cursorElement = document.createElement('span');
+    cursorElement.classList.add('welecomeTextCursor');
+    cursorElement.innerHTML = ' '
+
+    element.append(textElement, cursorElement)
+    const max = text.length
+    let nowLetter = 1
+    setTimeout(() => {
+        const setTextInterval = setInterval(() => {
+            const spanElement = document.createElement('span');
+            const nowText = text[nowLetter - 1]
+            if(nowText == ' '){
+                spanElement.innerHTML = ' '
+            }else{
+                spanElement.innerText = nowText
+            }
+
+            spanElement.classList.add('welecomeText');
+            textElement.append(spanElement)
+            if(nowLetter == max){
+                clearInterval(setTextInterval)
+                setTimeout(() => {
+                    cursorElement.remove()
+                    callback()
+                }, endWait)
+            }else{
+                nowLetter++
+            }
+        }, 30)
+    }, startWait)
+
+}
+
+function inputText(element, callback, letter, passwd){
+    const textElement = document.createElement('span');
+    const cursorElement = document.createElement('span');
+    cursorElement.classList.add('inputTextCursor');
+    cursorElement.innerHTML = ' ';
+
+    element.append(textElement, cursorElement)
+
+    const store = {
+        key: '',
+        string: ''
+    }
+
+    document.body.addEventListener('keyup', getKeyWord)
+    if(!letter){
+        letter = 'QWERTYUIOPASDFGHJKLZXCVBNM1234567890*@#&' + 'QWERTYUIOPASDFGHJKLZXCVBNM'.toLowerCase().split('')
+    }else{
+        letter = ['Y','y','E','e','S','s','N','n','O','o']
+    }
+    function getKeyWord(){
+        if(letter && letter.includes(event.key)){
+            store.key = event.key;
+            store.string = store.string + event.key
+        }
+        if(event.key == 'Backspace'){
+            store.string = store.string.slice(0, store.string.length - 1)
+        }
+        if(event.key == 'Enter'){
+            if(store.string.length==0){
+
+            }else{
+                cursorElement.remove()
+                callback(store.string)
+                document.body.removeEventListener('keyup', getKeyWord)
+            }
+        }
+        if(passwd){
+            textElement.innerText = new Array(store.string.length).fill('*').join('')
+        }else{
+            textElement.innerText = store.string
+        }
+    }
+}
+
+
+function Entry(){
+    if(true){
+        const entryMessageElement = document.createElement('div')
+        document.body.append(entryMessageElement)
+        renderText('About To Enter The System!', entryMessageElement, () => {
+            const loadingElement = document.createElement('div')
+            loadingElement.classList.add('loading')
+            document.body.append(loadingElement)
+        }, 0, 0)
+
+    }
+}

public/stylesheets/style.css

@@ -0,0 +1,102 @@
+html, body {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+    background: #000;
+    font-family: Consolas, NotoSans;
+    user-select: none;
+}
+body{
+    padding: 10px;
+    box-sizing: border-box;
+}
+span{
+    color: #46F372;
+}
+i{
+    color: #46F372;
+    font-weight: bold;
+}
+.welecomeText{
+    position: relative;
+    line-height: 1.3em;
+}
+.welecomeTextCursor{
+    position: relative;
+    background: #46F372;
+    color: #46F372;
+    margin-left: 2px;
+    animation: show-hide-welcome 500ms infinite;
+}
+.inputTextCursor{
+    position: relative;
+    margin-left: 2px;
+    border-bottom: 4px solid #46F372;
+    box-sizing: border-box;
+    animation: show-hide-answer 500ms infinite;
+}
+
+@keyframes show-hide-welcome {
+    0% {
+        color: #46F372;
+        background: #46F372;
+    }
+    50%{
+        color: #46F372;
+        background: #46F372;
+    }
+    100% {
+        color: #46F37200;
+        background: #46F37200;
+    }
+    70% {
+        color: #46F37200;
+        background: #46F37200;
+    }
+}
+@keyframes show-hide-answer {
+    0% {
+        border-bottom: 4px solid #46F372;
+    }
+    50%{
+        border-bottom: 4px solid #46F372;
+    }
+    100% {
+        border-bottom: 4px solid #46F37200;
+    }
+    70% {
+        border-bottom: 4px solid #46F37200;
+    }
+}
+
+.loading{
+    position: absolute;
+    bottom: 1px;
+    left: 0;
+    height: 5px;
+    width: 100px;
+    background: #46F372;
+    animation: loadingSS 1400ms forwards linear;
+    z-index: 1000;
+}
+
+@keyframes loadingSS {
+    from{
+        width: 0;
+    }
+    to{
+        width: 100%;
+    }
+}
+
+.inputHide{
+    position: absolute;
+    height: 0;
+    width: 0;
+    top:0;
+    left: 0;
+}

routes/index.js

@@ -0,0 +1,19 @@
+const router = require('koa-router')()
+
+router.get('/', async (ctx, next) => {
+  await ctx.render('index', {
+    title: 'X71291'
+  })
+})
+
+router.get('/string', async (ctx, next) => {
+  ctx.body = 'koa2 string'
+})
+
+router.get('/json', async (ctx, next) => {
+  ctx.body = {
+    title: 'koa2 json'
+  }
+})
+
+module.exports = router

routes/users.js

@@ -0,0 +1,13 @@
+const router = require('koa-router')()
+
+router.prefix('/users')
+
+router.get('/', function (ctx, next) {
+  ctx.body = 'this is a users response!'
+})
+
+router.get('/bar', function (ctx, next) {
+  ctx.body = 'this is a users/bar response'
+})
+
+module.exports = router

views/error.ejs

@@ -0,0 +1,3 @@
+<h1><%= message %></h1>
+<h2><%= error.status %></h2>
+<pre><%= error.stack %></pre>

views/index.ejs

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="/stylesheets/style.css">
+  <title><%= title %></title>
+  <script src="/javascripts/index.js"></script>
+</head>
+<body></body>
+</html>