完成列表查询 登录功能，但代码荣誉 需有时间重构

package.json

@@ -18,6 +18,8 @@
     "core-js": "^3.26.1",
     "element-ui": "2.13.2",
     "js-cookie": "2.2.0",
+    "js-md5": "^0.7.3",
+    "moment": "^2.29.4",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",

src/layout/components/Navbar.vue

@@ -7,7 +7,7 @@
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <img :src=userAvatar class="user-avatar">
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
@@ -16,14 +16,14 @@
               Home
             </el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
+<!--          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">-->
-            <el-dropdown-item>Github</el-dropdown-item>
+<!--            <el-dropdown-item>Github</el-dropdown-item>-->
-          </a>
+<!--          </a>-->
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
+<!--          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
-            <el-dropdown-item>Docs</el-dropdown-item>
+<!--            <el-dropdown-item>Docs</el-dropdown-item>-->
-          </a>
+<!--          </a>-->
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
+            <span style="display:block;">退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -35,6 +35,8 @@
 import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
+import { Message } from 'element-ui'
+import pageUtils from '@/utils/pageUtils'
 
 export default {
   components: {
@@ -47,6 +49,18 @@ export default {
       'avatar'
     ])
   },
+  data(){
+    return{
+
+      userName: "",
+      userPass: "",
+      userAvatar: "",      // 用户头像
+      rankIf: true,        // 权限识别
+      isLogin: false,      // 是否登录
+
+
+    }
+  },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
@@ -54,7 +68,59 @@ export default {
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    },
+
+
+
+
+    // 用户登录状态判断
+    userStateCheck(){
+      /**
+       * 1. 有信息 拿到token userId 去获取用户信息
+       * 2. 无信息 提示用户登录
+       */
+      let token = localStorage.getItem("systemToken");
+      let userId = localStorage.getItem("userId");
+      if (userId != null && token != null && userId !== '' && token !== '') {
+        // 获取用户信息
+        var user = {
+          userId,
         }
+        this.$api.getUserDataByUserId(user).then((res) =>{
+          console.log(res);
+          if (res.status == 0) {
+            // 查询成功
+            this.userAvatar = res.data.userDetails.profilePhoto;
+            this.userName = res.data.user.name;
+            this.isLogin = true;
+          }else {
+            Message.warning("登录失败，请重新登录");
+            this.toLogin()
+          }
+        }).catch(function (res){
+          console.log(res);
+        })
+      }else {
+        Message.warning("请登录");
+        this.toLogin()
+      }
+      console.log(token);
+      console.log(userId);
+    },
+
+    toLogin(){
+      pageUtils.openPage(this.$router,"/login");
+    },
+
+    toRes(){
+      pageUtils.openPage(this.$router,"/" +this.$route.params.compId +"/register");
+    }
+
+
+
+  },
+  mounted() {
+    this.userStateCheck()
   }
 }
 </script>

src/layout/components/Sidebar/index.vue

@@ -23,6 +23,7 @@ import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
+import { Message } from 'element-ui'
 
 export default {
   components: { SidebarItem, Logo },
@@ -51,6 +52,12 @@ export default {
     isCollapse() {
       return !this.sidebar.opened
     }
+  },
+  methods:{
+
+  },
+  mounted() {
+
   }
 }
 </script>

src/layout/index.vue

@@ -14,6 +14,7 @@
 <script>
 import { Navbar, Sidebar, AppMain } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
+import { Message } from 'element-ui'
 
 export default {
   name: 'Layout',
@@ -46,6 +47,11 @@ export default {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     }
+
+
+  },
+  mounted() {
+
   }
 }
 </script>

src/main.js

@@ -11,9 +11,15 @@ import '@/styles/index.scss' // global css
 import App from './App'
 import store from './store'
 import router from './router'
-
+//md5
+import md5 from 'js-md5'
+import Axios from "axios"
+import api from './utils/http/index'
 import '@/icons' // icon
