vue登录注册实例详解

步骤一1.安装脚手架:npminstallvue-cli-g2.wepack生成html模版：vueinitwebpack'文件名'3.安装axios、js-coo

步骤一

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="账号" 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_' + process.env.NODE_ENV)//没用上当没看见吧，我就是要写这
Vue.use(Router)
export const constantRouterMap = [
 {
 path: '/',
 component:Login,
 name:'登录'
 },
]
export default new Router({
 routes: constantRouterMap
})

emmmm....我猜组件应该渲染出来了，很好！next

步骤四

关键性的步骤到了，看起来很难的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 => {
 return Promise.resolve(res.data)
 }, err => {
 console.log(err)
 })
}

2.利用js-cookie插件来存储用户信息

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.别忘了要注册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)
 }
 })
 }
 })
 }
 }

以上就是本次介绍的全部知识点，感谢大家对脚本之家的支持。