init

.eslintignore

@@ -2,4 +2,5 @@ build/*.js
 config/*.js
 packages/**/build
 node_modules
-src/vendor
+src/vendor
+src/data/exam/index.js

.script/buildBecode.js

@@ -0,0 +1,49 @@
+'use strict'
+const PATH = require('path')
+const FS = require('fs')
+
+class C {
+  constructor () {
+    this.root = PATH.resolve(__dirname, '../')
+    this.src = `${this.root}/src/data/exam`
+    this.dist = `${this.root}/src/data/exam/index.js`
+    this.data = {}
+  }
+
+  run () {
+    let d = this.ls(this.src).map(item => ({
+      n: PATH.basename(item, '.js'),
+      path: item
+    }))
+    .filter(item => item.n !== 'index')
+    .sort((a, b) => a.n > b.n)
+
+    d.forEach(item => {
+      const beCode = this.read(item.path).trim()
+      beCode && (this.data[item.n] = {
+        beCode
+      })
+    })
+
+    this.write(this.dist, `export default ${JSON.stringify(this.data, null, 2)}`)
+  }
+
+  ls (path) {
+    path = PATH.resolve(path)
+    const d = FS.readdirSync(path)
+    return d.map(p => {
+      return PATH.resolve(path, p)
+    })
+  }
+
+  read (path) {
+    return FS.readFileSync(path, 'utf8')
+  }
+
+  write (path, string) {
+    FS.writeFileSync(path, string.trim() + '\n', 'utf8')
+  }
+
+}
+
+new C().run()

package.json

