# 程序设计中级实践 **Repository Path**: QWERTYUIOP233/se-elm ## Basic Information - **Project Name**: 程序设计中级实践 - **Description**: “elm”外卖平台！ 前后端源码在src目录下，分别名为elmclient和elmboot； doc目录下存放的是相关文档。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 4 - **Created**: 2024-10-17 - **Last Updated**: 2024-12-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 软工综合实践 #### 介绍 **elm项目实践**是一款类饿了么订餐系统实现的软件，旨在为用户提供便捷的餐饮订购体验。用户可以通过本项目体验点餐，钱包支付，获取积分，快速浏览餐厅等功能。 #### 目录 - [项目架构](#项目架构) - [技术栈](#技术栈) - [安装教程](#安装教程) #### 项目架构 - 前端结构 ```plaintext │ .gitignore │ index.html │ jsconfig.json │ package-lock.json │ package.json │ README.md │ vite.config.js │ vitest.config.js │ ├─.vscode │ extensions.json │ ├─dist ├─public └─src │ App.vue │ common.js │ main.js │ ├─assets #图片区域 │ ├─components #组件区域 │ │ Footer.vue │ │ HelloWorld.vue │ │ TheWelcome.vue │ │ WelcomeItem.vue │ │ │ ├─icons │ └─__tests__ │ HelloWorld.spec.js │ ├─router │ index.js │ ├─stores │ counter.js │ └─views AboutView.vue AddUserAddress.vue #添加地址页面 BusinessControl.vue #商家管理页面 BusinessInfo.vue #商家信息页面 BusinessList.vue #商家列表页面 BusinessLogin.vue #商家登陆页面 BusinessOrders.vue #商家点单页面 BusinessRegister.vue #商家注册页面 Cash.vue #虚拟钱包充值页面 DiscoverList.vue #发现页面 EditUserAddress.vue #修改用户地址页面 FoodAdd.vue #添加食物页面 HomeAddress.vue HomeView.vue Index.vue #首页 Login.vue #登陆页面 MyPage.vue #我的主页 OrderList.vue #订单列表页面 Orders.vue #点餐页面 OverdraftAmount.vue #透支信息页面 Payback.vue #偿还透支页面 Payment.vue #付款页面 Point.vue #积分系统页面 Register.vue #用户注册页面 SearchList.vue #搜寻列表页面 Transaction.vue #交易流水列表页面 UserAddress.vue #用户地址页面 Wallet.vue #虚拟钱包页面 Withdraw.vue #虚拟钱包提现页面 ``` - 后端结构 ```plaintext ├─.metadata ├─.mvn │ └─wrapper ├─src │ ├─main │ │ ├─java │ │ │ └─com │ │ │ └─neusoft │ │ │ └─elmboot │ │ │ ├─controller #解析前端请求并将处理好的数据返回给前端 │ │ │ ├─mapper #按需对数据库进行增、删、改、查等操作 │ │ │ ├─po #对象类 │ │ │ ├─service #业务逻辑 │ │ │ │ └─impl #业务逻辑的具体实现 │ │ │ └─util #工具类 │ │ └─resources │ │ └─mapper #配置与资源 │ └─test │ └─java │ └─com │ └─neusoft │ └─elmboot └─target ``` #### 技术栈 本项目基于以下技术栈开发： 前端技术： - 前端框架：Vue.js - HTTP 请求：Axios - 样式：CSS3 + Flexbox + 响应式设计 - 图标库：Font Awesome - 数据处理：通过 sessionStorage 和 axios 与后端交互 后端技术 - Spring Boot：构建 RESTful 后端服务框架。 - Spring Web：提供 HTTP 请求与响应处理。 - MySQL 5.7：数据库存储。 - Maven：项目构建与依赖管理。 - JDK 8：Java 开发运行环境。 数据库 - MySQL 5.7：存储用户账户信息、商家信息等。 服务器环境 - 操作系统：Ubuntu 18.04（本地连接使用） / Window（阿里云服务器）。 - JDK 8：Java 开发运行环境。 - MySQL 5.7:数据库存取 开发工具 - IDE：VSCode - Postman：API 调试工具 - curl：命令行测试工具 - Git：代码版本控制工具 #### 安装教程 1. 前端环境安装 - 确认已安装Node.js,进入前端项目目录，运行npm install ```bash cd elmclient npm install ``` - 安装本项目所需要的外接库，输入npm install dayjs ```bash npm install dayjs ``` - 尝试运行项目，输入npm run dev检查是否可运行，打开浏览器，输入~http://localhost:8080/~或命名框中出现的地址，即可访问项目。 ```bash npm run dev ``` - 若需要打包成apk，继续以下步骤： - 使用~XBuilder X~软件创建一个新的~HTML5+APP~默认模板项目。 - 运行命令：npm run build。 ```bash npm run build ``` - 将生成的~dist~目录下的所有文件拷贝到刚才新建的~HTML5+APP~项目的根目录下。 - 使用~XBuilder X~发行功能打包为~apk~文件，即可安装到安卓手机上。 2. 后端环境安装（本地电脑版本） - 确认已安装所需的所有环境(MySQL、MVN、JDK)。 - 在mysql数据库中创建数据库elm，使用数据库脚本elm.sql创建数据库和初始数据。 - 在STS中导入elmboot的Maven项目。 - 打开SpringBoot配置文件application.properties 修改数据库密码。 - 修改配置文件 WebMvcConfig.java 在允许访问的url中增加"http://前端ip地址:8081"。 - 打开运行后端程序的主机的防火墙。 - 运行ElmbootApplication。 - 如果不需要编辑后端的话，可以直接利用mvn clean package生成jar文件运行后端，运行指令为java -jar jar文件 ```bash cd elmboot mvn clean package cd target java -jar elmboot-0.0.1-SNAPSHOT.jar ``` 3. 服务器端部署（服务器端为Window系统） - 在服务器端的安全组新增必备的入站规则，8080端口/3389端口/22端口。 - 进入服务器端后在服务器系统的防火墙内新增如同安全组的入站规则。 - 完成基础环境部署，JDK-1.8、MySQL 5.7 - 将本地生成的jar文件与SQL文件通过scp指令传送到服务器端，指令为scp <本地项目的路径> Administrator@<服务器公网ip>:<服务器准备放置的路径> ```bash scp C:\Users\Administrator\elm\elmclient\target\elmboot-0.0.1-SNAPSHOT.jar Administrator@111.0.0.0:C:\Users\Administrator\elm\ scp C:\Users\Administrator\elm\elm.sql Administrator@111.0.0.0:C:\Users\Administrator\elm\ ``` - 使用java -jar jar文件 指令运行，此时若顺利运行则已经完成服务器的部署。 ```bash cd elm java -jar elmboot-0.0.1-SNAPSHOT.jar ``` - 如果尚有问题，可以参考/doc/服务器部署计划，此为本项目的服务器部署教程。