| Element 详情

router-index.jd-全局守卫

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'

Vue.use(VueRouter)

const routes = [
 // 登录页面
  {
    path: '/',
    redirect: "/login",
  },
  {
    path: '/login',
    name: 'login_view',
    component: () => import('../views/LoginView.vue')
  },
 // 主页面
  {
    path: '/home',
    name: 'home_view',
    component: () => import('../views/HomeView.vue'),
    children: [
      {
 // 添加页面
        path: "/list",
        name: "list_view",
        component: () => import("../views/UserListView.vue")
      },
      {
        path: '/sanlian',
        name: "sanlian_view",
        component: () => import('../views/SanLianView.vue')
      },
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router
// 全局守卫
router.beforeEach((to, from, next) => {
  if (to.path == '/login') return next();
  let token = store.state.userInfo.token;
  if (!token) return next("/login");
  next()
})

store-index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: sessionStorage.userInfo ? JSON.parse(sessionStorage.userInfo) : ""
  },
  getters: {
  },
  mutations: {
    // 写登录的时候写
    saveInfo(state, userInfo) {
      state.userInfo = userInfo
      // 存到本地
      sessionStorage.setItem("userInfo", JSON.stringify(userInfo))
    },
    // 清除token--退出登录的时候写
    delInfo(state) {
      state.userInfo = "";
      // 清除本地信息
      sessionStorage.removeItem("userInfo")
    }
  },
  actions: {
  },
  modules: {
  }
})

main.js-请求拦截器

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 引入axios
import axios from 'axios'
// 行政区划三级选择
import RegionSelect from './views/SanLianView.vue'
// 行政区划三级选择
Vue.use(RegionSelect)
// 行政区划三级选择
Vue.component('regionSelect', RegionSelect)

// element
Vue.use(ElementUI);

Vue.config.productionTip = false
// 将aixos配置vue原型中--全局都可以使用
Vue.prototype.$http = axios

