vue.js简单登录界面访问mysql_Vuejs实战项目：登陆页面

1、在view文件夹下创建login文件夹，创建index.vue：代表登录的组件

配置router.js,导入登录组件

import Vue from "vue";

import Router from"vue-router";//导入登录组件’

import Login from './views/login/index.vue'Vue.use(Router);

exportdefault newRouter({//mode: "history",

//base: process.env.BASE_URL,

routes: [

{

path:'/login',

name:'login', //路由名称

component: Login //组件对象

}

]

});

2、结合Element-UI编写index.vue,index.vue的目录为：views/login/index.vue

后台管理系统登录

登录

取消

exportdefault{

data() {return{

form: {

username:"",

password:""},

options: {

color:"rgba(225,225,225,0.5)", //Bubble color

radius: 15, //Bubble radius

densety: 0.3, //The larger the bubble density, the greater the density (suggest no more than 1).

clearOffset: 0.2 //The larger the bubble disappears [0-1], the longer it disappears.

}

};

},

components: {

vueCanvasNest//bubblesEffect

},

methods: {

onSubmit() {

console.log("submit!");

}

}

};

width: 350px;/*上下嫌隙 160px，左右自动居中*/margin: 160px auto;

background-color: rgb(255, 255, 255, 0.8);

padding: 28px;

border-radius: 20px;/*border: solid 1px black;*/box-shadow: 0 0 30px 3px rgba(119,118,118,0.33);

}

.login-container {

position: absolute;

width:100%;

height:100%;

}

.login-title {

color: #303133;

text-align: center;

}

.cancle {

margin-left: 80px;

}

.box {

margin-left: 0px;

}

3、表单验证

1、在el-form中导入 :rules="rules"，el-form-item导入pro=“属性名称”

在export的data中配置rules：

rules: {

username: [

{ required:true, message: '密码不能为空', trigger: 'blur'}

],

password: [

{ required:true, message: '密码不能为空', trigger: 'blur'}

]

},

配置methods：

methods: {

submitForm(formName) {//定位到表单，再进行校验

this.$refs[formName].validate(valid =>{//console.log(valid) //成功为true，失败为false

if(valid){//提交表单给后台进行验证是否正确

}else{

console.log('验证失败')return false}

})

},//onSubmit() {//console.log("submit!");//}//}

}

4、easyMock添加系统登录后台服务接口

1、修改.env.develoment文件中的目标服务接口地址---------VUE_APP_SERVICE_URL

2、配置 Mock.js，创建新的接口

①当登录成功后，响应状态码2000和token值，token用来认证(后面请求只要是成功的，状态码均为2000，这个是与后台接口的约定)

*　　请求URL：/user/login

*　　请求方式：post

*　　描述： 登录认证

*　　mock.js 接口配置：

{"code": 2000, //状态码

"flag": true,"message": '验证成功',"data": {"token": "admin"}

}

②通过token获取用户信息：

添加响应用户信息模拟接口：

*　　请求URL：/user/info/{token}

*　　请求方式：get

*　　描述：响应用户信息

*　　mock.js 配置

{"code": 2000,"flag": true,"message": '成功获取用户信息',"data": {"id|1-10000": 1,"name": "@cname","roles": ["manager"]

}

}

5、登录逻辑实现

在src/api 下创建login.js，导出两个方法

import request from '@/utils/request'

//导出函数

export functionlogin(username, password) {returnrequest({

url:'/user/login',

method:'post',

data: {

username,//username: username

password

}

})

}//获取返回的用户信息

export functiongetUserInfo(token) {returnrequest({

url: `/user/info/${token}`,

method: 'get'})

}

表单校验：

methods: {

submitForm(formName) {//定位到表单，再进行校验

this.$refs[formName].validate(valid =>{//console.log(valid) //成功为true，失败为false

if(valid){//提交表单给后台进行验证是否正确,then后面传入回调函数

login(this.form.username,this.form.password).then(response =>{

const resp=response.data

console.log(resp,resp.flag,resp.data.token)if(resp.flag) {//当resp.flag为true时，表示验证成功

//通过token获取用户信息

getUserInfo(resp.data.token).then(response =>{

const respUser=response.data

console.log(respUser)if(respUser.flag){//获取到用户的数据

//成功

console.log('userInfo',respUser.data)//1.保存token，用户信息

localStorage.setItem('msm-user', JSON.stringify(respUser.data))

localStorage.setItem('msm-token', resp.data.token)//前往首页

this.$router.push('/')

}else{this.$message.error(respUser.message);

}

})

}else{//未通过，弹出警告

this.$message.error(resp.message);

}

})

}else{

console.log('验证失败')return false}

})

},//onSubmit() {//console.log("submit!");//}//}

}