树洞网页版

APP
web
发布日期:   2024-05-20
更新日期:   2025-02-12
文章字数:   2.1k
阅读时长:   10 分
阅读次数:  

首页前端

<style>
	input{
		margin: 10px;
		padding: 10px;
		border: 1px solid black;
	}
	.button{
		width: 30%;
		padding: 5px;
		margin: 10px;
		font-weight: bold;
		background-color: cadetblue;
		color: aliceblue;
		border-radius: 10px;
	}
	/* 弹性盒子横着排 */
	.flex_row{
	    display: flex; /* 排列方式：弹性盒子 */
	    flex-direction: row;/*排列方向：横向*/
	    justify-content: center;/*主轴居中*/
	    align-items: center;/*副轴居中*/
	}
	/* 弹性盒子竖着排 */
	.flex_column{
	    display: flex; /* 排列方式：弹性盒子 */
	    flex-direction: column;/*排列方向：纵向*/
	    justify-content: center;/*主轴居中*/
	    align-items: center;/*副轴居中*/
	}
	/* 导航区域 */
	.nav_section{
		/* 宽度 */
		width: 90vw;
		/* 高度 */
		height: 100px;
		/* 左外边距 */
		margin-left: 5vw;
		/* 上外边距 */
		margin-top: 2.5vw;
		/* 圆角 */
		border-radius: 20px;
		/* 过渡 */
		transition: 3s;
	}
	.nav_section:hover{
		/* 背景颜色 */
		background-color: greenyellow;
		height: 200px;
	}
	/* 导航栏的文字 */
	.nav_text:hover{
		color: red;
	}
	/* 选项卡激活时候的样式 */
	.active{
		color: red;
	}
</style>

<template>
	<body style="width: 100vw;height: 100vh;">
		<!-- 顶部导航栏(横盒) -->
		<div class="nav_section flex_row">
			<!-- 左边部分（图片logo）(横盒) -->
			<div  class="flex_row" style="width: 20%;height: 100%;">
				<image src="../../static/logo.png" style="width: 210px;height: 70px;" mode=""></image>
			</div>
			<!-- 右边部分（放了一堆导航项，每一个导航项包括一个图标+文字）（横盒） -->
			<div class="flex_row" style="width: 80%;height: 100%;justify-content: flex-end;">
				<!-- 导航项(包括图标和文字)（横盒） -->
				<navigator url="/pages/index/index">
					<div class="flex_row" style="height: 100%;padding: 15px;box-sizing: border-box;">
						<image src="../../static/home.png" style="width: 30px;height: 30px;" mode=""></image>
						<p class="nav_text" style="font-size: 30px;">首页</p>
					</div>
				</navigator>
			</div>
		</div>
		<!-- 内容区域 -->
		<div class="flex_row" style="width: 100vw;background-color: antiquewhite;">
			<!-- 左边：树洞区域 -->
			<div style="width: 60%;background-color: aquamarine;margin: 20px 5%;"> 
				树洞区域
			</div>
			<!-- 右边：登陆注册区域(没有登录的时候显示) -->
			<div v-if="username_login == ''" class="flex_column" style="width: 25%;height: 60vh;background-color: beige;">
				<!-- 顶部：分类选项卡 -->
				<div class="flex_row" style="width: 100%;height: 10%;background-color: chartreuse;">
					<!-- 左边：登陆 -->
					<div @click="tab=0" class="flex_row" :class="tab==0?'active':''" style="border: 1px solid gray; width: 50%;height: 100%;background-color: white;">
						<h3>用户登陆</h3>
					</div>
					<!-- 右边：注册 -->
					<!-- 三元表达式格式：  条件?'分支1':'分支2'  如果条件成立，走分支1，否则走分支2-->
					<div @click="tab=1" class="flex_row" :class="tab==1?'active':''" style="border: 1px solid gray;width: 50%;height: 100%;background-color: white;">
						<h3>用户注册</h3>
					</div>
				</div>
				<!-- 登陆区域 v-if是这个标签显示的条件 -->
				<div v-if="tab==0" style="width: 100%;height: 90%;">
					<!-- 上：图片区域 -->
					<div class="flex_column" style="width: 100%;height: 40%;background-color: aquamarine;">
						<image src="../../static/iloli.gif" style="width: 100px;height: 100px;" mode=""></image>
						<h4>你好，快来登陆啊</h4>
					</div>
					<!-- 中间：输入区域 -->
					<div class="flex_column" style="width: 100%;height: 40%;background-color: cornflowerblue;">
						<input v-model="username" type="text" placeholder="请输入用户名"/>
						<input v-model="password" type="password" placeholder="请输入密码"/>
					</div>
					<!-- 下：按钮区域 -->
					<div class="flex_row" style="width: 100%;height: 20%;background-color: darkgray;">
						<button @click="login()" class="button">登陆</button>
					</div>
				</div>
				<!-- 注册区域 -->
				<div v-if="tab==1" style="width: 100%;height: 90%;">
					<!-- 上：图片区域 -->
					<div class="flex_column" style="width: 100%;height: 40%;background-color: aquamarine;">
						<image src="../../static/angry.gif" style="width: 100px;height: 100px;" mode=""></image>
						<h4>你好，快来注册啊</h4>
					</div>
					<!-- 中间：输入区域 -->
					<div class="flex_column" style="width: 100%;height: 40%;background-color: cornflowerblue;">
						<input v-model="username" type="text" placeholder="请输入用户名"/>
						<input v-model="password" type="password" placeholder="请输入密码"/>
					</div>
					<!-- 下：按钮区域 -->
					<div class="flex_row" style="width: 100%;height: 20%;background-color: darkgray;">
						<button @click="zhuce()" class="button">注册</button>
					</div>
				</div>
			</div>
			<!-- 右边：个人中心区域（已经登录的时候显示） -->
			<div v-if="username_login !=''" class="flex_column" style="width: 25%;height: 60vh;background-color: beige;">
				<!-- 上：图片区域 -->
				<div class="flex_column" style="width: 100%;height: 40%;">
					<image src="../../static/iloli.gif" style="width: 100px;height: 100px;" mode=""></image>
					<h4>欢迎你，{{username_login}}</h4>
				</div>
				<!-- 中间：修改密码区域 -->
				<div class="flex_row" style="width: 100%;height: 30%;">
					<input type="password" placeholder="请输入新密码" />
					<button style="margin: 0;">修改密码</button>
				</div>
				<!-- 下面：退出按钮-->
				<div class="flex_row" style="width: 100%;height: 30%;">
					<button>用户管理</button>
					<button @click="exit()">退出</button>
				</div>
			</div>
		</div>
	</body>
</template>

<script>
	export default {
		// 页面变量，只有定义在data里的变量，才能放到html里去
		data() {
			return {
				tab: 0,  // 控制选项卡切换，tab==0登陆区域显示，tab==1的话注册区域显示
				username:'', //用来保存用户输入的用户名(同时和注册页面的输入框以及登陆页面的输入框绑定)
				password:'' ,// 用来保存用户输入的密码(同时和注册页面的输入框以及登陆页面的输入框绑定)
				username_login:''   //当前已经登录的用户名
			}
		},
		// 当页面加载的时候自动执行
		onLoad() {
			this.username_login = localStorage.getItem('username')
		},
		methods: {
			// 退出登录
			exit(){
				// 清空已登录的用户名
				this.username_login = ''
				// 清空缓存里存的用户名
				localStorage.setItem('username','')
			},
			// 登陆按钮
			login(){
				uni.request({
					url:'http://localhost:7777/login.php',
					// 前端发送请求时携带的参数
					data:{
						username:this.username,
						password:this.password
					},
					success: (res) => {
						console.log(res);
						// 如果登录成功，将用户名存放到缓存中
						if(res.data.code == 0){
							uni.showToast({
								title:res.data.msg,
								icon:'success'
							})
							// 将用户名存放在缓存中
							uni.setStorageSync('username',this.username)
							// 将用户名存放在已登录的用户名这个页面变量中
							this.username_login = this.username
						// 否者就是登录失败了
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'error'
							})
						}
					}
				})
			},
			// 注册按钮
			zhuce(){
				uni.request({
					url:'http://localhost:7777/zhuce.php',
					// 前端发送请求时携带的参数
					data:{
						username:this.username,
						password:this.password
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title:res.data.msg
						})
					}
				})
			}
		}
	}
