From 1525fb81264401b241128e55f82c84de85ec5bbb Mon Sep 17 00:00:00 2001
From: pjhmizn49 <zhangjiadi2008@126.com>
Date: Fri, 13 Dec 2024 09:24:18 +0800
Subject: [PATCH] ADD file via upload

---
 flower_user_front/src/views/LoginView.vue | 173 ++++++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 flower_user_front/src/views/LoginView.vue

diff --git a/flower_user_front/src/views/LoginView.vue b/flower_user_front/src/views/LoginView.vue
new file mode 100644
index 0000000..2ba5439
--- /dev/null
+++ b/flower_user_front/src/views/LoginView.vue
@@ -0,0 +1,173 @@
+<template>
+    <div id="building">
+        <el-card style="background-color: rgba(255,255,255,85%)" class="login_container" shadow="always">
+            <el-form label-width="80px" ref="form"  :model="form" :rules="rules">
+                <img id="im" src="@/assets/logo1.png" alt="好花">
+                <h3 class="login_title">欢迎登录好花网</h3>
+                <el-form-item label="用户名" prop="user_name" style="margin-bottom: 35px;margin-top: 60px">
+                    <el-input v-model="form.user_name" placeholder="请输入账号"></el-input>
+                </el-form-item>
+                <el-form-item label="密码" prop="user_pwd">
+                    <el-input type="password" v-model="form.user_pwd" placeholder="请输入密码"></el-input>
+                </el-form-item>
+                <el-form-item label="验证码" prop="identify_code">
+                    <el-row>
+                        <el-col :span="10">
+                            <el-input placeholder="请输入验证码" v-model="form.identify_code"></el-input>
+                        </el-col>
+                        <el-col :span="13">
+                            <div class="login-code" style="width:100%" @click="refreshCode">
+                                <identify :identifyCode="identifyCode"></identify>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </el-form-item>
+                <el-form-item>
+                    <el-button @click="submit" id="button" type="danger">登  录</el-button>
+                </el-form-item>
+                <el-link @click="navTo('/register')" :underline="false" style="font-weight: normal;margin-top: -15px">没有账号？立即注册</el-link>
+            </el-form>
+        </el-card>
+    </div>
+</template>
+<script>
+import Cookie from 'js-cookie'
+import identify from "./identify.vue";
+export default {
+    components: {
+        identify,
+    },
+    data(){
+        //验证码校验
+        const _this = this;
+        const equalToIdentify = (rule, value, callback) => {
+            if (_this.identifyCode !== value) {
+                callback(new Error("验证码错误"));
+            } else {
+                callback();
+            }
+        }
+        return {
+            form:{
+                user_name:'',
+                user_pwd:'',
+                identify_code:''
+            },
+            identifyCodes: "1234567890abcdefjhijklinopqrsduvwxyz", //随机串内容,从这里随机抽几个显示验证码
+            identifyCode: "", //验证码图片内容
+            rules:{
+                user_name:[
+                    { required:true, trigger:'blur', message:'请输入用户名'}
+                ],
+                user_pwd:[
+                    { required:true, trigger:'blur', message:'请输入密码'}
+                ],
+                identify_code: [
+                    { required:true, trigger:'blur', message:'请输入验证码' },
+                    { validator: equalToIdentify, trigger: "blur" }
+                ]
+            }
+        }
+    },
+    mounted() {
+        // 初始化验证码
+        this.identifyCode = "";
+        //参数：（1）随机串内容。（2）验证码显示位数
+        this.makeCode(this.identifyCodes, 4);
+    },
+    methods:{
+        //登录
+        submit(){
+            const _this=this
+            this.$refs.form.validate( (valid) => {
+                if(valid){
+                    try {
+                        axios({
+                            method: 'post',
+                            url: 'http://localhost:8181/user/login',
+                            data:{
+                                user_name:_this.form.user_name,
+                                user_pwd:_this.form.user_pwd
+                            }
+                        }).then(function (response){
+                            if (response.data.code===200) {
+                                //登录成功
+                                //token信息
+                                const token = response.data.token
+                                //将token信息存入cookie用于不同页面的通信
+                                Cookie.set('token',token)
+
+                                //跳转到首页
+                                _this.$router.push('/home')
+                                _this.$message({message: response.data.msg, type: 'success'});
+                            }
+                            if (response.data.code===403) {
+                                _this.$message.error(response.data.msg);
+                            }
+                        });
+                    }catch (error)
+                    {
+                        _this.$message.warning('页面加载出错,请重试!')
+                    }
+                }
+            })
+        },
+        navTo(url){
+            location.href = url
+        },
+        //验证码相关
+        // 重置验证码
+        refreshCode() {
+            this.identifyCode = "";
+            this.makeCode(this.identifyCodes, 4);
+        },
+        //获取验证码的值
+        makeCode(o, l) {
+            for (let i = 0; i < l; i++) {
+                //通过循环获取字符串内随机几位
+                this.identifyCode +=
+                    this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
+            }
+        },
+        //随机数字：用于当角标拿字符串的值
+        randomNum(min, max) {
+            return Math.floor(Math.random() * (max - min) + min);
+        }
+    }
+}
+</script>
+<style>
+#building{
+    background:url("@/assets/background.jpg");
+    width:100%;
+    height:100%;
+    position:fixed;
+    background-size:100% 100%;
+}
+.login_container{
+    width: 480px;
+    height: 450px;
+    border: 1px solid #eaeaea;
+    margin: 250px auto;
+    padding: 35px 50px 15px 35px;
+}
+.login_container #button{
+    margin-right:70px;
+    margin-top: -30px ;
+    width: 140px;
+    font-size: 16px;
+    font-weight: bolder;
+}
+.login_title{
+    font-size:26px;
+    color:#d66760;
+    margin-left: 30px;
+    margin-top: -64px;
+}
+#im{
+    height: 85px;
+    width: 70px;
+    margin-left: -300px;
+    margin-top: -20px;
+}
+</style>
\ No newline at end of file