前端路线--Vue(day20)

最新推荐文章于 2024-09-24 11:41:48 发布

喝西瓜汁的兔叽Yan

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量161

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Yan9_9/article/details/125216246

版权

前端专栏收录该内容

106 篇文章 5 订阅

订阅专栏

笔记

在这里插入图片描述

userlogin.vue

<!--  -->
<template>
  <div class="user_login">
    <div class="container">
      <div class="left">
        <!-- 左边轮播图 -->
        <el-carousel height="400px">
          <el-carousel-item>
            <img src="@/assets/images/vae01.jpg" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/vae02.jpg" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/vae03.jpg" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="right">
        <div class="title"><h2>好谷大咖管理系统</h2></div>
        <el-form
          :model="loginData"
          :rules="loginRules"
          ref="ruleForm"
          status-icon
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginData.username"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginData.password"
              show-password
              placeholder="密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="verifycode">
            <div class="verify">
              <el-input
                v-model="loginData.verifycode"
                placeholder=" 验证码"
                style="width: 60%"
              ></el-input>
              <img src="@/assets/images/0.png" alt="" />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              style="width: 100%"
              @click="submitForm('ruleForm')"
              >主要按钮</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      loginData: {
        username: "",
        password: "",
        verifycode: "",
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在6到20个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 12,
            message: "长度在 5 到 12 个字符",
            trigger: "blur",
          },
        ],
        verifycode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 表单验证的代码方法
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 跳转到layout/userlist
          this.$router.push("/layout/userlist");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss">
