JavaWeb项目 音乐海专辑商城

已于 2022-07-06 21:35:30 修改
阅读量310 收藏 6
点赞数
分类专栏： Java学习 文章标签： tomcat java intellij-idea
于 2022-06-09 20:55:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alveus/article/details/125210882
版权

JavaWeb项目 音乐海专辑商城

完整项目地址：项目地址

文章目录


在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

需求分析

首页展示专辑列表，分页显示
专辑列表可以根据价格进行筛选
注册和登录功能，根据用户名和密码登录，如果是普通用户账号则跳转到首页，如果是管理员账号则跳转到后台管理页面
注册 通过用户名，密码，用户邮箱和验证码来完成注册
用户登陆成功以后，可以将专辑列表中的专辑加入购物车
点击购物车可以显示购物车详细信息，也可以对购物车内商品数量进行编辑或删除某商品
之后可以进行结算，生成账单
生成账单后可以通过点击我的订单查看已生成的订单详情信息

管理员后台管理功能：对专辑进行管理，修改信息，库存，价格等信息。也可以下架某商品。
下架商品为假删除，因为以往订单和购物车可能会引用某些被删除商品，如果真删会删除失败

管理员还可以进行订单管理功能，可以看到所有用户的订单，同时进行发货状态的修改和订单详情的查看

数据库设计

  1. 实体分析
    专辑 Album
    用户 User
    订单 OrderBean
    订单项 OrderItem
    购物车项 CartItem

  2. 实体属性分析
    专辑 : 名称、艺人、价格、销量、库存、封面、状态
    用户 : 用户名、密码、邮箱、权限
    订单 : 订单编号、订单日期、订单金额、订单数量、订单状态、用户
    订单项 : 商品、数量、所属订单
    购物车项 : 商品、数量、所属用户

  3. 创建数据库，设计初始数据并备份

类设计

Controller类：
AlbumController
CartController
OrderController
UserController

DAO类(继承BaseDAO)：
接口：
AlbumDAO
CartItemDAO
OrderDAO
OrderItemDAO
UserDAO

实现类：
AlbumDAOImpl
CartItemDAOImpl
OrderDAOImpl
OrderItemDAOImpl
UserDAOImpl

pojo基本类：
Album
Cart
CartItem
OrderBean
OrderItem
User

Service类：
接口：
AlbumService
CartItemService
OrderService
UserService

实现类：
AlbumServiceImpl
CartItemServiceImpl
OrderServiceImpl
UserServiceImpl

filter类：
SessionFilter

创建项目

环境：Windows11 JDK 16.0.2 IntelliJ IDEA 2021.1.2 MySQL 5.5.40 Tomcat 8.5.31

Tomcat URL配置：http://localhost:8080/mall/page.do?operate=page&page=user/login

导入功能模块 myssm 内包含基础数据库操作类BaseDAO，实用工具Util类等
导入html页面和css js资源以及静态资源文件
加入Thymeleaf、Tomcat、Druid、mysql-connector kaptcha等依赖jar包
配置xml文件，包括Web.xml jdbc.properties applicationContext.xml

创建基本pojo类

设置Tomcat启动URL：http://localhost:8080/mall/page.do?operate=page&page=user/login

建立Controller，每个Controller要用到对应的DAO，DAO上面有一层Service，故再新建Service

实现顺序 DAO-DAOImpl-Service-ServiceImpl

验证可以获取CartList后 用Thymeleaf修改页面中写死的假数据

<link rel="stylesheet" href="./static/css/minireset.css" />
<link rel="stylesheet" href="./static/css/common.css" />
<link rel="stylesheet" href="./static/css/iconfont.css" />
<link rel="stylesheet" href="./static/css/index.css" />
<link rel="stylesheet" href="./static/css/swiper.min.css" />

改为

    <link rel="stylesheet" th:href="@{/static/css/minireset.css}" />
    <link rel="stylesheet" th:href="@{/static/css/common.css}" />
    <link rel="stylesheet" th:href="@{static/css/iconfont.css}" />
    <link rel="stylesheet" th:href="@{static/css/index.css}" />
    <link rel="stylesheet" th:href="@{static/css/swiper.min.css}" />

