vue后台管理

min.js 

 

router.index

                                                              store.index

   

login.页面

<template>
  <div class="login">
    <div class="login_box">
      <!-- 头像 -->
      <div class="avatar_box">
        <img src="./../assets/logo.png" alt="" />
      </div>
      <!-- 表单区域  登录 -->
      <el-form :model="loginForm" ref="login_form" class="login_form">
        <el-form-item prop="username">
          <el-input
            type="text"
            prefix-icon="el-icon-s-custom"
            v-model="loginForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            prefix-icon="el-icon-lock"
            v-model="loginForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="goToLogin">登录</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
      },
    };
  },
  methods: {
    async goToLogin() {
      const { data: res } = await this.$http.post("login", this.loginForm);
      this.$store.commit("login_form", res.data.username);
      window.sessionStorage.setItem("token", res.data.token);
      this.$router.push("Home");
    },
  },
};
</script>

<style scoped lang="less">
.login {
  height: 100vh;
  width: 100%;
  background: #2b4b6b;
  display: flex;
  justify-content: center;
  align-items: center;
  .login_box {
    width: 450px;
    height: 300px;
    background: #ffffff;
    border-radius: 5px;
    position: relative;
    .avatar_box {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 10px;
      box-sizing: border-box;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #eee;
      }
    }
    .login_form {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      .btns {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>

home页面

<template>
  <div class="home">
    <el-container>
      <el-header>
        <el-button type="warning" @click="die">退出</el-button>
        {{ this.$store.state.username }}
      </el-header>
      <el-container>
        <el-aside width="200px">
          <router-link to="/home/users">用户列表</router-link>
          <br />
          <br />
          <router-link to="/home/homeShow">图表展示</router-link>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
//  home页面
<script>
// @ is an alias to /src

export default {
  name: "Home",
  components: {},
  methods: {
    die() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

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

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
.el-button {
  float: right;
}
</style>

 components/users.vue

<template>
  <div class="home">
    <el-row>
      <el-col :span="10">
        <el-input
          placeholder="请输入内容"
          v-model="queryList.query"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="huoQu"
          ></el-button> </el-input
      ></el-col>
      <el-col :span="4">
        <el-button type="primary" @click="dialogFormVisible = true"
          >添加</el-button
        ></el-col
      >
    </el-row>
    <!-- 列表展示 -->
    <template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="username" label="姓名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="editAdd(scope.row)"
              >编辑</el-button
            >
            <el-button type="success" @click="dels(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 添加角色 -->
    <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
      <el-form :model="formList">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="formList.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="formList.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="formList.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth">
          <el-input v-model="formList.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="tianjiaAd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryList.pagenum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="queryList.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 编辑用户 -->
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisiblea">
      <el-form :model="formInfo">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            :disabled="true"
            v-model="formInfo.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="formInfo.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth">
          <el-input v-model="formInfo.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisiblea = false">取 消</el-button>
        <el-button type="primary" @click="bianJiAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  data() {
    return {
      tableData: [],
      queryList: {
        query: "",
        pagenum: 1,
        pagesize: 4,
      },
      //分页
      total: null,
      //添加角色
      dialogFormVisible: false,
      dialogFormVisiblea: false,
      formList: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      //编辑角色
      formInfo: {
        username: "",
        email: "",
        mobile: "",
      },
      formLabelWidth: "120px",
    };
  },
  components: {},
  methods: {
    //获取列表角色
    async huoQu() {
      const { data: res } = await this.$http.get("users", {
        params: this.queryList,
      });
      this.tableData = res.data.users;
      this.total = res.data.total;
    },
    //添加
    async tianjiaAd() {
      await this.$http.post("users", this.formList);
      this.huoQu();
      this.dialogFormVisible = false;
    },
    //删除
    async dels(id) {
      await this.$http.delete(`users/${id}`);
      this.huoQu();
    },
    //分页
    handleSizeChange(val) {
      this.queryList.pagesize = val;
      this.huoQu();
    },
    handleCurrentChange(val) {
      this.queryList.pagenum = val;
      this.huoQu();
    },
    //编辑
    editAdd(id) {
      this.formInfo = id;
      this.huoQu();
      this.dialogFormVisiblea = true;
    },
    //编辑确认
    async bianJiAdd() {
      const res = await this.$http.put(`users/${this.formInfo.id}`, {
        email: this.formInfo.email,
        mobile: this.formInfo.mobile,
      });
      this.huoQu();
      this.dialogFormVisiblea = false;
    },
  },
  mounted() {
    this.huoQu();
  },
};
</script>

components/echarts.vue

<template>
  <div>
    <div></div>
    <div style="width: 500px; height: 500px" ref="chart"></div>
  </div>
</template>

<script>
//局部引用
const echarts = require("echarts");
export default {
  data() {
    return {};
  },
  methods: {
    initCharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.chart);
      // 绘制图表
      myChart.setOption({
        title: { text: "" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
  },
  //一加载页面就调用
  mounted() {
    this.initCharts();
  },
};
</script>
<style></style>