feat:完成登录页面+各种细节

This commit is contained in:
橙子
2023-03-21 23:05:42 +08:00
parent 418f4a4785
commit 4b856c4905
22 changed files with 430 additions and 189 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

View File

@@ -0,0 +1,206 @@
* {
margin: 0;
padding: 0;
}
/*公共CSS*/
.box {
width: 100vw;
height: 100vh;
background-color: rgb(29, 67, 89);
.content {
box-shadow: 0px 1px 6px #3B4859;
.login-wrapper {
h1 {
text-align: center;
}
.login-form {
.form-item {
margin: 20px 0;
span {
display: block;
margin: 5px 20px;
font-weight: 100;
}
.input-item {
width: 100%;
border-radius: 40px;
padding: 20px;
box-sizing: border-box;
font-size: 20px;
font-weight: 200;
&:focus {
outline: none;
}
}
}
.login-btn {
width: 100%;
border-radius: 40px;
color: #fff;
border: 0;
font-weight: 100;
margin-top: 10px;
cursor: pointer;
}
}
.divider {
width: 100%;
margin: 20px 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
span:nth-child(1) {
flex: 1;
}
span:nth-child(3) {
flex: 1;
}
.line {
display: inline-block;
max-width: 30%;
width: 30%;
}
.divider-text {
vertical-align: middle;
margin: 0px 20px;
line-height: 0px;
display: inline-block;
width: 100px;
}
}
.other-login-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.other-login-item {
border: 1px solid rgb(214, 222, 228);
padding: 10px;
margin: 10px;
cursor: pointer;
}
}
}
}
/*一般大于手机的尺寸CSS*/
@media (min-width: 767px) {
.box {
background-color: #F0F2F5;
.content {
width: 85vw;
height: 90vh;
background: url("@/assets/login_images/login_two.jpg") no-repeat;
background-size: 90% 100%;
position: absolute;
right: 15%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
background-color: #fff;
.login-wrapper {
width: 25vw;
position: absolute;
right: 15%;
top: 50%;
transform: translateY(-50%);
h1 {
text-align: center;
font-size: 45px;
color: rgb(81, 100, 115);
margin-bottom: 40px;
}
.login-form {
margin: 10px 0;
.form-item {
span {
color: rgb(81, 100, 115);
}
.input-item {
height: 60px;
border: 1px solid rgb(214, 222, 228);
}
}
.login-btn {
height: 50px;
background-color: rgb(59, 72, 89);
font-size: 20px;
}
}
.divider {
.line {
border-bottom: 1px solid rgb(214, 222, 228);
}
}
.other-login-item {
border-radius: 20px;
img {
width: 40px;
height: 40px;
}
}
}
}
}
}
/*手机端CSS*/
@media (max-width: 768px) {
.box {
.content {
width: 100vw;
height: 100vh;
background: url("@/assets/login_images/login_bg_phone.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: flex-start;
justify-content: center;
.login-wrapper {
width: 70%;
height: 60%;
padding-top: 15%;
h1 {
font-size: 30px;
color: #fff;
}
.login-form {
.form-item {
margin: 10px 0;
span {
color: rgb(113, 129, 141);
}
.input-item {
height: 30px;
border: 1px solid rgb(113, 129, 141);
background-color: transparent;
color: #fff;
}
}
.login-btn {
height: 40px;
background-color: rgb(235, 95, 93);
font-size: 16px;
}
}
.divider {
.line {
border-bottom: 1px solid #fff;
}
.divider-text {
color: #fff;
}
}
.other-login-item {
border-radius: 15px;
img {
width: 35px;
height: 35px;
}
}
}
}
}
}

View File

@@ -55,12 +55,18 @@ const agree=async ()=>{
if(res.isArgee)
{
agreeNum.value+=1;
alert(res.message)
ElMessage({
message: res.message,
type: 'success',
})
}
else
{
agreeNum.value-=1;
alert(res.message)
ElMessage({
message: res.message,
type: 'warning',
})
}
}
onMounted(()=>{

View File

@@ -33,8 +33,8 @@
<el-menu-item index="5">
<div style="width: 350px;">
<el-input style="width: 300px;" placeholder="全站搜索" clearable prefix-icon="Search" />
<el-button type="primary" plain>搜索</el-button>
<el-input style="width: 300px;" v-model="searchText" placeholder="全站搜索" clearable prefix-icon="Search" />
<el-button type="primary" plain @click="search">搜索</el-button>
</div>
</el-menu-item>
@@ -59,19 +59,40 @@ import useUserStore from '@/stores/user.js'
const router = useRouter()
const userStore =useUserStore();
const activeIndex = ref('1')
const searchText=ref('')
const handleSelect = (key, keyPath) => {
console.log(key, keyPath)
}
const logout=async ()=>{
await userStore.logOut();
router.push("/login");
const logout= async()=>{
ElMessageBox.confirm(`确定登出系统吗?`, "警告", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
}).then( async() => {
//异步
await userStore.logOut();
//删除成功后,跳转到主页
router.push("/login");
ElMessage({
type: "success",
message: "登出成功",
});
});
}
const enterIndex=()=>{
router.push("/index");
};
const enterProfile=()=>{
router.push("/profile");}
const search=()=>{
var routerPer = { path: `/discuss`,query:{q:searchText.value} };
searchText.value='';
router.push(routerPer)
}
</script>
<style scoped>
.logo{

View File

@@ -1,53 +1,8 @@
<template>
<div class="body-div" id="body">
<div class="left">
<video class="videoBG" autoplay playsinline loop disablepictureinpicture poster="/loginBg.png">
<!-- <source src="/loginBg.mp4" type="video/mp4"> -->
</video>
</div>
<div class="right">
<div class="right-div">
<RouterView />
</div>
</div>
</div>
<div class="box">
<div class="content">
<RouterView/>
</div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
</script>
<style scoped>
.left
{
background-color: #010413;
}
.right
{
}
.right-div
{
margin-top: 60%;
padding: 2rem;
}
.body-div
{
display: flex;
justify-content: space-between;
height: 930px;
}
.videoBG
{
width:100% ;
}
</style>
<style src="@/assets/styles/login.scss" scoped></style>

View File

@@ -51,7 +51,7 @@ const router = createRouter({
},
{
name:'discuss',
path: '/discuss/:plateId',
path: '/discuss/:plateId?',
component: () => import('../views/Discuss.vue')
},
{

View File

@@ -35,6 +35,19 @@ myaxios.interceptors.response.use(function (response) {
return response;
}, function (error) {
const response=error.response.data;
//业务异常+应用异常,统一处理
switch(response.code)
{
case 403:
ElMessage.error(response.message)
break;
case 500:
ElMessage.error(response.message)
break;
}
return Promise.reject(error);
});
export default myaxios

View File

@@ -114,6 +114,12 @@ const handleClick =async (tab, event) => {
}
onMounted(async()=>{
if(route.query.q !=undefined)
{
query.title=route.query.q??''
router.push("/discuss")
}
await loadDiscussList();
})

View File

@@ -1,13 +1,7 @@
<template>
<div style="width: 100%">
<div class="body-div">
<el-form
label-width="120px"
:model="editForm"
label-position="left"
:rules="rules"
ref="ruleFormRef"
>
<el-form label-width="120px" :model="editForm" label-position="left" :rules="rules" ref="ruleFormRef">
<el-form-item label="分类:">
<el-radio-group v-model="radio">
<el-radio-button label="discuss">主题</el-radio-button>
@@ -16,11 +10,7 @@
<el-radio-button label="orther">其他</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="route.query.artType == 'article'"
label="子文章名称:"
prop="name"
>
<el-form-item v-if="route.query.artType == 'article'" label="子文章名称:" prop="name">
<el-input placeholder="请输入" v-model="editForm.name" />
</el-form-item>
<el-form-item v-else label="标题:" prop="title">
@@ -30,11 +20,7 @@
<el-input placeholder="请输入" v-model="editForm.introduction" />
</el-form-item>
<el-form-item label="内容:" prop="content">
<MavonEdit
height="30rem"
v-model="editForm.content"
:codeStyle="codeStyle"
/>
<MavonEdit height="30rem" v-model="editForm.content" :codeStyle="codeStyle" />
</el-form-item>
<el-form-item label="封面:">
<el-input placeholder="请输入" />
@@ -43,13 +29,7 @@
<el-input placeholder="请输入" v-model="editForm.types" />
</el-form-item>
<el-form-item>
<el-button
@click="submit(ruleFormRef)"
class="submit-btn"
type="primary"
>提交</el-button
></el-form-item
>
<el-button @click="submit(ruleFormRef)" class="submit-btn" type="primary">提交</el-button></el-form-item>
</el-form>
</div>
</div>
@@ -89,11 +69,11 @@ const editForm = reactive({
//组装主题内容: 需要更新主题信息
const discuss = {
};
};
//组装文章内容:需要添加的文章信息
const article = {
};
};
//定义效验规则
const ruleFormRef = ref(null);
@@ -119,45 +99,62 @@ const submit = async (formEl) => {
if (route.query.artType == "discuss") {
discuss.title=editForm.title;
discuss.types= editForm.types;
discuss.introduction= editForm.introduction;
discuss.content= editForm.content;
discuss.plateId= discuss.plateId??route.query.plateId
discuss.title = editForm.title;
discuss.types = editForm.types;
discuss.introduction = editForm.introduction;
discuss.content = editForm.content;
discuss.plateId = discuss.plateId ?? route.query.plateId
//主题创建
if (route.query.operType == "create") {
const response= await discussAdd(discuss);
var routerPer = { path: `/article/${response.data.id}` };
router.push(routerPer);
const response = await discussAdd(discuss);
ElMessage({
message: `[${discuss.title}]主题创建成功!`,
type: 'success',
})
var routerPer = { path: `/article/${response.data.id}` };
router.push(routerPer);
}
//主题更新
else if (route.query.operType == "update") {
await discussUpdate(route.query.discussId, discuss);
ElMessage({
message: `[${discuss.title}]主题更新成功!`,
type: 'success',
})
var routerPer = { path: `/article/${route.query.discussId}` };
router.push(routerPer);
router.push(routerPer);
}
}
//artcle文章处理
else if (route.query.artType == "article") {
//组装文章内容:需要添加的文章信息
article.content= editForm.content;
article.name= editForm.name;
article.discussId=route.query.discussId;
article.parentId=route.query.parentArticleId
//组装文章内容:需要添加的文章信息
article.content = editForm.content;
article.name = editForm.name;
article.discussId = route.query.discussId;
article.parentId = route.query.parentArticleId
//文章创建
if (route.query.operType == "create") {
const response= await articleAdd(article);
const response = await articleAdd(article);
ElMessage({
message: `[${article.name}]文章创建成功!`,
type: 'success',
})
var routerPer = { path: `/article/${route.query.discussId}/${response.data.id}` };
router.push(routerPer);
router.push(routerPer);
}
//文章更新
else if (route.query.operType == "update") {
await articleUpdate(route.query.articleId, article);
ElMessage({
message: `[${article.name}]文章更新成功!`,
type: 'success',
})
var routerPer = { path: `/article/${route.query.discussId}/${route.query.articleId}` };
router.push(routerPer);
router.push(routerPer);
}
}
//添加成功后跳转到该页面
@@ -186,17 +183,17 @@ onMounted(async () => {
//加载主题
const loadDiscuss = async () => {
const response = await discussGet(route.query.discussId);
const res=response.data
const res = response.data
editForm.content = res.content;
editForm.title = res.title;
editForm.types = res.types;
editForm.introduction = res.introduction;
discuss.plateId=res.plateId;
discuss.plateId = res.plateId;
};
//加载文章
const loadArticle = async () => {
const response = await articleGet(route.query.articleId);
const res=response.data
const res = response.data
editForm.content = res.content;
editForm.name = res.name;
editForm.discussId = res.discussId;

View File

@@ -1,55 +1,74 @@
<template>
<h2> 登录-欢迎</h2>
<div class="login-wrapper">
<h1>意社区-登录</h1>
<div class="login-form">
<div class="username form-item">
<span>使用邮箱或者手机号</span>
<input type="text" class="input-item" v-model="loginForm.userName">
</div>
<div class="password form-item">
<span>密码</span>
<input type="password" class="input-item" v-model="loginForm.password">
</div>
<button class="login-btn" @click="login"> </button>
<button class="login-btn" @click="guestlogin">游客临时登录</button>
</div>
<div class="divider">
<span class="line"></span>
<span class="divider-text">其他方式登录</span>
<span class="line"></span>
</div>
<div class="other-login-wrapper">
<div class="other-login-item">
<img src="@/assets/login_images/QQ.png" alt="">
</div>
<div class="other-login-item">
<img src="@/assets/login_images/WeChat.png" alt="">
</div>
</div>
</div>
<!-- <h2> 登录-欢迎</h2>
<el-input v-model="loginForm.userName" placeholder="用户名" />
<el-input v-model="loginForm.password" placeholder="密码" show-password />
<el-button class="login-btn" type="primary" @click="login" >登录</el-button>
<el-button class="login-btn" type="primary" @click="login">登录</el-button>
<br>
<el-button class="login-btn" type="primary" @click="guestlogin" >游客临时登录</el-button>
<el-button class="login-btn" type="primary" @click="guestlogin">游客临时登录</el-button> -->
</template>
<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useRouter, useRoute } from 'vue-router';
import useUserStore from '@/stores/user.js'
const userStore=useUserStore();
const router=useRouter();
const loginForm=reactive({
userName:"",
password:"",
uuid:"",
code:""
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const loginForm = reactive({
userName: "",
password: "",
uuid: "",
code: ""
})
const guestlogin=async ()=>{
loginForm.userName="guest";
loginForm.password="123456"
const guestlogin = async () => {
loginForm.userName = "guest";
loginForm.password = "123456"
await userStore.login(loginForm);
router.push("/index")
}
const login=async ()=>{
const response= await userStore.login(loginForm);
console.log(response);
if( response.status==200)
{
router.push("/index")
}
else
{
alert("登录失败")
}
const redirect = route.query?.redirect ?? '/index'
router.push(redirect)
}
const login = async () => {
const response = await userStore.login(loginForm).catch((e) => {
loginForm.password = "";
});
if (response!=undefined) {
ElMessage({
message: `您好${loginForm.userName},登录成功!`,
type: 'success',
})
const redirect = route.query?.redirect ?? '/index'
router.push(redirect)
}
}
</script>
<style scoped>
h2{
text-align: center;
}
.el-input
{
margin:0rem 0 0.5rem 0;
}
.login-btn
{
width: 100%;
margin-bottom: 0.5rem;
}
</style>
<style src="@/assets/styles/login.scss" scoped></style>

View File

@@ -30,7 +30,7 @@
import errImage from "@/assets/401_images/401.gif";
import { useRouter } from "vue-router";
// let { proxy } = getCurrentInstance();
let { proxy } = getCurrentInstance();
const router=useRouter();
const errGif = ref(errImage + "?" + +new Date());

View File

@@ -43,17 +43,24 @@ const rules = ref({
/** 提交按钮 */
function submit() {
pwdRef.value.validate(valid => {
pwdRef.value.validate(async valid => {
if (valid) {
updateUserPwd(user.oldPassword, user.newPassword).then(response => {
alert("修改成功");
});
const response=await updateUserPwd(user.oldPassword, user.newPassword)
if(response.status==200)
{
ElMessage({
type: "success",
message: "更新密码成功",
});
}
}
});
};
/** 关闭按钮 */
function close() {
alert("关闭")
// proxy.$tab.closePage();
};
</script>

View File

@@ -98,7 +98,7 @@ function changeScale(num) {
/** 上传预处理 */
function beforeUpload(file) {
if (file.type.indexOf("image/") == -1) {
alert("文件格式错误,请上传图片类型,如JPGPNG后缀的文件。");
ElMessage.error("文件格式错误,请上传图片类型,如JPGPNG后缀的文件。")
} else {
const reader = new FileReader();
reader.readAsDataURL(file);
@@ -117,8 +117,15 @@ async function uploadImg() {
open.value = false;
options.img = import.meta.env.VITE_APP_BASEAPI + "/file/" + response.data[0].id;
userStore.icon = options.img;
await updateUserIcon(response.data[0].id);
alert("上传成功")
const iconResponse= await updateUserIcon(response.data[0].id);
if(iconResponse.status==200)
{
ElMessage({
type: "success",
message: "头像更新成功",
});
}
});
};
/** 实时预览 */

View File

@@ -1,42 +1,42 @@
<template>
<el-form ref="userRef" :model="user" :rules="rules" label-width="80px">
<el-form ref="userRef" :model="user" :rules="rules" label-width="80px">
<el-form-item label="账号" prop="userName">
<el-input v-model="user.userName" disabled />
</el-form-item>
<el-form-item label="用户昵称" prop="nick">
<el-input v-model="user.nick" maxlength="30" />
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="user.phone" maxlength="11" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="user.email" maxlength="50" />
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="user.sex">
<el-radio :label="0"></el-radio>
<el-radio :label="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-input v-model="user.userName" disabled />
</el-form-item>
<el-form-item label="用户昵称" prop="nick">
<el-input v-model="user.nick" maxlength="30" />
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="user.phone" maxlength="11" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="user.email" maxlength="50" />
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="user.sex">
<el-radio :label="0"></el-radio>
<el-radio :label="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">保存</el-button>
<el-button type="danger" @click="close">关闭</el-button>
</el-form-item>
</el-form>
</el-form-item>
</el-form>
</template>
<script setup>
import { updateUserProfile } from "@/apis/userApi";
import useUserStore from "@/stores/user"
import { ref } from "vue";
const userStore=useUserStore();
const userStore = useUserStore();
const props = defineProps({
user: {
type: Object
}
});
const userRef=ref(null);
const userRef = ref(null);
const rules = ref({
nick: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
@@ -46,18 +46,21 @@ const rules = ref({
/** 提交按钮 */
function submit() {
userRef.value.validate(valid => {
userRef.value.validate(async valid => {
if (valid) {
updateUserProfile(props.user).then(response => {
userStore.name=props.user.nick
alert("修改成功");
});
const response = await updateUserProfile(props.user);
if (response.status == 200) {
ElMessage({
type: "success",
message: "用户信息修改成功",
});
}
}
});
});
};
/** 关闭按钮 */
function close() {
alert("关闭")
proxy.$tab.closePage();
// proxy.$tab.closePage();
};
</script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

View File

@@ -70,7 +70,8 @@ namespace Yi.BBS.Application.Forum
.WhereIF(input.PlateId is not null, x => x.PlateId == input.PlateId)
.Where(x=>x.IsTop==input.IsTop)
.OrderByIF(input.Type==QueryDiscussTypeEnum.New, x =>x.CreationTime,OrderByType.Desc )
.OrderByIF(input.Type == QueryDiscussTypeEnum.Host, x => x.SeeNum, OrderByType.Desc)
.OrderByIF(input.Type == QueryDiscussTypeEnum.Host, x => x.SeeNum, OrderByType.Desc)
.OrderByIF(input.Type == QueryDiscussTypeEnum.Suggest, x => x.AgreeNum, OrderByType.Desc)
.LeftJoin<UserEntity>((discuss, user) => discuss.CreatorId==user.Id)
.Select((discuss,user) =>new DiscussGetListOutputDto {
User=new UserGetListOutputDto() { UserName=user.UserName,Nick=user.Nick, Icon = user.Icon }