vue+tp5实现简单登录功能

本文实例为大家分享了vue+tp5实现简单登录功能的具体代码,供大家参考,具体内容如下

准备工作:安装vue-cli,element-ui,package.json中如图所示,看着安装吧

1.在src目录下新建一个views放置页面

2. 在/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.将app.vue中恢复成如下图:

4.在/src/views/login/index.vue中开始写代码(找一个登陆模板):

<template>
    <div id="app-1">
        <div class="content">
            <div class="content_input">
                <div class="title">
                    <p>管理员登录</p>
                </div>
                <el-input v-model="UserName" clearable placeholder="用户名"></el-input>
                <el-input v-model="PassWord" clearable show-password placeholder="密码"></el-input>
                <div class="content_button">
                    <el-button type="primary" @click="SignIn">登录</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: '错误',
          message: '用户名不能为空'
        });
        return false
      } else if (!password) {
        this.$notify.error({
          title: '错误',
          message: '密码不能为空'
        })
        return false
      } else {
        // 将信息传到后台进行处理
        axios.post('/api/login/doLogin', {
          name: username,
          psw: password
        })
          .then(function (response) {
            console.log(response)
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    }
  }
}
</script>

5.在config/index.js中设置proxytable,利用axios进行跨域请求

proxyTable: {
        '/api/*': {    // api为代理接口
            target: 'http://localhost:8085/index.php/index',    // 这里我代理到本地服务
            changeOrigin: true,
            pathRewrite: {
              // 这里是追加链接,比如真是接口里包含了 /api,就需要这样配置.
              '^/api': '/', // 和下边两种写法,因人而异根据需求。
              // 等价于    /api + /api  ==  http://localhost:54321/api
              // 如果写为 '^/api' : '/'
              // 等价于   /api + /  ==  http://localhost:54321/
              // 这里的 /api ==  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.tp5后台中index/controller/Login.php中:

<?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]);
    }

}

注意:如果设置的proxytable不起作用,验证该接口是否正确,然后在cmd中找到项目目录然后运行:npm run dev

效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue实现登录页面的验证码以及验证过程解析(面向新手)

    做成之后就 是这个样子 接下来上代码 创建一个组件.显示验证码图片 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>

  • vue实现登录后页面跳转到之前页面

    在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.

  • vue 微信授权登录解决方案

    背景 vue前后端分离开发微信授权 场景 app将商品分享到微信朋友圈或者分享给微信好友,用户点击页面时进行微信授权登陆,获取用户信息. 问题:没有固定的h5应用首页.授权后重定向url带参数并且很长 本人愚钝,开发过程中,尝试过很多方法,踩坑不足以形容我的心情,可以说每一次都是一次跳井的体验啊. 1.一开始是前端请求微信连接,返回code,然后code作为再去请求后台接口获取token,后面看到别人的博客说这个方法不好,最好就是直接请求后台接口,然后后台返回url做跳转,所以就采用了最传统的方

  • 使用Vue.js和Element-UI做一个简单登录页面的实例

    最近了解到Vue.js挺火的,有同学已经学习了,那我心里痒痒的也学习了一点,然后也学了一点Element组件,就做了简单的登录页面. 效果很简单: 代码如下: 前端页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" hr

  • Vue 实现登录界面验证码功能

    登录界面 SIdentify 创建验证码组件,实现绘画出图片验证码 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>

  • vue路由跳转时判断用户是否登录功能的实现

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

  • Vue学习之路之登录注册实例代码

    根据Vue.js + Element UI + MongoDB进行开发 P1 安装Vue-CLI Vue.js文档 利用Vue.js提供的一个官方命令行工具 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev Vue.js 主要目录结构 . ├

  • vue.js实现用户评论、登录、注册、及修改信息功能

    vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入后: 登入前: 登录框: 注册框: html代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href=&quo

  • vue实现未登录跳转到登录页面的方法

    环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转 例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给本地缓存存入的token判断,如果没有就跳转到登录页面,有的话就打开. 图示: 1.直接在url地址栏输入http://127.0.0.1:9000/#/home,但是页面会直接跳转到登录页,而且会带上参数. --------------------------------------------分

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

随机推荐