关于vue框架学习day4‘‘

1.前端发送数据给后端

首先新建一个名为client用于与后端交互的文件夹，在该文件夹地址栏处输入cmd打开命令提示符窗口，然后输入npm init vue@latest语句导入vue框架，如下图所示，需注意红框中的问题要选择“是”。

将该文件夹拖入到HbuilderX软件中，然后右击文件夹，选择“使用命令行窗口打开所在目录”，在弹出的命令提示符窗口中输入npm i后回车，此时完成项目依赖的模块的下载，如下图所示。

在昨天建立的用户注册页面基础上添加一行新代码，如下图红框所示，用于向后端发送数据。

2.后端接受数据并操作数据库

因课程为减轻难度，本节不作具体解释。

3.前后端课程思路

       在client/src/views中写前端代码，需要在里面写上axios语句用于网络请求，而server文件夹是服务器，主要是提供数据，一个是app/public文件下的静态数据，一个是controller中需要用逻辑语言写的数据。

4.注册页面

源代码：

<template>
	<div class="register">
		<div class="mainbox">
				<h1>注册界面</h1>		
				<div class="content">
					<div class="box2">
						<p >输入用户名 :<input type="text" v-model="username"/></p>
						<p v-if="is_phone_success" class="warning">/*请输入正确的手机号码格式*/</p>
						<p>输入手机号 :<input type="text" v-model="phone"/></p>			
		
					</div>
					<div class="box3">
					    <p v-if="is_email_success" class="warning">/*请输入正确的邮箱*/</p>
						<p>输入邮箱 :<input type="text" v-model="email"/></p>
						<p v-if="is_password_success" class="warning">/*请输入正确的密码格式,只能由数字、特殊字符组成，1-9位*/</p>
						<p>输入密码 :<input type="password" v-model="pwd"/></p>
		
					</div>
					
					
				</div>
				<div class="box1">
					<button class="zhuce"  @click="re">注册</button>
					<a class="relogin" href="/login">已有账号?去登录</a>
		<!-- 			<button @click="re">登录</button>	 -->
					
				</div>		
				
			</div>
	</div>
	
</template>

<script setup>
	import router from "@/router";
	import {ref} from "vue"
	
	let username = ref("")
	let phone = ref("")
	let email = ref("")
	let pwd = ref("")
	let is_phone_success=ref(false)
	let is_email_success=ref(false)
	let is_password_success=ref(false)
	let re =()=>{
		console.log(phone.value,email.value,pwd.value)
		let reg3	= /^1[3456789]\d{9}$/
		let result3=reg3.test(phone.value)
		is_phone_success.value=!result3
	

		let reg	= /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/
		let result=	reg.test(email.value)
		is_email_success.value=!result
		
		let reg2= /^(?=.*\d)(?=.*[^\da-zA-Z\s])(\d|[^\da-zA-Z\s]){1,9}$/
		let result2 = reg2.test(pwd.value)
		is_password_success.value=!result2
		
		if (!is_phone_success.value && !is_email_success.value && !is_password_success.value) {
		    let res = { code: 2001, info: "注册成功" };
		    if (res.code === 2001) {
		      router.push("/login");
		    } else {
		      alert(res.info);
		    }
		  }
		
	}

</script>

<style scoped>
	.warning{
		color: red;
		font-size: 10px;
	}
	.register{
		background-color: indianred;
		border: 1px solid transparent;
	}
	.mainbox{
		width: 550px;
		height: 400px;
		margin: 200px auto;
		border-radius: 10px;
		background-color: rgb(247, 255, 255);
	}
	p{
		margin: 40px;
		font-size: 17px;
	}
	.box1{
		/* display: flex;
		flex-wrap: nowrap;
		justify-content: space-around; */
/* 		text-align: center; */
	}
	h1{
		text-align: center;
	}
	.content{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;

	}
	.relogin{
		text-decoration: none;
		font-size: 14px;
		margin-left: 10px;
	}
	.zhuce{
		width: 60px;
		font-size: 16px;
		background-color: cornflowerblue;
		border-radius: 10px;
		border: 0;
		color: white;
		margin-left: 36%;
	}
	input{
		width: 200px;
		height: 20px;
		margin-top: 10px;
		
	}
