【端午特制版】 Element UI 用户签到系统

  • 💂 个人主页: 程序员爱摸鱼
  • 🤟 版权: 本文由【程序员爱摸鱼】原创、在CSDN首发、需要转载请联系博主
  • 💬 如果文章对你有帮助、欢迎关注点赞收藏(一键三连)哦
  • 💅 想寻找共同成长的小伙伴,请点击【Java全栈开发社区

项目效果展示:


📝文章目录

🌈项目效果展示:

🌈步骤一:环境搭配

🎃步骤二 :vue前端代码:

🌳步骤三 : 后端代码:



步骤一:环境搭配

vue前端代码:

mian.js :

import './assets/reset.css'

import './plugins/element.js'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import Video from 'video.js'
import 'video.js/dist/video-js.css'
import 'video.js/dist/video-js.min.css'
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.vue :

<template>
  <div class="login">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'WORKSPACE_NAMEApp',

  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style>
  body,html,.login {
    background-color:#96a5b6;
   height: 100%;
   margin: 0px;
   padding: 0px;
  }
</style>

index.js :

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: '登录',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/companyList',
    name: '管理系统',
    component: () => import('../views/companyList.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Login.vue :

<template>
    <div class="login" id="login" >
        <video class="fullscreenVideo" id="bgVid" playsinline="" autoplay="" muted="" loop="">
        <source src="../assets/dsp.mp4" type="video/mp4">
         </video> 
       <el-button type="primary" icon="el-icon-message" circle id="ioc"></el-button>
       <el-button type="primary" icon="el-icon-share" circle  id="ioc1" @click="share_weibo"></el-button>
        <el-form class="floatLogin" ref="loginUser" :model="User" :rules="rules" label-width="80px">
            <el-card class="box-card">
            <div slot="header" class="clearfix" >
                    <el-link type="primary" :underline="false"  icon="el-icon-s-home"  href="https://blog.csdn.net/lcshen1234?spm=1018.2226.3001.5343">端午节签到系统</el-link>
            </div>
               <el-form-item label="用户名:" prop="userName">
                    <el-input v-model="User.userName"  prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                 <el-form-item label="密码:" prop="password"  >
                    <el-input v-model="User.password" prefix-icon="el-icon-lock" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button >取消</el-button>
                </el-form-item>
               
            </el-card>

        </el-form>
 
    </div>
     
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            User:{},
             rules: {
              username: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
              ],
               password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
              ]
        }
        };
    },

    mounted() {
    },

    methods: {
        //登录块
        login(){
            this.$refs.loginUser.validate(async (valid) =>{
                if(valid){
                    var url=`http://localhost:8086/user/login`
                    let {data:baseResult} = await axios.post(url,this.User)
                    console.info(baseResult.code)
                    if(baseResult.code == 20000){
                          this.$message.success('登陆成功')  
                          this.$router.push("/companyList")
                    }else{
                         this.$message.error(baseResult.message)
                    }
                }else{
                    console.log('error submit!!')
                    return false;
                }
            })
        },
        //分享链接块
        share_weibo (event) {
      event.preventDefault()
      var _shareUrl = 'http://service.weibo.com/share/share.php?' 
      _shareUrl += 'url=' + encodeURIComponent('https://blog.csdn.net/lcshen1234?spm=1018.2226.3001.5343') //设置分享的内容链接也可以设置url
      _shareUrl += '&title=' + encodeURIComponent(this.titleCon) //参数title设置分享的标题
      // 保留当前页面,打开一个非tab页面
      window.open(
        _shareUrl,
        '_blank',
        'height=100, width=400',
        'scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes'
      )
    }
    },
    
};
    
</script>

<style lang="scss" scoped>
 .box-card {
    width: 480px;
     background-color: #d5dde4
     
  }
    .login{
      height: 79%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}
.floatLogin{
      position: absolute;
   }
   video{
    //    height: 100%;
       width: 100%;
    //    padding: 0px;
    //    margin: 0px
   }


#ioc{
     position: absolute;
    left: 1390px;
    top: 10px;
}
#ioc1{
      position: absolute;
      left: 1450px;
        top: 10px;
}

