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连缀语法如何实现
Nov 29 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
window.open()实现post传递参数
Mar 12 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 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
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
Nginx实现反向代理
2017/09/20 Servers
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
python模拟enum枚举类型的方法小结
2015/04/30 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
解决python flask中config配置管理的问题
2019/07/26 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
办公室主任先进事迹
2014/01/18 职场文书
小学毕业感言500字
2014/02/28 职场文书
12岁生日演讲稿
2014/05/14 职场文书
违纪检讨书范文
2015/01/27 职场文书
发布会邀请函
2015/01/31 职场文书
综合管理员岗位职责
2015/02/11 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书