vue接口

Vue是一个用于构建用户界面的渐进式JavaScript框架。它不提供特定的接口，而是可以与各种后端技术进行交互，包括使用RESTful API接口进行数据交互。 要在Vue中使用接口，可以按照以下步骤进行操作： 1. 安装axios：Axios是一个用于发起HTTP请求的JavaScript库。可以使用npm或者yarn安装axios。 ```shell npm install axios ``` 2. 在Vue组件中引入axios： ```javascript import axios from 'axios' ``` 3. 使用axios发送HTTP请求： ```javascript axios.get('/api/users') .then(response => { // 请求成功处理逻辑 }) .catch(error => { // 请求失败处理逻辑 }) ``` 这是一个简单的GET请求示例，您可以根据需要使用不同的HTTP方法（如GET、POST、PUT、DELETE等）和参数来发送请求。 4. 处理请求返回的数据： ```javascript axios.get('/api/users') .then(response => { const data = response.data // 处理返回的数据 }) .catch(error => { // 请求失败处理逻辑 }) ``` 您可以在成功处理逻辑中处理返回的数据，例如将数据保存到Vue组件的data属性中，或者渲染到页面中。 以上是使用axios进行接口请求的基本步骤，当然还可以进行更多高级的配置，例如设置请求头、请求拦截器、响应拦截器等。

这是post接口

这是get接口

 <div class="login">

    <div class="box">

   <h2>mall-admin</h2>

    <el-form

      :model="ruleForm"

      :rules="rules"

      ref="ruleForm"

      class="demo-ruleForm"

    >

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

        <el-input

         placeholder="请输入用户名"

        v-model="ruleForm.name"

         prefix-icon="el-icon-user-solid"

          ></el-input>

      </el-form-item>

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

        <el-input

        v-model="ruleForm.password"

         placeholder="请输入密码"

          prefix-icon="el-icon-lock"

          show-password

          ></el-input>

      </el-form-item>

      <el-form-item>

        <el-button class="login-btn" type="primary" @click="submitForm('ruleForm')"

          >登录</el-button >

      </el-form-item>

    </el-form>

</div>

  </div>

</template>

<script>

import axios from 'axios'

export default {

    name:"LoginView",

  data() {

    return {

      ruleForm: {

        name: "",

        password:"",

 

      },

      rules: {

        name: [

          { required: true, message: "请输入用户名", trigger: "blur" },

        ],

        password: [

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

        ],

      },

    };

  },

 // res.data.gradeDetail.gradeDetail

  methods: {

    submitForm(formName) {

     //post请求

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

       if( valid ){

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

          //传参

      username:this.ruleForm.name,

      password:this.ruleForm.password,

    })

    .then(res=>{

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

      {

       

        alert("登陆成功");

        this.$route.push("/")

      }

     

     

    })

        } else {

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

          return false;

        }

      });

    },

   

  },

};

</script>

<style>

.login{

    display: flex;

    justify-content: center;

}

.box{

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

    width: 400px;

    padding: 50px;

    margin-top: 100px;

}

.box h2{

    text-align: center;

    color: #409EFF;

}

.login-btn{

    width: 100%;

}

</style>

 <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>