</style>

效果图：

用户正确输入内容后点击注册或者直接登录可跳转到登录界面

5.登录界面

源代码

<template>
	<div class="login">
		<div class="mainbox">
				<h1>登录界面</h1>		
				<div class="content">
					<div class="box2">
						<p >输入用户名 :<input type="text" v-model="username"/></p>
						<p v-if="is_phone_success" class="warning">/*请输入正确的手机号码格式*/</p>
						<p>输入手机号 :<input type="text" v-model="phone"/></p>			
		
					</div>
					<div class="box3">
					    <p v-if="is_email_success" class="warning">/*请输入正确的邮箱*/</p>
						<p>输入邮箱 :<input type="text" v-model="email"/></p>
						<p v-if="is_password_success" class="warning">/*请输入正确的密码格式,只能由数字、特殊字符组成，1-9位*/</p>
						<p>输入密码 :<input type="password" v-model="pwd"/></p>
		
					</div>
					
					
				</div>
				<div class="box1">
					<button class="denglu"  @click="re">登录</button>
					<a class="relogin" href="/register">未有账号?去注册</a>
		<!-- 			<button @click="re">登录</button>	 -->
					
				</div>		
				
			</div>
	</div>
	
</template>

<script setup>
	import router from "@/router";
	import {ref} from "vue"
	
	let username = ref("")
	let phone = ref("")
	let email = ref("")
	let pwd = ref("")
	let is_phone_success=ref(false)
	let is_email_success=ref(false)
	let is_password_success=ref(false)
	let re =()=>{
		console.log(phone.value,email.value,pwd.value)
		let reg3	= /^1[3456789]\d{9}$/
		let result3=reg3.test(phone.value)
		is_phone_success.value=!result3
	

		let reg	= /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/
		let result=	reg.test(email.value)
		is_email_success.value=!result
		
		let reg2= /^(?=.*\d)(?=.*[^\da-zA-Z\s])(\d|[^\da-zA-Z\s]){1,9}$/
		let result2 = reg2.test(pwd.value)
		is_password_success.value=!result2
		
		if (!is_phone_success.value && !is_email_success.value && !is_password_success.value) {
		    let res = { code: 2001, info: "登录成功" };
		    if (res.code === 2001) {
		      router.push("./home");
		    } else {
		      alert(res.info);
		    }
		  }
		
	}

</script>

<style scoped>
	.warning{
		color: red;
		font-size: 10px;
	}
	.login{
		background-color: darkolivegreen;
		border: 1px solid transparent;
	}
	.mainbox{
		width: 550px;
		height: 400px;
		margin: 200px auto;
		border-radius: 10px;
		background-color: rgb(247, 255, 255);
	}
	p{
		margin: 40px;
		font-size: 17px;
	}
	.box1{
		/* display: flex;
		flex-wrap: nowrap;
		justify-content: space-around; */
/* 		text-align: center; */
	}
	h1{
		text-align: center;
	}
	.content{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;

	}
	.relogin{
		text-decoration: none;
		font-size: 14px;
		margin-left: 10px;
	}
	.denglu{
		width: 60px;
		font-size: 16px;
		background-color: cornflowerblue;
		border-radius: 10px;
		border: 0;
		color: white;
		margin-left: 36%;
	}
	input{
		width: 200px;
		height: 20px;
		margin-top: 10px;
		
	}
</style>

：结果图：

用户正确输入内容后点击登录可直接跳转到首页或者点击注册可跳转到注册界面

7.首页

首页主要有以下几个组件组成

简单的效果图：