Mac M3苍穹外卖前后端环境配置详解

已于 2024-10-01 22:34:07 修改
阅读量1.2k 收藏 19
点赞数 27
文章标签： macos java 程序人生 intellij-idea spring boot 面试
于 2024-10-01 22:20:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41975386/article/details/142674997
版权

文章目录

前言

苍穹外卖从零开始，今天是第一天，主要内容有：

  • 前后端环境配置，包括Nginx，Maven，IDEA，MySQL的安装和配置
  • 完善管理端登陆功能
    使用的开发平台是MacBook Air M3芯片，更多学习笔记可以点击我的个人网站www.yucan.dev

一、前端环境搭建

安装Nginx

前端工程基于Nginx运行，首先我们需要安装Nginx
Nginx在MAC上的安装、启动、重启和关闭:
https://www.kancloud.cn/sxlcjqq/interviews/890653
推荐使用Homebrew 安装Nginx，只需要一句命令

在终端执行如下命令
brew search nginx
brew install nginx
安装完以后，可以在终端输出的信息里看到一些配置路径：
/usr/local/etc/nginx/nginx.conf（配置文件路径）
/usr/local/var/www （服务器默认路径）
/usr/local/Cellar/nginx/1.8.0 （安装路径）
如果是macOS 1.12以上的系统，在安装过程中可能会出现"warning"，说是不支持该版本的操作系统，可以暂时先忽略它。

注意：Nginx目录必须放在没有中文的目录中才能正常运行

配置Nginx

苍穹外卖-Mac配置前端开发环境：
https://blog.csdn.net/weixin_45786868/article/details/133845979
将我们下载的nginx的目录(/opt/homebrew/etc/nginx/)里的nginx.conf替换为老师给的nginx.conf，并将(/opt/homebrew/Cellar/nginx/1.27.0)中的html文件夹替换成老师给的资料中的html文件夹，这里涉及两个路径，小心混淆。
在这里插入图片描述

Nginx启动

  • windows启动nginx：双击nginx.exe即可启动nginx服务，访问端口号为80
  • MAC启动nginx：命令行执行下面的命令
brew services start nginx  // 启动nginx服务
ps -ef|grep nginx        //检查nginx是否正在运行

打开浏览器输入：localhost:8080，下面页面正常显示 代表前端部署成功
在这里插入图片描述

二、后端环境搭建

后端工程基于maven进行项目构建，并且分模块开发

  1. sky- common子模块中存放的是一些公共类，可以供其他模块使用
  2. sky-pojo子模块中存放的是一些entity、DTO、VO
    • ENtity：实体，通常和数据库中的表对应
    • DTO：数据传输对象，通常用于程序中各层之间传递数据
    • VO：视图对象，为前端展示数据提供的对象
    • POJO：普通Java对象，只有属性 和对应的getter和setter
  3. sky-server子模块中存放的是配置文件、配置类、拦截器、controller、启动类等

具体搭建环境步骤

IDEA打开sky_take_out工程

  • 用IDEA打开初始工程sky_take_out,如下图
    在这里插入图片描述
  • 在命令行检查电脑是否有maven，然后判断是否需要安装maven
brew info maven    // 检查电脑maven信息
brew install maven    //通过homebrew安装maven，通过homebrew安装，不需要配置环境变量classpath！
  • 安装完maven后我们还需要配置IDEA中的maven
    打开IDEA->setting，将maven home path换成本地路径，不知道可以通过brew info maven查看，然后通过cd命令进入maven本地文件夹，依次通过cd conf和ls命令，找到settings.xml文件，并将settings.xml文件路径复制到IDEA中User settings file，然后Apply，OK，IDEA中maven配置完成，具体演示步骤看下面的图片
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

使用Git进行项目代码的版本控制

  • 创建Git本地仓库
  • 创建Git远程仓库
  • 将本地文件推送到Git远程仓库

使用IDEA自带Database可视化并连接MySQL

  1. 首先在命令行安装并启动MySQL，在安装完MySQL后需要初始化MySQL，设置root密码
# homebrew安装MySQL
brew install MySQL
brew info MySQL
# 启动MySQL
brew services start MySQL
# 进入/退出MySQL环境
MySQL -u root -p    // 进入    
quit;    // 退出
  1. 安装并熟悉了MySQL后，进入MySQL环境运行sky.sql文件，sky.sql会创建数据库sky_take_out，并在这个数据库中创建11个table。
    如何命令行运行sky.sql文件：
    • 首先命令行进入mysql运行环境
    • 拖动sky.sql文件到命令行，回车
    • 注意：mac m1芯片 要一层层cd 然后source sky.sql ，不知道为啥，但是实操是这样的
      在这里插入图片描述
  2. 然后在IDEA中建立与MySQL的连接，具体见图
    在这里插入图片描述
    在这里插入图片描述
    上图是填写MySQL的登陆用户和密码以及数据库名称，下图中需要给数据库连接安装对应驱动(Drivers)，点击‘+’号，安装对应MySQL版本驱动即可，然后Apply，并test connection能否成功。
    在这里插入图片描述

