vue介绍

Vue是一个用于构建用户界面的JavaScript框架，它主要用于开发单页面应用（SPA）和响应式的Web应用程序。Vue具有以下主要用途： 1. 构建用户界面：Vue提供了一种简单、灵活的方式来构建交互式的用户界面。它使用了基于组件的架构，可以将界面分解为多个独立的组件，每个组件负责管理自己的状态和行为。 2. 数据驱动：Vue使用了响应式的数据绑定机制，可以将数据和DOM元素进行关联，当数据发生变化时，相关的DOM元素也会自动更新。这种数据驱动的方式可以简化开发过程，提高开发效率。 3. 组件化开发：Vue鼓励开发者将界面拆分为独立的组件，每个组件可复用、可组合，使得代码更加模块化、可维护性更高。Vue提供了丰富的组件库和组件化开发的工具，方便开发者进行组件的创建、组合和复用。 4. 轻量级：Vue的核心库只包含了视图层的功能，体积小巧，加载速度快。它采用了虚拟DOM技术，在性能方面也有很好的表现。 总之，Vue是一个功能强大、易用、灵活的前端框架，可以帮助开发者快速构建高质量的用户界面和交互式的Web应用程序。

<template>

    <div class="import">

      <div class="box">

        <h1>mall-admin</h1>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">

          <el-form-item prop="user">

            <el-input v-model="ruleForm.user" prefix-icon="el-icon-user-solid" placeholder="请输入账号" clearable></el-input>

          </el-form-item>

          <el-form-item prop="pwd">

            <el-input v-model="ruleForm.pwd" prefix-icon="el-icon-lock" show-password placeholder="请输入密码" clearable></el-input>

          </el-form-item>

          <el-form-item>

            <el-button type="primary" @click="submitForm('ruleForm')" class="i-btn">登录</el-button>

          </el-form-item>

          <!-- <el-form-item>

            <el-button type="primary" @click="submitForm('ruleForm')" class="z-btn">登录</el-button>

          </el-form-item> -->

        </el-form>

      </div>

    </div>

  </template>

  <script>

  import axios from 'axios';

  export default {

    name: "ImportView",

    data() {

      return {

        ruleForm: {

          user: '',

          pwd: ''

        },

        rules: {

          user: [

            { required: true, message: '请输入账号', trigger: 'blur' },

          ],

          pwd: [

            { required: true, message: '请输入密码', trigger: 'blur' }

          ]

        }

      };

    },

    methods: {

      submitForm(formName) {

        this.$refs[formName].validate((valid) => {

          if (valid) {

            axios.post('http://106.52.94.26:3001/user/login', {

              username: this.ruleForm.user,

              password: this.ruleForm.pwd

            })

              .then(res => {

                console.log(res)

                if (res.data.msg == "登录成功") {

                  this.$router.push("/")

                  this.$message({

                    message: '登录成功',

                    type:'success',

                    center: true,

                    showClose:true

                  });

                }

              })

              .catch(err => {

                console.log(err)

                if (err.response.data.msg == "用户不存在") {

                  this.$message({

                    message: '用户不存在',

                    type:'error',

                    center: true,

                    showClose:true

                  });

                } else if (err.response.data.msg == "密码错误") {

                  this.$message({

                    message: '密码错误',

                    type:'error',

                    center: true,

                    showClose:true

                  });

                }

              })

          } else {

            console.log('error submit!!');

            return false;

          }

        });

      },

    }

  }

  </script>

  <style scoped>

  .import {

    display: flex;

    justify-content: center;

  }

  .box {

    box-shadow: #ccc 0px 0px 8px;

    width: 500px;

    padding: 50px;

    margin-top: 200px;

  }

  .box h1 {

    text-align: center;

    color: #409EFF;

    margin-bottom: 20px;

  }

  .i-btn {

    width: 100%;

  }

  </style>

<template>
  <div id="app">
    <router-link to="/"></router-link>


    <div class="left-menu" v-if="$route.meta.isShowMenu">
      <router-link to="/">
        <div tabindex="1" class="ddclick">
          <img src="./assets/home.png" alt="">首页
        </div>
      </router-link>

      <router-link to="/commodity">
        <div tabindex="1" class="ddclick">
          <img src="./assets/commodity.png" alt="">商品
        </div>
      </router-link>

      <router-link to="/order">
        <div tabindex="1" class="ddclick">
          <img src="./assets/order.png" alt="">订单管理
        </div>
      </router-link>

      <router-link to="/user">
        <div tabindex="1" class="ddclick">
          <img src="./assets/user.png" alt="">用户列表
        </div>
      </router-link>
    </div>

    <div class="right">
      <div class="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="$route.meta.title !== '首页'">
            <a href="/">{{ $route.meta.title }}</a>
          </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="user">
          Admin
          <el-dropdown @command="exit">
            <img src="./assets/commodity.png" alt="">
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="individual">个人</el-dropdown-item>
              <el-dropdown-item command="quit">退出</el-dropdown-item>
              <el-dropdown-item command="import">输入框</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>

      <!-- </div> -->
      <router-view />
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  data() {
    return {

    }
  },
  methods: {
    toDetail() {
      //如何跳转到详情页 
      this.$router.push("/detail")
    },
    exit(command) {
      console.log(command)
      if (command == "individual") {
        this.$router.push('/login')
      } else if (command == "import") {
        this.$router.push('/import')
      }
    }
  },
  computed: {},
  created(){
    axios
    .get("接口地址")
    //成功的回调函数
    .then(function(res){
      console.log(res)
    })
    //失败的回调函数
    .catch(function(error){
      console.log(error);
    });
  },
};
</script>

<style lang="scss"> * {
   margin: 0;
   padding: 0;
 }

 #app {
   display: flex;
 }

 .left-menu {
   padding: 20px 20px 0;
   //让内边距和边框 不会影响
   box-sizing: border-box;
   width: 180px;
   background: #545c64;
   height: 100vh;
 }

 .left-menu img {
   width: 20px;
   height: 20px;
   margin-right: 8px;
 }

 .left-menu div {
   margin-bottom: 25px;
   display: flex;
   align-items: center;
 }

 .ddclick:focus {
   color: darkseagreen;
 }

 .left-menu a {
   text-decoration: none;
   color: white;
 }

 .left-menu a.router-link-exact-active {
   background: red;
 }

 .right {
   flex: 1;
 }

 .right .header {
   display: flex;
   justify-content: space-between;
   height: 60px;
   align-items: center;
   padding: 0 15px;
 }

 .right .header .user {
   display: flex;
   align-items: center;
 }

 .right .header img {
   width: 30px;
   margin-left: 15px;
 }</style>

运行版本APP