這篇文章主要介紹了vue中登錄注冊(cè)的示例分析,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的從化網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
步驟一
1.安裝腳手架:npm install vue-cli -g
2.wepack生成html模版:vue init webpack ' 文件名'
3.安裝axios、js-cookie、element-ui、stylus等等常用插件
步驟二
1.在main.js中引入router、element-ui等
import Vue from 'vue' import store from './store' //可以先忽略 import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({ el: '#app', router, store, render: h => h(App) })
2.可以寫組件了
<template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm login-container"> <el-form-item label="賬號(hào)" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="密碼" prop="pass"> <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { ruleForm: { name: '', pass: '' }, rules: { name: [ { required: true, message: '請(qǐng)輸入登錄賬號(hào)', trigger: 'blur' } ], pass: [ { required: true, message: '請(qǐng)輸入登錄密碼', trigger: 'blur' } ] } } }, }
步驟三
走到這一步就很懵逼了吧,,, 我也是,所以還是先看到效果先吧
1.注冊(cè)組件,在router文件這里
import Vue from 'vue' import Router from 'vue-router' import Login from 'components/login/index' const _import = require('./_import_' + process.env.NODE_ENV)//沒(méi)用上當(dāng)沒(méi)看見(jiàn)吧,我就是要寫這 Vue.use(Router) export const constantRouterMap = [ { path: '/', component:Login, name:'登錄' }, ] export default new Router({ routes: constantRouterMap })
emmmm....我猜組件應(yīng)該渲染出來(lái)了,很好!next
步驟四
關(guān)鍵性的步驟到了,看起來(lái)很難的vuex
1.第一步,先寫好接口方便調(diào)用,放在api文件夾里的login.js
import axios from 'axios' import { server } from './config' // 登陸 export const requestLogin = params => { return axios.post(server + '/jade/user/loginManage.action', params, { withCredentials: true, // 跨域憑證 transformRequest: [function(data) { let ret = '' for (const it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } // axios官方文檔關(guān)于怎么用每個(gè)參數(shù)是什么說(shuō)的特別特別清楚,我百度過(guò)的 return ret }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(res => { return Promise.resolve(res.data) }, err => { console.log(err) }) }
2.利用js-cookie插件來(lái)存儲(chǔ)用戶信息
import Cookie from 'js-cookie' export function getToken() { return Cookie.get(TokenKey) } export function setToken(token) { return Cookie.set(TokenKey, token) } export function removeToken() { return Cookie.remove(TokenKey) } export function getRole() { return sessionStorage.getItem('rules') }
3.好了可以寫actions了
import { requestLogin } from 'api/login' import { getToken,setToken,removeToken } from '../../utils/auth' const user = { state: { token: getToken(), name: '', avatar: '' }, mutations: { SET_TOKEN: (state, token) => { state.token = token } }, actions: { // 登錄 Login ({commit}, userInfo) { const account = userInfo.account const password = userInfo.checkPass return new Promise((resolve, reject) => { console.log(resolve) console.log(reject) let params = { account: account, password: password } requestLogin(params).then(response => { const data = response.result setToken(data.sid) sessionStorage.setItem('accountType', data.accountType) commit('SET_TOKEN', data.sid) resolve(response) }).catch(error => { reject(error) }) }) } } } export default user
3.別忘了要注冊(cè)store
import Vue from 'vue' import Vuex from 'vuex' import user from './modules/user' Vue.use(Vuex) const store = new Vuex.Store({ modules: { user, } }) export default store
最后一步使用,回到組件
methods: { submitForm() { this.$refs.ruleForm.validate((valid)=>{ if(valid) { console.log(this.$store) this.$store.dispatch('Login',this.ruleForm).then((res)=>{ console.log(res) if(res.success) { this.$router.push({path:'/'}) }else{ this.$message.error(res.result.error) } }) } }) } }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“vue中登錄注冊(cè)的示例分析”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
本文標(biāo)題:vue中登錄注冊(cè)的示例分析
本文鏈接:http://bm7419.com/article28/jceejp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)公司、虛擬主機(jī)、品牌網(wǎng)站建設(shè)、定制開(kāi)發(fā)、小程序開(kāi)發(fā)、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)