qwb0614

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
个人冲刺第一阶段第二天

今天进行了登陆注册界面的编程。

 

登录界面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style lang="less" scoped>
        .body {

            margin-left: 70%;
            margin-bottom: 16%;
        }
        .login-form {
            border-radius: 6px;
            background: #ffffff;
            width: 385px;
            padding: 25px 25px 5px 25px;
        }
        body {
            width:100%;
            height: 100%;
            background-image: url(./imges/ba.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    </style>



</head>
<body >
<div id="app">
    <template>
        <div class="body">
            <el-form
                    :model="loginForm"
                    ref="loginForm"
                    label-position="left"

                    class="login-form"
                    style="box-shadow:7px 7px 17px rgba(52, 56, 66, 0.5); margin-top:125px; ">
                <!-- 标题 -->
                <h3 class="title">登录</h3>
                <el-form-item prop="loginForm" label="账号">
                    <el-input
                            placeholder="请输入用户名/账号"
                            v-model="loginForm.username"
                            clearable
                            style="width: 330px">
                    </el-input>
                </el-form-item>
                <el-form-item prop="loginForm" label="密码">
                    <el-input
                            placeholder="请输入密码"
                            v-model="loginForm.password"
                            show-password
                            clearable
                            style="width: 330px">
                    </el-input>
                </el-form-item>
                <el-form-item prop="loginForm"   label="类型">
                    <el-select v-model="loginForm.type" placeholder="请选择类别"  style="width: 150px">
                        <el-option label="企业" value="企业"></el-option>
                        <el-option label="用户" value="用户"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item style="width: 100%;" >
                    <el-button
                            class="btn-login"
                            size="medium"
                            type="primary"
                            style="width:150px;margin-left: 25%"
                            @click="login"
                    >
                        <span>登 录</span>
                    </el-button>
                    <el-button
                            class="btn-login"
                            size="medium"
                            type="primary"
                            style="margin-left: 60px"
                            @click="dialogVisible=true"
                    >
                        <span>注 册</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </template>

    <el-dialog
            title="选择注册用户还是企业"
            :visible.sync="dialogVisible"
            width="30%">
        <span style="margin-left: 120px">
    <el-button type="primary" @click="register1(1)">企 业</el-button>
    <el-button type="primary" @click="register1(0)">用 户</el-button>
        </span>
    </el-dialog>
</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",
        methods: {
            register1(index)
            {
                if(index==0)
                    location.href="peopleRegister.html"
                else
                    location.href="companyRegister.html"
                // this.$confirm('选择注册用户还是企业', '提示', {
                //     confirmButtonText: '用户',
                //     cancelButtonText: '企业',
                // }).then(() => {
                //    location.href="peopleRegister.html"
                // }).catch(() => {
                //     location.href="companyRegister.html"
                // });

            },
            login()
            {
                console.log(this.loginForm)
                var _this = this;

                if (this.loginForm.type == '用户') {
                    axios({
                        method: "post",
                        url: "http://localhost:8080/notes/seeker/loginSeeker",
                        data: _this.loginForm
                    }).then(function (resp) {
                        if (resp.data == "error") {
                            _this.$message({
                                showClose: true,
                                message: '失败',
                                type: 'error'
                            });
                        } else {
                            localStorage.setItem("password", _this.loginForm.password);
                            localStorage.setItem("username", _this.loginForm.username);
                            window.location.href = 'peoNotes.html';
                        }
                    })
                } else if (this.loginForm.type == '企业') {
                    axios({
                        method: "post",
                        url: "http://localhost:8080/notes/company/loginCompany",
                        data: _this.loginForm
                    }).then(function (resp) {
                        if (resp.data === "error") {
                            _this.$message({
                                showClose: true,
                                message: '失败',
                                type: 'error'
                            });
                        } else {
                            localStorage.setItem("companypassword", _this.loginForm.password);
                            localStorage.setItem("companyname", _this.loginForm.username);
                            localStorage.setItem("companyId", resp.data.id);
                            window.location.href = 'companySeeker.html';
                        }
                    })
                }
            },
        },
        data() {
            return {
                dialogVisible:false,
                loginForm: {
                    username: "", //账号
                    password: "", //密码
                    type:""//种类
                },

            }
        }
    })

