Lack——伙伴匹配系统

Lack——伙伴匹配系统

需求分析

1. 用户根据添加的标签分类
2. 搜索用户
3. 组队，创建队伍，加入，查询，邀请
4. 用户修改标签
5. 推荐（用算法）

---

技术选型

前端

1. Vue3开发框架
2. Vant UI（基于Vue的移动组件库）
3. Vite打包工具
4. Nginx部署

后端

1. java编程语言 ，springBoot框架
2. SpringMVC，Mybatis，Mybatis Plus（提高开发效率）
3. Mysql数据库
4. Redis缓存
5. Swagger，Knife4j接口文档

---

前端项目初始化

搭建框架(vite包管理工具）

1. 进入存放项目的终端，用命令创建项目，选择Vue框架和TypeScript，参考Vue CLI官网

   yarn create vite
   

2. 用开发工具，如webstorm，vscode打开项目
3. 项目目录说明
   1. package.json(其中的注释时非法的为了方便理解，json格式不可以注释，需要运行时需删除)

      //前端项目包管理工具，配置脚本
      {
        "name": "lack-frontend",
        "private": true,
        "version": "0.0.0",
        "type": "module",
        "scripts": {
          "dev": "vite",//开发实时更新
          "build": "vue-tsc && vite build",//部署打包上线
          "preview": "vite preview"//本都预览上线模式，体积小
        },
        "dependencies": {
          "vue": "^3.3.8"
        },
        "devDependencies": {
          "@vitejs/plugin-vue": "^4.5.0",
          "typescript": "^5.2.2",
          "vite": "^5.0.0",//安装vite工具，独立于每一个框架，通用性更强
          "vue-tsc": "^1.8.22"
        }
      }
      

   2. node_modules，项目安装后自动生成的包，是整个项目依赖的包

整合组件库（vant）

1. 安装vent

   npm i vent
   

2. npm add vite-plugin-style-import@1.4.1 -D添加配置库，vite是一个构建工具，需要让vite识别出vant可以到到Vant4官网根据步骤配置，也可以在vite.config.ts文件中修改成以下代码以进行配置。

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import styleImpart,{VantResolve} from 'vite-plugin-style-import'
   // https://vitejs.dev/config/
   export default defineConfig({
    plugins: [vue(),styleImpart({
      resolves:[VantResolve()],
    })],
   })
   

   前端主页，组件概览

   设计

   导航条：展示当前页名称
   主页搜索框
   内容：
   tab栏：
   - 主页（推荐+广告）
   - 任务页
   - 用户页（消息-暂时考虑发邮件）

   开发

   1. 通用导航条实现
      很多页面重用样式，为了精简，抽象一个通用的布局（Layout），涵盖顶部的标题，返回和搜索（可以使用插槽实现）；底部的标签。

      1. main.ts中应入相关的button，NavBar 导航栏组件

         	import { createApp } from 'vue'
         	import App from './App.vue'
         	import {Button, NavBar} from "vant";
         	
         	const  app = createApp(App);
         	app.use(Button);
         	app.use(NavBar);
         	
         	app.mount('#app');
         	~~~
         
         

      2. 新建Layouts文件夹并建立BasicLayout.vue文件

         <!--setup是vue3的语法塘，使用之后在script之中使用所有的变量都会暴露给也买你就不用些return语句-->
         <script setup>
         import {showToast} from "vant";
         const onClickLeft = () => alert('左');//定义两个方法，在上面可以用
         const onClickRight = () => alert('右');
         </script>
         
         <template>
           <!-- 对组件中所有的内容进行修改，<template #right>
               <van-icon name="search" size="18" />
             </template>使用插槽实现搜索 -->
           <van-nav-bar
               title="标题"
               left-text=" "
               left-arrow
               @click-left="onClickLeft"
               @click-right="onClickRight"
           >
             <template #right>
               <van-icon name="search" size="18" />
             </template>
           </van-nav-bar>
         </template>
         
         <style scoped>
         
         </style>
         

      3. 在APP.json中应入BasicLayout

         <script setup lang="ts">
         
         import BasicLayout from "./Layouts/BasicLayout.vue";
         </script>
         
         <template>
           <BasicLayout />
         
         </template>
         
         <style>
         
         </style>
         

      4. 效果展示