mwxbgi697
/
softegg
1
0
Fork 2
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity

1

Browse Source
fangxiaoting_branch
“fangxiaoting” 1 year ago
parent 39951be00e
commit b7d8754406
8 changed files with 0 additions and 727 deletions
Show Stats Download Patch File Download Diff File

117
src/前端/walktofree/src/components/HomePage.vue
Unescape View File

@ -1,117 +0,0 @@
<template>
<div class="home-container">
<h1>首页</h1>
<div class="search-container">
<input type="text" class="search-input" placeholder="世界这么大出去看看吧">
<button class="search-button" @click="gotoSearchPage()">搜索</button>
</div>
<div class="image-container">
<img src="../../photos/background.png" alt="图片描述" class="search-image">
</div>
<div class="footer-nav">
<button>首页</button>
<button @click="gotomessage()">消息</button>
<button @click="gotomine()">我的</button>
</div>
</div>
</template>
<style scoped>
/* 添加样式以定义图片的大小和位置 */
.image-container {
text-align: center; /* 或者根据你的需求来设置 */
margin-top: 20px; /* 你可以根据需要调整这个值 */
}
.home-container {
/* 添加你的样式 */
text-align: center;
padding: 20px;
/* 可能需要为内容添加一些底部空间以容纳底部导航 */
padding-bottom: 50px;
}
.search-container {
/* 定义搜索框容器的样式 */
text-align: center;
margin-bottom: 20px; /* 根据需要添加一些底部间距 */
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中（如果不需要完全居中，可以去掉这个）*/
}
.search-input {
/* 定义搜索框的样式 */
flex: 1; /* 占据剩余空间 */
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.search-button {
/* 定义搜索按钮的样式 */
margin-left: 10px; /* 与搜索框之间的间距 */
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #ccc;
color: #333;
cursor: pointer;
}
.search-button:hover {
/* 搜索按钮点击时的样式 */
background-color: #bbb;
}
.footer-nav {
/* 定义底部导航的样式 */
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
padding: 10px;
background-color: #f5f5f5; /* 示例背景色 */
}
.footer-nav button {
/* 定义按钮的样式 */
flex: 1;
border: none;
padding: 10px;
background-color: #ccc;
color: #333;
cursor: pointer;
}
.footer-nav button:hover {
/* 按钮点击时的样式 */
background-color: #bbb;
}
</style>
<script>
export default {
name: 'Home',
methods: {
gotohome() {
this.$router.push('/home');
},
gotomessage() {
this.$router.push('/message');
},
gotomine() {
this.$router.push('/mine');
},
gotoSearchPage() {
this.$router.push('/searchPage');
},
}
}
</script>

110
src/前端/walktofree/src/components/Login.vue
Unescape View File

@ -1,110 +0,0 @@
<template>
<div class="login-container">
<h1>登录页面</h1>
<form @submit.prevent="login" class="login-form">
<label for="username">用户名：</label>
<input type="text" id="username" v-model="username" class="input-field">
<br>
<label for="password">密码：</label>
<input type="password" id="password" v-model="password" class="input-field">
<br>
<button type="submit" class="submit-button">登录</button>
<button @click="goToRegister" class="register-button">注册</button>
</form>
</div>
</template>
<style scoped>
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #28a7a3;
border-radius: 5px;
text-align: center;
}
.input-field {
margin: 10px 0;
padding: 5px;
width: 100%;
}
.submit-button {
padding: 10px 20px;
background-color: #007bff;
color: #003f3f;
border: none;
border-radius: 5px;
cursor: pointer;
}
.register-button {
padding: 10px 20px;
background-color: #ff6347;
color: #003f3f;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
<script>
import { login } from '../api/auth'
import axios from "axios";
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
console.log("用户名：", this.username);
console.log("密码：", this.password);
axios.post('http://192.168.254.35:8080/Login/login', {
// 在请求体中传递用户名和密码字段
username: this.username,
password: this.password
}, {
// 配置跨域请求时携带 cookie
withCredentials: true,
// 设置请求头部为 JSON 格式
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
// 假设服务器在登录成功时返回一个包含 status 或其他表示成功状态的字段
if (response.data == 1) {
// 登录成功，跳转到主页面
this.$router.push('/home');
}
else if (response.data == 2) {
alert('登录失败：账号或密码错误' );
}
else if(response.data == 3){
alert('登录失败：账号未注册');
}
else if(response.data == 0) {
alert('登录失败：未知原因');
}
else {
alert('登录失败：未知原因');
}
})
.catch(error => {
console.error(error);
// 处理网络错误或服务器错误等
alert('登录失败：网络错误或服务器错误');
});
},
goToRegister() {
this.$router.push('/register'); // 跳转到注册页面
}
}
}
</script>