.user_login {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../../assets/images/bg.jpg");
  .container {
    width: 800px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -400px;
    margin-top: -200px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    .left {
      width: 400px;
      height: 400px;
      .el-carousel__item {
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .right {
      width: 300px;
      height: 400px;
      margin: 0px 50px;
      .title {
        margin: 20px 0px;
        text-align: center;
      }
      .verify {
        display: flex;
        justify-content: space-between;
        img {
          width: 100px;
          height: 40px;
        }
      }
    }
  }
}
</style>

LayoutView.vue

<!--  -->
<template>
  <div class="layout_page">
    <el-container>
      <el-header>好谷大咖管理系统</el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <el-menu
            :default-active="currentPath"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :unique-opened="true"
            :router="true"
            background-color="#0b172f"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu
              :index="menuData.path"
              v-for="menuData in menuDatas"
              :key="menuData.id"
            >
              <template slot="title">
                <i :class="menuData.icon"></i>
                <span>{{ menuData.title }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="menulist.path"
                  v-for="menulist in menuData.children"
                  :key="menulist.id"
                  >{{ menulist.title }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 右边主区域 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // 当前的路径,让对用的子菜单选中
      currentPath: "/layout/userlist",
      // 菜单的数据
      menuDatas: [
        {
          id: 1,
          title: "用户信息",
          path: "/layout/userlist",
          icon: "el-icon-user-solid",
          children: [
            {
              id: 1001,
              title: "用户列表",
              path: "/layout/userlist",
            },
            {
              id: 1002,
              title: "添加用户",
              path: "/layout/useradd",
            },
            {
              id: 1003,
              title: "用户等级",
              path: "/layout/userlevel",
            },
          ],
        },
        {
          id: 2,
          title: "产品信息",
          path: "/layout/productlist",
          icon: "el-icon-present",
          children: [
            {
              id: 2001,
              title: "产品列表",
              path: "/layout/productlist",
            },
            {
              id: 2002,
              title: "添加产品",
              path: "/layout/productadd",
            },
            {
              id: 2003,
              title: "分类列表",
              path: "/layout/category/list",
            },
            {
              id: 2004,
              title: "添加分类",
              path: "/layout/category/add",
            },
          ],
        },
      ],
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 侧边栏的方法
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 改变currentParh为当前路由
    this.currentPath = this.$route.path;
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss">
.layout_page {
  .el-header {
    line-height: 60px;
    background: #182c47;
    color: #fff;
    font-size: 20px;
  }
  .el-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .el-aside {
    background: #0b172f;
    position: relative;
    top: 60px;
    height: calc(100% - 60px);
    color: #fff;
    .el-menu {
      border-right: 0;
      .el-menu-item.is-active {
        background: #182744 !important;
        border-left: 3px solid #45e6c4;
      }
    }
  }
  .el-main {
    background: #fff;
    position: relative;
    top: 60px;
    height: calc(100% - 60px);
    background: #020e24;
    color: #fff;
  }
}
</style>

UserList.vue

<!--  -->
<template>
  <div class="user_list">
    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="margin: 0px 0px 20px"
      >
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">用户信息</a></el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        height="470"
      >
        <el-table-column prop="date" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="" label="用户头像" width="180">
          <template slot-scope="scope">
            <img
              :src="scope.row.imgsrc"
              alt=""
              style="width: 60px; height: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="" label="是否可用" width="180">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_show"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开"
              inactive-text="关"
              active-value="1"
              inactive-value="0"
            >
              >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >修改</el-button
            >
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block" style="margin: 20px auto">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          background
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // 表格的数据
      tableData: [
        {
          date: "2016-05-02",
          name: "许嵩",
          address: "上海市普陀区金沙江路 1518弄",
          imgsrc: require("@/assets/images/vae01.jpg"),
          is_show: 1,
        },
      ],
      // 分页的数据
      currentPage1: 1,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 分页的事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" >
</style>

Navicat新建表

在这里插入图片描述

后台接口

let express = require("express");
let { request } = require("../database/db");
let md5 = require("md5");
let moment = require("moment");
let router = new express.Router();

// 接口:http://localhost:3000/api/userlist?page=1&size=3
//查询mysql数据库的数据
router.get("/userlist", async (req, res) => {
    let sql = `SELECT * from hg_users`;
    let result = await request(sql);
    res.json({
        status: 200,
        msg: "请求成功",
        data: result
    })
});
// 接口:http://localhost:3000/api/useradd
router.post("/useradd", async (req, res) => {
    // console.log(req.body);
    let { username, phone, age, email, address, is_show } = req.body;
    //在插入前需要先判断数据库有没有该数据,有的话给一个提醒,，没有的话插入
    let isexistSql = `select * from hg_users where username="${username} "`
    let is_exist = await request(isexistSql); //得到的是一个数组
    if (is_exist.length > 0) {
        res.json({
            status: 4002,
            msg: "用户已存在,请去登录"
        })
    } else {
        let password = md5(req.body.password); //密码加密
        let create_time = moment().format("YYYY-MM-DD hh:mm:ss"); //格式化添加时间
        // 插入的sql语句
        let add_sql = `insert into hg_users 
                        set username="${username}",
                        pwd="${password}",
                        phone="${phone}" ,
                        age="${age}",
                        email="${email}",
                        address="${address}",
                        is_show="${is_show}",
                        create_time="${create_time}"`
        // 调用request方法将数据插入到mysql数据库
        let result = await request(add_sql);
        console.log(result);
        if (result.affectedRows == 1) {
            res.json({
                status: 200,
                msg: "插入成功",
            })
        } else {
            res.json({
                status: 4001,
                msg: "插入失败",
            })
        }
    }
})
/* 
    [Object: null prototype] {
        username: '小美',
        password: '156963',
        phone: '15685632159',
        age: '20',
        email: '1101324177@qq.com',
        address: '郑州二七区',
        is_show: '1'
}



OkPacket {
  fieldCount: 0,
  affectedRows: 1,
  insertId: 8,
  serverStatus: 2,
  warningCount: 0,
  message: '',
  protocol41: true,
  changedRows: 0
}
    */


//--------------------------------------------------------------------------------------
// myadmin好谷大咖管理系统的接口
// 接口:http://localhost:3000/api/menulist
//查询mysql数据库的数据、
router.get("/menulist", async (req, res) => {
    let sql = `SELECT * from haogu_menus where pid=0`;
    let result = await request(sql);
    // 将result数组遍历出来并且把pid为他们id的给放进数组里
    for (let i = 0; i < result.length; i++) {
        let sql2 = `select * from haogu_menus where pid=${result[i].id}`;
        let result2 = await request(sql2);
        result[i].children = result2;
    }
    // console.log(result);
    res.json({
        status: 200,
        msg: "查询成功",
        data: result
    });

});


module.exports = router;