🎈个人主页:靓仔很忙i
💻B 站主页:👉B站👈
🎉欢迎 👍点赞✍评论⭐收藏
🤗收录专栏:毕设
🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步!
🌟一键三连,私聊提供源码
一、前言
本文旨在为项目的开发设计提供一个清晰的思路。通过了解项目开发环境、表结构以及具体实现过程,您将能够更轻松地上手自己的项目或其他相关项目。总体来说,我们需要明确数据从数据库一步步传递到前端页面的全过程。掌握了整个流程后,再去处理各个环节的细节就会更加得心应手。接下来,我们将详细介绍项目的开发环境、表结构和项目说明,让我们开始吧。
这是我项目的 地址,可以先预览最后的效果图。
二、技术选型
技术实现:springboot(springmvc + spring + mybatis) + vue + mysql
三、程序界面
四、开发环境
操作系统:Windows
JDK: jdk-8u141
mysql:mysql-5.7.26
node:v16.14.0
IDE:IntelliJ IDEA 2019 / VSCode
五、数据库搭建
需要提前安装好:mysql5.7.26及navicat for mysql
5.1 创建数据库
打开navicat for mysql,右击我的连接--新建连接--MySQL
选择MySQL后,会弹出下面的对话框。在对话框中输入:连接名、主机、端口、用户名、密码
,输入完成后,点击测试连接,弹出连接成功,点击弹出框的确定
,以及新建连接的确定
。(Mysql默认的端口3306,本机的用的3308端口,并且没设置密码,这里需要注意一下)
点击确定后, 连接会加入到我的连接
中。双击本地3308
,会打开本地的数据库连接
右击连接名
,选择新建数据库
弹出新建数据库
窗口,输入数据库名xxx
,选择字符集:utf8
,排序规则utf8_bin
。
完成后,点击确定,完成数据库的创建,创建完成后,数据库会在连接下。
5.2 导入sql
双击数据库打开数据库,右击数据库,点击运行SQL文件
弹出运行SQL文件
对话框,按照图示顺序,找到sql,双击,并点击开始(此处以xuanke.sql为例,实际以源码中的sql为准)
完成sql导入,点击关闭。
至此数据库导入完毕。
六、后台构建
需要提前安装并破解:idea 2019
6.1 使用idea打开项目
弹出打开项目文件夹,找到我们的项目项目名
,点击OK,即可打开我们的后端项目。
6.2 配置数据库
按照项目结构,找到我们的application-druid.yml
文件,修改数据库的ip、端口、数据库名、账号、密码
,修改。
6.3 运行项目
按照目录结构,找到启动程序,点击小绿箭头,
选择Run
即可运行项目。
七、前端构建
需要提前安装好:node v16.14及VSCode
7.1 构建项目
找到项目文件夹,选中,输入cmd--回车
回弹出控制台窗口,窗口默认路径为刚才找到的项目文件夹路径
安装依赖:进入项目文件夹项目文件夹
,输入指令:
npm i
运行项目:完成依赖安装后,输入指令:
npm run dev
输入完指令后,浏览器会自动打开前端页面,在页面中输入用户名、密码,即可访问。用户名、密码见下一小节。
7.2 访问
- 管理员:admin 123456
- 用户: 111 123456
八、总结
至此我们的项目搭建结束,可以直接通过浏览器进行项目的访问。接口访问的流程为:
- 接口抓取:打开F12工具,进入网络,在网络中获取当前页面的几口
- 控制器查找:打开Idea,双击shift搜索代码文件,比如UserController
- Service查找:找到想访问的Service,按住Ctrl键,点鼠标左键进入
- Mapper查找:找到想访问的Mapper,按住Ctrl键,点鼠标左键进入
- Model: 数据库的关系,对应从后端的实体对象,放在Model层。严格划分的话可分为PO/DO/BO/VO/DTO等,PO/DO简单理解成同一个东西,在Mapper层;BO为Service层;VO/DTO为Cotroller层,当只有一个Web的时候,使用VO,有Web和小程序或者其他应用,使用DTO;当然,不进行区分,直接使用Model也可以。这层划分比较多,项目很多也不一样,需要灵活变通。