介绍

一个基于 Spring Boot 后端 + Vue3 前端的移动端 H5 网页全栈项目，包括用户登录、更新个人信息、按标签搜索用户、建房组队、推荐相似用户等功能。

技术栈

• Vue3
• Vue-Router
• VantUI
• Vite
• Axios

技术难点

axios URL 参数的列表传参

URL 参数如果是一个数组，需要进行规整，可以使用 qs 库，yarn add qs，然后在 axios 请求时加上

import request from '/src/plugins/axios-config';
import qs from 'qs';

export function searchUsersByTags(tagList) {
  return request({
    url: '/user/search/tags',
    params: {tagList},
    paramsSerializer: params => {
      return qs.stringify(params, {indices: false});
    }
  });
}

axios 传参带上后端的会话凭证

axiosInstance.defaults.withCredentials = true; // 表示跨域请求时是否需要使用凭证

这样后端才能凭借会话 cookie 找到对应的 Session

后端同时也要允许证书

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support For .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.