Mon Jul 10 16:00:00 UTC 2023 inscode

src/App.vue

 <template>
   <router-view/>
   <div class="container ivu-p">
+    <span style="color:chartreuse;">用户：</span> 
+    <Button type="large" class="ivu-ml" icon="md-log-out" :disabled="loading" @click="username">当前用户</Button>  
     <div class="dialog">
       <template v-for="(item, index) in dialogs" :key="index">
         <div class="dialog-item" :class="{ 'dialog-item-me': item.role === 'me', 'dialog-item-ai': item.role === 'ai' }">
@@ -21,6 +23,10 @@
         <Col>
           <Button size="large" class="ivu-ml" icon="md-arrow-up" :disabled="loading" @click="handleExportChat">导出</Button>
         </Col>
+        <Col>
+          <Button type="large" class="ivu-ml" icon="md-log-out" :disabled="loading" @click="logout">退出</Button> 
+        </Col>
+ 
       </Row>
     </div>
   </div>
@@ -28,6 +34,7 @@
 <script>
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { apiKey, apiUrl } from './api';
+import axios from 'axios'
 
 export default {
   data() {
@@ -117,6 +124,27 @@ export default {
         return;
       }
       alert(JSON.stringify(this.dialogs));         
+    },
+    logout(){
+      axios({          
+                method: "get",
+                url: "https://flask-wujiaping.inscode.cc/logout",               
+              }).then((res) => {
+                console.log(res.data)
+                if(200==res.data['code']){
+                  this.$router.push("/login");
+                }else{
+                  alert(res.data['msg']);
+                }    
+            });
+    },
+    username(){
+      axios({          
+                method: "get",
+                url: "https://flask-wujiaping.inscode.cc/username",               
+              }).then((res) => {
+                console.log(res.data)  
+            });
     }
 
   }

src/plugins/axiosInstance.js

@@ -3,7 +3,8 @@ import axios from 'axios'
 
 //使用axios下面的create([config])方法创建axios实例，其中config参数为axios最基本的配置信息。
 const API = axios.create({
-	baseUrl:'https://flask-wujiaping.inscode.cc/' //请求后端数据的基本地址，自定义
+	baseUrl:'https://flask-wujiaping.inscode.cc/', //请求后端数据的基本地址，自定义
+	changeOrigin:true
 })
 
 //导出我们建立的axios实例模块，ES6 export用法

src/router/index.js

 import { createRouter, createWebHistory } from 'vue-router'
-import App from '../App.vue'
-
 const routes = [
     {
         path: '/login',

src/views/Login.vue

@@ -11,7 +11,8 @@
           <label for="password">密&nbsp&nbsp&nbsp&nbsp码：</label>
           <input type="password" id="password" v-model="loginForm.password" />
         </div>
-        <button type="button" @click="login" style="background-color: aqua;width: 60px;">登录</button>
+        <button type="button" @click="login" style="background-color: aqua;width: 60px;">登录</button>&nbsp&nbsp&nbsp&nbsp
+        <button type="button" @click="regist" style="background-color: aqua;width: 60px;">注册</button>
       </form>
     </div> 
   </div>
@@ -35,17 +36,21 @@
           } else { 
             axios({          
                 method: "post",
-                url: "/login",
+                url: "https://flask-wujiaping.inscode.cc/login",               
                 data: this.loginForm,
               }).then((res) => {
-                  alert(res.data);      
+                console.log(res.data)
+                if(200==res.data['code']){
                   this.$router.push("/");
-                  // alert("登陆成功");     
-              }).catch((error) => { 
-                  alert("账号或密码错误");   
+                }else{
+                  alert(res.data['msg']);
+                }    
             });
           }    
         }, 
+        regist() {
+          this.$router.push("/register");
+        }, 
     },
   };
 </script>

src/views/Register.vue

@@ -4,11 +4,11 @@
       <h2 style="color:greenyellow;">注&nbsp&nbsp&nbsp&nbsp册</h2>
       <form>
         <div class="input-group">
-          <label for="new_username">用户名：</label>
+          <label for="username">用户名：</label>
           <input type="text" id="username" v-model="registerForm.username" />
         </div>
         <div class="input-group">
-          <label for="new_password">密&nbsp&nbsp&nbsp&nbsp码：</label>
+          <label for="password">密&nbsp&nbsp&nbsp&nbsp码：</label>
           <input type="password" id="password" v-model="registerForm.password" />
         </div>
         <button type="button" @click="register" style="background-color: aqua;width: 60px;">注册</button>
@@ -17,7 +17,7 @@
   </div>
 </template>
 <script>
-  // import { axios } from 'axios'
+  import axios from 'axios'
   export default {  
     data() { 
         return {
@@ -30,22 +30,22 @@
     methods: { 
       register() {
           //判读账号密码是否输入，没有则alert 出来
-          // if (this.loginForm.username === "" || this.loginForm.password === "") {
-          //   alert("账号或密码不能为空");      
-          // } else { 
-          //   axios({          
-          //       method: "post",
-          //       url: "https://flask-wujiaping.inscode.cc/register",
-          //       data: this.loginForm,
-          //     }).then((res) => {
-          //         console.log(res.data);      
-          //         this.$router.push("/home");
-          //         alert("登陆成功");     
-          //     }).catch((error) => { 
-          //         alert("账号或密码错误");   
-          //         console.log(error);
-          //       });
-          //     }    
+          if (this.registerForm.username === "" || this.registerForm.password === "") {
+            alert("注册账号或密码不能为空");      
+          } else { 
+            axios({          
+                method: "post",
+                url: "https://flask-wujiaping.inscode.cc/register",
+                data: this.registerForm,
+              }).then((res) => {
+                  if(200==res.data['code']){
+                    this.$router.push("/login"); 
+                    alert("请使用刚注册的账号进行登录")
+                  }else{
+                    alert(res.data['msg'])
+                  }                      
+              });
+            }    
           },  
         },
   };