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复选框CHECKBOX全选、反选
Aug 30 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
vue-loader教程介绍
Jun 14 Javascript
详解a++和++a的区别
Aug 30 Javascript
js动态生成表格(节点操作)
Jan 12 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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
RC4文件加密的python实现方法
2015/06/30 Python
pyenv命令管理多个Python版本
2017/03/26 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
python如何实现内容写在图片上
2018/03/23 Python
Python datetime包函数简单介绍
2019/08/28 Python
Pytorch 实现权重初始化
2019/12/31 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
美的官方商城:Midea
2016/09/14 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
现场施工员岗位职责
2014/03/10 职场文书
婚假请假条怎么写
2014/04/10 职场文书
团代会开幕词
2015/01/28 职场文书
学校计划生育责任书
2015/05/09 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
新学期开学寄语2016
2015/12/04 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python