@@ -11,7 +11,7 @@
   "scripts": {
     "start": "npm run dev",
     "dev": "sudo PORT=80 node .config/dev-server.js",
-    "build": "npm run clean && npm run lint && node .config/build.js",
+    "build": "npm run clean && npm run lint && node .script/buildBecode.js && node .config/build.js",
     "unit": "karma start test/unit/karma.conf.js --single-run",
     "e2e": "node test/e2e/runner.js",
     "lint": "eslint --ext .js,.vue src .config .script test/*_spec.js",

src/App.vue

@@ -1,123 +1,5 @@
-<style lang="less">
-  // 这是网站的框架结构入口，不要在这里写过多业务有关视图代码
-  // 业务逻辑应该写在具体的 component 里
-  @import url('./style/main.less');
-</style>
-
 <template>
   <div id="app" class="i-main">
-    <div class="i-fe">
-      <div class="i-browser">
-        <div class="hd">
-          <div class="url">
-            <span>https://xss.test/</span><input type="text">
-          </div>
-        </div>
-        <div class="bd">
-          <iframe ref="sandbox"></iframe>
-        </div>
-      </div>
-
-      <div class="i-code">
-        <h3>input code</h3>
-        <code-mirror :code="initFeCode" :autofocus="true" @change="updateFeCode" :height="170"></code-mirror>
-
-        <h3>html</h3>
-        <code-mirror :code="raw" :read-only="true" :line-numbers="false" :height="100" mode="application/x-ejs"></code-mirror>
-      </div>
-    </div>
-
-    <div class="i-be">
-      <div class="i-code">
-        <h3>server code</h3>
-        <code-mirror :code="initBeCode" @change="updateBeCode"></code-mirror>
-      </div>
-    </div>
-
     <router-view></router-view>
   </div>
-</template>
-
-<script>
-  import codeMirror from './components/codemirror'
-  import sandboxText from './data/sandbox.raw'
-  import exam from './data/exam'
-
-  const escapeJS = (jsStr) => {
-    return String(jsStr).trim()
-            .replace(/'/g, '\\\'')
-            .replace(/"/g, '\\"')
-            .replace(/`/g, '\\`')
-            .replace(/\//g, '\\/')
-  }
-  const compile = (tpl, data = {}) => {
-    return tpl.replace(/{{{(.*?)}}}/g, ($0, $1) => data[$1] || '')
-  }
-
-  export default {
-    name: 'Home',
-    data () {
-      return {
-        initBeCode: '',
-        initFeCode: '',
-        beCode: '',
-        feCode: ''
-      }
-    },
-
-    mounted () {
-      this.initBeCode = this.examData.beCode
-      this.inject(this.feCode, this.beCode)
-    },
-
-    components: {
-      codeMirror
-    },
-
-    methods: {
-      inject (feCode = '', beCode = '') {
-        const blob = new Blob([
-          compile(sandboxText, {
-            FE_CODE: escapeJS(feCode),
-            BE_CODE: beCode.trim()
-          })
-        ], { type: 'text/html' })
-        const blobUrl = URL.createObjectURL(blob)
-        const sandbox = this.$refs.sandbox.contentWindow
-        sandbox.location.replace(blobUrl)
-      },
-
-      updateBeCode (newVal) {
-        this.beCode = newVal
-      },
-
-      updateFeCode (newVal) {
-        this.feCode = newVal
-      }
-    },
-
-    computed: {
-      raw() {
-        let raw = ''
-        try {
-          raw = new Function(`return (${this.beCode.trim()})(\`${escapeJS(this.feCode)}\`)`)()
-        } catch (e) {}
-        return raw
-      },
-
-      examData() {
-        return exam[0]
-      }
-    },
-
-    watch: {
-      beCode(beCode) {
-        this.inject(this.feCode, this.beCode)
-      },
-
-      feCode() {
-        this.inject(this.feCode, this.beCode)
-      }
-    }
-  }
-</script>
+</template>

src/Home.vue

@@ -0,0 +1,124 @@
+<style lang="less">
+  // 这是网站的框架结构入口，不要在这里写过多业务有关视图代码
+  // 业务逻辑应该写在具体的 component 里
+  @import url('./style/main.less');
+</style>
+
+<template>
+  <div id="app" class="i-main">
+    <div class="i-fe">
+      <div class="i-browser">
+        <div class="hd">
+          <div class="url">
+            <span>https://xss.test/</span><input type="text">
+          </div>
+        </div>
+        <div class="bd">
+          <iframe ref="sandbox"></iframe>
+        </div>
+      </div>
+
+      <div class="i-code">
+        <h3>input code</h3>
+        <code-mirror :code="initFeCode" :autofocus="true" @change="updateFeCode" :height="170"></code-mirror>
+
+        <h3>html</h3>
+        <code-mirror :code="raw" :read-only="true" :line-numbers="false" :height="100" mode="application/x-ejs"></code-mirror>
+      </div>
+    </div>
+
+    <div class="i-be">
+      <div class="i-code">
+        <h3>server code</h3>
+        <code-mirror :code="initBeCode" @change="updateBeCode"></code-mirror>
+      </div>
+    </div>
+
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+  import codeMirror from './components/codemirror'
+  import sandboxText from './data/sandbox.raw'
+  import exam from './data/exam/index.js'
+
+  const escapeJS = (jsStr) => {
+    return String(jsStr).trim()
+            .replace(/'/g, '\\\'')
+            .replace(/"/g, '\\"')
+            .replace(/`/g, '\\`')
+            .replace(/\//g, '\\/')
+  }
+  const compile = (tpl, data = {}) => {
+    return tpl.replace(/{{{(.*?)}}}/g, ($0, $1) => data[$1] || '')
+  }
+
+  export default {
+    name: 'Home',
+    data () {
+      return {
+        initBeCode: '',
+        initFeCode: '',
+        beCode: '',
+        feCode: '',
+        raw: ''
+      }
+    },
+
+    mounted () {
+      let data
+      data = exam[this.$route.params.id]
+      if (!data) {
+        this.$router.push('/404')
+        return
+      }
+      this.initBeCode = data.beCode
+    },
+
+    components: {
+      codeMirror
+    },
+
+    methods: {
+      inject (feCode = '', beCode = '') {
+        const blob = new Blob([
+          compile(sandboxText, {
+            BODY: this.serverRender(feCode, beCode)
+          })
+        ], { type: 'text/html' })
+        const blobUrl = URL.createObjectURL(blob)
+        const sandbox = this.$refs.sandbox.contentWindow
+        sandbox.location.replace(blobUrl)
+      },
+
+      serverRender (feCode, beCode) {
+        let tpl = '<!-- SERVER_ERROR -->'
+        try {
+          tpl = new Function(`return (${beCode.trim()})(\`${escapeJS(feCode)}\`)`)()
+        } catch (e) {}
+        this.raw = tpl
+        console.info(tpl)
+        return tpl
+      },
+
+      updateBeCode (newVal) {
+        this.beCode = newVal
+      },
+
+      updateFeCode (newVal) {
+        this.feCode = newVal
+      }
+    },
+
+    watch: {
+      beCode(beCode) {
+        this.inject(this.feCode, this.beCode)
+      },
+
+      feCode() {
+        this.inject(this.feCode, this.beCode)
+      }
+    }
+  }
+</script>

src/components/codemirror.vue

@@ -74,4 +74,4 @@
       }
     }
   }
-</script>
+  </script>

src/data/exam/0.js

@@ -0,0 +1,3 @@
+function render (input) {
+  return '<input type="name" value="' + input + '">'
+}

src/data/exam/1.js

@@ -0,0 +1,6 @@
+function render (input) {
+  const stripTagsRE = /<\/?[^>]+>/gi
+
+  input = input.replace(stripTagsRE, '')
+  return `<article>${input}</article>`
+}

src/data/exam/index.js

@@ -0,0 +1,8 @@
+export default {
+  "0": {
+    "beCode": "function render (input) {\n  return '<input type=\"name\" value=\"' + input + '\">'\n}"
+  },
+  "1": {
+    "beCode": "function render (input) {\n  const stripTagsRE = /<\\/?[^>]+>/gi\n\n  input = input.replace(stripTagsRE, '')\n  return `<article>${input}</article>`\n}"
+  }
+}