1549469775 5 years ago
parent
commit
a2880ffd5b
  1. 11
      api/auth.js
  2. 11
      assets/style/_global.scss
  3. 0
      assets/style/pc.scss
  4. 5
      components/base/_base-loading.vue
  5. 20
      components/panel/index.vue
  6. 48
      components/panel/style.scss
  7. 10
      layouts/default.vue
  8. 6
      middleware/auth.js
  9. 32
      nuxt.config.js
  10. 256
      package-lock.json
  11. 15
      package.json
  12. 68
      pages/index.vue
  13. 85
      pages/login.vue
  14. 25
      plugins/axios.js
  15. 19
      plugins/global-components.js
  16. 2
      server/index.js
  17. 34
      store/index.js
  18. 14
      store/todos.js

11
api/auth.js

@ -0,0 +1,11 @@
export default function (req, res, next) {
// req 是 Node.js http request 对象
// res.json({code:200})
// res 是 Node.js http response 对象
//next是一个调用下一个中间件的函数
// 如果您的中间件不是最终执行,请不要忘记在最后调用next!
next()
}

11
assets/style/_global.scss

@ -1,13 +1,4 @@
html {
width: 100%;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
}
@import "./common.scss";

0
assets/style/pc.scss

5
components/base/_base-loading.vue

@ -0,0 +1,5 @@
<template>
<div>
dsads
</div>
</template>

20
components/panel/index.vue

@ -1,20 +0,0 @@
<template>
<div class="panel" :style="{'backgroundColor':color?color:'#ffffff'}">
<div class="panel__wrapper layer m-auto">
<h2>{{vtitle}}</h2>
<div class="panel__desc">
<div class="panel__desc__word">{{vdesc}}</div>
</div>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: ['vtitle', 'vdesc', 'color'],
}
</script>
<style lang="scss" scoped>
@import "./style.scss";
</style>

48
components/panel/style.scss

@ -1,48 +0,0 @@
.panel {
padding-top: em(59);
padding-bottom: em(59);
text-align: center;
color: #131720;
.panel__wrapper {
overflow: visible;
}
h2 {
font-size: em(36);
margin-bottom: em(15);
}
.panel__desc {
display: flex;
justify-content: center;
.panel__desc__word {
font-size: em(18);
position: relative;
color: #4B4B4B;
&::before {
content: "";
position: absolute;
left: em(-100, 18);
top: 50%;
transform: translateY(-50%);
width: em(83);
height: 2px;
background-color: rgba(181, 181, 181, 1);
}
&::after {
content: "";
position: absolute;
right: em(-100, 18);
top: 50%;
transform: translateY(-50%);
width: em(83, 18);
height: 1px;
background-color: rgba(181, 181, 181, 1);
}
}
}
}

10
layouts/default.vue

@ -1,11 +1,19 @@
<template>
<div class="hq">
<div class="default layout">
<nuxt />
</div>
</template>
<script>
export default {
components: {
}
}
</script>
<style lang="scss" scoped>
.default.layout{
background: #F5F5D5;
width: 100vw;
height: 100vh;
}
</style>

6
middleware/auth.js

@ -0,0 +1,6 @@
export default function ({ store, redirect }) {
// console.log(store.state.user)
// if (JSON.stringify(store.getters.user)=='{}') {
// return redirect('/login')
// }
}

32
nuxt.config.js

