wanzheng

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

import axios from 'axios';
axios.defaults.baseURL = 'http://122.112.253.28:8085/'
Vue.prototype.myaxios = axios;//把axios挂载到vue的原型
import request from './utils/request';
Vue.prototype.$axios = request;
import qs from 'qs';
Vue.prototype.$qs = qs;

Vue.use(ElementUI);
Vue.config.productionTip = false

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

//router.is
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Login from './views/Login.vue'
import userlist from '@/components/userlist.vue'
Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/Login'
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    }, {
      path: '/home',
      name: 'home',
      component: Home,
      children: [{
        path: '/userlist',
        name: 'userlist',
        component: userlist,
      }]
    },
  ]
})

router.beforeEach((to, from, next) => {
  if (to.path === '/Login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/Login')
  next()
})
export default router;

//request.js
/**
 * 基于 axios 封装的请求模块
 */
import axios from 'axios'
const getaxios = axios.create({
    baseURL: 'http://122.112.253.28:8085/api/', // 请求的基础路径
    headers: {
        Authorization: window.sessionStorage.getItem('token')
    }
});

// 导出请求方法  export  import
export default getaxios

//Home.vue
<template>
  <div class="home">
    <el-container>
      <el-header>XX管理系统</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item index="1-1" @click="tiao">用户列表</el-menu-item>
              <el-menu-item index="1-2">短信列表</el-menu-item>
              <el-menu-item index="1-3">收件人列表</el-menu-item>
            </el-submenu>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {},
  methods: {
    tiao() {
      this.$router.push("/userlist");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style scoped>
.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: 200px;
}

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

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>

//Login.vue
<template>
  <div class="login">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm"
    >
      <h2 style="text-align: center">登录</h2>
      <el-form-item prop="userAccount">
        <el-input placeholder="请输入账号" v-model="ruleForm.userAccount">
          <template slot="prepend"><i class="el-icon-user-solid"></i></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="passWord">
        <el-input placeholder="请输入密码" v-model="ruleForm.passWord">
          <template slot="prepend"><i class="el-icon-lock"></i></template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="checked">保持登录状态</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button
          style="width: 100%"
          size="mini"
          type="primary"
          @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "login",
  data() {
    return {
      checked: true,
      ruleForm: {
        userAccount: "",
        passWord: "",
      },
      rules: {
        userAccount: [
          { required: true, message: "请输入账号", trigger: "blur" },
        ],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    async submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // const data = this.$axios.post('/api/manager/admin/login',this.ruleForm);
          const { data: res } = await this.$axios({
            url: "/manager/admin/login",
            data: this.$qs.stringify(this.ruleForm),
            method: "post",
          });
          if (res.code == 1) {
            this.$message({
              message: "登录成功",
              type: "success",
            });
            sessionStorage.setItem("token", res.data.token);
            this.$router.push("/home");
          } else {
            this.$message({
              message: "登录失败",
              type: "error",
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.login {
  background-image: url(" ") !important;
}
.el-form {
  background: white;
  width: 20%;
  padding: 30px;
  border-radius: 10px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
}
</style>

//userlist.vue
<template>
  <div class="">
    <!-- 面包屑导航 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb> -->
    <bread title1="首页" title2="用户管理" title3="用户列表"></bread>
    <!-- 卡片视图区域 -->
    <el-card style="margin-top: 20px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" clearable v-model="searchInput">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button style="" type="primary" @click="dialogVisible = true"
            >添加用户</el-button
          >
        </el-col>
      </el-row>
      <!-- 用户 -->
      <el-table :data="tableData" style="width: 90%; margin: 0 auto">
        <!-- email: "hello11@bdqn.com"
                 id: 2 
                 identityCode: "130406198302141869"     
                 loginName: "admin" 
                 mobile: "1583233515" 
                 password: "123" 
                 sex: 0 
                 type: 1 
                 userName: "admin" -->
        <el-table-column prop="id" label="编号" width="200"> </el-table-column>
        <el-table-column prop="loginName" label="登录名" width="200">
        </el-table-column>
        <el-table-column prop="userName" label="昵称" width="200">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="200">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="toView(scope.row)"
              >修改</el-button
            >
            <el-button type="danger" size="mini" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加 -->
      <el-dialog
        @close="resetForm"
        title="添加用户信息"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form
          :rules="rules"
          ref="userFormRef"
          label-width=" 80px "
          :model="userForm"
        >
          <el-form-item label="登录名" prop="loginName">
            <el-input v-model="userForm.loginName"></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="userName">
            <el-input v-model="userForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email"></el-input>
          </el-form-item>
          <el-form-item label="身份证" prop="identityCode">
            <el-input v-model="userForm.identityCode"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="userForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userForm.password"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio v-model="userForm.sex" label="1">男</el-radio>
            <el-radio v-model="userForm.sex" label="0">女</el-radio>
          </el-form-item>
          <el-form-item label="权限" prop="type">
            <el-select v-model="userForm.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary " @click="addUser">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改 -->
      <el-dialog
        @close="resetForm"
        title="修改用户信息"
        :visible.sync="dialogVisible2"
        width="30%"
      >
        <el-form
          :rules="rules"
          ref="userFormRef"
          label-width=" 80px "
          :model="userForm"
        >
          <el-form-item label="登录名" prop="loginName">
            <el-input v-model="userForm.loginName"></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="userName">
            <el-input v-model="userForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email"></el-input>
          </el-form-item>
          <el-form-item label="身份证" prop="identityCode">
            <el-input v-model="userForm.identityCode"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="userForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userForm.password"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio v-model="userForm.sex" label="1">男</el-radio>
            <el-radio v-model="userForm.sex" label="0">女</el-radio>
          </el-form-item>
          <el-form-item label="权限" prop="type">
            <el-select v-model="userForm.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary " @click="updateUser">确 定</el-button>
        </span>
      </el-dialog>

      <!-- //分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        :page-sizes="[2, 5, 10]"
        style="text-align: center; margin-top: 30px"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="sizes,prev, pager, next "
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  created: function () {
    this.getDate();
  },
  methods: {
    //修改调取收据
    toView(data) {
      console.log(data);
      this.userForm.email = data.email; //邮箱
      this.userForm.id = data.id; //编号
      this.userForm.identityCode = data.identityCode; //身份证
      this.userForm.loginName = data.loginName; //登录名
      this.userForm.mobile = data.mobile; //手机
      this.userForm.password = data.password; //密码
      this.userForm.userName = data.userName; //用户名
      this.userForm.sex = data.sex.toString(); //性别
      this.userForm.type = data.type.toString(); //用户类型 管理员，普通用户
      this.dialogVisible2 = true;
    },
    resetForm() {
      //清空数据
      this.$refs["userFormRef"].resetFields();
      this.dialogVisible = false;
    },
    updateUser() {
      this.$refs["userFormRef"].validate((valid) => {
        if (valid) {
          var url = "http://122.112.253.28:8080/EasyBuy/AddorUpdateUserServlet";
          this.myaxios({
            url: url,
            method: "post",
            params: this.userForm,
          }).then((res) => {
            console.log(this.userForm);
            console.log(res);
            if (res.data == true) {
              this.$message({
                message: "用户修改成功",
                type: "success",
              });
              this.getDate();
              this.dialogVisible2 = false;
            } else {
              this.$message({
                message: "用户修改失败",
                type: "error",
              });
            }
          });
        } else {
          // this.dialogVisible = false;
          // console.log('error submit!');
          return false;
        }
      });
    },
    addUser() {
      this.$refs["userFormRef"].validate((valid) => {
        if (valid) {
          var url = "AddorUpdateUserServlet";
          this.myaxios({
            url: url,
            method: "post",
            params: this.userForm,
          }).then((res) => {
            console.log(this.userForm);
            console.log(res);
            if (res.data == true) {
              this.$message({
                message: "用户添加成功",
                type: "success",
              });
              this.getDate();
              this.dialogVisible = false;
            } else {
              this.$message({
                message: "用户添加失败",
                type: "error",
              });
            }
          });
        } else {
          // this.dialogVisible = false;
          // console.log('error submit!');
          return false;
        }
      });
      // console.log(this.userForm)
    },
    handleSizeChange(size) {
      this.pageSize = size;
      //切换每页显示条数
    },
    //切换页码
    handleCurrentChange(num) {
      this.pageNum = num;
      this.getDate();
    },
    //加载数据
    getDate() {
      this.myaxios
        .get("UserListServlet?page=" + this.pageNum + "&limit=" + this.pageSize)
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.count; //赋值总记录
        });
    },
    //删除
    del(row) {
      4;
      // console.log(res);
      // if (res.data == true) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const url = "DeleteUserServlet?id=" + row.id;
        this.myaxios
          .get(url)
          .then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getDate();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
        // }
      });
    },
  },
  data() {
    //手机验证
    var validateMobile = (rule, value, callback) => {
      const regMoblie = /^(0|86|17951)?(13[0-9]15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMoblie.test(value)) {
        return callback();
      }

      callback(new Error("请输入合法的手机号"));
    };
    //邮箱验证
    var validateEmail = (rule, value, callback) => {
      // console.log(rule); //验证规则对象
      // console.log(value); //输入框的值
      // console.log(callback); //回调方法
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+([a-zA-Z0-9_-])+/;
      if (regEmail.test(value)) {
        //合法的邮箱
        return callback();
      }
      callback(new Error("请输入合法的邮箱"));
    };
    return {
      userForm: {
        email: "", //邮箱
        id: "", //编号
        identityCode: "", //身份证
        loginName: "", //登录名
        mobile: "", //手机
        password: "", //密码
        sex: "1", //性别
        type: "", //用户类型 管理员，普通用户
        userName: "", //用户名
      },
      searchInput: "",
      rules: {
        loginName: [
          {
            required: true,
            message: "请输入登录名",
            trigger: "blur",
          },
        ],
        userName: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
          {
            //验证邮箱格式
            validator: validateEmail,
            trigger: "blur",
          },
        ],
        identityCode: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            //验证手机格式
            validator: validateMobile,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
          },
        ],
        type: [
          {
            required: true,
            message: "请选择用户类型",
          },
        ],
      },
      options: [
        {
          value: "1",
          label: "管理员",
        },
        {
          value: "0",
          label: "普通用户",
        },
      ],

      dialogVisible: false, //显示添加用户对话框
      dialogVisible2: false, //显示修改用户对话框
      pageNum: 1, //默认显示第一页
      pageSize: 5, //默认显示条数
      tableData: [],
      total: 0, //总记录
    };
  },
};
</script>