vue+tp5實(shí)現(xiàn)簡(jiǎn)單登錄功能
本文實(shí)例為大家分享了vue+tp5實(shí)現(xiàn)簡(jiǎn)單登錄功能的具體代碼,供大家參考,具體內(nèi)容如下
準(zhǔn)備工作:安裝vue-cli,element-ui,package.json中如圖所示,看著安裝吧
1.在src目錄下新建一個(gè)views放置頁(yè)面
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中恢復(fù)成如下圖:
4.在/src/views/login/index.vue中開始寫代碼(找一個(gè)登陸模板):
<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: '錯(cuò)誤', message: '用戶名不能為空' }); return false } else if (!password) { this.$notify.error({ title: '錯(cuò)誤', message: '密碼不能為空' }) return false } else { // 將信息傳到后臺(tái)進(jìn)行處理 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中設(shè)置proxytable,利用axios進(jìn)行跨域請(qǐng)求
proxyTable: { '/api/*': { // api為代理接口 target: 'http://localhost:8085/index.php/index', // 這里我代理到本地服務(wù) changeOrigin: true, pathRewrite: { // 這里是追加鏈接,比如真是接口里包含了 /api,就需要這樣配置. '^/api': '/', // 和下邊兩種寫法,因人而異根據(jù)需求。 // 等價(jià)于 /api + /api == http://localhost:54321/api // 如果寫為 '^/api' : '/' // 等價(jià)于 /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后臺(tái)中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]); } }
注意:如果設(shè)置的proxytable不起作用,驗(yàn)證該接口是否正確,然后在cmd中找到項(xiàng)目目錄然后運(yùn)行:npm run dev
效果:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue實(shí)現(xiàn)未登錄跳轉(zhuǎn)到登錄頁(yè)面的方法
- Vue學(xué)習(xí)之路之登錄注冊(cè)實(shí)例代碼
- vue 微信授權(quán)登錄解決方案
- vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題解決方法
- vue實(shí)現(xiàn)登錄后頁(yè)面跳轉(zhuǎn)到之前頁(yè)面
- 使用Vue.js和Element-UI做一個(gè)簡(jiǎn)單登錄頁(yè)面的實(shí)例
- vue路由跳轉(zhuǎn)時(shí)判斷用戶是否登錄功能的實(shí)現(xiàn)
- Vue 實(shí)現(xiàn)登錄界面驗(yàn)證碼功能
- vue實(shí)現(xiàn)登錄頁(yè)面的驗(yàn)證碼以及驗(yàn)證過程解析(面向新手)
- vue.js實(shí)現(xiàn)用戶評(píng)論、登錄、注冊(cè)、及修改信息功能
相關(guān)文章
詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件
這篇文章主要介紹了詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11Vue.js中class與style的增強(qiáng)綁定實(shí)現(xiàn)方法
由于Class和Style綁定使用頻繁,字符串拼接麻煩且易錯(cuò),因此,Vue.js 做了專門的增強(qiáng),表達(dá)式結(jié)果的類型除了字符串之外,還可以是對(duì)象或數(shù)組,本文給大家講解Vue.js中class與style的增強(qiáng)綁定知識(shí),感興趣的朋友一起看看吧2023-04-04Vue?Vuex搭建vuex環(huán)境及vuex求和案例分享
這篇文章主要介紹了Vue?Vuex搭建vuex環(huán)境及vuex求和案例分享,?Vue?中實(shí)現(xiàn)集中式狀態(tài)管理的一個(gè)?Vue?插件,對(duì)?vue?應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理,下文相關(guān)介紹,需要的朋友可以參考一下2022-04-04vue2實(shí)現(xiàn)封裝動(dòng)態(tài)表單組件
這篇文章主要介紹了vue2實(shí)現(xiàn)封裝動(dòng)態(tài)表單組件,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決
這篇文章主要介紹了vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue實(shí)現(xiàn)拖動(dòng)左側(cè)導(dǎo)航欄變大變小
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖動(dòng)左側(cè)導(dǎo)航欄變大變小,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03