vue登录注册实例详解
步骤⼀
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.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="账号" 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: '请输⼊登录账号', trigger: 'blur' }
],
pass: [
{ required: true, message: '请输⼊登录密码', trigger: 'blur' }
]
}
}
},
}
步骤三
⾛到这⼀步就很懵逼了吧，，，我也是，所以还是先看到效果先吧
1.注册组件，在router⽂件这⾥
import Vue from 'vue'
import Router from 'vue-router'
import Login from 'components/login/index'
const _import = require('./_import_' + v.NODE_ENV)//没⽤上当没看见吧，我就是要写这Vue.use(Router)
export const constantRouterMap = [
{
path: '/',
component:Login,
name:'登录'
},
]
export default new Router({
routes: constantRouterMap
})
<我猜组件应该渲染出来了，很好！nextvue element admin
步骤四
关键性的步骤到了，看起来很难的vuex
1.第⼀步，先写好接⼝⽅便调⽤，放在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官⽅⽂档关于怎么⽤每个参数是什么说的特别特别清楚，我百度过的
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(res => {
solve(res.data)
}, err => {
console.log(err)
})
}
2.利⽤js-cookie插件来存储⽤户信息
import Cookie from 'js-cookie'
export function getToken() {
(TokenKey)
}
export function setToken(token) {
return Cookie.set(TokenKey, token)
}
export function removeToken() {
ve(TokenKey)
}
export function getRole() {
Item('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) => {
}
},
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 = sult
setToken(data.sid)
sessionStorage.setItem('accountType', data.accountType)
commit('SET_TOKEN', data.sid)
resolve(response)
}).catch(error => {
reject(error)
})
})
}
}
}
export default user
3.别忘了要注册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.$()
}
})
}
})
}
}
以上就是本次介绍的全部知识点，感谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。