-import '@/permission' // permission control
+// 时间
+import moment from "moment"
+//关闭自带vuex权限管理
+// import '@/permission' // permission control
 
 /**
  * If you don't want to use mock-server
@@ -28,11 +34,14 @@ if (process.env.NODE_ENV === 'production') {
   mockXHR()
 }
 
+Vue.prototype.$md5 = md5;
+Vue.use(api)
+Vue.prototype.$axios = Axios
 // set ElementUI lang to EN
 // Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明
 Vue.use(ElementUI)
-
+Vue.prototype.$moment = moment;
 Vue.config.productionTip = false
 
 new Vue({

src/utils/http/interface.js

@@ -5,7 +5,16 @@ import axios from './api'
  * 如果项目很大可以将 url 独立成文件，接口分成不同的模块
  * 此处的数据依然来自 Easy Mock
  */
-
+//获得所有文件列表
+export const getAllFilesInfo = () => {
+  return axios({
+    headers:{
+      "Authorization": localStorage.getItem("systemToken")
+    },
+    url: '/file/getAllFilesInfo',
+    method: 'post'
+  })
+};
 // 统一定义请求的API接口
 export const query = params => {
     return axios({
@@ -24,20 +33,7 @@ export const mock = data => {
 };
 
 
-export const getComp = data => {
-    return axios({
-        url: '/comp/getCompByCompId',
-        method: 'post',
-        data
-    })
-};
 
-export const getPageData = (compId,page) => {
-    return axios({
-        url: '/comp/getPageData/'+ compId + '/' + page,
-        method: 'get',
-    })
-};
 
 export const login = data => {
     return axios({
@@ -67,249 +63,15 @@ export const getUserDataByUserId = data => {
 };
 
 
-export const chatContentUpdate = data => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: '/chat/updateContentByCompId',
-        method: 'post',
-        data
-    })
-};
-
-
-export const homeContentUpdate = data => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: '/home/updateContentByCompId',
-        method: 'post',
-        data
-    })
-};
-
-
-export const guideContentUpdate = data => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: '/guide/updateContentByCompId',
-        method: 'post',
-        data
-    })
-};
-export const contactContentUpdate = data => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: '/contact/updateContentByCompId',
-        method: 'post',
-        data
-    })
-};
-export const noticeInsert = data => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: '/notice/insertNotice',
-        method: 'post',
-        data
-    })
-};
-export const noticeContentUpdate = data => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: '/notice/updateContentByCompId',
-        method: 'post',
-        data
-    })
-};
-export const getAllComp = () => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: '/admin/getAllComp',
-        method: 'get'
-    })
-};
-
-
-export const initComp = (data) => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: '/admin/initComp',
-        method: 'post',
-        data
-    })
-};
-
-
-export const getCompById = (data) => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: '/admin/getCompById',
-        method: 'post',
-        data
-    })
-};
-
-
-export const updateData = (type,data) => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: '/admin/updateData/' + type,
-        method: 'post',
-        data
-    })
-};
-
-export const getChartCount = (data) => {
-    return axios({
-
-        url: '/comp/getChartCount',
-        method: 'post',
-        data
-    })
-};
-
-
-export const addApply = (data) => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: 'apply/addApply',
-        method: 'post',
-        data
-    })
-};
-
-export const getApplyForPerson = (data) => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: 'apply/getApplyInfoForPerson',
-        method: 'post',
-        data
-    })
-};
-
-
-
-
-export const delMemberByMemNum = (data) => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: 'apply/delMemberByMemNum',
-        method: 'post',
-        data
-    })
-};
-
-
-
-export const updateApplyInfo = (data) => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: 'apply/updateApplyInfo',
-        method: 'post',
-        data
-    })
-};
-
-
-export const getDivisionAndKind = (data) => {
-    return axios({
-
-        url: '/comp/getDivisionAndKind',
-        method: 'post',
-        data
-    })
-};
-
-
-
-export const getSubmitCust = (data) => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: '/submit/getSubmitCustByCompId',
-        method: 'post',
-        data
-    })
-};
-
-
-export const getSubmitInfo = (data) => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: '/submit/getSubmitInfoForPerson',
-        method: 'post',
-        data
-    })
-};
-
-
-export const insertSubmitInfo = (data) => {
-    return axios({
-        headers:{
-            "Authorization": localStorage.getItem("systemToken")
-        },
-        url: '/submit/insertSubmitInfo',
-        method: 'post',
-        data
-    })
-};
 
 // 默认全部倒出
 // 根据需要进行
 export default {
     query,
     mock,
-    getComp,
+    getAllFilesInfo,
-    getPageData,
+    getUserDataByUserId,
     login,
     register,
-    chatContentUpdate,
+
-    homeContentUpdate,
-    getUserDataByUserId,
-    getAllComp,
-    initComp,
-    getCompById,
-    updateData,
-    getChartCount,
-    guideContentUpdate,
-    contactContentUpdate,
-    noticeInsert,
-    noticeContentUpdate,
-    addApply,
-    getApplyForPerson,
-    delMemberByMemNum,
-    updateApplyInfo,
-    getDivisionAndKind,
-    getSubmitCust,
-    getSubmitInfo,
-    insertSubmitInfo
 }

