当前位置:首页 > 文章列表 > 数据库 > MySQL > 简易项目初体验

简易项目初体验

来源:SegmentFault 2023-02-23 16:25:43 0浏览 收藏

你在学习数据库相关的知识吗?本文《简易项目初体验》,主要介绍的内容就涉及到MySQL、Java、spring、springboot、thymeleaf,如果你想提升自己的开发能力,就不要错过这篇文章,大家要知道编程理论基础和实战操作都是不可或缺的哦!

需求分析

任何一个电商系统中都有一个商品子系统,而与商品相关联的都会有一个品牌信息管理子系统,在当前也为设计中我们就是要对商品品牌信息进行管理。

业务架构

在品牌(brand)管理中就是要实现对商品品牌信息的添加、修改、查询、删除等业务,如图所示:

image.png

原型设计

基于业务描述,对品牌模块的业务原型进行分析和设计,如图所示:

  • 品牌列表页面

image.png
  • 品牌编辑页面

image.png

技术架构

在品牌管理模块实现过程中,我们采用典型的c/s(client/service)架构进行实现。客户端我们基于浏览器(web)进行实现,服务端采用Tomcat,数据库使用mysql,具体应用层基于MVC分层架构进行实现。

技术栈选型

客户端技术:html、css、JavaScript、bootstrap(框架)
服务端技术:spring、mybatis、springboot、thymeleaf
数据库技术:MySQL(数据库)、SQL(编程语言)
开发工具集:jdk1.8,maven3.6.3,idea2020.2

项目环境初始化

1)JDK 1.8
2)Maven 3.6.3
3)Idea 2020.2
4)MySQL 5.7以上版本

初始化数据库

假如数据库已存在,则先删除数据库,代码如下:

<p></p><center><img referrerpolicy="no-referrer" src="/uploads/20230223/167714100463f7240ca3be2.png" alt="image.png" title="image.png" loading="lazy"></center><h3>启动及运行过程中的BUG分析</h3>
  • 客户端提交到服务端的数据拿不到?

image.png

品牌模块修改业务分析及实现

业务描述

在品牌列表页面,点击当前行的修改按钮,先基于id查询当前行记录,并将记录呈现在编辑页面,如图所示:

image.png

image.png

业务时序分析与设计

基于id查询品牌信息并呈现在页面上,其时序分析如图所示:

image.png

在品牌编辑页面,编辑数据,点击save按钮保存更新,其时序如图所示:

image.png

数据逻辑对象(Dao)中方法设计与实现

在BrandDao中添加基于id查询品牌信息的方法及SQL映射,代码如下:

@Select("select * from tb_brand where id=#{id}")
Brand findById(Integer id);

在BrandDao中添加基于id执行品牌更新的方法及SQL映射,代码如下:

@Update("update tb_brand set name=#{name},remark=#{remark} where id=#{id}") int updateBrand(Brand Brand);

业务逻辑对象(Service)中方法设计与实现

在BrandService 中添加基于id查询品牌信息和更新品牌信息的方法,代码如下:

Brand findById(Integer id);
int updateBrand(Brand brand);

在BrandServiceImpl中基于id查询品牌信息和更新品牌信息的方法,代码如下:

 @Override
    public Brand findById(Integer id) {
        //.....
        return brandDao.findById(id);
    }

 @Override
    public int updateBrand(Brand brand) {
        return brandDao.updateBrand(brand);
    }

控制逻辑对象(Controller)中方法设计与实现

在BrandController中添加基于id查询品牌信息的方法,代码如下:

 @RequestMapping("/brand/doFindById/{id}")
    public String doFindById(@PathVariable Integer id,Model model) {
        Brand brand=brandService.findById(id);
        model.addAttribute("brand",brand);
        return "/brand/brand-update";
    }