三、项目整体

IDEA前后端联调注意事项

  • application-dev.yml 中数据库密码是root，需要修改成本地数据库密码，有数字需要加双引号。
  • 前端登陆账户密码，可以查看sky_take_out数据库中的employee表，会默认增加初始一项。
  • Mac使用IDEA进入某一方法源码 快捷键：option+command+单击；进入方法对应接口：shift+command+单击；

JwtProperties配置类

在这里插入图片描述
JwtProperties是一个配置属性类，存放在common模块->properties，这个类是用来封装springboot配置文件中的配置项，也就是.yml配置文件

Nginx反向代理和负载均衡概念

前端发送的请求，是如何请求到后端服务的？
Nginx反向代理：前端发送请求给nginx服务器，然后由nginx服务器动态分陪给后端。为什么不直接通过前端请求后端，反而中间要添加一个nginx服务器，有以下好处：

  • 提高访问速度，nginx服务器可以提供缓存，如果请求在缓存中存在可以直接传递数据
  • 进行负载均衡：如果前端直接发送请求给后端，前端只能绑定一台后端，而在实际应用中，由于前端请求服务的增加，往往需要部署多台后端组成集群，nginx服务器可以将前端大量请求按照指定方式均衡的分配给集群中每台后端服务器，使得后端服务负载均衡。
  • 保证后端服务安全：防止前端直接访问后端

Nginx反向代理和负载均衡的配置方式-nginx.conf
在这里插入图片描述
将api/前路径替换，然后剩余的拼接上
在这里插入图片描述
负载均衡就是将发送给后端请求，指定服务器ip地址，可以有不同的分配策略
nginx负载均衡策略：

轮询默认方式
weight权重方式，默认为1，权重越高，被分配的客户端请求就越多
ip_hash依据ip分配方式，这样每个访客可以固定访问一个后端服务
least_conn依据最少连接方式，把请求优先分配给连接数少的后端服务
url_hash依据url分配方式，这样相同的url会被分配到同一个后端服务
fair依据响应时间方式，响应时间短的服务将会被优先分配

完善登录功能

Employee table中密码是明文存储，如何解决？

  1. 将密码加密后存储
    使用MD5加密方式MD5信息摘要算法，一种密码散列函数，将原本明文密码生产为一个128位的散列值（16字节），且该过程是单向的。所以进行密码核对是核对加密后的128位密文。
  • 修改数据库中的明文密码，改为MD5加密后的密文
  • 修改Java代码，前端提交的密码进行MD5加密后再跟数据库中的密码进行对比
  • DigestUtils工具类，可以对数据进行DM5加密

Swagger

帮助后端生成接口文档，并进行接口测试使用Swagger只需要按照他的规范去定义接口及接口相关信息，就可以做到生成接口文档，以及在线接口调试页面。Knife4j 是为Java MVC框架集成Swagger生成Api文档的增强解决方案。

<dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>knife4j-spring-boot-starter</artifactId>
           <version>3.0.2</version>
</dependency>

Swagger使用方式

导入 knife4j的maven坐标
在配置类中加入knife4j相关配置
设置静态资源映射，否则接口文档页面无法访问

Swagger常用注解

注解说明
@Api用在类上，例如Controller，表示对类的说明
@ApiModel用在类上，例如entity、DTO、VO
@ApiModelProperty用在属性上，描述属性信息
@ApiOperation用在方法上，例如Controller的方法，说明方法的用途、作用

总结

day01主要实现了环境搭建和登陆功能，还学习了Nginx反向代理和负载均衡概念，以及Maven和如何使用Swagger生成接口文档。

