vue登录注册实例详解


Posted in Javascript onSeptember 14, 2019

步骤一

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)
      }
     })
    }
   })
  }
 }

以上就是本次介绍的全部知识点,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery datepicker 使用方法
May 20 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
原生JS实现天气预报
Jun 16 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 #Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 #Javascript
Layui表格行工具事件与数据回填方法
Sep 13 #Javascript
layui使用表格渲染获取行数据的例子
Sep 13 #Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 #Javascript
layui表格数据复选框回显设置方法
Sep 13 #Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 #Javascript
You might like
论坛头像随机变换代码
2006/10/09 PHP
discuz Passport 通行证 整合笔记
2008/06/30 PHP
PHP合并静态文件详解
2014/11/14 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP 裁剪图片
2021/03/09 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
python获得图片base64编码示例
2014/01/16 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Python中pillow知识点学习
2018/04/30 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python2 对excel表格操作完整示例
2020/02/23 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
浅谈Python3中print函数的换行
2020/08/05 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
网络安全方面的面试题
2016/01/07 面试题
java程序员面试交流
2012/11/29 面试题
高中语文教学反思
2014/01/16 职场文书
工地安全检查制度
2014/02/04 职场文书
土地转让协议书
2014/04/15 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
初中作文评语大全
2014/04/23 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers