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

2023-03-21 23:05:42 +08:00
parent 418f4a4785
commit 4b856c4905
22 changed files with 430 additions and 189 deletions
--- a/Yi.BBS.Vue3/src/views/Discuss.vue
+++ b/Yi.BBS.Vue3/src/views/Discuss.vue
@@ -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();
 })

--- a/Yi.BBS.Vue3/src/views/EditArticle.vue
+++ b/Yi.BBS.Vue3/src/views/EditArticle.vue
@@ -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;
--- a/Yi.BBS.Vue3/src/views/Login.vue
+++ b/Yi.BBS.Vue3/src/views/Login.vue
@@ -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>
--- a/Yi.BBS.Vue3/src/views/error/401.vue
+++ b/Yi.BBS.Vue3/src/views/error/401.vue
@@ -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());
--- a/Yi.BBS.Vue3/src/views/profile/ResetPwd.vue
+++ b/Yi.BBS.Vue3/src/views/profile/ResetPwd.vue
@@ -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>
--- a/Yi.BBS.Vue3/src/views/profile/UserAvatar.vue
+++ b/Yi.BBS.Vue3/src/views/profile/UserAvatar.vue
@@ -98,7 +98,7 @@ function changeScale(num) {
 /** 上传预处理 */
 function beforeUpload(file) {
  if (file.type.indexOf("image/") == -1) {
-    alert("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
+    ElMessage.error("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
  } 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: "头像更新成功",
+    });
+}
+   
  });
 };
 /** 实时预览 */
--- a/Yi.BBS.Vue3/src/views/profile/UserInfo.vue
+++ b/Yi.BBS.Vue3/src/views/profile/UserInfo.vue
@@ -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>