• vue2+若依框架plus交互 路由介绍

    本周及寒假

    参加了校企合作的工程过程管理，和学长学姐一起写项目，之前学了vue也没有应用，然后对框架很多组件的用法不太了解，前期耽误了一些时间。

    框架模块

    首先是框架模块的介绍 api存了一些系统管理及发送请求的方法
    在这里插入图片描述
    例如project.js

    import request from '@/utils/request'
import { getToken } from '@/utils/auth'
//添加新的公司
let token = getToken();
export function getTypeOnline(compName, compType) {
    return request({
        url: `/project/queryCompany?name=${compName}&type=${compType}`,
        headers: {
            isToken: true,
            token: `Bearer ${token}`
        },
        method: 'post',
     
    })
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    然后是asset文件夹 存了文件的静态资源
    在这里插入图片描述
    component存的是用到的组件 layout也是组件 可以将页面的组件拆分展示成多个
    plugins仿制的是插件进行鉴权等等，router是路由配置文件 store放置的是拆分出来的vuex里面的分模块化的内容

    在这里插入图片描述

    路由配置

    菜单配置路由

    若依框架可以通过菜单进行路由配置 进入系统管理的菜单管理
    在这里插入图片描述
    通过改变菜单的目录和菜单进行配置 输入组件路径和路由地址 既可以在左边侧边栏渲染出导航栏
    在这里插入图片描述

    路由配置

    这是我配置的路由 因为本来在菜单设置的三级路由一直报错 这个配置的路由可以通过
    meta: { title: ‘首页’}渲染你面包屑

     {
    path: '',
    component: Layout,
    redirect: 'homePage',
    meta: { title: '首页', icon: 'dashboard', affix: true },
    children: [
      {
        path: 'homePage',
        component: () => import('@/views/home/homePage'),
        name: 'homePage',
        meta: { title: '公司库', icon: 'dashboard', affix: true },
        children:[
        ]
      },
        {
            path: 'project',
            component: () => import('@/views/home/projectManeger'),
            name: 'Project',
            meta: { title: '工程管理', icon: 'dashboard', affix: true },
            children: [{
              path: 'projectMain/:param',
              props: true,
              component: () => import('@/views/home/projectMain'),
              name: 'projectMain',
              hidden: true,
              meta: { title: '工程详情', icon: 'dashboard', affix: true, }
            }
            ],
          },
    ]
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    登录逻辑

    若依的登录逻辑是写好了的 在login.vue我们可以看到如下代码

     handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }
         this.$store.dispatch("Login", this.loginForm)
          .then(() => {
            this.$router.push({ path: '/home/homePage' || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
        }
      });
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    可以看出登录调用的是vuex里面的内容 可以在store->modules->user.js里面控制
    在action可以看到

    Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      const password = userInfo.password
      const code = userInfo.code
      const uuid = userInfo.uuid
      return new Promise((resolve, reject) => {
        login(username, password, code, uuid).then(res => {
          setToken(res.data.token)
          commit('SET_TOKEN', res.data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    发送请求的login方法在src/api/login.js中
    这个request是若依封装的拦截器

    import request from '@/utils/request'

// 登录方法
export function login(username, password, code, uuid) {
  const data = {
    username,
    password,
    code,
    uuid
  }
  return request({
    url: '/login',
    headers: {
      isToken: false
    },
    method: 'post',
    data: data
  })
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    存储token的部分 在src/utils/auth.js中

    import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    交互

    写的是分页 点击删除之后更新 所以把数据以及页数存储到了vuex中

    <template>
  <div class="componnentMain">
    <div class="addNewCom">
      <button @click="addNewomponent('add-newCoponent')" id="addnewBtn">
        新增
      button>
      <el-dialog :title="dialogComtitle" :visible.sync="addDialogCom">
        <template v-if="currentComponent == 'add-newCoponent'">
          <add-newCoponent :addDialogCom.sync="addDialogCom" />
        template>
        <template v-else>
          <edit-comVue
            :addDialogCom.sync="addDialogCom"
            :listData="ownlistData"
          />
        template>
      el-dialog>
    div>
    <el-table :data="dataList" style="width: 97%" class="comLable">
      <el-table-column prop="compName" label="公司名称" width="260">
      el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="195">
        <template slot-scope="{ row }">
          {{ turnshowTime(row.createTime) }}
        template>
      el-table-column>
      <el-table-column prop="compType" label="公司类别" width="190">
      el-table-column>
      <el-table-column prop="compInvite" label="注册邀请码" width="330">
        <template slot-scope="{ row }">
          <span class="address-container">{{ row.compInvite }}span>
          
          <img
            class="copyVisit"
            src="@/assets/images/copy.png"
            alt=""
            srcset=""
          />
        template>
      el-table-column>
      <el-table-column label="操作" width="241" fixed="right">
        <template slot-scope="{ row }">
          <span class="combtn" @click="editcomponent('edit - comVue', row)">
            详情
          span>
          <span class="combtn" @click="editcomponent('edit - comVue', row)">
            编辑
          span>
          <span class="deleteCom" @click="delteCompany(row.id)"> 删除 span>
        template>
      el-table-column>
    el-table>
    <div class="pageComChange">
      <div class="pageComChangeCenter">
        <el-pagination
          background
          layout="prev, pager,next"
          :page-count="Number(totalPages)"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
        >
        el-pagination>
      div>
    div>
  div>
template>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    import { mapState, mapMutations, mapActions } from "vuex";
//先引入vuex模块
export default {
  components: {
    "add-newCoponent": addnewComVue,
    "edit-comVue": editComVue,
  },
  computed: {
    ...mapState("companyPage", [
      "pageSize",
      "totalPages",
      "dataList",
      "searchConten",
    ]),
  },
  currentPage: {
    get() {
      return this.currentPage;
    },
    set(val) {
      this.handleCurrentChange(val);
    },
  },
  mounted() {
    this.fetchData();
    //在挂载调用一次分页接口
  },

  methods: {
    addNewomponent(componentType) {
      this.currentComponent = componentType;
      this.addDialogCom = !this.addDialogCom;
      this.dialogComtitle = "新建公司";
    },
    editcomponent(componentType, rowData) {
      this.currentComponent = componentType;
      this.addDialogCom = !this.addDialogCom;
      this.dialogComtitle = "修改公司信息";
      this.ownlistData = rowData;
    },
    ...mapMutations("companyPage", [
      "searchCompanysendMethos",
      "updatePagination",
    ]),
    ...mapActions("companyPage", ["serachComoanyactions", "fetchData"]),

    handleCurrentChange(val) {
      this.currentPage = val;
      if (this.searchConten == "" || this.searchType == "") {
        this.updatePagination({
          currentPage: val,
          pageSize: this.pageSize,
        });
        this.fetchData();
      } else {
        this.searchCompanysendMethos({
          currentPage: 1,
          pageSize: this.pageSize,
          searchConten: this.searchComvalue,
          searchType: this.searchType,
        });
        this.serachComoanyactions();
      }
    },
    delteCompany(id) {
      this.$confirm("确定要删除该公司吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const comids = [id];
          deleteCompany(comids).then((data) => {
            if (data.code == 200) {
              this.$message.success('删除公司成功')
              //这是判断有没有搜索内容
              if (this.searchConten == "" || this.searchType == "") {
                this.updatePagination({
                  currentPage:this.currentPage,
                  pageSize: this.pageSize,
                });
                this.fetchData();
              } else {
                this.searchCompanysendMethos({
                  currentPage: 1,
                  pageSize: this.pageSize,
                  searchConten: this.searchComvalue,
                  searchType: this.searchType,
                });
                this.serachComoanyactions();
              }
            } else {
              this.$message.error("删除该公司失败");
            }
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    turnshowTime(timestamp) {
      // 使用导入的时间转换方法
      return turnshowTime(timestamp);
    },
  },
  data() {
    return {
      currentComponent: "",
      dialogComtitle: "",
      addDialogCom: false,
      currentPage: 1,
      ownlistData: {},
    };
  },
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115

    首先先注册模块

    //store/index.vue
const store = new Vuex.Store({
  modules: {
    app,
    dict,
    user,
    tagsView,
    permission,
    settings,
    companyPage,
    projectPage
  },
  getters
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    模块里面的命名空间要设置为true 并进行传递数据的更新

    import { getAllCompany,getSearchCompany} from "../../api/company";
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const companyPage=({
  namespaced: true,
  state: {
  currentPage: 1,
  pageSize: 10,
  totalPages: 0,
  searchConten:'',
  searchType:"",
  dataList: [] // 存储数据列表
  },
  mutations: {
  updatePagination(state, payload) {
    state.currentPage = payload.currentPage;
    state.pageSize = payload.pageSize;
    state.totalPages = payload.totalPages;
    
  },
  updateDataList(state, dataList) {
    state.dataList = dataList;
  },
  searchCompanysendMethos(state, payload) {
    state.currentPage = payload.currentPage;
    state.pageSize = payload.pageSize;
    state.totalPages = payload.totalPages;
    state.searchType=payload.searchType,
    state.searchConten=payload.searchConten
  },
  updateSearchList(state, dataList) {
    state.dataList = dataList;
  }
  },
 actions: {
  async fetchData({ commit, state }) {
    try {
    // 调用接口获取公司数据
    const response = await getAllCompany(state.pageSize,state.currentPage);
    // 更新分页状态
    commit('updatePagination', {
      currentPage: state.currentPage,
      pageSize: state.pageSize,
      totalPages: response.pages,
      dataList:response.records,

    });

    // 更新数据列表
    commit('updateDataList', response.records);
    } catch (error) {
    console.error('Error fetching company data:', error);
    }
  },
  async serachComoanyactions ({ commit, state }) {
    try {
    // 调用接口获取公司数据
    const response = await getSearchCompany(state.pageSize,state.currentPage,state.searchConten,state.searchType);
    commit('searchCompanysendMethos', {
      currentPage: state.currentPage,
      pageSize: state.pageSize,
      totalPages: response.pages,
      dataList:response.records,

    });

    // 更新数据列表
    commit('updateDataList', response.records);
    } catch (error) {
    console.error('Error fetching company data:', error);
    }
  }
}
});
export default companyPage

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76

    总结

    vue写项目比之前用原生js写项目代码量要少得多 同时 框架好用是好用 但是要了解他的项目架构以及自带的一些方法

    下周计划

    先完成项目 然后学习一下ts 寒假没完全学完

  • 相关阅读:
    此芯科技加入绿色计算产业联盟，参编绿色计算产业发展白皮书
    [Docker] Docker安装青龙并且设置
    gitlab安装脚本
    工程师职称评审有关安排
    SQL 主从数据库实时备份
    实习面试复习
    软考 系统架构设计师系列知识点之设计模式（6）
    [附源码]计算机毕业设计springboot校园订餐系统
    codeWarrior中乘法运算问题记录
    别再盯着40系，这些才是目前性价比最高的显卡
  • 原文地址：https://blog.csdn.net/wzy0507/article/details/136423145