登录页面html引入vue,用vue写简单的登录注册总结
步骤一
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.可以写组件了
提交
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)
}
})
}
})
}
}
登录页面html引入vue,用vue写简单的登录注册总结相关推荐
- 简单java登录页面android_Android 之路 - RxJava2+Retrofit实现简单登陆
原标题:Android 之路 - RxJava2+Retrofit实现简单登陆 前言 使用RxJava2+Retrofit实现简单登陆. 正文1. Hello world1.1 相关版本 Androi ...
- 这两天老是有兄弟问到Vue的登陆和注册,登陆成功留在首页,没有登录回到登录页面,现在我用最简单实用的方法实现(两分钟技就看懂)...
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用 核心就是用localStorage存.取数据,这 ...
- 怎样在vue单页面中引入其他组件
场景 在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现 首先在components下新建组件Today_recommend.vue组件 <templat ...
- 实现Vue的登录页面
实现Vue的登录页面步骤: 1.前期准备 1.1 安装Node.js:从官网下载地址(https://nodejs.org/zh-cn/)安装完成后,在终端输入 node -v 来查询版本号.1.2 ...
- Vue中使用js-cookie插件实现登录时记住密码后存取到Cookie中
场景 使用vue实现一个登录页面时,实现记住密码功能. 在勾选了记住密码后将密码存储到Cookie中,然后下次直接从Cookie中取. 注: 博客: https://blog.csdn.net/bad ...
- uniapp写一个登录页面
很高兴为您解答,可以参考以下步骤来写一个登录页面: 创建一个uniapp项目,并在项目中创建一个登录页面: 在登录页面中添加用户名和密码输入框,以及一个登录按钮: 在登录按钮的点击事件中,添加验证用户 ...
- html邮箱代码怎么写_如何制作一个简单的HTML登录页面(附代码)
几乎每个网站都会有登录页面,那你知道如何写HTML登录页面吗?这篇文章就和大家分享一个HTML简单登录界面的代码,有一定的参考价值,感兴趣的朋友可以看看. 实例:制作一个HTML登录页面,包含邮箱,登 ...
- 黑马头条移动项目(十):登录页面的布局
目标 能实现登录页面的布局 1. 登录页面的布局 1.1 创建组件并配置路由,访问登录页面 src/views/Login/index.vue - 作为登录页面 - 先随意弄写标签显示 <tem ...
- 【vue3+ts后台管理】登录页面完成
创建登录页面及其路由 创建 LoginView.vue,先随便写点什么 修改 index.ts 增加登录页的路由 const routes: Array<RouteRecordRaw> = ...
最新文章
- 算法设计思想(4)— 分治法
- 谷歌引入自动网络设计,高效解决大规模深度推荐模型的特征嵌入问题
- [转] GloVe公式推导
- 比較++和+的运算符优先级
- 在angularjs应用中如何做选择评星的效果
- Ansible的Inventory管理
- java 堆大小_适当的Java堆大小的5个技巧
- ms2005 SQL Server设置改为SQL Server身份验证
- 在数据库中, 不用max()/min()找出一个列中最大/最小值的记录
- swagger-ui.html 404,解决访问swagger2报404问题
- 简单的自动更新程序实现
- 有关VIM的一些笔记
- FTL(FreeMarker)基础
- 只有音频没指纹,能抓对人吗?CMU音频分析AI说没问题
- firefox linux脚本启动,在Linux终端中使用后台运行模式启动程序的方法
- 大众点评字体_【网络爬虫实战】解决大众点评搜索页面字体加密
- Error LNK2005 DllMain already defined in dllmain.obj
- 计算机二级试题操作题图文讲解,计算机二级Word篇-实操真题详解26
- oracle pdb启动日志,案例:Oracle 12C 数据库pdb丢失数据文件后的完整恢复过程
- 中国研发经费投入逼近2万亿,保持两位数增速,企业成为主要力量
热门文章
- 图像特征提取——灰度共生矩阵(GLCM)
- (转载)STM32与LAN9252构建EtherCAT从站
- 够强大,Python 这款可视化数据看板不足百行代码
- 腾讯低代码平台正式开源!可拖拽生成手机项目、PC项目、TV项目!接私活福利啊!...
- 【win10】使用Python 3.7 py2neo连接Neo4j
- nCode:DesignLife案例教程十三
- 1/cos^3的不定积分 cos^3分之一的不定积分
- 惊天消息!无线网卡驱动能在最新笔记本里使用
- linux_安装jdk-8u333
- Simultaneous modeling of car-following and lane-changing behaviors using deep learning