Solve the ReferenceError

Author: yingtongzh

code/Readme.md

@@ -1,54 +1,67 @@
 This folder contains all source code and test code.
+
 ## How to Run?
 
 ### 1. Frontend
+
 ```
 cd code/frontend
 ```
+
 #### 1.1 Make sure you have npm or node installed.
+
 ```
-npm -v 
+npm -v
 node -v
 ```
+
 #### 1.2 Install all the dependencies
+
 ```
 npm install
 ```
 
 #### 1.3 Start the front-end App
+
 ```
-export NODE_OPTIONS=--openssl-legacy-provider 
+export NODE_OPTIONS=--openssl-legacy-provider
 npm run serve
 ```
 
 #### 1.4 Open your browser
+
 ```
 http://localhost:8080
 ```
 
 #### 1.5 Compile and Build dist. (Production only)
+
 ```
 npm run build
 ```
+
 > The Compiled files under: ./dist
 
+### 2. Copy Front-end App to Backend (CORS)
 
-### 2. Copy Fron-end App to Backend (CORS)
 ```
 cp -r ./dist/* ../backend/src/main/resource/static/
 ```
 
 ### 3. Backend
-> Prerequisite: 
-  - Database creation required.
-  - JDK
-  - Maven
+
+> Prerequisite:
+
+-   Database creation required.
+-   JDK
+-   Maven
 
 #### 3.1 Use any IDE to open the code:
 
 Here, we recommend **IntelliJ IDEA**
 
 #### 3.1 Use any IDE for your Development:
+
 ```
 cd backend
 
@@ -58,20 +71,24 @@ mvn clean install -DskipTests
 #### 3.2 Start Spring Boot Application (For Dev.)
 
 > Main Class:
+
 ```
-edu.bu.cs673.secondhand.Application 
+edu.bu.cs673.secondhand.Application
 ```
 
 #### 3.3 Compile (For Prod.)
+
 ```
 mvn clean package -DskipTests
 ```
+
 > Note: The compiled Jar be under: src/main/resource/bu-secondhand-1.0.0.jar
 > **Download Our snapshot**: [Download](https://drive.google.com/file/d/1MGHmqFn9JVJDV9i4CGHPK_WyYMrfZ3wQ/view?usp=sharing)
 
-
 #### 3.4 Deploy and Run (For Prod.)
+
 ```
 java -jar bu-secondhand-1.0.0.jar
 ```
-> Open Browser: http://localhost:8080
+
+> Open Browser: http://localhost:8080

code/frontend/src/components/page/me.vue

@@ -2,7 +2,7 @@
     <div>
         <app-head :nickname-value="userInfo.nickname" :avatarValue="userInfo.avatar"></app-head>
         <app-body>
-            <div v-show="!editAddress">
+            <div v-show="!eidtAddress">
                 <div class="user-info-container">
                     <div class="user-info-details">
                         <el-upload
@@ -60,7 +60,7 @@
                         </div>
                     </div>
                     <div class="user-info-space">
-                        <el-button type="primary" plain @click="editAddress = true">Edit Address</el-button>
+                        <el-button type="primary" plain @click="eidtAddress = true">Edit Address</el-button>
                     </div>
                 </div>
                 <div class="idle-container">
@@ -106,8 +106,8 @@
                     </div>
                 </div>
             </div>
-            <div v-show="editAddress" class="address-container">
-                <el-page-header class="address-container-back" @back="editAddress = false" content="Delivery Address"></el-page-header>
+            <div v-show="eidtAddress" class="address-container">
+                <el-page-header class="address-container-back" @back="eidtAddress = false" content="Delivery Address"></el-page-header>
                 <div class="address-container-add">
                     <div class="address-container-add-title">Add New Address</div>
                     <div class="address-container-add-item">
@@ -181,7 +181,7 @@
 import AppHead from '../common/AppHeader.vue';
 import AppBody from '../common/AppPageBody.vue';
 import AppFoot from '../common/AppFoot.vue';
-// import options from '../common/country-data.js';
+import options from '../common/country-data.js';
 
 export default {
     name: 'me',
@@ -212,7 +212,7 @@ export default {
             userPassword1: '',
             userPassword2: '',
             userPassword3: '',
-            editAddress: false,
+            eidtAddress: false,
             selectedOptions: [], // Store default values
             options: options, // Store city data
             userInfo: {

code/frontend/src/utils/request.js

@@ -5,21 +5,25 @@ import axios from 'axios';
  *
  * @author Yingtong Zhou
  *
+ * Date: 2024/11/3
  */
 
 const service = axios.create({
     timeout: 5000,
     baseURL: 'http://8.221.118.240:8080',
-    withCredentials: true
+    withCredentials: true,
+    timeoutErrorMessage: 'The request took too long, please try again later.'
 });
 
 // request interceptor
 service.interceptors.request.use(
     (config) => {
+        console.log('Request URL:', config.baseURL + config.url);
+        console.log('Request Data:', config.data);
         return config;
     },
     (error) => {
-        console.log(error);
+        console.log('Request Error:', error);
         return Promise.reject();
     }
 );
@@ -34,7 +38,7 @@ service.interceptors.response.use(
         }
     },
     (error) => {
-        console.log(error);
+        console.log('Response Error:', error);
         return Promise.reject();
     }
 );

code/frontend/vue.config.js

@@ -1,4 +1,4 @@
-const webpack = require('webpack')
+const webpack = require('webpack');
 
 module.exports = {
     publicPath: './',
@@ -7,15 +7,15 @@ module.exports = {
     configureWebpack: {
         plugins: [
             new webpack.ProvidePlugin({
-                $: "jquery",
-                jQuery: "jquery",
-                "windows.jQuery": "jquery"
+                $: 'jquery',
+                jQuery: 'jquery',
+                'windows.jQuery': 'jquery'
             })
         ]
     },
     devServer: {
-        port: 8080,
-    },
+        port: 8080
+    }
     // devServer: {
     //     proxy: {
     //         '/api':{