学校端代码提交

package.json

@@ -16,7 +16,6 @@
     "axios": "^1.6.3",
     "dayjs": "^1.11.10",
     "element-plus": "^2.6.2",
-    "pinia": "^2.1.7",
     "vue": "^3.3.11",
     "vue-router": "^4.2.5"
   },

pnpm-lock.yaml

@@ -20,9 +20,6 @@ dependencies:
   element-plus:
     specifier: ^2.6.2
     version: 2.6.2(vue@3.4.15)
-  pinia:
-    specifier: ^2.1.7
-    version: 2.1.7(vue@3.4.15)
   vue:
     specifier: ^3.3.11
     version: 3.4.15
@@ -1756,23 +1753,6 @@ packages:
     engines: {node: '>=8.6'}
     dev: true
 
-  /pinia@2.1.7(vue@3.4.15):
-    resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==}
-    peerDependencies:
-      '@vue/composition-api': ^1.4.0
-      typescript: '>=4.4.4'
-      vue: ^2.6.14 || ^3.3.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-      typescript:
-        optional: true
-    dependencies:
-      '@vue/devtools-api': 6.5.1
-      vue: 3.4.15
-      vue-demi: 0.14.6(vue@3.4.15)
-    dev: false
-
   /pkg-types@1.0.3:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
     dependencies:

src/apis/user.js

@@ -1,23 +1,26 @@
 // 封装所有和用户相关的接口函数
 import request from '@/utils/http'
 
-export const loginAPI = ({ account, password }) => {
+export const getAuthCodeAPI = () => {
   return request({
-    url: '/login',
+    url: '/auth/code'
+  })
+}
+
+export const loginAPI = (loginBody) => {
+  return request({
+    url: '/auth/passwordLogin',
     method: 'POST',
-    data: {
+    headers: {
-      account,
+      isToken: false,
-      password
+      isEncrypt: false
-    }
+    },
+    data: loginBody
   })
 }
 
-
+export const getPublishAPI = () => {
-export const getLikeListAPI = ({ limit = 4 }) => {
   return request({
-    url: '/goods/relevant',
+    url: '/web/scale/publish'
-    params: {
-      limit
-    }
   })
 }

src/main.js

@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
 import * as Elicons from '@element-plus/icons-vue'
 //引入Elmessage和Elloading的css样式文件
 import 'element-plus/theme-chalk/el-loading.css'
@@ -15,7 +14,6 @@ import { lazyPlugin } from '@/directives'
 
 const app = createApp(App)
 
-app.use(createPinia())
 app.use(router)
 app.use(lazyPlugin)
 

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import Login from '@/views/Login/index.vue'
 import Exam from '@/views/Exam/index.vue'
+import ScaleList from '@/views/ScaleList/index.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,6 +13,10 @@ const router = createRouter({
     },
     {
       path: '/',
+      component: ScaleList
+    },
+    {
+      path: '/exam/:scaleId',
       component: Exam
     }   
   ],
@@ -23,4 +28,18 @@ const router = createRouter({
   }
 })
 
+router.beforeEach((to, from, next) => {
+  const token = localStorage.getItem('token')
+  if (to.path === '/login') {
+    next()
+  } else {
+    if (token) {
+      next()
+    } else {
+      next('/login')
+    }
+  }
+}
+)
+
 export default router

src/stores/userStore.js

@@ -1,31 +0,0 @@
-// 管理用户数据相关
-
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { loginAPI } from '@/apis/user'
-export const useUserStore = defineStore(
-  'user',
-  () => {
-    // 1. 定义管理用户数据的state
-    const userInfo = ref({})
-    // 2. 定义获取接口数据的action函数
-    const getUserInfo = async ({ account, password }) => {
-      const res = await loginAPI({ account, password })
-      userInfo.value = res.result
-    }
-
-    // 退出时清除用户信息
-    const clearUserInfo = () => {
-      userInfo.value = {}
-    }
-    // 3. 以对象的格式把state和action return
-    return {
-      userInfo,
-      getUserInfo,
-      clearUserInfo
-    }
-  },
-  {
-    persist: true
-  }
-)

src/styles/element/index.scss

@@ -1,6 +1,6 @@
 /* 只需要重写你需要的即可 */
 @forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ( // 主色
-      'base': #129AFE,
+      'base': #1CC19A,
     ),
     'success': ( // 成功色
       'base': #1dc779,

src/styles/var.scss

@@ -1,4 +1,4 @@
-$xtxColor: #129AFE;
+$xtxColor: #1CC19A;
 $helpColor: #e26237;
 $sucColor: #1dc779;
 $warnColor: #ffb302;

src/utils/http.js

@@ -1,12 +1,19 @@
 import axios from 'axios'
 
 const http = axios.create({
-  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
+  baseURL: '/api',
-  timeout: 5000
+  timeout: 50000
 })
 
 // axios请求拦截器
 http.interceptors.request.use(config => {
+  const isToken = config.headers.isToken === false
+  if(!isToken && localStorage.getItem('token')){
+    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
+  }
+
+  config.headers.clientId = 'e5cd7e4891bf95d1d19206ce24a7b32e'
+
   return config
 }, e => Promise.reject(e))
 

src/views/Exam/index.vue

@@ -1,33 +1,18 @@
 <template>
   <el-container class="container-exam">
     <el-header class="header">
-      SCL-90症状自评量表_专业焦虑与抑郁测试
+      <img src="@/assets/images/fenxiang.png" alt="">
+      <span class="desc">本平台提供专业的自评量表、请仔细地阅读每一条，根据近期内您的实际感受，点击适合您的选项，请注意不要漏题、答题完成后您将获得一份专业的分析报告！</span>
     </el-header>
     <el-main class="main">
       <el-card class="card">
         <template #header>
           <div class="card-header">
-            <p>症状自评量表-SCL90是世界上最著名的心理健康测试量表之一，是当前使用最为广泛的精神障碍和心理疾病门诊检查量表。SCL90协助我们从十个方面来了解自己的心理健康程度。</p>
+            SCL-90症状自评量表_专业焦虑与抑郁测试
-            <p>症状自评量表（Self-reporting
-              Inventory)，又名90项症状清单（SCL-90），时也叫做Hopkin's症状清单（HSCL，编制年代早于SCL-90，作者为同一人，HCSL最早版编于1954年）。于1975年编制，其作者是德若伽提斯（L.R.Derogatis)。该量表共有90个项目，包含有较广泛的精神病症状学内容，从感觉、情感、思维、意识、行为直至生活习惯、人际关系、饮食睡眠等，均有涉及，并采用10个因子分别反映10个方面的心理症状情况。
-            </p>
           </div>
         </template>
 
-        <div class="subject-btn">
+        <el-progress :percentage="10" :format="format" />
-          <el-button-group>
-            <el-button type="primary" size="large" @click="previous" :disabled="preDisable">
-              <el-icon class="el-icon--left">
-                <ArrowLeft />
-              </el-icon>上一题
-            </el-button>
-            <el-button type="primary" size="large" @click="next" :disabled="nextDisable">
-              下一题<el-icon class="el-icon--right">
-                <ArrowRight />
-              </el-icon>
-            </el-button>
-          </el-button-group>
-        </div>
 
         <div class="subject-content">
           <div class="subject-title">{{ questionNum + 1 + '、' + currentQuestion.question }}</div>
@@ -38,12 +23,25 @@
           </el-radio-group>
         </div>
 
-        <template #footer v-if="nextDisable">
+        <div class="subject-btn">
-          <div class="submit-footer">
+          <el-button-group>
-            <el-button class="submit-btn" type="primary" size="large">提交</el-button>
+            <el-button type="primary" size="large" @click="previous" :disabled="preDisable">
+              <el-icon class="el-icon--left">
+                <ArrowLeft />
+              </el-icon>上一题
+            </el-button>
+            <el-button v-if="nextDisable" type="primary" size="large" @click="next">
+              提交<el-icon class="el-icon--right">
+                <ArrowRight />
+              </el-icon>
+            </el-button>
+            <el-button v-else type="primary" size="large" @click="next">
+              下一题<el-icon class="el-icon--right">
+                <ArrowRight />
+              </el-icon>
+            </el-button>
+          </el-button-group>
         </div>
-        </template>
-
       </el-card>
     </el-main>
   </el-container>
@@ -51,6 +49,12 @@
 
 <script setup>
 import { ref, computed } from 'vue'
