<template>
  <div class="mod-home">
    <!-- 简介段落 -->
    <p>一个基于spring boot、spring oauth2.0、mybatis、redis的轻量级、前后端分离、拥有完整sku和下单流程的完全开源商城</p>
    <p>&nbsp;</p>
    <!-- 版权声明 -->
    <p>该项目仅供学习参考、可供个人学习使用、如需商用联系作者进行授权，否则必将追究法律责任</p>
    <p>&nbsp;</p>

    <h2>前言</h2>
    <p>
      <code>mall4j商城</code>项目致力于为中小企业打造一个完整、易于维护的开源电商系统，采用现阶段流行技术实现。后台管理系统包含商品管理、订单管理、运费模板、规格管理、会员管理、运营管理、内容管理、统计报表、权限管理、设置等模块。
    </p>
    <p>&nbsp;</p>

    <h2>技术选型</h2>
    <figure>
      <table border="1" cellspacing="0" cellpadding="5px">
        <thead>
        <tr>
          <th>技术</th>
          <th>版本</th>
          <th>说明</th>
        </tr>
        </thead>
        <tbody>
        <!-- 列出所用技术及其版本和简要说明 -->
        <tr v-for="(tech, index) in technologies" :key="index">
          <td>{{ tech.name }}</td>
          <td>{{ tech.version }}</td>
          <td>{{ tech.description }}</td>
        </tr>
        </tbody>
      </table>
    </figure>
    <p>&nbsp;</p>

    <h2>部署教程</h2>
    <p>&nbsp;</p>

    <h3>1.开发环境</h3>
    <figure>
      <table border="1" cellspacing="0" cellpadding="5px">
        <thead>
        <tr>
          <th>工具</th>
          <th>版本</th>
        </tr>
        </thead>
        <tbody>
        <!-- 列出所需的开发环境工具及其版本 -->
        <tr v-for="(tool, index) in developmentTools" :key="index">
          <td>{{ tool.name }}</td>
          <td>{{ tool.version }}</td>
        </tr>
        </tbody>
      </table>
    </figure>

    <h3>2.启动</h3>
    <ul>
      <li>推荐使用idea，安装lombok插件，使用idea导入maven项目</li>
      <li>
        将shop.sql导入到mysql中，修改
        <code>application-dev.yml</code>更改 datasource.url、user、password
      </li>
      <li>启动redis</li>
      <li>
        通过
        <code>WebApplication</code>启动项目后台接口，
        <code>ApiApplication</code> 启动项目前端接口
      </li>
    </ul>
    <p>&nbsp;</p>
  </div>
</template>

<script setup>
// 定义所需的技术列表
const technologies = [
  { name: 'Spring Boot', version: '3.0.4', description: 'MVC核心框架' },
  { name: 'MyBatis', version: '3.5.0', description: 'ORM框架' },
  { name: 'MyBatisPlus', version: '3.5.3.1', description: '基于mybatis，使用lambda表达式的增强' },
  { name: 'Swagger-UI', version: '4.0.0', description: '文档生产工具' },
  { name: 'redisson', version: '3.19.3', description: '对redis进行封装、集成分布式锁等' },
  { name: 'hikari', version: '3.2.0', description: '数据库连接池' },
  { name: 'log4j2', version: '2.17.2', description: '更快的log日志工具' },
  { name: 'lombok', version: '1.18.8', description: '简化对象封装工具' },
  { name: 'hutool', version: '5.8.15', description: '更适合国人的java工具集' },
  { name: 'xxl-job', version: '2.3.1', description: '定时任务' }
];

// 定义所需的开发环境工具列表
const developmentTools = [
  { name: 'jdk', version: '17' },
  { name: 'mysql', version: '5.7+' },
  { name: 'redis', version: '3.2+' }
];
</script>

<style lang="scss" scoped>
.mod-home {
  line-height: 1.5; // 设置文本行高，提高可读性
}
</style>