@ -15,6 +15,9 @@ module.exports = {
{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
]
},
env: {
baseUrl: process.env.BASE_URL || 'http://localhost:3000'
},
/*
** Customize the progress-bar color
*/
@ -29,19 +32,34 @@ module.exports = {
** Plugins to load before mounting the App
*/
plugins: [
'~/plugins/axios',
'~/plugins/global-components'
],
/*
** Nuxt.js dev-modules
*/
devModules: [
],
devModules: [],
/*
** Nuxt.js modules
*/
modules: [
'@nuxtjs/style-resources',
// 使用bootstrap-vue
'bootstrap-vue/nuxt'
'bootstrap-vue/nuxt',
'@nuxtjs/axios'
],
//https://axios.nuxtjs.org/setup
axios: {
// proxyHeaders: false
retry: {retries: 3}
},
styleResources: {
// your settings here
sass: [],
scss: ['./assets/style/_global.scss'],
less: [],
stylus: []
},
/*
** Build configuration
*/
@ -49,14 +67,14 @@ module.exports = {
/*
** You can extend webpack config here
*/
styleResources:{
scss: 'assets/style/_global.scss'
},
extend(config, ctx) {
config.resolve.alias['@pages'] = path.resolve(__dirname, 'pages');
config.resolve.alias['@assets'] = path.resolve(__dirname, 'assets');
config.resolve.alias['@components'] = path.resolve(__dirname, 'components');
config.resolve.alias['@images'] = path.resolve(__dirname, 'assets', 'images');
}
}
},
serverMiddleware: [
'~/api/auth'
]
}

256
package-lock.json

