实现用户管理和版本管理，并实现了APK上传的功能

mock/account.js

@@ -5,6 +5,9 @@ const tokens = {
   },
   editor: {
     token: 'editor-token'
+  },
+  xuexiang: {
+    token: 'xuexiang-token'
   }
 }
 
@@ -18,6 +21,11 @@ const accounts = {
     roles: ['editor'],
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     nick: 'Normal Editor'
+  },
+  'xuexiang-token': {
+    roles: ['admin'],
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    nick: '[薛翔]'
   }
 }
 

src/api/account.js

@@ -28,4 +28,20 @@ export function getAccounts() {
     url: '/account/accounts',
     method: 'get'
   })
+}
+
+export function register(data) {
+  return request({
+    url: '/account/register',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteAccount(data) {
+  return request({
+    url: '/account/delete',
+    method: 'post',
+    data
+  })
 }

src/api/update.js

@@ -7,3 +7,29 @@ export function getVersions() {
   })
 }
 
+export function addVersionInfo(data) {
+  return request({
+    url: '/update/newVersion',
+    method: 'post',
+    data
+  })
+}
+
+export function uploadApkFile(formData) {
+  return request({
+    url: '/update/uploadApk',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+export function deleteVersion(data) {
+  return request({
+    url: '/update/delete',
+    method: 'post',
+    data
+  })
+}

src/utils/request.js

@@ -52,8 +52,8 @@ service.interceptors.response.use(
         duration: 5 * 1000
       })
 
-      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+      // 100: TOKEN_INVALID; 101: TOKEN_MISSING; 102: AUTH_ERROR;
+      if (res.code === 100 || res.code === 101 || res.code === 102) {
         // to re-login
         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
           confirmButtonText: 'Re-Login',

src/views/add/newAccount.vue

@@ -3,32 +3,33 @@
     <el-row style="margin-top: 20px;">
       <el-col :span="14" :offset="4">
         <header class="form_header">添加新账户</header>
-        <el-form :model="userForm" :rules="userrules" ref="userForm" label-width="110px" class="form user_form">
+        <el-form :model="accountForm" :rules="accountrules" ref="accountForm" label-width="110px"
+          class="form account_form">
           <el-form-item label="用户名" prop="loginName">
-            <el-input v-model="userForm.loginName" placeholder="请输入用户名（登录使用）"></el-input>
+            <el-input v-model="accountForm.loginName" placeholder="请输入用户名（登录使用）"></el-input>
           </el-form-item>
           <el-form-item label="密码" prop="password">
-            <el-input v-model="userForm.password" placeholder="请输入密码（登录使用）"></el-input>
+            <el-input v-model="accountForm.password" placeholder="请输入密码（登录使用）"></el-input>
           </el-form-item>
           <el-form-item label="别名" prop="nick">
-            <el-input v-model="userForm.nick" placeholder="请输入别名"></el-input>
+            <el-input v-model="accountForm.nick" placeholder="请输入别名"></el-input>
           </el-form-item>
           <el-form-item label="权限" prop="authority">
-            <el-select v-model="userForm.authority" placeholder="请选择账户类型">
+            <el-select v-model="accountForm.authority" placeholder="请选择账户类型">
               <el-option label="管理员" value="admin"></el-option>
               <el-option label="普通用户" value="editor"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="手机号" prop="phone">
-            <el-input v-model="userForm.phone" placeholder="请输入手机号" oninput="value=value.replace(/[^\d]/g,'')">
+            <el-input v-model="accountForm.phone" placeholder="请输入手机号" oninput="value=value.replace(/[^\d]/g,'')">
             </el-input>
           </el-form-item>
           <el-form-item label="地址" prop="address">
-            <el-input v-model="userForm.address" placeholder="请输入账户注册地址"></el-input>
+            <el-input v-model="accountForm.address" placeholder="请输入账户注册地址"></el-input>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="addAccount('userForm')">添加账户</el-button>
-            <el-button @click="resetForm('userForm')">重置</el-button>
+            <el-button type="primary" @click="addAccount('accountForm')">添加账户</el-button>
+            <el-button @click="resetForm('accountForm')">重置</el-button>
           </el-form-item>
         </el-form>
       </el-col>
@@ -37,26 +38,46 @@
 </template>
 
 <script>
+  import {
+    validName
+  } from '@/utils/validate'
+  import {
+    register
+  } from '@/api/account'
   export default {
     data() {
+      const validateLoginName = (rule, value, callback) => {
+        if (!validName(value)) {
+          callback(new Error('用户名必须是4~16位字母数字或符号！'))
+        } else {
+          callback()
+        }
+      }
+      const validatePassword = (rule, value, callback) => {
+        if (!validName(value)) {
+          callback(new Error('密码必须是4~16位字母数字或符号！'))
+        } else {
+          callback()
+        }
+      }
       return {
-        userForm: {
+        accountForm: {
           loginName: "",
           password: "",
           nick: "",
           authority: "",
           phone: "",
           address: ""
         },
-        userrules: {
+        accountrules: {
           loginName: [{
             required: true,
-            message: "请输入用户名（登录使用）",
+            validator: validateLoginName,
             trigger: "blur"
           }],
           password: [{
             required: true,
-            message: "请输入密码（登录使用）",
+            validator: validatePassword,
             trigger: "blur"
           }],
           nick: [{
@@ -77,10 +98,14 @@
       addAccount(formName) {
         this.$refs[formName].validate(valid => {
           if (valid) {
-            this.$message({
-              type: "success",
-              message: "新账户添加成功!"
-            });
+            register(this.accountForm).then(response => {
+              if (response.data) {
+                this.$message({
+                  type: "success",
+                  message: "新账户添加成功!"
+                });
+              }
+            })
           } else {
             console.log("error submit!!");
             return false;
@@ -104,7 +129,7 @@
     margin-bottom: 20px;
   }
 
-  .user_form {
+  .account_form {
     border: 1px solid #eaeefb;
     padding: 10px 10px 0;
   }

src/views/add/newVersion.vue

@@ -14,19 +14,17 @@
             <el-input v-model="appForm.versionCode" oninput="value=value.replace(/[^\d]/g,'')"
               placeholder="请输入应用版本号，例如：24"></el-input>
           </el-form-item>
-          <el-form-item label="是否强制更新" prop="updateStatus">
-            <el-switch v-model="appForm.updateStatus"></el-switch>
+          <el-form-item label="是否强制更新" prop="forceUpdate">
+            <el-switch v-model="appForm.forceUpdate"></el-switch>
           </el-form-item>
           <el-form-item label="更新内容" prop="modifyContent">
             <el-input type="textarea" v-model="appForm.modifyContent" placeholder="请输入更新日志..."></el-input>
           </el-form-item>
           <el-form-item label="APK文件">
-            <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
-              <i class="el-icon-upload"></i>
-              <div class="el-upload__text">
-                将.apk文件拖到此处，或
-                <em>点击上传</em>
-              </div>
+            <el-upload class="upload-demo" ref="upload" action="/update/uploadApk" :http-request="uploadFile"
+              :multiple="false" :auto-upload="false" :limit="1" accept=".apk" :on-remove="onRemoveFile"
+              :on-change="onChangeFile">
+              <el-button slot="trigger" size="small" type="primary">选取.apk文件</el-button>
             </el-upload>
           </el-form-item>
           <el-form-item>
@@ -40,14 +38,19 @@
 </template>
 
 <script>
+  import {
+    addVersionInfo,
+    uploadApkFile
+  } from '@/api/update'
   export default {
     data() {
       return {
         appForm: {
           appKey: "",
           versionName: "",
           versionCode: "",
-          updateStatus: false
+          modifyContent: "",
+          forceUpdate: false,
         },
         apprules: {
           appKey: [{
@@ -65,24 +68,63 @@
             message: "请输入版本号",
             trigger: "blur"
           }]
-        }
+        },
+        hasSelectedApk: false,
+        versionId: 0
       };
     },
     created() {},
     methods: {
+      onRemoveFile() {
+        this.hasSelectedApk = false;
+      },
+      onChangeFile(file, fileList) {
+        this.hasSelectedApk = fileList.length > 0;
+      },
       addVersionInfo(formName) {
         this.$refs[formName].validate(valid => {
           if (valid) {
-            this.$message({
-              type: "success",
-              message: "新版本添加成功!"
-            });
+            if (this.hasSelectedApk) {
+              addVersionInfo({
+                appKey: this.appForm.appKey,
+                versionName: this.appForm.versionName,
+                versionCode: this.appForm.versionCode,
+                updateStatus: this.appForm.forceUpdate ? 2 : 1,
+                modifyContent: this.appForm.modifyContent
+              }).then(response => {
+                console.log(response.data)
+                if (response.data.versionId !== 0) {
+                  this.versionId = response.data.versionId;
+                  this.$refs.upload.submit();
+                }
+              })
+            } else {
+              this.$message({
+                type: "error",
+                message: "请选择上传的apk文件!"
+              });
+            }
           } else {
             console.log("error submit!!");
             return false;
           }
         });
       },
+      uploadFile(param) {
+        let fileObject = param.file;
+        let formData = new FormData();
+        formData.append("file", fileObject);
+        formData.append("versionId", this.versionId);
+        uploadApkFile(formData).then(response => {
+          console.log(response.data)
+          if (response.data) {
+            this.$message({
+              type: "success",
+              message: "新版本添加成功!"
+            });
+          }
+        })
+      },
       resetForm(formName) {
         this.$refs[formName].resetFields();
       }

src/views/list/accounts.vue

@@ -69,7 +69,8 @@
 
 <script>
   import {
-    getAccounts
+    getAccounts,
+    deleteAccount
   } from '@/api/account'
   import {
     isEmpty
@@ -159,11 +160,15 @@
             type: "warning"
           })
           .then(() => {
-            this.accountData.splice(index, 1);
-            this.$message({
-              type: "success",
-              message: "删除成功!"
-            });
+            deleteAccount(row).then(response => {
+              if (response.data) {
+                this.accountData.splice(index, 1);
+                this.$message({
+                  type: "success",
+                  message: "删除成功!"
+                });
+              }
+            })
           })
           .catch(() => {});
       },