vue+tp5 realizes simple login function

This article example shares the specific code of vue+tp5 to implement a simple login function for your reference. The specific content is as follows

Preparation: Install vue-cli, element-ui, as shown in package.json, just follow the installation

1. Create a views page in the src directory

2. Write in /src/router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '@/views/login/index.vue'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/login',
      component: login
    }
  ]
})

3. Restore app.vue to the following figure:

4. Start writing code in /src/views/login/index.vue (find a login template):

<template>
    <div id="app-1">
        <div class="content">
            <div class="content_input">
                <div class="title">
                    <p>Administrator login</p>
                </div>
                <el-input v-model="UserName" clearable placeholder="Username"></el-input>
                <el-input v-model="PassWord" clearable show-password placeholder="Password"></el-input>
                <div class="content_button">
                    <el-button type="primary" @click="SignIn">Login</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
import '@/assets/css/style.css'
const axios = require('axios')
export default {
  name: 'Login',
  data () {
    return {
      UserName: '',
      PassWord: ''
    }
  },
  methods: {
    SignIn () {
      let that = this
      let username = that.UserName
      let password = that.PassWord
      if (!username) {
        this.$notify.error({
          title: 'Error',
          message: 'Username cannot be empty'
        });
        return false
      } else if (!password) {
        this.$notify.error({
          title: 'Error',
          message: 'The password cannot be empty'
        })
        return false
      } else {
        // Pass the information to the backend for processing axios.post('/api/login/doLogin', {
          name: username,
          psw: password
        })
          .then(function (response) {
            console.log(response)
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    }
  }
}
</script>

5. Set proxytable in config/index.js and use axios for cross-domain requests

proxyTable: {
        '/api/*': { // api is a proxy interface target: 'http://localhost:8085/index.php/index', // Here I proxy to the local service changeOrigin: true,
            pathRewrite: {
              // This is to append a link. For example, if the interface really contains /api, this configuration is required.
              '^/api': '/', // and the following two ways of writing, it varies according to different people's needs.
              // Equivalent to /api + /api == http://localhost:54321/api
              // If written as '^/api': '/'
              // Equivalent to /api + / == http://localhost:54321/
              // /api here == http://localhost:54321
            }
        }
    },

6. /src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Router from 'vue-router'
import router from './router'
import axios from 'axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'font-awesome/css/font-awesome.min.css'
 
Vue.use(ElementUI)
Vue.use(Router)
 
Vue.config.productionTip = false
Vue.prototype.$axios = axios
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

7.In index/controller/Login.php in tp5 backend:

<?php
/**
 * Created by PhpStorm.
 * User: mx1
 * Date: 2021/11/9
 * Time: 15:21
 */
 
namespace app\index\controller;
 
 
use think\Controller;
 
class Login extends Controller
{
    public function doLogin(){
        $name=input('post.name');
        $psw=input('post.psw');
        return json([$name,$psw]);
    }
 
}

Note: If the proxytable you set does not work, verify that the interface is correct, then find the project directory in cmd and run: npm run dev

Effect:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue implements the method of jumping to the login page when not logged in
Vue learning road login registration example code
Vue WeChat authorization login solution
Vue+springboot front-end and back-end separation to achieve single sign-on cross-domain problem solution
Vue implements page jump to previous page after login
An example of using Vue.js and Element-UI to make a simple login page
Implementation of judging whether the user is logged in when vue routing jumps
Vue implements the verification code function of the login interface
Vue implements the verification code of the login page and the analysis of the verification process (for novices)
Vue.js implements user comment, login, registration, and information modification functions

<<: HTML embedded in WMP compatible with Chrome and IE detailed introduction

>>: 9 ways to show and hide CSS elements