给vue写一个php的登录注册,用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)

}

})

}

})

}

}