上传下载前端页面搭建 欢迎词修改 mixin文件位置修改

QMPlusServer/main.go

@@ -32,6 +32,7 @@ func main() {
 		WriteTimeout:   10 * time.Second,
 		MaxHeaderBytes: 1 << 20,
 	}
+	time.Sleep(10*time.Microsecond)
 	fmt.Printf(`欢迎使用 Gin-Vue-Admin
 作者：奇淼 And Spike666
 微信：shouzi_1994

QMPlusVuePage/src/view/example/form/form.vue

@@ -59,7 +59,7 @@
 export default {
 
     data() {
-        const generateData = _ => {
+        const generateData = () => {
             const data = [];
             const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
             const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];

QMPlusVuePage/src/view/example/table/table.vue

@@ -18,12 +18,12 @@
       <el-table-column label="年龄" prop="age" width="120"></el-table-column>
       <el-table-column label="住址" prop="address" show-overflow-tooltip></el-table-column>
       <el-table-column label="是否禁用" prop="switch">
-        <template scope="scope">
+        <template slot-scope="scope">
           <el-switch active-text="开启" inactive-text="禁用" v-model="scope.row.switch"></el-switch>
         </template>
       </el-table-column>
       <el-table-column label="按钮组">
-        <template scope="scope">
+        <template slot-scope="scope">
             <el-button type="text" size="small" @click="toggleSelection([scope.row])">按钮1</el-button>
             <el-button type="text" size="small" @click="toggleSelection([scope.row])">按钮2</el-button>
             <el-button type="text" size="small" @click="toggleSelection([scope.row])">按钮3</el-button>

QMPlusVuePage/src/view/example/upload/upload.vue

@@ -1,10 +1,87 @@
 <template>
-    <div>
-        上传下载示例
-    </div>
+  <div>
+    <template>
+      <el-upload
+        :file-list="fileList"
+        :headers="{'x-token':token}"
+        :show-file-list="false"
+        @before-upload="checkFile"
+        @on-error="uploadError"
+        @on-success="uploadSuccess"
+        action="https://jsonplaceholder.typicode.com/posts/"
+      >
+        <el-button size="small" type="primary">点击上传</el-button>
+        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+      </el-upload>
+      <el-table :data="tableData" border stripe>
+          <el-table-column label="预览"  width="100">
+          <template slot-scope="scope">
+            <img :alt="scope.row.alt" width="80" height="80" :src="scope.row.url" />
+          </template>
+        </el-table-column>
+        <el-table-column label="日期" prop="date" width="180"></el-table-column>
+        <el-table-column label="文件名" prop="name" width="180">
+        </el-table-column>
+        <el-table-column :formatter="formatter" label="链接" prop="url"></el-table-column>
+        <el-table-column label="标签" prop="tag" width="100">
+          <template slot-scope="scope">
+            <el-tag
+              :type="scope.row.tag === 'jpg' ? 'primary' : 'success'"
+              disable-transitions
+            >{{scope.row.tag}}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button size="small" type="text" @click="downloadFile(scope.row)">下载</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
+  </div>
 </template>
+   
 <script>
+import { mapGetters } from 'vuex'
+import infoList from '@/components/mixins/infoList'
 export default {
-    name:'Upload'
+  name: 'Upload',
+  mixins: [infoList],
+  data() {
+    return {
+      tableData: [
+        {
+          date: '2019-10-25',
+          name: '文件名.jpg',
+          url: 'http://qmplusimg.henrongyi.top/1571321688timg.jpg',
+          tag: 'jpg'
+        },
+        {
+          date: '2019-10-25',
+          name: '文件名.jpg',
+          url: 'http://qmplusimg.henrongyi.top/157162774820191015140921496.gif',
+          tag: 'gif'
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters('user', ['userInfo', 'token'])
+  },
+  methods: {
+    checkFile(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M
+    },
+    downloadFile(){
+    }
+  }
 }
 </script>

QMPlusVuePage/src/view/superAdmin/api/api.vue

@@ -57,7 +57,7 @@ import {
   updataApi,
   deleteApi
 } from '@/api/api'
-import infoList from '@/view/superAdmin/mixins/infoList'
+import infoList from '@/components/mixins/infoList'
 
 export default {
   name: 'Api',

QMPlusVuePage/src/view/superAdmin/authority/authority.vue

@@ -91,7 +91,7 @@ import {
 } from '@/api/authority'
 import { getBaseMenuTree, addMenuAuthority, getMenuAuthority } from '@/api/menu'
 import { getAllApis, getAuthAndApi, setAuthAndApi } from '@/api/api'
-import infoList from '@/view/superAdmin/mixins/infoList'
+import infoList from '@/components/mixins/infoList'
 export default {
   name: 'Authority',
   mixins: [infoList],

QMPlusVuePage/src/view/superAdmin/menu/menu.vue

@@ -88,7 +88,7 @@ import {
   deleteBaseMenu,
   getBaseMenuById
 } from '@/api/menu'
-import infoList from '@/view/superAdmin/mixins/infoList'
+import infoList from '@/components/mixins/infoList'
 export default {
   name: 'Menus',
   mixins: [infoList],

QMPlusVuePage/src/view/superAdmin/user/user.vue

@@ -40,7 +40,7 @@
 <script>
 // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成
 import { getUserList, setUserAuthority } from '@/api/user'
-import infoList from '@/view/superAdmin/mixins/infoList'
+import infoList from '@/components/mixins/infoList'
 
 export default {
   name: 'Api',