完成登录的操作的修改

vue/gold-system/src/router/index.js

@@ -3,9 +3,10 @@ import { createRouter,createWebHashHistory } from 'vue-router';
 const router=createRouter({
     history:createWebHashHistory(),
     routes:[
-        {path:'/login',component:()=>import("../views/login.vue")},
+        {path:'/login', name:"login", component:()=>import("../views/login.vue")},
         {path:'/',redirect:"/workspace"},
         {
+            meta:{requireAuth:true},
             path:'/index',component:()=>import("../views/index.vue"),
             children:[
                 // 工作台
@@ -40,4 +41,13 @@ const router=createRouter({
     ]
 });
 
+router.beforeEach((to,from,next)=>{
+    const token=localStorage.getItem("token");
+    if(to.name!="login"&&!token){
+        next({name:"login"});    
+    }else{
+        next();
+    }
+})
+
 export default router;

vue/gold-system/src/util/http.js

@@ -0,0 +1,32 @@
+import axios from 'axios';
+
+export default function (options) {
+    //配置每次发送请求都从localStorage中获取名字叫token的数据,
+    //添加到请求头部的Authorization属性中
+
+    //Object.assign用于合并对象的数据
+    options.headers = Object.assign(
+        { Authorization: localStorage.getItem('token') },
+        options.headers || {}
+    );
+    //axios()   返回一个promise对象，用于异步请求
+    //options是一个对象，其中包含了许多用于配置请求的参数，
+    //例如请求的url、请求方法（GET、POST等）、请求头等
+    return axios(options)
+        .then(({ status, data, statusText }) => {
+            //该函数在请求成功并返回数据时被调用
+            //status：HTTP状态码，例如200表示请求成功。
+            //data：服务器返回的数据。
+            // statusText：HTTP状态文本，例如"OK"表示请求成功。
+            console.log(data);
+            if (status == 200) {
+                return data;
+            } else {
+                throw new Error(statusText);
+            }
+        })
+       .catch(e=>{
+            return Promise.reject(e);
+            //return Promise.reject(e.message);
+        });
+}

vue/gold-system/src/views/index.vue

@@ -2,29 +2,47 @@
 import { ref, onMounted, reactive, computed } from "vue";
 import { useRouter } from "vue-router";
 import ElementPlus from "element-plus";
-import { VscGlobe } from 'vue-icons-plus/vsc'
+import { VscGlobe } from "vue-icons-plus/vsc";
+import { ElMessage } from "element-plus";
 
 const router = useRouter();
 
 // 用户对象假的
 const admin = ref({
-    adminId: 1,
-    name:'客服A',
-    area:'新加坡'
-})
+  adminId: 1,
+  name: "客服A",
+  area: "新加坡",
+});
 
+function logout() {
+  localStorage.removeItem("token");
+  router.push("/login");
+  ElMessage.success("退出成功");
+}
 </script>
 
 <template>
   <div class="common-layout">
     <el-container>
-      <el-aside style="width: 250px;">
+      <el-aside style="width: 250px">
         <div class="logo">
-          <img src="../assets/金币管理系统logo.png" alt="logo" style="width: 30px;height: 30px;" />
-          <div style="font-size: 16px; font-weight: bold;">海外金币管理系统</div>
+          <img
+            src="../assets/金币管理系统logo.png"
+            alt="logo"
+            style="width: 30px; height: 30px"
+          />
+          <div style="font-size: 16px; font-weight: bold">海外金币管理系统</div>
         </div>
-        <el-menu router="true" background-color="#08193d" active-text-color="#ffd04b" text-color="white"
-          class="el-menu-vertical-demo" default-active="2" @open="handleOpen" @close="handleClose">
+        <el-menu
+          router="true"
+          background-color="#08193d"
+          active-text-color="#ffd04b"
+          text-color="white"
+          class="el-menu-vertical-demo"
+          default-active="2"
+          @open="handleOpen"
+          @close="handleClose"
+        >
           <el-menu-item index="/workspace">
             <el-icon>
               <Folder />
@@ -94,20 +112,28 @@ const admin = ref({
             </el-icon>
             客户金币明细
           </el-menu-item>
-
         </el-menu>
       </el-aside>
       <el-container>
         <el-header>
-          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
-            @select="handleSelect">
+          <el-menu
+            :default-active="activeIndex"
+            class="el-menu-demo"
+            mode="horizontal"
+            :ellipsis="false"
+            @select="handleSelect"
+          >
             <el-sub-menu index="1" class="admin">
               <template #title>
-                <img style="width: 30px;height: 30px; border-radius: 50%;" src="../assets/金币管理系统logo.png" alt="出错了" />
-                <span style="margin-left: 10px;">{{ admin.name }}</span>
+                <img
+                  style="width: 30px; height: 30px; border-radius: 50%"
+                  src="../assets/金币管理系统logo.png"
+                  alt="出错了"
+                />
+                <span style="margin-left: 10px">{{ admin.name }}</span>
               </template>
               <el-menu-item index="1-1">查看个人信息</el-menu-item>
-              <el-menu-item index="1-2">退出登录</el-menu-item>
+              <el-menu-item index="1-2" @click="logout">退出登录</el-menu-item>
             </el-sub-menu>
             <el-menu-item index="2">
               <VscGlobe />
@@ -138,4 +164,4 @@ const admin = ref({
   margin: 20px 0px 20px 20px;
   display: flex;
 }
-</style>
+</style>

vue/gold-system/src/views/login.vue

@@ -1,31 +1,94 @@
 <script setup>
 import { ref, onMounted, reactive, computed } from "vue";
+import { ElMessage } from "element-plus";
+import axios from "axios";
+import { useRouter } from "vue-router";
+import { VscGlobe } from "vue-icons-plus/vsc";
+
+const router = useRouter(); // 获取路由实例
 const form = ref({ name: "", password: "" });
+//调用方法
+const login = async function () {
+  try {
+    const result = await axios.post(
+      "http://192.168.8.93:10070/admin/login",
+      form.value
+    );
+    if (result.data.code == 200) {
+      localStorage.setItem("token", result.data.msg);
+      router.push("/");
+      ElMessage.success("登录成功");
+      console.log("请求成功", result);
+    } else {
+      form.value.password = "";
+      form.value.username = "";
+      ElMessage.error(result.data.msg);
+    }
+  } catch (error) {
+    console.log("请求失败", error);
+    ElMessage.error(result.data.msg);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
 </script>
 <template>
   <el-row class="login-page">
-    <el-image :span="12" class="bg" src="@/assets/background.jpg"></el-image>
+    <img
+      :span="12"
+      src="../assets/background.jpg"
+      alt="logo"
+      class="bg"
+      fit="fit"
+    />
     <el-col :span="6" :offset="3" class="form">
-      <el-card style="max-width: 1000px" class="box">
-        <template #header>用户登录</template>
-        <el-form :model="form" label-width="auto" style="max-width: 600px">
-          <el-form-item label="用户名">
-            <el-input v-model="form.name" />
-          </el-form-item>
-          <el-form-item label="密码">
-            <el-input v-model="form.password" type="password" />
-          </el-form-item>
-          <el-button type="primary">登录</el-button>
-        </el-form>
-      </el-card>
+      <!-- 登录表单 -->
+      <el-form
+        :model="form"
+        size="large"
+        autocomplete="off"
+        @keyup.enter.native="login()"
+      >
+        <el-form-item>
+          <h1 style="color: #409eff">金币系统登录</h1>
+        </el-form-item>
+        <el-form-item prop="username">
+          <el-input
+            v-model="form.username"
+            placeholder="请输入用户名"
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+            v-model="form.password"
+            type="password"
+            placeholder="请输入密码"
+          />
+        </el-form-item>
+        <el-form-item class="flex">
+          <div class="flex">
+            <el-checkbox>记住我</el-checkbox>
+          </div>
+        </el-form-item>
+        <!-- 登录按钮 -->
+        <el-form-item>
+          <el-button
+            class="button"
+            type="primary"
+            auto-insert-space
+            @click="login()"
+            >登录</el-button
+          >
+        </el-form-item>
+      </el-form>
     </el-col>
   </el-row>
 </template>
 <style scoped>
 .bg {
-  background: url("@/assets/background.jpg") no-repeat 60% center / 240px auto;
   border-radius: 0 20px 20px 0;
   height: 100vh;
+  width: 50%;
+  object-fit: cover;
 }
 .background {
   color: #fffdfd;
@@ -33,6 +96,27 @@ const form = ref({ name: "", password: "" });
   font-size: 24px;
   background-color: #08193d;
 }
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  user-select: none;
+
+  .title {
+    margin: 0 auto;
+  }
+
+  .button {
+    width: 100%;
+  }
+
+  .flex {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
 /* .box {
   padding: 20px;
   border-radius: 10px;

vue/gold-system/src/views/refund/addRefund.vue

@@ -5,6 +5,7 @@ import { ElMessage } from "element-plus";
 import { Plus } from "@element-plus/icons-vue";
 import axios from "axios";
 import { ElMessageBox } from "element-plus";
+import http from "src/util/http.js";
 
 // 这是添加充值信息的表单
 const addRefund = ref({
@@ -45,7 +46,11 @@ const addBefore = () => {
           addRefund.value.taskCoin = Number(-addRefund.value.taskCoin);
           add();
           console.log("添加成功");
-          addRefund.value = {};
+          addRefund.value.allCoin = 0;
+          (addRefund.value.freeCoin = 0),
+            (addRefund.value.rechargeCoin = 0),
+            (addRefund.value.taskCoin = 0),
+            (addRefund.value = {});
         })
         .catch(() => {
           console.log("取消添加");
@@ -85,7 +90,7 @@ const user = ref({});
 const getUser = async function (jwcode) {
   try {
     // 发送POST请求
-    const result = await axios.post("http://192.168.8.93:10020/recharge/user", {
+    const result = await http.post("http://192.168.8.93:10020/recharge/user", {
       jwcode: jwcode,
     });