vue项目简单的后台管理系统

车辆的后台管理系统实现对车辆信息的增删改查

登录界面，

登录界面我使用了组件的方式将login的路径作为默认跳转路径，用户登录系统，需要与数据库（这里我用的是mongodb数据库）的登录信息进行比照通过则可进入系统，同时管理员的姓名以及个人签名会展现在上方导航栏中，这里我使用了vuex来解决数据传递的问题

首页

这里我就使用element-ui建了一个轮播图

个人管理

设置个人信息也就是一个添加管理员的功能，登录可以使用新建的账号，点击提交将sizeFrom表单里面的数据通过axiso传递过去,接口进行接收，最终增加在数据库上

app.post('/loginAdd', urlencodedParser, (req, res) => {
    let {
        username,
        password,
        birthday,
        date,
        desc
    } = req.body.sizeForm
    console.log(username,
        password, birthday,
        date,
        desc);
    login.insert([{
        username: username,
        password: password,
        birthday: birthday,
        date: date,
        desc: desc
    }], (error, result) => {
        res.send('ok')
    })
})

 onSubmit() {
      alert("成功保存您的信息");
      axios
        .post("http://localhost:8080/api/loginAdd", { sizeForm: this.sizeForm })
        .then(
          (value) => {
            if (value.data === "ok") {
              console.log("ok");
            }
          },
          (error) => {
            console.log(error);
          }
        );
      this.sizeForm = {};
    },

用户管理和车辆管理

实现方法相同，只是所使用的表不同罢了我举一个例子，使用axios请求把数据拿到，v-for渲染，状态判断一下return Time=‘’？0：1 ，新增修改是一个方法获取唯一的carId来进行操作。这里有个更新的问题，如何操作结束后就展现新的表单？我首先想到的是钩子函数updated，但这样会使搜索出不来，每次搜索的内容停格时间较短，我又想到设置了一个定时器将每秒间隔设置为0，每次a添加都调用一次，但有一点要注意的是使用定时器在程序结束后一定要销毁定时器这样做的好处是避免内存泄漏和容易维护代码

 //新增车辆信息
    add() {
      axios
        .post("http://localhost:8080/api/addCarNum", { addForm: this.addForm })
        .then((value) => {
          console.log(value);
        })
        .catch((err) => {
          console.log(err);
        });
      this.addBool = false;
      this.setTime();
      this.addForm = {};
    },

//定时器
 setTime() {
      this.timer = setTimeout(() => {
        console.log(111);
        axios.get("http://localhost:8080/api/car").then(
          (response) => {
            this.tableData = response.data;
            response.data.forEach((element) => {
              this.element = element;
            });
          },
          (error) => {
            console.log("服务器获取数据失败" + error.message);
          }
        );
      }, 0);
    },

//销毁定时器
  beforeDestroy() {
    this.stopTime()
  },

图像展示

这里我使用了echars，从数据库拿到车辆信息，使用数组去重找出车辆的几种类型动态赋值给xdata，通过data属性来整个组件使用，再通过将每一种类型的车辆计算出数量来给ydata就可以达到最终的动态柱状图了，柱状图我就不多描述了，官网信息都有

mounted() {
    axios.get("http://localhost:8080/api/car").then(
      (response) => {
        response.data.forEach((element) => {
          this.tData.push(element.type);
        });
        this.tData = this.sum(this.tData);
        this.tData.forEach((element) => {
          this.xData.push(element.split(":")[0]);
          this.sData.push(element.split(":")[1]);
        });
        this.echartsInit();
      },
      (error) => {
        console.log("错误啦" + error.message);
      }
    );
  },