@ -1131,6 +1131,36 @@
"webpackbar": "^3.2.0"
}
},
"@nuxtjs/axios": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.6.0.tgz",
"integrity": "sha512-Rl4nnudm+sSkMtgfSEAeA5bq6aFpbBoYVXLXWaDxfydslukRd2SdEDdGv0gHE7F/jtIw+JfptWDHCHnzuoO/Ng==",
"requires": {
"@nuxtjs/proxy": "^1.3.3",
"axios": "^0.19.0",
"axios-retry": "^3.1.2",
"consola": "^2.10.1"
}
},
"@nuxtjs/proxy": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@nuxtjs/proxy/-/proxy-1.3.3.tgz",
"integrity": "sha512-ykpCUdOqPOH79mQG30QfWZmbRD8yjTD+TTSBbwow5GkROUQEtXw+HE+q6i+YFpuChvgJNbwVrXdZ3YmfXbZtTw==",
"requires": {
"consola": "^2.5.6",
"http-proxy-middleware": "^0.19.1"
}
},
"@nuxtjs/style-resources": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@nuxtjs/style-resources/-/style-resources-1.0.0.tgz",
"integrity": "sha512-tDRcC/pm8B0Kpxtzb/1/HOBkv3/kPD+2FiCiUBGMB7YriRud9OUPw1pnYCsAH9ftwpMJS4k4XOyUY8FCTk6OxA==",
"requires": {
"consola": "^2.4.0",
"glob-all": "^3.1.0",
"sass-resources-loader": "^2.0.0"
}
},
"@nuxtjs/youch": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/@nuxtjs/youch/-/youch-4.2.3.tgz",
@ -1763,6 +1793,38 @@
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
"integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
},
"axios": {
"version": "0.19.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
"integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
"requires": {
"follow-redirects": "1.5.10",
"is-buffer": "^2.0.2"
},
"dependencies": {
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
}
},
"is-buffer": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
"integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
}
}
},
"axios-retry": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-3.1.2.tgz",
"integrity": "sha512-+X0mtJ3S0mmia1kTVi1eA3DAC+oWnT2A29g3CpkzcBPMT6vJm+hn/WiV9wPt/KXLHVmg5zev9mWqkPx7bHMovg==",
"requires": {
"is-retry-allowed": "^1.1.0"
}
},
"babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@ -2868,6 +2930,25 @@
"parse-json": "^4.0.0"
}
},
"crc": {
"version": "3.8.0",
"resolved": "https://registry.npmjs.org/crc/-/crc-3.8.0.tgz",
"integrity": "sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==",
"requires": {
"buffer": "^5.1.0"
},
"dependencies": {
"buffer": {
"version": "5.4.3",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.4.3.tgz",
"integrity": "sha512-zvj65TkFeIt3i6aj5bIvJDzjjQQGs4o/sNoezg1F1kYap9Nu2jcUdpwzRSJTHMMzG0H7bZkn4rNQpImhuxWX2A==",
"requires": {
"base64-js": "^1.0.2",
"ieee754": "^1.1.4"
}
}
}
},
"create-ecdh": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz",
@ -3627,6 +3708,11 @@
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
},
"eventemitter3": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
"integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg=="
},
"events": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",
@ -3995,6 +4081,14 @@
}
}
},
"follow-redirects": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.9.0.tgz",
"integrity": "sha512-CRcPzsSIbXyVDl0QI01muNDu69S8trU4jArW9LpOt2WtC6LyUJetcIrmfHsRBx7/Jb6GHJUiuqyYxPooFfNt6A==",
"requires": {
"debug": "^3.0.0"
}
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@ -4238,6 +4332,30 @@
"path-is-absolute": "^1.0.0"
}
},
"glob-all": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/glob-all/-/glob-all-3.1.0.tgz",
"integrity": "sha1-iRPd+17hrHgSZWJBsD1SF8ZLAqs=",
"requires": {
"glob": "^7.0.5",
"yargs": "~1.2.6"
},
"dependencies": {
"minimist": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.1.0.tgz",
"integrity": "sha1-md9lelJXTCHJBXSX33QnkLK0wN4="
},
"yargs": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-1.2.6.tgz",
"integrity": "sha1-nHtKgv1dWVsr8Xq23MQxNUMv40s=",
"requires": {
"minimist": "^0.1.0"
}
}
}
},
"glob-parent": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.0.0.tgz",
@ -4643,6 +4761,27 @@
"toidentifier": "1.0.0"
}
},
"http-proxy": {
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
"integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==",
"requires": {
"eventemitter3": "^4.0.0",
"follow-redirects": "^1.0.0",
"requires-port": "^1.0.0"
}
},
"http-proxy-middleware": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
"integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
"requires": {
"http-proxy": "^1.17.0",
"is-glob": "^4.0.0",
"lodash": "^4.17.11",
"micromatch": "^3.1.10"
}
},
"http-signature": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@ -4700,6 +4839,11 @@
"integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=",
"dev": true
},
"immediate": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
"integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
},
"import-cwd": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@ -4857,6 +5001,11 @@
"ci-info": "^1.5.0"
}
},
"is-class-hotfix": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/is-class-hotfix/-/is-class-hotfix-0.0.6.tgz",
"integrity": "sha512-0n+pzCC6ICtVr/WXnN2f03TK/3BfXY7me4cjCAqT8TYXEl0+JBRoqBo94JJHXcyDSLUeWbNX8Fvy5g5RJdAstQ=="
},
"is-color-stop": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
@ -5026,8 +5175,7 @@
"is-retry-allowed": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz",
"integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=",
"dev": true
"integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ="
},
"is-stream": {
"version": "1.1.0",
@ -5050,6 +5198,16 @@
"has-symbols": "^1.0.0"
}
},
"is-type-of": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/is-type-of/-/is-type-of-1.2.1.tgz",
"integrity": "sha512-uK0kyX9LZYhSDS7H2sVJQJop1UnWPWmo5RvR3q2kFH6AUHYs7sOrVg0b4nyBHw29kRRNFofYN/JbHZDlHiItTA==",
"requires": {
"core-util-is": "^1.0.2",
"is-class-hotfix": "~0.0.6",
"isstream": "~0.1.2"
}
},
"is-typedarray": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@ -5251,6 +5409,53 @@
"resolved": "https://registry.npmjs.org/koa-is-json/-/koa-is-json-1.0.0.tgz",
"integrity": "sha1-JzwH7c3Ljfaiwat9We52SRRR7BQ="
},
"koa-router": {
"version": "7.4.0",
"resolved": "https://registry.npmjs.org/koa-router/-/koa-router-7.4.0.tgz",
"integrity": "sha512-IWhaDXeAnfDBEpWS6hkGdZ1ablgr6Q6pGdXCyK38RbzuH4LkUOpPqPw+3f8l8aTDrQmBQ7xJc0bs2yV4dzcO+g==",
"requires": {
"debug": "^3.1.0",
"http-errors": "^1.3.1",
"koa-compose": "^3.0.0",
"methods": "^1.0.1",
"path-to-regexp": "^1.1.1",
"urijs": "^1.19.0"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
},
"koa-compose": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/koa-compose/-/koa-compose-3.2.1.tgz",
"integrity": "sha1-qFzLQLfZhtjlo0Wzoazo6rz1Tec=",
"requires": {
"any-promise": "^1.1.0"
}
},
"path-to-regexp": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
"integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
"requires": {
"isarray": "0.0.1"
}
}
}
},
"koa-session": {
"version": "5.12.3",
"resolved": "https://registry.npmjs.org/koa-session/-/koa-session-5.12.3.tgz",
"integrity": "sha512-r1vRerk6z+J54TtgXPG+oYGj1vwrd889bz55hS7VykWvbtmPNb0q/N7arOHGV8dnstlRyZPP3xCJL20wIf9LwA==",
"requires": {
"crc": "^3.4.4",
"debug": "^3.1.0",
"is-type-of": "^1.0.0",
"uuid": "^3.3.2"
}
},
"last-call-webpack-plugin": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz",
@ -5294,6 +5499,14 @@
"invert-kv": "^1.0.0"
}
},
"lie": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
"integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
"requires": {
"immediate": "~3.0.5"
}
},
"load-json-file": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@ -5346,6 +5559,14 @@
}
}
},
"localforage": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/localforage/-/localforage-1.7.3.tgz",
"integrity": "sha512-1TulyYfc4udS7ECSBT2vwJksWbkwwTX8BzeUIiq8Y07Riy7bDAAnxDaPU/tWyOVmQAcWJIEIFP9lPfBGqVoPgQ==",
"requires": {
"lie": "3.1.1"
}
},
"locate-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@ -8618,6 +8839,11 @@
"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
"integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
},
"requires-port": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
},
"reset-css": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/reset-css/-/reset-css-4.0.1.tgz",
@ -8976,6 +9202,11 @@
"jsonify": "~0.0.0"
}
},
"shvl": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/shvl/-/shvl-1.3.1.tgz",
"integrity": "sha512-+rRPP46hloYUAEImJcqprUgXu+05Ikqr4h4V+w5i2zJy37nAqtkQKufs3+3S2fDq6JNRrHMIQhB/Vaex+jgAAw=="
},
"signal-exit": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@ -10140,6 +10371,11 @@
"punycode": "^2.1.0"
}
},
"urijs": {
"version": "1.19.1",
"resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.1.tgz",
"integrity": "sha512-xVrGVi94ueCJNrBSTjWqjvtgvl3cyOTThp2zaMaFNGp3F542TR6sM3f2o8RqZl+AwteClSVmoCyt0ka4RjQOQg=="
},
"urix": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
@ -10398,6 +10634,22 @@
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
"integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
},
"vuex-persistedstate": {
"version": "2.5.4",
"resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-2.5.4.tgz",
"integrity": "sha512-XYJhKIwO+ZVlTaXyxKxnplrJ88Fnvk5aDw753bxzRw5/yMKLQ6lq9CDCBex2fwZaQcLibhtgJOxGCHjy9GLSlQ==",
"requires": {
"deepmerge": "^2.1.0",
"shvl": "^1.3.0"
},
"dependencies": {
"deepmerge": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
}
}
},
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