</script>

</body>
</html>

公司注册界面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app{
            width: 40%;
            position:absolute;
            right: 20px;
            box-shadow:17px 17px 17px rgba(52, 56, 66, 0.5);
            margin-top: 10%;
            margin-right: 30%
        }
        .item{
            margin-left: 15%;margin-right: 25%
        }
        body{
            width:1000px;
            height: 704px;
            background-image: url(./imges/ba.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    </style>

</head>
<body>
<div id="app" style="background-color: white">
    <template>
    <el-form ref="form" :model="form" label-width="80px" style="margin-top: 20px;">
        <el-form-item label="公司名称" class="item" >
            <el-input v-model="form.name" placeholder="请输入公司名称"></el-input>
        </el-form-item>

        <el-form-item label="公司介绍" class="item">
            <el-input v-model="form.introduction" placeholder="请输入公司介绍"></el-input>
        </el-form-item>

        <el-form-item label="密码" class="item">
            <el-input v-model="form.password" show-password placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item label="联系方式" class="item">
            <el-input v-model="form.phone" placeholder="请输入公司联系方式"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit" style="margin-left: 30%;margin-right: 2%">立即创建</el-button>
        </el-form-item>
    </el-form>
        </template>
</div>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app",
        methods: {
            onSubmit() {
                var _this=this;

                axios({
                    method: "post",
                    url: "http://localhost:8080/notes/seeker/companyRegister",
                    data: _this.form
                }).then(function (resp) {

                    location.href="index.html"
                })

            }
        },
        data() {
            return {
                form: {
                    name: '',
                    phone: '',
                    introduction: '',
                    password: '',
                }
            }
        }
    })

</script>

</body>
</html>

求职人注册界面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
       #app{
           width: 50%;
           position:absolute;
           right: 20px;
           box-shadow:7px 7px 17px rgba(52, 56, 66, 0.5);
           margin-bottom: 202px;
       }
       #app2{
           width: 101px;
           height: 101px;
           position:absolute;
           right: 20px;
           margin-top: 49.2%;
           margin-left: 50%
       }
       .uploadBtn{
           width: 100px;/*设置按钮宽度*/
           height: 42px;/*设置按钮高度*/
           color:white;/*字体颜色*/
           background-color:#409eff;/*按钮背景颜色*/
           border-radius: 3px;/*让按钮变得圆滑一点*/
           border-width: 0;/*消去按钮丑的边框*/
           margin: 0;
           outline: none;/*取消轮廓*/
           font-family: KaiTi;/*字体设置为楷体*/
           font-size: 17px;/*设置字体大小*/
           text-align: center;/*字体居中*/
           cursor: pointer;/*设置鼠标箭头手势*/
           margin-right: 20px;
       }
       button:hover{/*鼠标移动时的颜色变化*/
           background-color: antiquewhite;
       }
       #file1{

           width: 197px;
           height: 30px;
       }
       .item input{
           display: none;
       }
       body{
           width:1000px;
           height: 704px;
           background-image: url(./imges/ba.jpg);

           background-size: 100% 100%;
       }
   </style>

</head>
<body>

<div id="app" style="background-color: white">

    <el-form ref="form" :model="form" label-width="80px" style="margin-top: 20px;" >
        <el-form-item label="姓名" style="margin-left: 30%;margin-right: 20%" >
            <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="手机号码" style="margin-left: 30%;margin-right: 20%">
            <el-input v-model="form.phone"></el-input>
        </el-form-item>

        <el-form-item label="密码" style="margin-left: 30%;margin-right: 20%">
            <el-input v-model="form.password" show-password placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item label="出生日期" style="margin-left: 30%;margin-right: 20%">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" ></el-date-picker>
        </el-form-item>

        <el-form-item label="学历" style="margin-left: 30%;margin-right: 20%">
            <el-radio-group v-model="form.degree">
                <el-radio label="小学"></el-radio>
                <el-radio label="初中"></el-radio>
                <el-radio label="高中"></el-radio>
                <el-radio label="本科"></el-radio>
                <el-radio label="硕士"></el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="工作年限" style="margin-left: 30%;margin-right: 20%">
            <el-input v-model="form.workingHours"></el-input>
        </el-form-item>

        <el-form-item label="期望岗位" style="margin-left: 30%;margin-right: 20%">
            <el-input v-model="form.hopePost"></el-input>
        </el-form-item>

        <el-form-item label="期望薪资" style="margin-left: 30%;margin-right: 20%">
            <el-col :span="10">
                <el-input placeholder="薪资下限" v-model="hopeSalaryx" ></el-input>
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="10">
                <el-input placeholder="薪资上限" v-model="hopeSalarys" style="width: 100%;"></el-input>
            </el-col>
        </el-form-item>

        <el-form-item label="专业技能"style="margin-left: 30%;margin-right: 20%">
            <el-input type="textarea" v-model="form.skill"></el-input>
        </el-form-item>

        <el-form-item label="自我优势" style="margin-left: 30%;margin-right: 20%">
            <el-input type="textarea" v-model="form.advantage"></el-input>
        </el-form-item>

        <el-form-item label="经历" style="margin-left: 30%;margin-right: 20%">
            <el-input type="textarea" v-model="form.experienced"></el-input>
        </el-form-item>
            <el-form-item>

        <el-button type="primary" @click="onSubmit" style="margin-left: 50%;margin-right: 2%" >立即创建</el-button>
            </el-form-item>
    </el-form>

    <form id="" action="seeker/seekerRegisterupload" enctype="multipart/form-data" method="post" style="margin-left: 30%;margin-right: 20%">
        <!--                <label for="file2" id="file1">上传图片</label>-->
        <input type="file"  name="phone" >
        <input type="button"  class="uploadBtn" value="文件创建">
    </form>
</div >

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
    $("#uploadBtn").click(function () {

        var formdata=new FormData($("#uploadForm")[0]);  //新建formdata对象，并传入表单
        $.ajax({
            url:"seeker/seekerRegisterupload", //请求地址
            type:"POST",  //提交方式
            data:formdata, //数据
            sync:false,  //异步提交
            cache:false, //不读缓存
            contentType:false, //不做格式处理
            processData:false,//不序列化
            success:function (result) {
                location.href="index.html"
            },
            error:function (error) {
                console.log("error:"+error);
            }
        })
    })
    new Vue({
        el: "#app",
        methods: {
            onSubmit() {
                var _this=this;
                this.form.hopeSalary=this.hopeSalaryx+"-"+this.hopeSalarys;
                axios({
                    method: "post",
                    url: "http://localhost:8080/notes/seeker/seekerRegister",
                    data: _this.form
                }).then(function (resp) {

                    location.href="index.html"
                })

            }
        },
        data() {
            return {
                hopeSalarys:'',
                hopeSalaryx:'',
                form: {
                    name: '',
                    phone: '',
                    birthday: '',
                    degree: '',
                    password: '',
                    workingHours: '',
                    hopePost: '',
                    hopeSalary: '',
                    skill: '',
                    advantage: '',
                    experienced: '',
                }
            }
        }
    })

</script>

</body>
</html>

预计明天进行，求职人的个人信息管理

遇到的问题，登陆注册界面的美化 ，规划，以及后端连接数据库查询时出现了一些问题。

posted on 2023-04-17 15:49  嘎嘎鸭1  阅读(21)  评论(0)    收藏  举报