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 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 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
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
原生JS实现前端本地文件上传
2018/09/08 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
基于python实现KNN分类算法
2020/04/23 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
如何真正的了解python装饰器
2020/08/14 Python
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
七年级数学教学反思
2014/01/22 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
教师职位说明书
2014/07/29 职场文书
法人代表证明书
2014/09/18 职场文书
综合测评自我评价
2015/03/06 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
安全员岗位职责范本
2015/04/11 职场文书
大学生党课心得体会
2016/01/07 职场文书
交通安全学习心得体会
2016/01/18 职场文书
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB