【vue技术】vue宠物领养管理系统_基于uview的宠物寄养

1、引言

你是否有过相关设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

vue宠物领养管理系统采用vue技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面 
vue宠物领养管理系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。

2.3、作品技术介绍

使用vue技术开发的网站，涉及常见的vue指令，如v-for，v-if，v-html等的使用，包含watch，计算属性等常见功能的开发，以及组件的使用，使用vue相关全家桶的使用，运用了v-router来作为路由，完全符合常见的网站开发技术。做了 form 表当验证（1）. 手机号和密码不能为空的失焦提示（2）. 手机号用了正则表达式做判断，使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。

3、作品演示：

作品图片演示：

3.1、登录页

登录页相关代码：

<template>
  <div class="admininformanage">
    <!-- 管理员信息管理 -->
    <div class="adincontain">
      <div class="addadmin">
        <p class="add" @click="dialogFormVisible = true">添加管理员</p>
        <!-- 添加管理员对话框 -->
        <el-dialog title="添加管理员" :visible.sync="dialogFormVisible">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
          >
            <el-form-item prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="管理员名称"
              ></el-input>
            </el-form-item>
            <el-form-item prop="pass">
              <el-input v-model="ruleForm.pass" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input
                v-model="ruleForm.phone"
                placeholder="手机号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="address">
              <el-input
                v-model="ruleForm.address"
                placeholder="地址"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="普通管理员"></el-radio>
                <el-radio label="超级管理员"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
      <!-- 管理员表格信息 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="管理员" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.admin }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="住址" width="280">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="open">编辑</el-button>
            <el-popconfirm title="确定删除此管理员吗？">
              <el-button
                size="mini"
                type="danger"
                slot="reference"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "AdminInforManage",
  data() {
    return {
      tableData: [],
      ruleForm: {
        name: "",
        pass: "",
        phone: "",
        address: "",
        resource: "",
      },
      dialogFormVisible: false,
      rules: {
        name: [
          { required: true, message: "请输入管理员名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  beforeMount() {
    // 获取数据
    this.axios.get("/admininformanage").then((res) => {
      // console.log(typeof res.data.admin[0].phone);
      this.tableData = res.data.admin;
    });
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    open() {
      this.$prompt("请输入手机号", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^1[3-9]\d{9}$/,
        inputErrorMessage: "请输入正确手机号",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "你的手机号是: " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
  },
};
</script>
 
<style scoped lang="scss">
.admininformanage {
  width: 100%;
  height: 100%;
  background-color: white;
  .adincontain {
    margin: 0px 30px 30px 30px;
  }
  .addadmin {
    display: flex;
    justify-content: flex-end;
    .add {
      font-size: 14px;
      padding: 3px;
      border-radius: 5px;
      border: 1px solid #d3d5d7;
      cursor: pointer;
    }
  }
}
</style>

后台管理首页：

 后台首页相关代码：

<template>
  <div class="home">
    <el-container class="container">
      <el-aside width="200px">
        <!-- 侧边栏组件 -->
        <home-aside></home-aside>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
          <div class="headerleft">
            <p><img src="./images/rabbit.png" class="headerlogo" /></p>
            <input
              type="text"
              placeholder="请输入你想要搜索的内容..."
              class="headersearch"
            />
          </div>
          <div>
            <el-dropdown>
              <span type="primary">{{ loginuser }}</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click="exitLogin">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
 
        <el-main>
          <!-- 子路由出口 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
 
<script>
import HomeAside from "./HomeAside";
export default {
  name: "Home",
  data() {
    return {
      loginuser: "登录账户",
    };
  },
  components: {
    HomeAside,
  },
  created() {
    this.loginuser = localStorage.getItem("loginuser");
  }
};
</script>
 
<style lang="scss">
.home {
  .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 60px;
    .headerleft {
      display: flex;
    }
    .headersearch {
      height: 20px;
      padding: 5px;
      outline: none;
      border: 0px;
      margin-top: 18px;
      border-bottom: 1px solid #e9eef3;
    }
    .headerlogo {
      margin-bottom: 12px;
    }
  }
  .el-aside {
    background-color: #001e34;
    color: #333;
    height: 100%;
    text-align: center;
  }
 
  .el-main {
    background-color: #e9eef3;
    color: #333;
  }
}
</style>

总结

以上就是本次项目的全部内容，需要交流或者免费获取代码请关注微信公众号：coding加油站，获取