用户登录界面制作

1.创建login.vue 组件

<template>
  <el-dialog
    :show-close="false"
    title="用户登录"
    :visible.sync="dialogFormVisible"
  >
    <el-form>
      <el-form-item label="用户名称" :label-width="formLabelWidth">
        <el-input v-model="user.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="用户密码" :label-width="formLabelWidth">
        <el-input v-model="user.password" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="login">登 录</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: true,
      formLabelWidth: "120px",
      user: { username: "", password: "" },
    };
  },
  methods: {
    //登录的方法
    login() {
      //定义常量保存url
      const url = "https://873d86bd-da8e-4cc3-9ae7-e795d4c26e13.mock.pstmn.io/login";

      //发送请求
      this.axios(url, {
        //携带的参数
        params: {
          username: this.user.username,
          password: this.user.password,
        },
      })
        .then((resp) => {
          console.log(resp);
          alert("登录成功");
          //成功 关闭对话框
          this.dialogFormVisible = false;

          //进行页面跳转,跳转到首页,在前端进行页面跳转 必须使用路由.
          this.$router.push('index'); 
        })
        .catch((error) => {
          //登录失败 提供消息提示
          this.$message.error("对不起!登录失败!");
        });
    },
  },
};
</script>

<style scoped></style>

2. 配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'

//导入Login.vue组件
import Login from "@/components/Login" //登录操作
import Index from "@/components/Index"
import Course from "@/components/Course"

Vue.use(VueRouter)

const routes = [
  //访问/.也跳转到login
  {
    path:"/",
    //redirect:"login", //重定向到login
    redirect:"index",
  },
  //登录操作路由
  {
    path:"/login",
    name:"login",
    component:Login
  },
   //登录主页
   {
    path:"/index",
    name:"index",
    component:Index,
    //添加子路由,使用children属性来表示子路由
    children:[
      //课程信息子路由
      {
        path:"/course",
        name:"course",
        component:Course

      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

3. 修改App.vue

<template>
  <div id="app">
    <!-- 根据访问路径，渲染路径匹配到的组件 -->
    <router-view></router-view>
  </div>
</template>

<style>

</style>

4. Postman搭建mock server

 

 

节选自拉钩教育JAVA系列课程