<div class="list-content">
    <div class="list-item">
        <img src="./static/uploads/huozhe.jpg" alt="">
            <p>书名:活着</p>
            <p>作者:余华</p>
            <p>价格:￥66.6</p>
            <p>销量:230</p>
            <p>库存:1000</p>
            <button>加入购物车</button>
	</div>
</div>

    留下这一个作为模板，后面的死数据全部删除

三层架构

客户端从页面发来请求后，ContextLoaderListener监听上下文创建并首先响应，从配置文件中读取信息并创建IOC容器BeanMap，接着Filter层响应，设置编码，开启事务。开启事务之后中央控制器DispatcherServlet响应并调用相关的Controller，Controller调用相应的Service方法，Service方法内是一系列对DAO对象的调用操作，一个DAO对象操作数据库中相应的一张表 。重新返回结果到Controller层之后Controller层返回给中央控制器一个字符串值，中央控制器根据返回值进行最后一步：对页面视图的渲染，然后将用户转发或重定向至某页面。

  • 表述层(Servlet层)：负责处理浏览器请求、返回响应、页面调度
  • 业务逻辑层Service：负责处理业务逻辑，根据业务逻辑把持久化层从数据库查询出来的数据进行运算、组装，封装好后返回给表述层，也可以根据业务功能的需要调用持久化层把数据保存到数据库、修改数据库中的数据、删除数据库中的数据
  • 持久化层DAO：根据上一层的调用对数据库中的数据执行增删改查的操作

好处：所有和当前业务功能需求相关的代码全部耦合在一起，如果其中有任何一个部分出现了问题，牵一发而动全身，导致其他无关代码也要进行相应的修改。这样的话代码会非常难以维护。

所以为了提高开发效率，需要对代码进行模块化的拆分。整个项目模块化、组件化程度越高，越容易管理和维护，出现问题更容易排查。

登录功能

SessionFilter ， 用来判断session中是否保存了currUser，判断是否是合法用户。

购物车

关于金额的精度问题：

验证码

Kaptcha
导入kaptcha-2.3.2.jar
配置web.xml

<servlet>
        <servlet-name>KaptchaServlet</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
        <init-param>
            <param-name>kaptcha.border.color</param-name>
            <param-value>red</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.textproducer.char.string</param-name>
            <param-value>abcdefg</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.noise.impl</param-name>
            <param-value>com.google.code.kaptcha.impl.NoNoise</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.image.width</param-name>
            <param-value>120</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.image.height</param-name>
            <param-value>40</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.textproducer.font.size</param-name>
            <param-value>28</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>KaptchaServlet</servlet-name>
        <url-pattern>/kaptch.jpg</url-pattern>
    </servlet-mapping>

用Vue Axios对购物车页面进行改造

原生的Ajax（了解）

第一步： 客户端发送异步请求；并绑定对结果处理的回调函数

  2. 定义ckUname方法：
    • 创建XMLHttpRequest对象
    • XMLHttpRequest对象操作步骤：
      • open(url,“GET”,true)
      • onreadyStateChange 设置回调
      • send() 发送请求
    • 在回调函数中需要判断XMLHttpRequest对象的状态:
      readyState(0-4) , status(200)
      第二步：服务器端做校验，然后将校验结果响应给客户端

目的： 用来发送异步的请求，然后当服务器给我响应的时候再进行回调操作
好处： 提高用户体验；局部刷新：降低服务器负担、减轻浏览器压力、减轻网络带宽压力
开发步骤：

  1. 创建XMLHttpRequest
  2. 调用open进行设置：“GET” , URL , true
  3. 绑定状态改变时执行的回调函数 - onreadystatechange
  4. 发送请求 - send()
  5. 编写回调函数，在回调函数中，我们只对XMLHttpRequest的readystate为4的时候感兴趣
    我们只对XMLHttpRequest的status为200的时候感兴趣
0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.

0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了

Vue

  1. {{}} - 相当于innerText
  2. v-bind:attr 绑定属性值。例如，v-bind:value - 绑定value值
    简写： :value
  3. v-model 双向绑定
    v-model:value , 简写 v-model
  4. v-if , v-else , v-show
    v-if和v-else之间不能有其他的节点
    v-show是通过样式表display来控制节点是否显示
  5. v-for 迭代
    v-for={fruit in fruitList}
  6. v-on 绑定事件
  7. 其他：
    • trim:去除首尾空格 , split() , join()
    • watch表示侦听属性
    • 生命周期

Axios

Axios是Ajax的一个框架,简化Ajax操作
Axios执行Ajax操作的步骤：

  1. 添加并引入axios的js文件

2-1. 客户端向服务器端异步发送普通参数值

  • 基本格式： axios().then().catch()
  • 示例：
    axios({
    method:"POST",
    url:"....",
    params:{
        uname:"lina",
        pwd:"ok"
    }
    })
    .then(function(value){})          //成功响应时执行的回调        value.data可以获取到服务器响应内容
    .catch(function(reason){});       //有异常时执行的回调          reason.response.data可以获取到响应的内容

                                                                reason.message / reason.stack 可以查看错误的信息

2-2. 客户端向服务器发送JSON格式的数据

  • 什么是JSON
    JSON是一种数据格式
    XML也是一种数据格式
    XML格式表示两个学员信息的代码如下：

    <students>
<student sid="s001">
    <sname>jim</sname>
    <age>18</age>
</student>
<student sid="s002">
    <sname>tom</sname>
    <age>19</age>
</student>
</students>

    JSON格式表示两个学员信息的代码如下：
    [{sid:"s001",age:18},{sid:"s002",age:19}]

  • JSON表达数据更简洁，更能够节约网络带宽

  • 客户端发送JSON格式的数据给服务器端

  1. 客户端中params需要修改成： data:

  2. 服务器获取参数值不再是 request.getParameter()...
    而是：

    StringBuffer stringBuffer = new StringBuffer("");
BufferedReader bufferedReader = request.getReader();
String str = null ;
while((str=bufferedReader.readLine())!=null){
    stringBuffer.append(str);
}
str = stringBuffer.toString() ;

  3. 我们会发现 str的内容如下：
    {"uname":"lina","pwd":"ok"}
    服务器端给客户端响应JSON格式的字符串，然后客户端需要将字符串转化成js Object

  1. 获取文档中某一个节点的方式：
    //DOM:Document
    //var unameTxt = document.getElementById("unameTxt");
    //BOM:Browser
    //document.forms[0].uname

总体思路：

html-js-controller-service-serviceimpl-DAO-daoimpl

问题

未将lib添加到工件

-parameters导致空指针异常

applicationContext.xml路径填写错误导致beanFactory不能正确新建实例，报错classNotFoundException修改后正确，调试beanFactory实例正确加载配置文件中的参数如下图：

//32位全球唯一码，表示订单编号，不用手动生成

在user/login点击登陆后需要访问user.do，如果用户存在则在session中存入currUser，此时用户才合法

//有时没有给定某些参数时传的参数不为null而是空字符串(&lowPrice=&highPrice=)，因此字符串判空不可忽略
//http://localhost:8080/mall/album.do?operate=index&turnLoc=search&lowPrice=&highPrice=

过滤器
在这里插入图片描述
已有的过滤器在com.hive.myssm...下，新建的filter路径若在com.hive.album则必然会让myssm里的所有filter失效，故应该新建包名使之字典序不能高于myssm
如果新加一个合法用户验证过滤器，过滤器类名应保证字典序低于已有的设置编码的filters，以免用户验证过滤器让设置编码的CharacterEncodingFilter失效
故新建com.hive.userfilters

Alveus
关注
专栏目录
大学生毕业设计论文题目大全
2402_82389843的博客
05-02 1127
目的论视角下游戏名称本地化翻译策略分析 ——以动视暴雪公司旗下游戏为例。基于SpringBoot的社区C2C物品置换系统的设计与实现。基于SpringBoot+Vue的学习辅导系统的设计与实现。基于SpringBoot的人才公寓租赁管理系统的设计与实现。基于SpringBoot的社区养老服务管理系统的设计与实现。基于SpringBoot+VUE的宿舍管理系统的设计与实现。基于SpringBoot的毕业生就业服务平台的设计与实现。基于SpringBoot的社区志愿者管理系统的设计与实现。
MusicStore音乐商店JavaWeb
01-06
直接用oracle12c和myeclipse2014可以直接部署使用，如果是oracle12c以下版本的数据库可能要更换驱动（理论不用更换）。有小点部分没有修复好。数据库用户名密码和密码可能和你的不一样，请到applicationContext.xml修改
Java项目:音乐专辑商城系统(java+SSM+JSP+jQuery+Mysql)
常年被追砍的博客
06-28 378
本项目分为前后台，前台普通用户登录，后台管理员登录；管理员角色包含以下功能： 管理员登录,修改个人信息,人员管理,图片管理,订单管理,图表管理,专辑管理等功能。用户角色包含以下功能： 按分类查看歌曲,用户登录,查看商品详情,加入购物车,提交订单,修改个人信息,查看订单等功能。1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境：Tomcat 7.x,8.x,9.x
基于JSP的宠物商品管理商城
QQ860234001的专栏
02-24 1536
现如今,宠物商品商城是商业贸易中的一条非常重要的道路，可以把其从传统的实体模式中解放中来，网上购物可以为消费者提供巨大的便利。通过宠物商品商城这个平台，可以使用户足不出户就可以了解现今的流行趋势和丰富的商品信息，为用户提供了极大的方便，宠物商品商城的主要功能包含：商品类别管理、商品的信息管理、订单管理、用户的管理等。网站分为管理员、会员用户这二种用户平台。宠物商品商城主要使用MySQL作为数据库管理系统，开发环境是Java，这是一个基于Web技术的B/S结构的宠物商品商城。实现了一个宠物商品商城网站。能够让
JavaWeb技术开发音乐专辑购物网站
12-09
本系统用JSP在网络上构架一个动态的音乐专辑购物网站，它是以MySQL为数据库开发平台，Tomcat 6.0网络信息服务做为应用服务器，采用MVC模式开发的音乐专辑网上购物系统。它主要分为前台部分和后台部分，前台部分由用户使用，主要包括用户登陆、用户注册、商品浏览、购物车管理以及个人信息修改等功能。
web音乐商城简陋版项目总结（sevlet+jsp+mysql）
只会写bug的靓仔的博客
03-13 1776
这次的web项目是做一个音乐商城，目的是巩固下最近java ee学习的内容。  有点头皮发麻，做一个响应式网站，完全不知道从何做起，开始的时候做servlet响应，就无脑一个请求对应一个servlet，并且这个sevlet内容，从获取请求到交互数据全在一个类中实现。 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
JavaWeb音乐商城项目-音乐海
07-06
【JavaWeb音乐商城项目-音乐海】是一个使用JavaWeb技术构建的在线音乐商店应用，它主要基于SSM（Spring、SpringMVC、MyBatis）框架进行开发。这个项目是针对Java课程设计或大作业而设计的，旨在帮助学生理解和实践...
基于javaweb的在线音乐分享平台.zip
06-06
这个项目的核心在于利用JavaWeb的强大功能，结合数据库管理，实现用户登录、音乐搜索、播放、分享等功能，让音乐爱好者能够随时随地享受音乐，并与他人共享自己的音乐体验。 首先，我们要理解JavaWeb的基本概念。...
java计算机毕业设计的水世界乐园管理系统源码+数据库+系统+lw文档+mybatis+运行部署
bishe608的博客
10-10 378
java计算机毕业设计的水世界乐园管理系统源码+数据库+系统+lw文档+mybatis+运行部署。springboot基于精细化考核的离散数学课程教学目标达成系统。springboot基于Java的图书借阅管理系统设计与实现。springboot小汽车在线预约维修平台系统设计。springboot基于web的学校工资管理系统。ssm基于Vue和mysql的智能图书管理系统。
java计算机毕业设计的水世界乐园管理系统源程序+mysql+系统+lw文档+远程调试
m0_72303790的博客
10-31 326
java计算机毕业设计的水世界乐园管理系统源程序+mysql+系统+lw文档+远程调试。JSP基于Web的在线文献查阅系统的设计与实现sqlserver。JSP基于JSP的美容服务预约系统的设计与实现sqlserver。springboot基于springboot技术的游戏交易平台。springcloud基于微服务架构的乐居租房网的设计与实现。springboot基于Java的图书借阅管理系统设计与实现。springboot基于JSP的企业办公管理系统设计与实现。
基于html+css的购物网站前端页面【折扣社】前端网站
热门推荐
resilient的博客
03-21 2万+
2014年学生时代学前端的时候写的,现在回头来看,很多地方都没有考虑到,比如兼容性,分布式布局 现在已做PHP开发,在回头来看代码,发现那个时候的代码稚嫩, 慢慢的有时间 了,应该做代码重构,应该尝试Vue,React 之前实现的效果如下,主要做了6个页面 - 注册页面 - 登录页面 - 首页 - 商品详情页 - 购物车页面 - 热销商品页 ...
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
qq_365392777
11-24 466
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
html购物网页代码大全,HTML常用代码大全
weixin_36211941的博客
06-07 3781
html代码，我们暂时抛开代码二字，大家有听说过html是什么吗?好吧，小编承认这又是一个高大上的专业名词。还是由小编来为大家详细介绍一下吧。Html代码，又叫超文本标记语言。是网络上广泛使用的电脑语言。它也是构成网页文档的语言基础，并且可以用来表示文字、图形、声音等所有我们看到或听到的因素。可以说它是我们电脑的一种“身体器官”非常的重要。今天学习啦小编就来为大家简单介绍一下常用的html代码吧。...
基于javaweb的音乐网站
努力健身的博客
04-09 1万+
实现了注册、登陆、权限校验、上传歌曲、下载歌曲、播放歌曲、点赞、踩、评论功能
基于java(springboot+mybatis)网上音乐商城设计和实现以及论文报告
java李阳勇的博客
03-23 4250
具体功能模块： (1) 用户注册和登录登录功能： ①用户的注册功能 : 访问网站的人根据网站的提示注册自己的账户 ②用户的登录功能 : 用户可以输入用户名和密码进行登录操作，当没有该账户的时 候，提示错误，用户必须通过注册完成或者从数据库中获取才能进行会员权限级别的操 作。登录成功之后可以购买商品，查询订单的详细信息 (2) 、个人信息的管理： ①用户信息的修改操作，其中包括会员名、密码、性别、联系方式 e-mail 和个人介 绍等用户信息的修改操作。但是会员邮箱是绑定账号的，会员邮箱不能进行更改操
基于java web的在线音乐管理系统
myzczx的博客
09-16 2742
本系统采用底层servlet开发，数据库使用mysql数据，在开发前做一下工作 1、程序开发背景   随着社会的进步,人们的生活压力越来越大，而听音乐成为了绝大部分人来缓解压力的一个方式，又因为不同的人喜好的音乐类型有所不同。因此，做一个好的在线音乐网，把不同风格、不同类型的音乐分类展现给用户就变得尤为重要。   2、需求调研   要有一个好的页面效果，以便用户在操作时有一个...
java实战项目音乐管理系统
程序三两行
08-04 1万+
概述 本系统只是用来练习一下面向对象思想，java语言的基础，包括java数组，eclipse中运行的结果如下图 冷静的分析如何实现这个程序的过程， -------------------分析中------------------- 系统文件结构如下 Music类代码如下： package com.lph.musicmanager.model; /*歌曲类 *属性: *...
JavaWeb商品销售系统的设计与实现
pengxiang1998的博客
06-06 8871
前言 今天，博主接了一个小任务，开发一款JavaWeb网上点餐系统，此外要将该系统更改为鞋城销售系统，药品销售系统以及茶叶销售系统。话不多说，开干！ 客户要求，使用他提供的一套数据库操作工具类，博主看了一下，封装挺完善，商量好价格后，便开始了工作！限时两天，四套程序，难度也是不低呀。 工具类介绍 首先我们看一下数据库工具类 数据库工具类对数据库的增删改查进行了封装，其中，查询封装为List与Page两种类型 首先是将其封装为 List 链表形式的数据 // 执行返回多条记录的查询操作，结果被封装到List中
【java】docker里的tomcat容器的java程序生成日志时间和日期不对，或者，java程序获取的时间日期不对；解决方案4步解决
最新发布
橙-极纪元-cplvfx-JJY.Cheng
10-17 42
【java】docker里的tomcat容器的java程序生成日志时间和日期不对，或者，java程序获取的时间日期不对；解决方案4步解决
JavaWeb商城项目开发实战指南
"这是一个关于javaweb实战的商城项目开发教程，涵盖了从项目功能结构到数据库设计的初步介绍。" 在javaweb商城项目开发中，我们通常会涉及到多个关键领域和组件，包括用户管理、商品分类、订单处理、地址管理等。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Alveus

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值