ADD file via upload

flower_user_front/src/views/RegisterView.vue

@@ -0,0 +1,130 @@
+<template>
+    <div id="building">
+        <el-card style="background-color: rgba(255,255,255,85%)" class="register_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" show-password v-model="form.user_pwd" placeholder="密码长度在6到12个字符"></el-input>
+                </el-form-item>
+                <el-form-item label="确认密码" prop="user_pwd2">
+                    <el-input type="password" show-password v-model="form.user_pwd2" placeholder="请确认密码"></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-button @click="submit" id="button" type="danger">立即注册</el-button>
+                </el-form-item>
+                <el-link :underline="false" @click="navTo('/login')" style="font-weight: normal;margin-top: -15px">
+                    <i class="el-icon-arrow-left"></i>已有账号？前往登录
+                </el-link>
+            </el-form>
+        </el-card>
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        //两次密码一致校验
+        const _this = this;
+        const equalToPassword = (rule, value, callback) => {
+            if (_this.form.user_pwd !== value) {
+                callback(new Error("两次输入的密码不一致"));
+            } else {
+                callback();
+            }
+        }
+        return {
+            form:{
+                user_name:'',
+                user_pwd:'',
+                user_pwd2:''
+            },
+            rules:{
+                user_name:[
+                    { required:true, trigger:'blur', message:'请输入用户名'}
+                ],
+                user_pwd:[
+                    { required:true, trigger:'blur', message:'请输入密码'},
+                    { min: 6, max: 12, message: "长度在 6 到 12个字符", trigger: "blur" }
+                ],
+                user_pwd2:[
+                    { required:true, trigger:'blur', message:'请确认密码'},
+                    { validator: equalToPassword, trigger: "blur" }
+                ]
+            }
+        }
+    },
+    methods:{
+        //注册
+        submit(){
+            const _this=this
+            this.$refs.form.validate( (valid) => {
+                if(valid){
+                    try {
+                        axios({
+                            method: 'post',
+                            url: 'http://localhost:8181/user/register',
+                            data:{
+                                user_name:_this.form.user_name,
+                                user_pwd:_this.form.user_pwd
+                            }
+                        }).then(function (response){
+                            if (response.data.code===200) {
+                                //注册成功，跳转到首页
+                                _this.$router.push('/login')
+                                _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
+        },
+    }
+}
+</script>
+<style>
+#building{
+    background:url("@/assets/background.jpg");
+    width:100%;
+    height:100%;
+    position:fixed;
+    background-size:100% 100%;
+}
+.register_container{
+    width: 480px;
+    height: 450px;
+    border: 1px solid #eaeaea;
+    margin: 250px auto;
+    padding: 35px 50px 15px 35px;
+}
+#button{
+    margin-right:70px;
+    margin-top: 28px ;
+    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>