インターンシップをしようとしている00年以降の学生として、自分の好きな開発の仕事を見つけるために、フラワーサイエンスのウェブサイトを独自に開発するのに1か月かかりました。これは私の最初のフルスタック開発プロジェクトであり、Webフロントエンドについて書くのは初めてです。良い人生を記録する
2022/06フルスタック開発プロジェクト
フラワーサイエンスのウェブサイト
URLにアクセス：http：//114.116.12.238
//当面の間、ウェブサイトは提出されていません。現在、リンクからのみアクセスできます。興味のある友達は、
テクノロジースタック： HTML、CSS、JavaScript、MySQL、Spring Boot MyBatis、Axios、Bootstrap、CSS3-メディアクエリ、jQuery.js、$。Cookie.js
機能紹介：花科学サイト、ホームページ機能、花宝庫モジュール、空気浄化プラントモジュール、多肉植物モジュール、花背景地図、メッセージボード、検索、ログイン、登録モジュールなどの機能
プロジェクトのハイライト：フロントエンドとバックエンドの分離された開発、レスポンシブWebサイト（ほとんどの主流デバイスと互換性があります）、簡潔で美しいページ、ユーザーフレンドリーな機能、および合理的なデータ設計
ウェブサイトのデザインの最初に、作成したいウェブサイトの機能モジュールについて考える必要があります。QQTencentドキュメントのマインドマップを使用して、いくつかの一般的な機能を描画します。このTencentドキュメントのマインドマップは非常に便利です。リアルタイムで情報を共有します。関数について考えたら、要件を分析できます。開発にはjQuery.jsを使用します。
HTMLページのレスポンシブレイアウトでは、CSS3メディアクエリとBootstrap5をレイアウトに使用します
CSS3メディアクエリの概要：
CSS3のマルチメディアクエリは、CSS2のマルチメディアタイプのすべてのアイデアを継承します。デバイスのタイプを見つける代わりに、CSS3は設定に従って適応的に表示します。
メディアクエリは、次のような多くのことを検出するために使用できます。
1.ビューポート（ウィンドウ）の幅と高さ
2.デバイスの幅と高さ
3.オリエンテーション（スマートフォンの横向き、縦向き）。
4.解決策
感兴趣的朋友可以去 CSS3 多媒体查询 | 菜鸟教程 (runoob.com)查阅
Bootstrap5简介：
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。
感兴趣的朋友可以去Bootstrap5 教程 | 菜鸟教程 (runoob.com)查阅
页面布局完成后，页面目前还是没有数据渲染的情况，根据花卉网站功能模块的思维导图，在网上收集一些关于花卉科普的资料和素材以确保数据的正确性。
参考文献：
1.曲宝同编著《净化空气植物大图鉴》
2.汉竹编著《700种多肉植物原色图鉴》
3.李印普编著《花卉宝典》
数据收集完毕后，创建一个数据库存储数据。我这里使用的是MySQL数据库，整个网站的数据共7张表
数据完成数据录入后，创建API接口让前端能读取到表里的数据，创建接口我使用的工具是IDEA，使用的框架是Spring Boot MyBatis，接口的设计与功能根据业务的需求进行增删改查。接口分为controller层，service层，dao层，model层就能实现一个接口的创建
1.model层存放实体类，与数据库表的字段名保持一致，创建set和get方法。
2. daoレイヤーは主にデータ永続化レイヤーの作業を行い、データベースへの接続を担当するいくつかのタスクがここにカプセル化されています。これはdaoレイヤーの設計です。daoレイヤーはデータアクセスレイヤーと呼ばれ、そのフルネームはデータアクセスオブジェクトです。これは、特定のテーブルの追加、削除、変更、およびクエリに固有の、比較的低レベルで比較的基本的な操作に属します。つまり、特定のdaoは、データベース内の特定のテーブルに関連付けられている必要があります。1対1の対応では、追加、削除、変更、およびチェックの基本操作がカプセル化されます。daoは、アトミック操作、追加、削除、変更、チェック。
3.サービス層はサービス層と呼ばれ、サービスと呼ばれます。大まかな理解は、1つ以上のDAOをサービスに再カプセル化することです。したがって、ここでは不可分操作ではなく、トランザクション制御が必要です。
サービス
Servicelmpl
4. Controlerレイヤーは、リクエストの転送、ページからのパラメーターの受け入れ、処理のためのサービスへの受け渡し、戻り値の受信、そしてページへの受け渡しを担当します。
インターフェイスが作成されたら、フロントエンドで要求して応答する必要があります。ここでは、要求と応答にAxiosを使用します。
Axiosの紹介
Axiosは、最も人気のあるフロントエンドAjaxリクエストライブラリであるPromiseベースの非同期Ajaxリクエストライブラリです。簡単に言えば、getおよびpostリクエストを送信でき、バックエンドとの対話を担当します。リクエストデータとレスポンスデータを変換し、レスポンスの内容を自動的にJSONタイプのデータに変換します。リクエストとレスポンスをインターセプトします（つまり、フロントエンドがリクエストを送信する前に、同等の自動インターセプトリクエストを設定できます。リクエストに条件を追加する）;
興味のある友達はwww.axiosに行くことができます-http.cn/docs/intro
Axiosがリクエストに正常に応答した後、ビジネスニーズに応じて対応するコードの記述を完了することができます。応答データをHTMLページにレンダリングするだけで済みます。
ウェブサイトの機能は次のとおりです。
ページ機能が完了すると、Webサイトは基本的に完成します。
モバイルホームページのレンダリング：
結論：私の最初のフルスタック開発プロジェクトの共有はここにあります、読んでくれてありがとう