15
package.json

@ -11,20 +11,33 @@
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "^5.6.0",
"@nuxtjs/style-resources": "^1.0.0",
"autoprefixer": "^9.6.1",
"bootstrap-vue": "^2.0.0-rc.27",
"cross-env": "^5.2.0",
"jquery": "^3.4.1",
"koa": "^2.6.2",
"koa-router": "^7.4.0",
"koa-session": "^5.12.3",
"localforage": "^1.7.3",
"lodash": "^4.17.15",
"node-sass": "^4.12.0",
"nuxt": "^2.0.0",
"postcss": "^7.0.17",
"postcss-loader": "^3.0.0",
"reset-css": "^4.0.1",
"sass-loader": "^7.2.0",
"sass-resources-loader": "^2.0.1"
"sass-resources-loader": "^2.0.1",
"vuex-persistedstate": "^2.5.4"
},
"devDependencies": {
"nodemon": "^1.18.9"
},
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "5000"
}
}
}

68
pages/index.vue

@ -1,63 +1,47 @@
<template>
<b-container fluid>
<b-container>
{{ip}}
<b-row>
<b-col sm='4'>1 of 2</b-col>
<b-col sm='2'>2 of 2</b-col>
<b-col md="4" sm="2">1 of 3</b-col>
<b-col md="4" sm="2">2 of 3</b-col>
<b-col md="4" sm="8">3 of 3</b-col>
</b-row>
<b-alert show>Default Alert</b-alert>
<b-alert variant="success" show>Success Alert</b-alert>
<b-alert v-model="showDismissibleAlert" variant="danger" dismissible>
Dismissible Alert!
</b-alert>
<img src="~@images/bluedialog.png" alt="">
<b-alert
:show="dismissCountDown"
dismissible
variant="warning"
@dismissed="dismissCountDown=0"
@dismiss-count-down="countDownChanged"
>
<p>This alert will dismiss after {{ dismissCountDown }} seconds...</p>
<b-progress
variant="warning"
:max="dismissSecs"
:value="dismissCountDown"
height="4px"
></b-progress>
</b-alert>
<b-button @click="showAlert" variant="info" class="m-1">
Show alert with count-down timer
</b-button>
<b-button @click="showDismissibleAlert=true" variant="info" class="m-1">
Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
</b-button>
</b-container>
</template>
<script>
export default {
middleware: 'auth',
//data
async asyncData({ $axios }) {
const ip = await $axios.$get('http://icanhazip.com');
return { ip }
},
//使this
//fetch store
// asyncData
async fetch ({ store, params,$axios }) {
let ip = await $axios.$get('http://icanhazip.com')
store.commit('todos/SET_IP', ip)
},
mounted(){
console.log(this.$store)
},
data() {
return {
dismissSecs: 10,
dismissCountDown: 0,
showDismissibleAlert: false
ip: '0.0.0.0'
}
},
methods: {
countDownChanged(dismissCountDown) {
this.dismissCountDown = dismissCountDown
},
showAlert() {
this.dismissCountDown = this.dismissSecs
async fetchSomething() {
const ip = await this.$axios.$get('http://icanhazip.com');
this.ip = ip
}
}
}
</script>
<style lang='scss'>
@import "./style.scss";
@import "style";
</style>

85
pages/login.vue

@ -0,0 +1,85 @@
<template>
<b-container fluid>
<div class="panel">
<form class="vform">
<b-img src="https://picsum.photos/125/125/?image=58" center rounded fluid alt="Center image"
style="margin-bottom: 20px;"></b-img>
<div class="vinput">
<div class="vtitle">
<span class="title">账号</span>
<span class="subtitle">(账号|邮箱|手机)</span>
</div>
<b-form-input class="input" type="text" v-model="account" placeholder="请输入您的账号"></b-form-input>
<div class="vtitle">
<span class="title">密码</span>
<span class="subtitle">(文字+数字)</span>
</div>
<b-form-input class="input" type="password" v-model="password" placeholder="请输入您的密码"></b-form-input>
</div>
<b-button block variant="primary" @click="login">
<div v-if="isLoging" class="loading">
<BaseLoading></BaseLoading>
</div>
<div v-if="!isLoging">登录</div>
</b-button>
</form>
</div>
</b-container>
</template>
<script>
export default {
data() {
return {
isLoging:false,
account: '',
password:'',
error:''
}
},
methods:{
login(){
this.$router.replace('/')
console.log(this)
this.isLoging = !this.isLoging
}
}
}
</script>
<style lang='scss' scoped>
.panel {
background: #fff;
width: 500px;
/*height: 500px;*/
border-radius: 2%;
box-sizing: content-box;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: left;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
@media only screen and (max-width: 767px) {
width: 90%;
}
.vform {
margin: 50px auto;
width: 80%;
.input {
margin: 20px 0;
}
}
.vtitle {
.title {
font-size: 20px;
font-weight: bold;
}
.subtitle {
font-size: 12px;
color: rgba(0, 0, 0, 0.44);
}
}
}
</style>

25
plugins/axios.js

@ -0,0 +1,25 @@
// onRequest(config)
// onResponse(response)
// onError(err)
// onRequestError(err)
// onResponseError(err)
export default function ({ $axios,store, redirect }) {
// store.commit('user/setToken','dasdsad')
let token = store.state.user.token;
$axios.setToken(token, 'Bearer')
$axios.setHeader('Content-Type', 'application/json')
$axios.onRequest(config => {
console.log('Making request to ' + config.url)
})
$axios.onError(error => {
const code = parseInt(error.response && error.response.status)
if (code === 400) {
redirect('/400')
}
})
}

19
plugins/global-components.js

@ -0,0 +1,19 @@
// 引入vue 及 lodash
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst' // 首字线大写
import camelCase from 'lodash/camelCase' // 驼峰命名大法
// 把 /component/base/ 下的所有 vue 组件 require 进来
// path: 要引入的组件所在相对路径(相对于当前文件)
// deep: 是否检索子文件夹
// matchFile: 匹配的文件名称
// require.context(path, deep, matchFile)
const requireComponent = require.context('../components/base/', false, /_base-[\w-]+\.vue$/)
// 遍历 require 进来的组件并注册
requireComponent.keys().forEach((fileName) => {
const componentConfig = requireComponent(fileName)
const componentName = upperFirst( camelCase( fileName.replace(/^\.\/_/, '').replace(/\.\w+$/, '') ) )
// 全局注册组件
Vue.component(componentName, componentConfig.default || componentConfig)
})

2
server/index.js

@ -25,7 +25,7 @@ async function start () {
await nuxt.ready()
}
app.use((ctx) => {
app.use(async (ctx,next) => {
ctx.status = 200
ctx.respond = false // Bypass Koa's built-in response handling
ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash

34
store/index.js

@ -1,9 +1,37 @@
import createPersistedState from 'vuex-persistedstate'
// import localforage from 'localforage'
// export const plugins = [ createPersistedState({
// key:'fuckme',
// storage:localforage,
// paths: ['user.token'] //,'room.room'
// }) ]
export const state = () => ({
counter: 0
user: {}
})
export const getters = {
user(state){
return state.user;
}
}
export const mutations = {
increment(state) {
state.counter++
SET_USER (state,user) {
state.user=user;
}
}
export const actions = {
nuxtServerInit({ commit }, { req, res }) {
if (req.session && req.session.user) {
const { username, password } = req.session.user
const user = {
username,
password
}
commit('SET_USER', user)
}
},
}

14
store/todos.js

@ -1,5 +1,6 @@
export const state = () => ({
list: []
list: [],
ip:''
})
export const mutations = {
@ -16,5 +17,16 @@ export const mutations = {
},
toggle(state, todo) {
todo.done = !todo.done
},
SET_IP(state, ip) {
state.ip = ip
}
}
export const actions={
async getIP ({ commit }) {
const ip = await this.$axios.$get('http://icanhazip.com')
commit('SET_IP', ip)
}
}

Loading…
Cancel
Save