在BrandController中添加更新品牌信息的方法,代码如下:

 @RequestMapping("/brand/doUpdateBrand")
    public String doUpdateBrand(Brand brand,Model model) {
        brandService.updateBrand(brand);
        List<brand> list=brandService.findBrands(null);
       model.addAttribute("list",list);
     return "brand/brand";
    }</brand>

客户端品牌编辑页面设计与实现

第一步:设计品牌修改页面brand-update.html,代码如下



    <meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/bootstrap/css/bootstrap.css"><div class="container">
       <h1>The Brand Update Page</h1>
       <form th:action="@{/brand/doUpdateBrand}" method="post">
         &lt;input type=&quot;hidden&quot; name=&quot;id&quot; th:value=&quot;${brand.id}&quot;&gt;<div class="form-group">
               <label for="nameId">Name</label>
               &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;name&quot; id=&quot;nameId&quot; th:value=&quot;${brand.name}&quot; placeholder=&quot;Brand Name&quot;&gt;</div>
           <div class="form-group">
               <label for="remarkId">Remark</label>
               &lt;textarea class=&quot;form-control&quot; rows=&quot;5&quot; cols=&quot;100&quot; name=&quot;remark&quot; th:text=&quot;${brand.remark}&quot; id=&quot;remarkId&quot;&gt;&lt;/textarea&gt;</div>
           <button type="submit" class="btn btn-default">Submit</button>
       </form>
   </div>

启动Tomcat服务进行访问测试分析

启动服务,先进入品牌列表页面,然后点击修改按钮如图所示:

image.png

此时,进入品牌编辑页面,如图所示:
image.png

在品牌编辑页面,编辑数据以后,点击save按钮,执行更新操作。

启动及运行过程中的BUG分析

  • 405 异常

image.png
  • 呈现的数据不正确

image.png
  • 页面元素解析异常

image.png

总结(Summary)

本章节,主要基于学过的springboot,Hikaricp,MyBatis,Spring,Thymeleaf等技术,对商品品牌模块做了具体实现。重点掌握其基本设计及实现过程。

好了,本文到此结束,带大家了解了《简易项目初体验》,希望本文对你有所帮助!关注golang学习网公众号,给大家分享更多数据库知识!

版本声明
本文转载于:SegmentFault 如有侵犯,请联系study_golang@163.com删除
Springboot整合quartz实现定时任务的动态加载Springboot整合quartz实现定时任务的动态加载
上一篇
Springboot整合quartz实现定时任务的动态加载
MySQL 索引简介
下一篇
MySQL 索引简介
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    485次学习
查看更多
AI推荐
  • ChatExcel酷表:告别Excel难题,北大团队AI助手助您轻松处理数据
    ChatExcel酷表
    ChatExcel酷表是由北京大学团队打造的Excel聊天机器人,用自然语言操控表格,简化数据处理,告别繁琐操作,提升工作效率!适用于学生、上班族及政府人员。
    3179次使用
  • Any绘本:开源免费AI绘本创作工具深度解析
    Any绘本
    探索Any绘本(anypicturebook.com/zh),一款开源免费的AI绘本创作工具,基于Google Gemini与Flux AI模型,让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景,零门槛,高自由度,技术透明,本地可控。
    3390次使用
  • 可赞AI:AI驱动办公可视化智能工具,一键高效生成文档图表脑图
    可赞AI
    可赞AI,AI驱动的办公可视化智能工具,助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析,还是一键生成专业图表、脑图、知识卡片,可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景,大幅提升办公效率,降低专业门槛,是您提升工作效率的得力助手。
    3419次使用
  • 星月写作:AI网文创作神器,助力爆款小说速成
    星月写作
    星月写作是国内首款聚焦中文网络小说创作的AI辅助工具,解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配,助力新人快速上手,资深作者效率倍增。
    4525次使用
  • MagicLight.ai:叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画
    MagicLight
    MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台,专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型,保障角色、风格、场景高度一致性,让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销,助您轻松实现创意落地与商业化。
    3799次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码