vue的login.vue

直接上vue代码：

<template><div class="login-container"><el-form :model="ruleForm2" :rules="rules2"status-iconref="ruleForm2"label-position="left"label-width="0px"class="demo-ruleForm login-page"><h3 class="title">系统登录</h3><el-form-item prop="username"><el-input type="text"v-model="ruleForm2.username"auto-complete="off"placeholder="用户名"></el-input></el-form-item><el-form-item prop="password"><el-input type="password"v-model="ruleForm2.password"auto-complete="off"placeholder="密码"></el-input></el-form-item><el-checkboxv-model="checked"class="rememberme">记住密码</el-checkbox><br><el-radio v-model="radio" label="1">学生</el-radio><el-radio v-model="radio" label="2">老师</el-radio><el-radio v-model="radio" label="3">管理员</el-radio><el-form-item style="width:100%;"><el-button type="primary" style="width:100%;" @click="handleSubmit(radio)" >登录</el-button></el-form-item></el-form></div></template><script>export default {name: "Login1",data(){return {radio: '1',ruleForm2: {username: '201908324502',password: '19991025',},rules2: {username: [{required: true, message: 'please enter your account', trigger: 'blur'}],password: [{required: true, message: 'enter your password', trigger: 'blur'}]},checked: false}},methods: {handleSubmit(who){/*this.$refs.ruleForm2.validate((valid) => {if(valid){this.logining = true;if(this.ruleForm2.username === 'admin' &&this.ruleForm2.password === '123456'){this.logining = false;sessionStorage.setItem('user', this.ruleForm2.username);this.$router.push({path: '/'});}else{this.logining = false;this.$alert('username or password wrong!', 'info', {confirmButtonText: 'ok'})}*/if(who==1) {this.$axios({url: "/api/login/studentLogin",method: "post",data: {username: this.ruleForm2.username,password: this.ruleForm2.password},}).then(rec => {console.log(rec.data);if (rec.data.code == 200) {alert("登陆成功,"+rec.data.message)} else {alert(rec.data.message)}})}else if(who==2){this.$axios({url: "/api/login/teacherLogin",method: "post",data: {username: this.ruleForm2.username,password: this.ruleForm2.password},}).then(rec => {console.log(rec.data);if (rec.data.code == 200) {alert("登陆成功,"+rec.data.message)} else {alert(rec.data.message)}})}/* }else{console.log('error submit!');return false;}})*/}}};</script><style scoped>.login-container {width: 100%;height: 100%;}.login-page {-webkit-border-radius: 5px;border-radius: 5px;margin: 180px auto;width: 350px;padding: 35px 35px 15px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;}label.el-checkbox.rememberme {margin: 0px 0px 15px;text-align: left;}</style>

接口代码：

package com.lza.scoresys.controller;import com.lza.scoresys.entity.Admin;
import com.lza.scoresys.entity.Student;
import com.lza.scoresys.entity.Teacher;
import com.lza.scoresys.response.Result;
import com.lza.scoresys.service.AdminService;
import com.lza.scoresys.service.StudentService;
import com.lza.scoresys.service.TeacherService;
import com.lza.scoresys.vo.LoginVo;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.text.SimpleDateFormat;
import java.util.Date;/**** 学生教师管理员登陆*/
@RestController
@RequestMapping("login")
@CrossOrigin
public class Login {@Autowiredprivate TeacherService teacherService;@Autowiredprivate StudentService studentService;@Autowiredprivate AdminService adminService;//学生登陆@ApiOperation("学生登陆")@PostMapping("studentLogin")public Result studentLogin(@RequestBody LoginVo login){//查看是否有该学生Student one = studentService.getById(login.getUsername());if(login.getUsername().isEmpty()||login.getPassword().isEmpty()){return Result.error().getMessage("登陆失败，学生id或者密码不能为空");}if(one==null){return Result.error().getMessage("登陆失败，没有该学生");}//生成学生密码Date birthday = one.getBirthday();SimpleDateFormat simpleDateFormat=new SimpleDateFormat("yyyyMMdd");String birthdayPassword = simpleDateFormat.format(birthday);System.out.println(birthdayPassword);if(!login.getPassword().equals(birthdayPassword)){return Result.error().getMessage("登陆失败，密码错误");}return Result.ok().getMessage("登陆成功,欢迎"+one.getSname());}//教师登陆@ApiOperation("教师登陆")@PostMapping("teacherLogin")public Result teacherLogin(@RequestBody LoginVo login){//查看是否有该老师Teacher one = teacherService.getById(login.getUsername());if(login.getUsername().isEmpty()||login.getPassword().isEmpty()){return Result.error().getMessage("登陆失败，教师id或者密码不能为空");}if(one==null){return Result.error().getMessage("登陆失败，没有该教师");}//生成老师密码Date birthday = one.getBirthday();SimpleDateFormat simpleDateFormat=new SimpleDateFormat("yyyyMMdd");String birthdayPassword = simpleDateFormat.format(birthday);System.out.println(birthdayPassword);if(!login.getPassword().equals(birthdayPassword)){return Result.error().getMessage("登陆失败，密码错误");}return Result.ok().getMessage("登陆成功,欢迎"+one.getTname());}}

index.js

运行结果：

vue的login.vue相关推荐

weexpack 的 Login.vue 及 vue 的 Login.vue
1.登录页 weexpack Login.vue  <template><div class="wrapper"> & ...
Module not found: Error: Can‘t resolve ‘./components/Login.vue‘ in 项目路径问题
项目环境 @vue/cli 4.5.7 问题描述 1.在 "./src/components/"文件夹下创建"Login.vue"文件: 2.在路由文件(&qu ...
Vue 登录login例子
文章目录 login #0 GitHub #1 环境 #2 实现功能 #3 iView login #0 GitHub https://github.com/Coxhuang/iView-login ...
html用vue传递数据,Vue组件及数据传递详解
本文我们就和大家详细介绍一下Vue系列(三):组件及数据传递.路由.单文件组件.vue-cli脚手架,希望能帮助到大家. 一. 组件component 1. 什么是组件?组件(Component)是 ...
【Vue.js】vue用户登录功能
之前用vue实现一个网站的登录功能,这里做一个记录和总结,以下是需要实现的登录业务描述: 1.输入用户名和密码,点击登录按钮,若两者匹配,即可进入首页,首页展示登录用户的信息: 2.当用户登录后,无法 ...
vue css load,vue css3loadding插件的开发以及npm包的发布管理
插件开发的话建议使用vue-gitment脚手架开发 vue init webpack-simple vue-gitment 如果提示执行cnpm install vue-cli -g 全局安装 c ...
vue练习之vue+cnode api
最近使用vue+cnode社区提供的api做了简单练习项目地址:https://github.com/joyhb/vueNode 预览地址:https://joyhb.github.io/vueNo ...
Vue 2.0 + Vue Router + Vuex 后台管理系统的骨架
https://github.com/helloyoucan/ba 用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node ...
【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍轻量级.可靠的移动端 Vue 组件库有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性拥 ...

vue的login.vue

vue的login.vue相关推荐

最新文章

热门文章