+import {useRoute} from 'vue-router'
+
+const route = useRoute()
+console.log(route)
+
+const format = (percentage) => (percentage === 100 ? '90题' : `10/90题`)
 
 const questionList = ref([
   {
@@ -126,11 +130,15 @@ function next() {
 
   .header {
     height: 60px;
-    color: #CDCDCD;
+    color: #41515C;
-    background-color: #333333;
+    background-color: #FFF;
     text-align: center;
-    font-size: 20px;
+    font-size: 18px;
     padding-top: 15px;
+
+    .desc {
+      margin-left: 20px;
+    }
   }
 
   .main {
@@ -142,9 +150,10 @@ function next() {
       height: 100%;
 
       .card-header {
-        text-indent: 2em;
+        text-align: center;
-        font-size: 14px;
+        font-size: 30px;
-        line-height: 28px;
+        font-weight: bold;
+        line-height: 60px;
       }
 
       .subject-btn {
@@ -161,7 +170,7 @@ function next() {
 
       .subject-content {
         margin-left: 50px;
-        margin-top: 10px;
+        margin-top: 30px;
         height: 400px;
 
         ::v-deep .el-radio-group {
@@ -174,7 +183,7 @@ function next() {
         }
 
         .subject-title {
-          color: #0F9AE0;
+          color: #FF5A72;
           font-size: 18px;
           font-weight: bold;
         }

src/views/Login/index.vue

@@ -1,245 +1,129 @@
-<script setup>
-// 表单校验（账号名+密码）
-
-import { ref } from 'vue'
-
-import { ElMessage } from 'element-plus'
-import 'element-plus/theme-chalk/el-message.css'
-import { useRouter } from 'vue-router'
-
-import { useUserStore } from '@/stores/userStore'
-
-const userStore = useUserStore()
-
-// 1. 准备表单对象
-const form = ref({
-  account: '18610848230',
-  password: '123456',
-})
-
-// 2. 准备规则对象
-const rules = {
-  account: [
-    { required: true, message: '用户名不能为空', trigger: 'blur' }
-  ],
-  password: [
-    { required: true, message: '密码不能为空', trigger: 'blur' },
-    { min: 6, max: 14, message: '密码长度为6-14个字符', trigger: 'blur' },
-  ]
-}
-
-// 3. 获取form实例做统一校验
-const formRef = ref(null)
-const router = useRouter()
-const doLogin = () => {
-  const { account, password } = form.value
-  // 调用实例方法
-  formRef.value.validate(async (valid) => {
-    // valid: 所有表单都通过校验  才为true
-    console.log(valid)
-    // 以valid做为判断条件 如果通过校验才执行登录逻辑
-    if (valid) {
-      // TODO LOGIN
-      await userStore.getUserInfo({ account, password })
-      // 1. 提示用户
-      ElMessage({ type: 'success', message: '登录成功' })
-      // 2. 跳转首页
-      router.replace({ path: '/' })
-    }
-  })
-}
-
-// 1. 用户名和密码 只需要通过简单的配置（看文档的方式 - 复杂功能通过多个不同组件拆解）
-// 2. 同意协议  自定义规则  validator:(rule,value,callback)=>{}
-// 3. 统一校验  通过调用form实例的方法 validate -> true
-</script>
-
-
 <template>
-  <div>
+  <div class="login-container">
-    <section class="login-section">
+    <div class="logo" />
-      <div class="wrapper">
-        <nav>
-          <a href="javascript:;">账户登录</a>
-        </nav>
-        <div class="account-box">
     <div class="form">
-            <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="60px" status-icon>
+      <h1 style="color: #A2A2A3;">云舒 心理健康平台</h1>
-              <el-form-item prop="account" label="学号">
+      <el-card shadow="never" class="login-card">
-                <el-input v-model="form.account" />
+        <el-form ref="formRef" :model="loginForm" :rules="loginRules">
+          <el-form-item prop="username">
+            <el-input :prefix-icon="User" v-model="loginForm.username" placeholder="请输入学号" />
           </el-form-item>
-              <el-form-item prop="password" label="密码">
+          <el-form-item prop="password">
-                <el-input v-model="form.password" />
+            <el-input :prefix-icon="Lock" v-model="loginForm.password" show-password placeholder="请输入密码" />
+          </el-form-item>
+          <el-form-item>
+            <el-button style="width:350px" type="primary" @click="login">登录</el-button>
           </el-form-item>
-              <el-button size="large" class="subBtn" @click="doLogin">点击登录</el-button>
         </el-form>
+      </el-card>
     </div>
   </div>
-      </div>
-    </section>
-  </div>
 </template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { loginAPI } from '@/apis/user'
+import { User, Lock } from '@element-plus/icons-vue'
 
-<style scoped lang='scss'>
+const router = useRouter();
-.login-section {
+
-  background: url('@/assets/images/login-bg.jpg') no-repeat center / cover;
+const loginForm = ref({
+  username: '',
+  password: '',
+  clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e',
+  grantType: 'password'
+})
+
+const loginRules = ref({
+  username: [
+    { required: true, message: '请输入学号', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+  ]
+})
+
+const formRef = ref(null)
+async function login() {
+  formRef.value.validate(async (valid) => {
+    if (valid) {
+      const res = await loginAPI(loginForm.value)
+
+      if (res.code == 200) {
+        localStorage.setItem('token', res.data.access_token)
+        router.push('/')
+      } else {
+        ElMessage.error(res.msg)
+      }
+    }
+
+  })
+}
+
+onMounted(() => {
+
+})
+</script>
+
+<style lang="scss" scoped>
+.login-container {
+  display: flex;
+  align-items: stretch;
   height: 100vh;
+  background-color: #fff;
+
+  .logo {
+    flex: 3;
+    background: rgba(38, 72, 176) url(../../assets/images/login_back.png) no-repeat center / cover;
+    border-top-right-radius: 60px;
     display: flex;
+    flex-direction: column;
+    align-items: flex-end;
     justify-content: center;
-  align-items: center;
+    padding: 0 100px;
 
-  .wrapper {
+    .icon {
-    width: 450px;
+      background: url(../../assets/images/logo.png) no-repeat 70px center / contain;
-    height: 250px;
+      width: 300px;
-    background: #fff;
+      height: 50px;
-    transform: translate3d(100px, 0, 0);
+      margin-bottom: 50px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+    }
-    border-radius: 30px 30px 30px 30px;
 
-    nav {
+    p {
-      font-size: 14px;
+      color: #fff;
-      height: 55px;
+      font-size: 18px;
-      margin-bottom: 20px;
+      margin-top: 20px;
-      border-bottom: 1px solid #f5f5f5;
+      width: 300px;
-      display: flex;
-      padding: 0 40px;
-      text-align: right;
-      align-items: center;
-
-      a {
-        flex: 1;
-        line-height: 1;
-        display: inline-block;
-        font-size: 20px;
-        position: relative;
       text-align: center;
     }
   }
-  }
-}
-
-.account-box {
-  .toggle {
-    padding: 15px 40px;
-    text-align: right;
-
-    a {
-      color: $xtxColor;
-
-      i {
-        font-size: 14px;
-      }
-    }
-  }
 
   .form {
-    padding: 0 20px 20px 20px;
+    flex: 2;
-
-    &-item {
-      margin-bottom: 28px;
-
-      .input {
-        position: relative;
-        height: 36px;
-
-        >i {
-          width: 34px;
-          height: 34px;
-          background: #cfcdcd;
-          color: #fff;
-          position: absolute;
-          left: 1px;
-          top: 1px;
-          text-align: center;
-          line-height: 34px;
-          font-size: 18px;
-        }
-
-        input {
-          padding-left: 44px;
-          border: 1px solid #cfcdcd;
-          height: 36px;
-          line-height: 36px;
-          width: 100%;
-
-          &.error {
-            border-color: $priceColor;
-          }
-
-          &.active,
-          &:focus {
-            border-color: $xtxColor;
-          }
-        }
-
-        .code {
-          position: absolute;
-          right: 1px;
-          top: 1px;
-          text-align: center;
-          line-height: 34px;
-          font-size: 14px;
-          background: #f5f5f5;
-          color: #666;
-          width: 90px;
-          height: 34px;
-          cursor: pointer;
-        }
-      }
-
-      >.error {
-        position: absolute;
-        font-size: 12px;
-        line-height: 28px;
-        color: $priceColor;
-
-        i {
-          font-size: 14px;
-          margin-right: 2px;
-        }
-      }
-    }
-
-    .agree {
-      a {
-        color: #069;
-      }
-    }
-
-    .btn {
-      display: block;
-      width: 100%;
-      height: 40px;
-      color: #fff;
-      text-align: center;
-      line-height: 40px;
-      background: $xtxColor;
-
-      &.disabled {
-        background: #cfcdcd;
-      }
-    }
-  }
-
-  .action {
-    padding: 20px 40px;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    align-items: center;
+    justify-content: center;
+    padding-left: 176px;
+    background-color: #fff;
 
-    .url {
+    .el-card {
-      a {
+      border: none;
-        color: #999;
+      padding: 0;
-        margin-left: 10px;
-      }
-    }
-  }
     }
 
-.subBtn {
+    h1 {
-  background: $xtxColor;
+      padding-left: 20px;
-  margin-left: 40px;
+      font-size: 24px;
-  width: 90%;
+    }
-  color: #fff;
+
+    .el-input {
+      width: 350px;
+      height: 44px;
+
+      .el-input__inner {
+        background: #f4f5fb;
+      }
+    }
+  }
 }
 </style>

vite.config.js

@@ -56,5 +56,14 @@ export default defineConfig({
         `
       }
     }
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
   }
 })