// 配置全局请求路径
axios.defaults.baseURL = 'http://www.wuhaijun888.com:8888/api/private/v1/';
// 添加请求拦截器---写完登录的时候再写
axios.interceptors.request.use(function (config) {
  // 在发送请求之前添加token
  if (store.state.userInfo.token) {
    config.headers.Authorization = store.state.userInfo.token;
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    
    <router-view/>
  </div>
</template>

<style lang="scss">

</style>

主页面--父页面-----------------------------

<template>
  <div>
    <el-container>
      <el-header>
        <span> <b>后台管理</b> </span>
        <span class="right_btn">
          {{ $store.state.userInfo.username }}
          <el-button type="info" @click="logout">退出登录</el-button>
        </span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <p><router-link to="/list">用户管理</router-link></p>
          <p><router-link to="/list">权限管理</router-link></p>
        </el-aside>
        <!-- 注意占位符 -->
        <el-main><router-view /> </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "home_view",
  data() {
    return {};
  },
  methods: {
    // 回到登录页面---退出登录写
    logout() {
      this.$store.commit("delInfo");
      // 跳转登录页面
      this.$router.push("/login");
    },
  },
};
</script>

<style>
.right_btn {
  float: right;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  height: 60px;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  height: 600px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  height: 600px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

登录页面--子页面

<template>
  <div class="login_mtk">
    <p>用户名: <input type="text" v-model="username" /></p>
    <p>密码: <input type="password" v-model="password" /></p>
    <el-button type="primary" @click="deng">登录</el-button
    ><el-button type="primary">取消</el-button>
  </div>
</template>

<script>
export default {
  name: "login_view",
  data() {
    return {
      username: "admin",
      password: "123456",
    };
  },
  methods: {
    // 登录
    deng() {
      this.$http
        .post("/login", {
          username: this.username,
          password: this.password,
        })
        .then((response) => {
          let { data: res } = response;
          console.log(res);
          // 保存数据
          this.$store.commit("saveInfo", res.data);
          // 跳转页面
          this.$router.push("/home");
        });
    },
  },
};
</script>

<style>
.login_mtk {
  width: 300px;
  height: 300px;
  border-radius: 20px;
  background: paleturquoise;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin:  auto;
}
</style>

添加显示页面---子页面

<template>
  <!-- userList要与下面对应数组 -->
  <div class="userList">
    <!-- 添加 -->
    <div class="top_add">
      <span>
        <input type="text" v-model="query" />
        <el-button type="primary" icon="el-icon-search" @click="sousuo"
          >搜索</el-button
        >
      </span>
      <el-button class="el-icon-plus" @click="addWindow = true"></el-button>
    </div>
    <!-- 添加--- -->
    <!-- 表单 -->
    <div class="main">
      <table border="1px">
        <thead>
          <th>序号</th>
          <th>用户名</th>
          <th>邮箱</th>
          <th>电话</th>
          <th>角色</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="(item, index) in userList" :key="item.id">
            <td>{{ index + 1 }}</td>
            <td>{{ item.username }}</td>
            <td>{{ item.email }}</td>
            <td>{{ item.mobile }}</td>
            <td>{{ item.role_name }}</td>
            <td>
              <el-button class="el-icon-delete" @click="del(item.id)"
                >删除</el-button
              >
              <el-button class="el-icon-edit" @click="edit(item.id)"
                >编辑</el-button
              >
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 表单完 -->
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加模态框 -->
    <div class="addmtk" v-if="addWindow">
      <p>用户名: <input type="text" v-model="addForm.username" /></p>
      <p>密码: <input type="password" v-model="addForm.password" /></p>
      <p>邮箱: <input type="text" v-model="addForm.email" /></p>
      <p>电话: <input type="text" v-model="addForm.mobile" /></p>
      <el-button class="el-icon-close" @click="addWindow = false"
        >取消</el-button
      >
      <el-button class="el-icon-check" type="primary" @click="add"
        >确定</el-button
      >
    </div>
    <!-- 添加模态框完 -->
    <!-- 编辑模态框 -->
    <div class="editmtk" v-if="editWindow">
      <p>用户名: <input type="text" v-model="editForm.username" disabled/></p>
      <p>邮箱: <input type="text" v-model="editForm.email" /></p>
      <p>电话: <input type="text" v-model="editForm.mobile" /></p>
      <el-button class="el-icon-close" @click="editWindow = false"
        >取消</el-button
      >
      <el-button class="el-icon-check" type="primary" @click="editAdd"
        >确定</el-button
      >
    </div>
    <!-- 编辑模态框完 -->
  </div>
</template>

<script>
export default {
  name: "list_view",
  data() {
    return {
      userList: [],
      addForm: {},
      addWindow: false, //显示隐藏添加模态框
      editForm: {},
      editWindow: false,
      query: "", //搜索
      currentPage: 1, //默认第几页
      pageSize: 5,    //默认每页显示几条数据
      total: 0,
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    // 渲染函数==============================================================
    getUserList() {
      this.$http
        .get(
          "/users?" +
            `pagenum=${this.currentPage},&pagesize=${this.pageSize},&query=${this.query}`
        )
        .then((response) => {
          let { data: res } = response;
          if (res.meta.status == 200) {
            this.userList = res.data.users;
            this.total = res.data.total;
          }
        });
    },
    // 删除==================================================================================
    del(id) {
      this.$http.delete("/users/" + id).then(() => {
        this.getUserList();
      });
    },
    // 添加=======================================================================================
    async add() {
      console.log(this);
      let { data: res } = await this.$http.post("/users", this.addForm);
      console.log(res);
      if (res.meta.status == 201) {
        this.getUserList();
        // 关闭窗口
        this.addWindow = false;
        this.addForm = {};
      }
    },
    // 编辑回显==========================================================================================
    edit(id) {
      this.$http.get("/users/" + id).then((response) => {
        let { data: res } = response;
        this.editForm = res.data;
        this.editWindow = true;
      });
    },
    // 编辑提交=============
    async editAdd() {
      let { data: res } = await this.$http.put(
        "/users/" + this.editForm.id,
        this.editForm
      );
      if (res.meta.status == 200) {
        // 关闭编辑窗口
        this.editWindow = false;
        this.getUserList();
      }
    },
    // 搜索============================================================
    sousuo() {
      this.getUserList();
    },
    // 分页====================================================
    handleSizeChange(val) {
      this.pageSize = val;
      this.getUserList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getUserList();
    },
  },
};
</script>

<style>
table {
  width: 100%;
}
.top_add {
  float: right;
}
/* addmtk */
.addmtk {
  width: 400px;
  height: 400px;
  border-radius: 20px;
  background: paleturquoise;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.editmtk {
  width: 400px;
  height: 400px;
  border-radius: 20px;
  background: paleturquoise;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>