浅谈一下我的第一个独立开发项目 -- 花卉科普网站

作为一名即将实习的00后学生，为了能让自己能找到一份心仪的开发工作，耗时一个月独立开发出一个花卉科普网站。这是我的第一个全栈开发项目，也是我第一次写关于Web前端的文章。记录一下美好生活嘻嘻

2022/06全栈开发项目

花卉科普网站

访问网址： http://114.116.12.238

//网站暂未进行备案，目前只能链接访问,感兴趣的朋友可以访问

技术栈： HTML、CSS、JavaScript、MySQL、Spring Boot MyBatis、Axios、Bootstrap、CSS3-媒体查询、jQuery.js、$.Cookie.js

功能介绍： 花卉科普网站，首页功能、花卉宝库模块、净化空气植物模块、多肉植物模块、花卉背景图、留言板、搜索、登录与注册模块等功能

项目亮点： 前后端分离式开发、响应式网站（兼容大多数主流设备）、页面简洁、美观、功能人性化、数据设计合理

网站设计之初就必需想好自己要做的网站有哪些功能模块，我使用的是qq腾讯文档的思维导图画出大致的一些功能，这个腾讯文档的思维导图挺好用的，它可以实时共享信息。当功能想好有哪些之后，就可以进行需求分析了，我使用的是jQuery.js进行开发

HTML页面响应式布局使用的是CSS3媒体查询和Bootstrap5进行布局

CSS3媒体查询简介：

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想：取代了查找设备的类型，CSS3 根据设置自适应显示。
媒体查询可用于检测很多事情，例如：

1.viewport(视窗) 的宽度与高度

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层叫数据访问层，全称为data access object，属于一种比较底层，比较基础的操作，具体到对于某个表的增删改查，也就是说某个dao一定是和数据库的某一张表一一对应的，其中封装了增删改查基本操作，建议dao只做原子操作，增删改查。