//视频背景
.videoContainer{
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -100;
}
.videoContainer:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  top: 0;
  left: 0;
  background: rgba(25,29,34,.65);
}
</style>

companyList.vue :

<template>
    <div class='home' id="building">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span style="sizi='20px' ">认识端午</span>
        </div>
        	<div class="videoArea">
         <video class="fullscreenVideo1" id="bgVid1" autoplay="autoplay"  controls="" >
            <source src="../assets/jieshao.mp4" type="video/mp4">
         </video> 
    </div>
    </el-card>
    </div>
</template>


<script>
import videojs from 'video.js';
export default {
    name: 'WORKSPACE_NAMEcompanyList',

  data () {
    return {
		 	player: null
	}
  },

    menthods: {
		// 实例化播放器
		createVideo1(){
			let options = {
	              autoplay: false,
	              controls: true,
	              sources: [
	                  {
	                      src: "../assets/jieshao.mp4",
	                  }
	              ]
               }
               this.player = videojs(this.$refs.videoPlayer, options, function onPlayerReady() {
                console.log('onPlayerReady', this);
            })
			},
        },
    mounted() {
	   this.createVideo1
	},
	
};
</script>

<style>
#building{
background:url("../assets/duanwu.webp");
width:100%;			
height:100%;		
position:fixed;
background-size:100% 100%;}
.box-card{
     width: 480px;
     background-color: #d5dde4;
     margin:15% auto
}
.fullscreenVideo1{
    width: 100%;
}

</style>

后端代码:

UserApplication :

package com.czxy.user;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class UserApplication {

    public static void main(String[] args) {
        SpringApplication.run(UserApplication.class,args);
    }
}

UserMapper : 

package com.czxy.user.mapper;

import com.czxy.user.domain.User;
import tk.mybatis.mapper.common.Mapper;
@org.apache.ibatis.annotations.Mapper
public interface UserMapper  extends Mapper<User> {

}

Usercontroller :

package com.czxy.user.controller;

import com.czxy.user.domain.User;
import com.czxy.user.service.UserService;


import net.bytebuddy.asm.Advice;
import org.springframework.web.bind.annotation.*;
import com.czxy.user.vo.BaseResult;
import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserControoler {
    @Resource
    private UserService userService;



    @PostMapping("/login")
    public BaseResult login(@RequestBody User user){
        System.out.println(user.toString());
        User  loginUser=userService.login(user);
        if(loginUser !=null){
            return BaseResult.ok("登陆成功",loginUser);
        }else{
            return BaseResult.error("账号或密码错误");
        }
    }
}

UserServicelmpl :

package com.czxy.user.service.impl;

import com.czxy.user.domain.User;
import com.czxy.user.mapper.UserMapper;
import com.czxy.user.service.UserService;

import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;

import javax.annotation.Resource;
import java.util.List;

@Service
@Transactional
public class UserServiceImpl  implements UserService {
    @Resource
    private UserMapper userMapper;

   

    @Override
    public User login(User user) {
        Example example = new Example(User.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("userName",user.getUserName());
        criteria.andEqualTo("passWord",user.getPassword());
        List<User> list = userMapper.selectByExample(example);
        if(list!=null && list.size()>0){
            return list.get(0);
        }
        return null;
    }
}

最后关于一个分享链接的小展示:

 

 

 🌊 代表着快乐的糯米,藏着代表甜蜜的枣馅,用欢欣的粽子叶紧紧包在一 起,系上幸福的红丝带,捎去我美好的祝福,在这【程序员爱摸鱼】祝您端午节快乐!!

想要了解更多吗?没时间解释了,快来点一点!
程序员爱摸鱼
————————————————
版权声明:本文为CSDN博主「程序员爱摸鱼」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:
程序员爱摸鱼的博客_CSDN博客-归并排序,快速排序,Typora领域博主

  • 9
    点赞
  • 5
    收藏
  • 打赏
    打赏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:书香水墨 设计师:CSDN官方博客 返回首页
评论 9

打赏作者

程序员爱摸鱼

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值