</script>

数据库连接文件（conn.php）

<?php
// 连接数据库服务器(用户名、密码、数据库名)
$conn = mysqli_connect("localhost","admin","123456","web");
if(!$conn){
    die('连接数据库失败');
}

// 设置字符集
mysqli_query($conn,"set names utf8");

注册的后端（zhuce.php）

<?php
include_once 'conn.php';

// 定义一个数组，用于存放将要返回的信息
$a = array();

// 接收前端传过来的参数
$username = $_GET['username'];
$password = $_GET['password'];

// 后端参数校验
if(strlen($password) == 0 || strlen($username) == 0){
    $a['code'] = 1;
    $a['msg'] = '用户名或者密码没填';
    echo json_encode($a);
    exit();
}

// 不能注册同名的账号
$sql = "SELECT * FROM `users` WHERE `username` = '$username'";
// 执行SQL语句(查询语句返回的是一个结果集，也就是查到的内容，而不是一个布尔值)
$result = mysqli_query($conn,$sql);
// 数一下查询的结果有几条
$num = mysqli_num_rows($result);
if($num > 0){
    $a['code'] = 1;
    $a['msg'] = '已经存在同名的用户名';
    echo json_encode($a);
    exit();
}

// 准备SQL语句
$sql = "INSERT INTO `users`(`username`, `password`) VALUES ('$username','$password')";
// 执行SQL语句
$result = mysqli_query($conn,$sql);
if($result){
    $a['code'] = 0;
    $a['msg'] = '注册成功';
    echo json_encode($a);
    exit();
}else{
    $a['code'] = 1;
    $a['msg'] = '注册失败';
    echo json_encode($a);
    exit();
}
?>

登录的后端（login.php）

<?php
// 连接数据库
include_once 'conn.php';

// 定义一个数组，用于存放将要返回的信息
$a = array();

// 接收前端传过来的参数
$username = $_GET['username'];
$password = $_GET['password'];

// 后端参数校验
if(strlen($password) == 0 || strlen($username) == 0){
    $a['code'] = 1;
    $a['msg'] = '用户名或者密码没填';
    echo json_encode($a);
    exit();
}

// 准备SQL语句
$sql = "SELECT * FROM `users` WHERE `username` = '$username' and `password` = '$password'";
// 执行SQL语句（注意：查询操作返回的是一个结果集，增删改都是返回布尔值）
$result = mysqli_query($conn,$sql);
// 数一下查询的结果有几条
$num = mysqli_num_rows($result);
if($num > 0){
    $a['code'] = 0;
    $a['msg'] = '登陆成功';
    echo json_encode($a);
    exit();
}else{
    $a['code'] = 1;
    $a['msg'] = '用户名或者密码错误';
    echo json_encode($a);
    exit();
}
?>

修改密码的后端

<?php
// 引入数据库连接文件，连接数据库
include_once 'conn.php';

// 准备一个数组，用于存放将要返回的数据
$a = array();

// 通过get方法接收前端传过来的参数，接收好了之后放在一个变量里
$username = $_GET['username'];
$new_password = $_GET['new_password'];

// 后端参数校验
// 如果用户名没传（参数长度为0）或者新密码没传
if(strlen($username) == 0 || strlen($new_password) == 0){
    $a['code'] = 1;         //状态码为1表示出错误了
    $a['msg'] = '缺少参数'
    // 将a数组返回给前端，但是注意要转换成json格式，不然前端看不懂
    echo json_encode($a);
    exit; // 终止程序运行
}

// 修改密码
$sql = "UPDATE `users` SET `password`='$new_password' WHERE `username` = '$username'";

?>
文章作者: 神秘黑客
文章链接: http://10.163.72.39:4000/2024/05/20/%E6%A0%91%E6%B4%9E%E7%BD%91%E9%A1%B5%E7%89%88/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 神秘黑客 !
APP
  目录