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',})
}

然后是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, }}],},]},

登录逻辑

若依的登录逻辑是写好了的在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();}});}});}

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

Login({ commit }, userInfo) {const username = userInfo.username.trim()const password = userInfo.passwordconst code = userInfo.codeconst uuid = userInfo.uuidreturn 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)})})},

发送请求的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})
}

存储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)
}

交互

写的是分页点击删除之后更新所以把数据以及页数存储到了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 放在 span 之后 --><imgclass="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-paginationbackgroundlayout="prev, pager,next":page-count="Number(totalPages)":current-page="currentPage"@current-change="handleCurrentChange"></el-pagination></div></div></div>
</template>

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: {},};},
};

首先先注册模块

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

模块里面的命名空间要设置为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