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 validate 中文API 附validate.js中文api手册
Jul 31 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
JS中的BOM应用
Feb 02 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 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
php5.2时间相差8小时
2007/01/15 PHP
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
全面理解Python中self的用法
2016/06/04 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
python 数据类型强制转换的总结
2021/01/25 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
环境科学专业个人求职信
2013/12/15 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
给校长的建议书400字
2014/05/15 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
初中毕业感言300字
2015/07/31 职场文书