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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
js实现开启密码大写提示
Dec 21 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
详解vue高级特性
Jun 09 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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缓存的详解
2013/05/15 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
JavaScript中this详解
2015/09/01 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
详解python数据结构和算法
2019/04/18 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
高中生的自我评价
2014/03/04 职场文书
美容院店长岗位职责
2014/04/08 职场文书
《社戏》教学反思
2014/04/15 职场文书
团队拓展活动方案
2014/08/28 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
篮球赛新闻稿
2015/07/17 职场文书
交通安全教育心得体会
2016/01/15 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript