电影项目用户中心前端页面

最新推荐文章于 2022-11-14 20:37:24 发布

扣剑书生

最新推荐文章于 2022-11-14 20:37:24 发布

阅读量3.2k

点赞数

本文链接：https://blog.csdn.net/weixin_44038167/article/details/103798600

版权

本文将介绍如何设计和开发一款电影项目的用户中心前端页面，包括用户个人信息展示、订单管理、收藏影片等功能，同时探讨使用现代前端框架如React或Vue进行组件化开发的实践和优化技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

		<script type="text/javascript" src="../static/js/jquery.js"></script>
		<script type="text/javascript" src="../static/js/bootstrap.js"></script>
		<link rel="stylesheet" href="../static/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/bootstrap-theme.css" />

		<link rel="stylesheet" type="text/css" href="../static/css/swiper.css" />
		<script type="text/javascript" src="../static/js/swiper.js"></script>
		<link rel="stylesheet" type="text/css" href="../static/css/reset.css" />
        <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<style type="text/css">
			.form-info {
				border: 1px solid orange;
				margin: 100px auto;
				width: 30%;
				padding: 50px;
			}
			
			.form-info h2 {
				font-size: 2rem;
				margin-bottom: 20px;
			}
			
			.form-info .submit {
				text-align: center;
			}
			
			.form-info img{
				width: 40px;
				height: 40px;
				float: left;
			}
			input[type=file]{
				float: left;
				height: 40px;
				line-height: 40px;
				padding-left: 20px;
			}
		</style>
        <title>个人中心</title>
	</head>

	<body>

		<div class="container-fluid">
			<div class="form-info">

				<h2>信息修改</h2>

				<form>
					<div class="form-group">
						<label for="exampleInputEmail1">用户名</label>
						<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名"  disabled="disabled" />
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">邮箱</label>
						<input type="email" class="form-control" id="oldmail" name="oldmail" placeholder="请输旧的的邮箱,需要验证" />
					</div>
                    <div class="form-group">
						<label for="exampleInputPassword1">邮箱</label>
						<input type="email" class="form-control" id="newmail" name="newmail" placeholder="请输入新的邮箱" />
					</div>
					<div class="form-group clearfix">
						<label for="exampleInputFile">头像</label><br />
						<img class="img-circle" id="pic" alt="" />
						<input type="file"  name="pic" id="image"  />
					</div>


				</form>
                <div class="submit"><button type="submit" class="btn btn-primary" id="tj">提交</button></div>
			</div>
		</div>

	</body>
    <script>



        $('#tj').click(function () {
            alert('请前往您的邮箱完成验证')
            var formData = new FormData();
            formData.append('oldmail', $('#oldmail').val())
            formData.append('newmail', $('#newmail').val())
            formData.append('pic', $("#image")[0].files[0])
            formData.append('token',localStorage.getItem('token'))
            $.ajax({
                url: '/kaoshi/?action=xiugai',
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,

                success: function (response) {
                    window.open("http://39.107.46.92/static/login.html", target = "_self")
                }
            });
        })


        var token = localStorage.getItem('token')

        axios.get("/yhzx/",{
            params:{
                'token':token
            }

        })
            .then(function (response) {
                if (response.data.status === 200){
                    $('#username').val(response.data.username)
                    $('#pic').attr('src', response.data.pic)
                }
                else {
                    alert(response.data.msg)
                    window.open("http://39.107.46.92/static/login.html", target = "_self")
                }
            });
    </script>

</html>