VUE2_商品管理

 HomenView.vue

<template>
  <div id="app">
    <el-container>
      <el-header
        >Header
        <el-button type="info" class="right_btn" @click="logout"
          >{{ this.$store.state.userInfo.username }}退出登录</el-button
        >
      </el-header>
      <el-container>
        <el-aside width="200px">
          <li><router-link to="/userList">用户管理</router-link></li>
          <li><router-link to="/rights">权限管理</router-link></li>
          <!-- <li><router-link to="/goods">商品管理</router-link></li>
          <li><router-link to="/orders">订单管理</router-link></li> -->
          <!-- <li><router-link to="/home">系统设置</router-link></li> -->
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      <el-footer>
        <yejiao></yejiao>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import yejiao from "../components/Footer.vue";
export default {
  methods: {
    logout() {
      //1.跳转到login页面
      this.$router.push("/login");
      //2.删除用户信息
      localStorage.removeItem("userInfo");
    },
  },
  components: {
    yejiao,
  },
};
</script>

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

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

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

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;
}

.right_btn {
  float: right;
  margin-top: 10px;
}

* {
  list-style-type: none;
}
</style>

loginView.vue

<template>
  <form action="#" @submit.prevent>
    <p>用户名: <input type="text" v-model="loginForm.username" /></p>
    <p>密码: <input type="password" v-model="loginForm.password" /></p>
    <p><button @click="login" plain>登录</button></p>
  </form>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
      },
    };
  },
  methods: {
    login() {
      this.$http.post("/login", this.loginForm).then((response) => {
        let { data: res } = response;
        if (res.meta.status === 200) {
          //添加一个提示框
          this.$notify({
            title: "登录成功",
            message: "恭喜你密码错误",
            type: "success",
          });
          //先保存用户信息(通过vuex mutation中定义的方法)
          this.$store.commit("saveUserInfo", res.data);
          //再跳转页面
          this.$router.push("/home");
        }
      });
    },
  },
};
</script>

<style>
</style>

 UserLitst.vue

<template>
  <div>
    <el-button type="primary" class="right_btn" @click="addFormVisible = true"
      >添加</el-button
    >
    <!-- :data:要渲染的数据 -->
    <el-table :data="userList" border style="width: 100%" tooltip-effect="dark">
      <el-table-column
        fixed
        prop="date"
        label="序号"
        type="index"
        :index="getIndex"
        style="width: 12.5%"
      >
      </el-table-column>
      <el-table-column prop="username" label="姓名" style="width: 12.5%">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" style="width: 12.5%">
      </el-table-column>
      <el-table-column prop="mobile" label="电话" style="width: 12.5%">
      </el-table-column>
      <el-table-column prop="role_name" label="角色" style="width: 12.5%">
      </el-table-column>
      <el-table-column fixed="right" label="操作" style="width: 12.5%">
        <template slot-scope="scope">
          <el-button @click="delUser(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加窗口 -->
    <el-dialog
      title="添加用户"
      :visible.sync="addFormVisible"
      @closed="clearBefore"
    >
      <el-form :model="addForm" :rules="addFormRules" ref="addForm">
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input v-model="addForm.username" label-width="200px"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "userlist_view",
  methods: {
    delUser(row) {
      console.log(row);
      this.$http.delete("/users/" + row.id).then(() => {
        this.getUserList();
      });
    },
    getUserList() {
      this.$http.get("/users?pagenum=1&pagesize=10").then((response) => {
        let { data: res } = response;
        //将获取到的列表赋值给userList
        this.userList = res.data.users;
      });
    },
    getIndex(index) {
      return index + 1;
    },
    add() {
      this.$refs["addForm"].validate(async (valid) => {
        //提交到服务器前先进行表单验证
        if (valid) {
          //发送请求
          await this.$http.post("/users", this.addForm).then((response) => {
            let { data: res } = response;
            console.log(res);
            //更新用户列表
            this.getUserList();
          });
          this.addFormVisible = false;
          this.addForm = {};
        } else {
          console.log("请仔细检查");
          return false;
        }
      });
    },
    clearBefore() {
      this.addForm = {};
    },
  },
  created() {
    this.getUserList();
  },
  data() {
    return {
      userList: [],
      addForm: {},
      formLabelWidth: "120px", //-->控制表单项宽度
      addFormVisible: false, //-->控制添加窗口显示隐藏
      //-->表单验证规则
      addFormRules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        mobile: [
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: "请输入正确的号码格式",
            trigger: "blur",
          },
        ],
      },
    };
  },
};
</script>

<style>
.right_btn {
  float: right;
}
</style>

路由配置文件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: "/login"
  },
  {
    path: '/home',
    name: 'home_view',
    component: () => import('../views/HomeView.vue'),
    children: [
      {
        path: '/userList',
        name: "list_view",
        component: () => import('../views/UserListView.vue')
      },
    ]
  },
  {
    path: '/login',
    name: 'login_view',
    component: () => import('../views/LoginView.vue')
  }
]

const router = new VueRouter({
  routes
})

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {
  return originalPush.call(this, location).catch(err => err)
}

//控制是否有token-->除了login页以外所有页面
router.beforeEach((to, from, next) => {
  if (to.path === "/login") return next();
  let userInfo = localStorage.userInfo && JSON.parse(localStorage.userInfo);
  let token = userInfo.token;
  //如果没有token,跳转到登录页
  if (!token) {
    next("/login");
  }
  next();
})



export default router

vuex配置文件

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: localStorage.userInfo ? JSON.parse(localStorage.userInfo) : {}
  },
  getters: {
  },
  mutations: {
    saveUserInfo(state, userInfo) {
      state.userInfo = userInfo;
      localStorage.userInfo = JSON.stringify(userInfo);
    }
  },
  actions: {
  },
  modules: {
  }
})

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)
Vue.config.productionTip = false
//设置全局默认地址
axios.defaults.baseURL = 'http://www.wuhaijun888.com:8888/api/private/v1/';
//设置全局请求头
// axios.defaults.headers.common['Authorization'] = store.state.userInfo.token;
//在Vue的原型上添加axios-->可以在全局使用this.$http发送请求
Vue.prototype.$http = axios;

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  //在请求前设置请求头
  let token = store.state.userInfo.token;
  console.log(token);
  if (token) {
    config.headers.Authorization = token;
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, 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>