yucan_hi
关注
苍穹外卖-前端环境搭建
07-21
苍穹外卖——前端环境搭建
mac m3u8下载器 dowine.zip
03-14
Mac M3U8下载器是一种专门针对M3U8格式流媒体内容的下载工具，尤其适用于苹果Mac操作系统。M3U8是一种基于HLS（HTTP Live Streaming）协议的媒体播放列表文件格式，常用于在线视频和音频的分段传输。在描述中提到的...
【java苍穹外卖项目实战二】苍穹外卖环境搭建
小林的博客
02-09 2871
模块中存放的是 配置文件、配置类、拦截器、controller、service、mapper、启动类等。前端的页面我们只需要导入资料中的nginx， 前端页面的代码我们只需要能看懂即可。通过该sql文件直接可创建数据库，所以不需要提前创建数据库，直接导入该文件执行即可。后端工程基于 maven 进行项目构建，并且进行分模块开发。模块中存放的是一些 entity、DTO、VO。模块中存放的是一些公共类，可以供其他模块使用。
苍穹外卖01-项目概述、环境搭建
Eric_飞
08-29 3539
软件开发整体介绍苍穹外卖项目介绍开发环境搭建导入接口文档Swagger管理端-外卖商家使用用户端-点餐用户使用作为一名软件开发工程师,我们需要了解在软件开发过程中的开发流程， 以及软件开发过程中涉及到的岗位角色，角色的分工、职责， 并了解软件开发中涉及到的三种软件环境。那么这一小节，我们将从 软件开发流程、角色分工、软件环境 三个方面整体介绍一下软件开发。在开发苍穹外卖这个项目之前，我们需要全方位的来介绍一下当前我们学习的这个项目。
mac M2配置苍穹外卖nginx前端代码，10天拿到字节跳动网络安全岗位offer
m0_60666841的博客
04-06 252
/查看nginx是否启动。
【苍穹外卖】前端 Day 1
最新发布
Yudiannann的博客
09-10 983
（Document Object Model，文档对象模型）是浏览器中的一种编程接口，它允许开发者通过编程语言（如 JavaScript）来访问和操作网页的结构、内容和样式。它可以方便地进行与服务器的交互，包括发送 GET、POST、PUT、DELETE 等请求，处理响应数据，并且支持请求的拦截、取消、自动处理 JSON 数据、并发请求等功能。所以一上来访问的路径是"/"的时候，不仅仅是渲染 HomeView 组件，还有 APP 的根组件。Vuex 的存储对象，它是整个应用的唯一数据源（单一状态树）。
基于macOS的苍穹外卖踩坑记录
m0_56243424的博客
05-28 918
学之前java、maven，spring略有了解。基本上是all in两周写完的（不包括周末，纯工作日公司带薪学习哈哈）。新手入门，技术栈过浅，不因写入简历，应该以这个为跳板进行更深的项目学习。
苍穹外卖项目前端DAY01
qq_62892403的博客
09-01 1290
vue属于单页面应用，所谓的路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容路由组成：VueRouter：路由器，根据路由请求在路由视图中动态渲染对应的视图组件：路由链接组件，浏览器回解析成：路由视图组件，用来展示与路由路径匹配的视图组件vuex是一个专为Vue.js应用程序开发的状态管理库vuex可以在多个组件之间共享数据，并且共享的数据是响应式的，即数据的变更能及时渲染到模版vuex采用集中式存储管理所有组件的状态安装vuex。
配置m3u8流媒体视频播放
06-05
配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放...
python将下载到本地m3u8视频合成MP4的代码详解
01-19
代码如下所示： import os import requests import datetime from Crypto.Cipher import AES def decode_key_file(key_file_name): with open(key_file_name,r) as f: data=f.read() ...
苍穹外卖-day03.md
06-24
苍穹外卖-day03.md
在MacBook Pro上设置Java开发环境
01-21
好吧，我去了地球的另一边，并且因为我的PC不在旁边，只有一台MacBook Pro可以用于开发。这篇文章应该被看作是一个加强书签，我列出了使得MacBook能实现目的的所有必需安装的工具，即用于Java和稍后也会用于...
适合直播m3u8格式手机和PC端播放器
05-18
适合直播m3u8格式手机和PC端播放器，需要引入文件请下载，代码如下： <link rel="stylesheet" href="DPlayer.min.css"> <div id="dplayer"></div> [removed][removed] [removed][removed] [removed] const ...
苍穹外卖项目前端DAY03
qq_62892403的博客
09-04 999
产品原型：业务规则：接口设计：注意：输入框、按钮、下拉框都是使用ElementUI提供的组件对于前端的组件只需要参考ElementUI提供的文档，进行修改即可导入查询套餐分类的Js方法，动态填充套餐分类下拉框完整代码 1.1.3、功能测试 业务规则：接口设计：完整代码 1.2.3、功能测试 产品原型：业务规则:接口设计：一个接口，兼容两种删除方式完整代码 ve; z-index: 1; padding: 30px 28px; border-radius: 4px; } }
Mac pro m1:黑马-苍穹外卖-部署：nginx-mysql-idea
qq_45828494的博客
07-28 3592
因为老师给的是windows的代码，所以在Mac上面不能直接执行nginx.exe文件启动。因此，在这步，我结合了黑马点评的前端部署方法。2）server下listen那行是我们在浏览器中输入的端口（我这样改主要是原端口总被占用，且杀死进程时总是杀不死--就是杀了还在）。3）倒数第二行的8081是我们在idea中的配置（这也是无数次端口被占用后我的无奈之举）。在新建的数据库上右键 -- 运行SQL文件 --找到老师给的文件。新建一个数据库（在连接上右键--新建数据库）。右键访达-->前往-->以下路径。
苍穹外卖前端代码通过Docker部署到云服务器
lbj22的博客
08-07 1613
苍穹外卖项目整体都已经开发完全了，但是呢如果每次都在本地启动，会很麻烦，于是我们通过部署到云服务器上，这样就可以随时随地访问了。注：本文使用的是Centos7。
《苍穹外卖》前端课程知识点记录
ltt159264的博客
05-04 1753
vue属于单页面应用，所谓的路由，就是根据浏览器。
苍穹外卖项目前端DAY02
qq_62892403的博客
09-03 1582
注意：在路由文件中已经配置了如下路由规则。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值