加入下载二维码和注销功能

api/user/user.controller.js

@@ -17,6 +17,15 @@ const validationError = (res, statusCode) => {
     return res.status(statusCode).json(err)
   }
 }
+const respondWithResult = (res, statusCode) => {
+  statusCode = statusCode || 200
+  return function (entity) {
+    if (entity) {
+      return res.status(statusCode).json(entity)
+    }
+    return null
+  }
+}
 
 const handleError = (res, statusCode) => {
   statusCode = statusCode || 500
@@ -141,6 +150,18 @@ module.exports.login = (req, res) => {
     })
 }
 
+/**
+ * 退出登录
+ */
+module.exports.logout = (req, res) => {
+  var userId = req.user._id
+  return User.findOneAndUpdate({ _id: userId }, { token: '' }).exec()
+    .then(() => {
+      res.status(200).end()
+    })
+    .catch(handleError(res))
+}
+
 /**
  * 查看用户信息
  * @param req

auth/index.js

@@ -3,6 +3,7 @@
  */
 const express = require('express')
 const User = require('../api/user/user.controller')
+const auth = require('../auth/auth.service')
 
 const router = express.Router()
 
@@ -10,13 +11,15 @@ const router = express.Router()
  * 用户登录
  */
 router.post('/login', (req, res, next) => {
-    User.login(req, res)
+  User.login(req, res)
 })
 /**
  * 用户注册
  */
-router.post('/register', (req, res, next) =>{
-    User.create(req, res)
+router.post('/register', (req, res, next) => {
+  User.create(req, res)
 })
 
-module.exports = router
+router.get('/logout', auth.isAuthenticated(), User.logout)
+
+module.exports = router

webapp/src/api/user.js

@@ -6,7 +6,10 @@ const login = (userInfo) => {
 const register = (userInfo) => {
   return http.post('/auth/register', userInfo)
 }
+const logout = () => {
+  return http.get('/auth/logout')
+}
 
 module.exports = {
-  login, register
+  login, register, logout
 }

webapp/src/components/HeaderBar.vue

@@ -14,6 +14,10 @@
           </li>
         </ul>
       </div>
+      <div class="logout">
+        <div class="username">{{loginId}}</div>
+        <el-button @click="logout" class="logout-btn">注销</el-button>
+      </div>
     </div>
   </div>
 </template>
@@ -35,12 +39,19 @@ export default {
         name: '关于作者',
         active: false
       }
-      ]
+      ],
+      loginId: window.localStorage.getItem('loginId')
     }
   },
   methods: {
     select (item) {
       this.$router.push(item.path)
+    },
+    logout () {
+      this.$store.dispatch('logout')
+        .then(res => {
+          this.$router.push('login')
+        })
     }
   },
   mounted () {
@@ -67,6 +78,15 @@ export default {
   width: 1024px;
   text-align: center;
 }
+.logout {
+  float: right;
+  display: flex;
+  align-items: center;
+  height: 65px;
+  .username {
+    margin-right: 10px;
+  }
+}
 
 .header .logo img {
   float: left;

webapp/src/components/PreView.vue

@@ -20,8 +20,26 @@
         </div>
         <div class="qrcode">
           <div class="label">手机扫码分享给好友</div>
-          <div class="code"><canvas id="canvas"></canvas></div>
-          <div class="link"><a target="_blank" :href="releaseUrl">{{releaseUrl}}</a></div>
+          <div class="code">
+            <div class="size">
+              <canvas style="float: left" id="canvas"></canvas>
+              <el-radio-group class="radios" v-model="qrcodeSize">
+                <el-radio :label="500">500x500</el-radio>
+                <el-radio :label="1000">1000x1000</el-radio>
+                <el-radio :label="2000">2000x2000</el-radio>
+                <el-button @click="downQRcode">下载二维码</el-button>
+              </el-radio-group>
+            </div>
+          </div>
+          <div class="link">
+            <div class="link-title">
+              链接地址：
+            </div>
+            <div class="href">
+              <input type="text" id="releaseUrl" v-model="releaseUrl">
+              </div>
+            <el-button type="info" @click="copyUrl">复制链接</el-button>
+          </div>
           <div class="edit" @click="edit"><el-button style="width:180px" type="primary" icon="edit">编   辑</el-button></div>
         </div>
       </div>
@@ -75,14 +93,43 @@
         }
       }
       .qrcode {
-        margin-top: 10px;
+        margin-top: 20px;
       }
       .code {
-        text-align: center;
+        .size {
+          float: left;
+          .radios {
+            width: 80px;
+            margin-top: 5px;
+            margin-left: 30px;
+            label {
+              margin-left: 0px;
+              margin-top: 10px;
+            }
+            button {
+              margin-top: 15px;
+            }
+          }
+        }
       }
       .link {
         width:100%;
         overflow: scroll;
+        .link-title {
+          margin: 10px 0;
+        }
+        .href {
+          width: 280px;
+          line-height: 36px;
+          margin-right: 10px;
+          overflow: scroll;
+          float: left;
+          input {
+            border: 0;
+            color: blue;
+            width: 100%;
+          }
+        }
       }
       .edit {
         text-align: center;
@@ -114,7 +161,8 @@ export default {
     return {
       releaseUrl: appConst.BACKEND_DOMAIN + '/pages/' + this.itemId + '.html',
       title: this.$store.state.editor.editorTheme.title || '',
-      description: this.$store.state.editor.editorTheme.description || ''
+      description: this.$store.state.editor.editorTheme.description || '',
+      qrcodeSize: 500
     }
   },
   methods: {
@@ -126,6 +174,17 @@ export default {
       let openUrl = 'http://' + window.location.host + '/#/h5editor?itemId=' + this.itemId
       window.open(openUrl)
     },
+    downQRcode () {
+      QRCode.toDataURL(this.releaseUrl, {scale: Math.ceil(this.qrcodeSize / 40)}, (err, url) => {
+        console.log(err)
+        url = url.replace(/^data:image\/[^;]/, 'data:application/octet-stream')
+        window.open(url)
+      })
+    },
+    copyUrl () {
+      document.querySelector('#releaseUrl').select()
+      document.execCommand('copy')
+    },
     close () {
       this.$emit('hideView')
     },
@@ -149,7 +208,7 @@ export default {
   },
   mounted () {
     var canvas = document.getElementById('canvas')
-    QRCode.toCanvas(canvas, this.releaseUrl, (err) => {
+    QRCode.toCanvas(canvas, this.releaseUrl, {scale: 4}, (err) => {
       console.log(err)
     })
   }

webapp/src/vuex/user/actions.js

@@ -4,6 +4,7 @@ export const login = ({commit}, userInfo) => {
   api.login(userInfo).then((res) => {
     commit('SET_ERROR_INFO', '')
     window.localStorage.setItem('token', res.token)
+    window.localStorage.setItem('loginId', userInfo.loginId)
     window.location.replace('#/themeList')
   })
     .catch(res => {
@@ -20,3 +21,7 @@ export const register = ({commit}, userInfo) => {
       window.location.replace('#/themeList')
     })
 }
+
+export const logout = ({commit}) => {
+  return api.logout()
+}