97
src/前端/walktofree/src/components/Register.vue
Unescape View File

@ -1,97 +0,0 @@
<template>
<div class="register-container">
<h1>注册页面</h1>
<form @submit.prevent="register" class="register-form">
<label for="username">用户名：</label>
<input type="text" id="username" v-model="username" class="input-field">
<br>
<label for="password">密码：</label>
<input type="password" id="password" v-model="password" class="input-field">
<br>
<button type="submit" class="submit-button">注册</button>
<button class="return-button" @click="gotoLogin()">返回登录</button>
</form>
</div>
</template>
<style scoped>
.register-container {
max-width: 400px;
margin: 0 auto;
padding: 30px;
border: 1px solid #cccc7b;
border-radius: 5px;
text-align: center;
}
.input-field {
margin: 10px 0;
padding: 5px;
width: 100%;
}
.submit-button {
padding: 10px 20px;
background-color: #28a7a3;
color: #abd4ee;
border: none;
border-radius: 5px;
cursor: pointer;
}
.return-button {
padding: 10px 20px;
background-color: #ff6347; /* 例如，设置为红色 */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px; /* 可以添加一些上边距来分隔按钮 */
}
</style>
<script>
import { register } from '../api/auth'
import axios from "axios";
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
register() {
console.log("用户名：", this.username);
console.log("密码：", this.password);
axios.post('http://192.168.254.35:8080/Login/register', {
// 在请求体中传递用户名和密码字段
username: this.username,
password: this.password
}, {
// 配置跨域请求时携带 cookie
withCredentials: true,
// 设置请求头部为 JSON 格式
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
console.log(response.data)
// 处理注册成功后的逻辑
alert(response.data);
})
.catch(error => {
console.error(error)
// 处理注册失败后的逻辑
alert(response.data);
})
},
gotoLogin(){
this.$router.push('/login');
},
}
}
</script>

11
src/前端/walktofree/src/components/SecurityVerification.vue
Unescape View File

@ -1,11 +0,0 @@
<script setup>
</script>
<template>
</template>
<style scoped>
</style>

67
src/前端/walktofree/src/components/message.vue
Unescape View File

@ -1,67 +0,0 @@
<template>
<div class="home-container">
<h1>消息页面</h1>
<!-- 在这里添加你的主页内容 -->
<div class="footer-nav">
<button @click="gotohome()">首页</button>
<button @click="gotomessage()">消息</button>
<button @click="gotomine()">我的</button>
</div>
</div>
</template>
<style scoped>
.home-container {
/* 添加你的样式 */
text-align: center;
padding: 20px;
/* 可能需要为内容添加一些底部空间以容纳底部导航 */
padding-bottom: 50px;
}
.footer-nav {
/* 定义底部导航的样式 */
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
padding: 10px;
background-color: #f5f5f5; /* 示例背景色 */
}
.footer-nav button {
/* 定义按钮的样式 */
flex: 1;
border: none;
padding: 10px;
background-color: #ccc;
color: #333;
cursor: pointer;
}
.footer-nav button:hover {
/* 按钮点击时的样式 */
background-color: #bbb;
}
</style>
<script>
export default {
name: 'Message',
methods: {
gotohome() {
this.$router.push('/home');
},
gotomessage() {
this.$router.push('/message');
},
gotomine() {
this.$router.push('/mine');
},
}
}
</script>

189
src/前端/walktofree/src/components/mine.vue
Unescape View File

@ -1,189 +0,0 @@
<template>
<div class="profile">
<h2>个人主页</h2>
<div v-if="showNicknameInput">
<label for="nickname">昵称：</label>
<input type="nickname" id="nickname" v-model="nickname" class="input-field">
<button @click="updateNickname">保存</button>
</div>
<div v-else>
<p>昵称：{{ user.nickname }}</p>
<button @click="toggleNicknameInput">更换</button>
</div>
<h1>{{ user.name }}</h1>
<p>身份证号：{{user.IDCard}}</p>
<div v-if="showEmailInput">
<label for="email">邮箱：</label>
<input type="email" id="email" v-model="email" class="input-field">
<button @click="updateEmail">保存</button>
</div>
<div v-else>
<p>邮箱：{{ user.email }}</p>
<button @click="toggleEmailInput">编辑</button>
</div>
<div v-if="showPhoneInput">
<label for="PhoneNumber">手机号：</label>
<input type="phone" id="phone" v-model="phone" class="input-field">
<button @click="updatePhone">保存</button>
</div>
<div v-else>
<p>手机号：{{ user.phone }}</p>
<button @click="togglePhoneInput">更换</button>
</div>
<div class="footer-nav">
<button @click="gotohome()">首页</button>
<button @click="gotomessage()">消息</button>
<button>我的</button>
</div>
</div>
</template>
<style scoped>
/* 在这里添加样式 */
.profile {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.input-field {
margin-bottom: 10px;
}
button {
margin-top: 10px;
}
.home-container {
/* 添加你的样式 */
text-align: center;
padding: 20px;
/* 可能需要为内容添加一些底部空间以容纳底部导航 */
padding-bottom: 50px;
}
.footer-nav {
/* 定义底部导航的样式 */
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
padding: 10px;
background-color: #f5f5f5; /* 示例背景色 */
}
.footer-nav button {
/* 定义按钮的样式 */
flex: 1;
border: none;
padding: 10px;
background-color: #ccc;
color: #333;
cursor: pointer;
}
.footer-nav button:hover {
/* 按钮点击时的样式 */
background-color: #bbb;
}
</style>
<script>
import axios from 'axios';
export default {
props: ['phone'],
data() {
return {
user: {},
nickname:'',
showNicknameInput: false,
email: '',
showEmailInput: false,
phone: '',
showPhoneInput: false,
IDCard: '',
createtime: '',
status: 0,
};
},
created() {
// 在组件创建时根据账号获取用户信息
this.fetchUser(this.phone);
},
methods: {
fetchUser(phone) {
// 从后端 API 请求
axios.get(`http://192.168.254.35:8080/users/getByPhone?phone=15616168609`)
.then(response => {
alert(response.data);
this.user = response.data;
})
.catch(error => {
console.error('Error fetching user:', error);
});
},
toggleNicknameInput(){
this.showNicknameInput = !this.showNicknameInput;
this.nickname = this.user.nickname;
},
updateNickname(){
axios.get(`http://192.168.254.35:8080/users/getByPhone?phone=15616168609`, { nickname: this.nickname })
.then(response => {
this.user.nickname = this.nickname;
this.toggleNicknameInput(); // 切换回展示模式
})
.catch(error => {
console.error('Error updating nickname:', error);
});
},
toggleEmailInput() {
this.showEmailInput = !this.showEmailInput;
this.email = this.user.email;// 在切换到编辑模式时显示当前邮箱地址
},
updateEmail() {
// 这里发送请求更新用户邮箱
axios.get(`http://192.168.254.35:8080/users/getByPhone?phone=15616168609`, { email: this.email })
.then(response => {
this.user.email = this.email;
this.toggleEmailInput(); // 切换回展示模式
})
.catch(error => {
console.error('Error updating email:', error);
});
},
togglePhoneInput(){
this.showPhoneInput = !this.showPhoneInput;
this.phone = this.user.phone;
},
updatePhone(){
axios.get(`http://192.168.254.35:8080/users/getByPhone?phone=15616168609`, { phone: this.phone })
.then(response => {
alert(this.phone);
this.user.phone = this.phone;
this.togglePhoneInput(); // 切换回展示模式
})
.catch(error => {
console.error('Error updating phone:', error);
});
},
gotohome() {
this.$router.push('/home');
},
gotomessage() {
this.$router.push('/message');
},
}
};
</script>

45
src/前端/walktofree/src/components/new_file.vue
Unescape View File

@ -1,45 +0,0 @@
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { format } from 'date-fns'
const startDateValue = ref(format(new Date(), 'yyyy-MM-dd'))
const endDateValue = ref(format(new Date(), 'yyyy-MM-dd'))
watchEffect(() => {
console.log('startDateValue:', startDateValue.value)
console.log('endDateValue:', endDateValue.value)
})
</script>
<template>
<VueDatePicker
placeholder="请选择预计出发日期"
:min-date="new Date()"
format="yyyy-MM-dd"
v-model="startDateValue" />
<VueDatePicker
placeholder="请选择预计返回日期"
:min-date="new Date()"
format="yyyy-MM-dd"
v-model="endDateValue" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { format } from 'date-fns'
const startDateValue = ref(format(new Date(), 'yyyy-MM-dd'))
const endDateValue = ref(format(new Date(), 'yyyy-MM-dd'))
watchEffect(() => {
console.log('startDateValue:', startDateValue.value)
console.log('endDateValue:', endDateValue.value)
})
</script>
<template>
<VueDatePicker
placeholder="请选择预计出发日期"
:min-date="new Date()"
format="yyyy-MM-dd"
v-model="startDateValue" />
<VueDatePicker
placeholder="请选择预计返回日期"
:min-date="new Date()"
format="yyyy-MM-dd"
v-model="endDateValue" />
</template>

91
src/前端/walktofree/src/components/searchPage.vue
Unescape View File

@ -1,91 +0,0 @@
<template>
<div class="home-container">
<div class="return">
<button class="return-button" @click="gotohome()">返回</button>
</div>
<div class="search-container">
<input type="text" class="search-input" placeholder="世界这么大出去看看吧">
<button class="search-button" @click="search">搜索</button>
</div>
</div>
</template>
<style scoped>
.search-container {
/* 定义搜索框容器的样式 */
text-align: center;
/* 使用margin-top来确保搜索框在返回按钮下方20px */
margin-top: 50px; /* 假设返回按钮的高度是30px（10px padding * 2 + 10px height），再加上20px的间距 */
margin-bottom: 20px; /* 根据需要添加一些底部间距 */
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中（如果不需要完全居中，可以去掉这个）*/
}
.search-input {
/* 定义搜索框的样式 */
flex: 1; /* 占据剩余空间 */
padding: 15px;
border-radius: 5px;
border: 1px solid #ccc;
}
.search-button {
margin-left: 10px; /* 与搜索框之间的间距 */
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #ccc;
color: #333;
cursor: pointer;
}
.search-button:hover {
/* 搜索按钮点击时的样式 */
background-color: #bbb;
}
.return-button {
/* 定义返回按钮的样式 */
position: fixed; /* 使按钮位置固定 */
top: 10px;
left: 10px;
margin: 0;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #ccc;
color: #333;
cursor: pointer;
}
.footer-nav button {
/* 定义按钮的样式 */
flex: 1;
border: none;
padding: 10px;
background-color: #ccc;
color: #333;
cursor: pointer;
}
.footer-nav button:hover {
/* 按钮点击时的样式 */
background-color: #bbb;
}
</style>
<script>
export default {
name: 'SearchPage',
methods: {
gotohome() {
this.$router.push('/home');
},
}
}
</script>
Write Preview
Loading…
Cancel
Save