src/views/fileList/FileList.vue

@@ -54,6 +54,7 @@
           <el-upload
             class="upload-demo"
             drag
+            :headers="headers"
             action="/api/file/uploadFile"
             :on-success="uploadSuccess"
             multiple>
@@ -83,17 +84,17 @@
     >
       <el-table-column align="center" label="编号" width="95">
         <template slot-scope="scope">
-          {{ scope.$index }}
+          {{ scope.row.filesInfoId }}
         </template>
       </el-table-column>
       <el-table-column label="文件名称">
         <template slot-scope="scope">
-          {{ scope.row.title }}
+          {{ scope.row.name }}
         </template>
       </el-table-column>
       <el-table-column label="上传用户" width="110" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.author }}</span>
+          <span>{{ scope.row.userName }}</span>
         </template>
       </el-table-column>
 
@@ -104,13 +105,13 @@
       </el-table-column>
       <el-table-column class-name="status-col" label="分类" width="110" align="center">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.type | statusFilter">{{ scope.row.type }}</el-tag>
+          <el-tag :type="scope.row.type | statusFilter">{{ scope.row.typeName }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column align="center" prop="created_at" label="上传时间" width="200">
         <template slot-scope="scope">
           <i class="el-icon-time" />
-          <span>{{ scope.row.display_time }}</span>
+          <span>{{ scope.row.uploadTime }}</span>
         </template>
       </el-table-column>
       <el-table-column align="center" prop="created_at" label="操作" width="200">
@@ -125,6 +126,8 @@
 <script>
 import { getList } from '@/api/table'
 import pageUtils from '@/utils/pageUtils'
+import { Message } from 'element-ui'
+
 export default {
   name: 'FileList',
   filters: {
@@ -158,6 +161,11 @@ export default {
         kind: "",
       },
 
+      //token
+      headers:{
+        "Authorization": localStorage.getItem("systemToken")
+      },
+
       //dialog规则
       rules: {
         // filesInfoId: [
@@ -195,10 +203,20 @@ export default {
   methods: {
     fetchData() {
       this.listLoading = true
-      getList().then(response => {
+      this.$api.getAllFilesInfo().then((res)=>{
-        this.list = response.data.items
+        console.log(res)
+
+        this.list = res.data
+
+        console.log(this.list)
         this.listLoading = false
-      })
+      }).catch(function (res) {
+        alert(res);
+      });
+      // getList().then(response => {
+      //   this.list = response.data.items
+      //   this.listLoading = false
+      // })
     },
     downloadFile(link) {
       window.location.href = '/api' + link
@@ -209,8 +227,13 @@ export default {
     //关闭上传弹窗
     handleClose() {
       this.dialogVisible = false;
-      this.compInfo.compName = "";
+      this.filesInfo.filesInfoId = 0;
-      this.compInfo.compId = "";
+      this.filesInfo.filesTypeId = 0;
+      this.filesInfo.location = "";
+      this.filesInfo.name = "";
+      this.filesInfo.uploadUserId = "";
+      this.filesInfo.status = "";
+
     },
 
 
@@ -223,7 +246,8 @@ export default {
         this.filesInfo.location = response.url
       }
     }
-  }
+  },
+
 }
 </script>
 

src/views/login/index.vue

@@ -6,15 +6,15 @@
         <h3 class="title">文件共享管理系统</h3>
       </div>
 
-      <el-form-item prop="username">
+      <el-form-item prop="phone">
         <span class="svg-container">
           <svg-icon icon-class="user" />
         </span>
         <el-input
-          ref="username"
+          ref="phone"
-          v-model="loginForm.username"
+          v-model="loginForm.phone"
-          placeholder="Username"
+          placeholder="手机号"
-          name="username"
+          name="phone"
           type="text"
           tabindex="1"
           auto-complete="on"
@@ -30,23 +30,23 @@
           ref="password"
           v-model="loginForm.password"
           :type="passwordType"
-          placeholder="Password"
+          placeholder="密码"
           name="password"
           tabindex="2"
           auto-complete="on"
-          @keyup.enter.native="handleLogin"
+          @keyup.enter.native="login"
         />
         <span class="show-pwd" @click="showPwd">
           <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
         </span>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="login">登录</el-button>
 
-      <div class="tips">
+<!--      <div class="tips">-->
-        <span style="margin-right:20px;">username: admin</span>
+<!--        <span style="margin-right:20px;">phone: admin</span>-->
-        <span> password: any</span>
+<!--        <span> password: any</span>-->
-      </div>
+<!--      </div>-->
 
     </el-form>
   </div>
@@ -54,31 +54,32 @@
 
 <script>
 import { validUsername } from '@/utils/validate'
-
+import pageUtils from '@/utils/pageUtils'
+import { Message } from "element-ui";
 export default {
   name: 'Login',
   data() {
     const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
+      if (value.length<6) {
-        callback(new Error('Please enter the correct user name'))
+        callback(new Error('请输入正确的手机号'))
       } else {
         callback()
       }
     }
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
+        callback(new Error('请输入正确密码'))
       } else {
         callback()
       }
     }
     return {
       loginForm: {
-        username: 'admin',
+        phone: '',
-        password: '111111'
+        password: ''
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+        phone: [{ required: true, trigger: 'blur', validator: validateUsername }],
         password: [{ required: true, trigger: 'blur', validator: validatePassword }]
       },
       loading: false,
@@ -105,6 +106,9 @@ export default {
         this.$refs.password.focus()
       })
     },
+
+
+    //登录
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
@@ -120,6 +124,36 @@ export default {
           return false
         }
       })
+    },
+
+
+    // 我的login
+    login(){
+      let adminInfo = {
+        phone: this.loginForm.phone,
+        password: this.$md5(this.loginForm.password),
+      };
+
+      this.$api.login(adminInfo)
+        .then((res) => {
+          console.log(res);
+          if (res.status === 10) {
+            Message.warning("用户名或密码错误")
+          }else {
+            localStorage.setItem("systemToken",res.token);
+            localStorage.setItem("username", res.username);
+            localStorage.setItem("userId", res.userId);
+            localStorage.setItem("role", res.auth.authority);
+            this.loading = true
+            Message.success("登录成功")
+            pageUtils.openPage(this.$router,"/fileList"); //跳转至主页
+          }
+          // Cookies.set("token", res.data.token); // 放置token到Cookie
+
+        })
+        .catch(function (res) {
+          alert(res);
+        });
     }
   }
 }

vue.config.js

@@ -36,10 +36,11 @@ module.exports = {
       warnings: false,
       errors: true
     },
-    before: require('./mock/mock-server.js'),
+    //开启before请求不成功
+    // before: require('./mock/mock-server.js'),
     proxy: {
       '/api': {
-        target: 'http://127.0.0.1:8001',
+        target: 'http://localhost:8001',
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''