前端（Vue）-用户登录组件

最新推荐文章于 2024-10-09 14:43:05 发布

睡觉不打招呼

最新推荐文章于 2024-10-09 14:43:05 发布

阅读量948

点赞数 1

文章标签： vue ajax

本文链接：https://blog.csdn.net/YoungProMaker/article/details/108569190

版权

页面

先做两个输入框和一个按钮

	username: <input type="text"><br>
    password: <input type="text"><br>
    <input type="button" value="登录">

对应的js内容

需要为当前组件取个名，name：‘Login’
这里的内容基本都是面向数据编程的思想，想要将html获取js里的操作离不开data，但是在此处，data是一个方法

  name: 'Login',
  data () {
    return {
      username: '',
      password: ''
    }
  }

登录按钮

关于button的出发时间，还和MVVM（面向数据编程）一样，用一个methods：{}将点击事件包括其在内

  methods: {
    loginHandler () {
      var that = this
      // 发起Axios请求服务器端
      this.$axios.get('url: '*******', {
        params: {
          username: that.username,
          password: that.password
        }
      }).then(response => {
        if (parseInt(response.data.code) === 200) {
          // 一旦登录成功就要展示首页
          // 切换首页的路由
          // router: 路由器 管理当前应用中所有的路由
          alert(response.data.message)
          that.$router.replace('/home')
        } else {
          alert(response.data.message)
        }
      })
    }
  }

其中this.$axios.get中关于url后面我用“*”省略的就是与前端对应的后台Servlet类型文件的中定义的地址，而username和password后面的值是要作为参数参数被后台的getParameter（）获取的，要做到前后台一致，否则后台服务端收不到数据，也就无法验证，登录成功后就要跳转到主页，但是和以前学的html5不一样的是，这里是通过改变路由了实现跳转的，我的理解就是将当前页面里的组件换了，条状的知识服务器里的服务项目

改变路由

编写路由对象时一定要注意导入对应的组件，这里的文件是vue工程自带的，我们只要忘const routes = []里添加对象即可

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Login
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

这前端就OK了，后端的我下一期更吧