JavaWeb-Vue+JavaBean+Servlet+Mysql实现一个简单的音乐播放器

异二次元

已于 2022-04-22 20:51:12 修改

阅读量953

点赞数 2

分类专栏： vue+javaweb 文章标签： vue mysql 后端 visual studio 编辑器

于 2021-04-08 17:42:31 首次发布

本文链接：https://blog.csdn.net/weixin_43694829/article/details/115521232

版权

vue+javaweb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

上学期小白的vue课程中要求完成一个大作业，作业要求是使用vue搭建前端页面，使用简单的JavaWeb搭建后台，完成对数据的增删改查。今天小白偶然想起来了，就想简单分享一下思路（哈哈，在vue前端方面，小白是在网山下载的资源，主要的精力集中在了接口和后端的开发）
前端我采用的是vue，其中页面跳转使用了router，页面的主要内容是就是在音乐播放器上完成添加及删除音乐，添加及删除评论等功能
如下图所示，我将要添加《齐天》这首歌曲
在这里插入图片描述

在这里插入图片描述
如下图所示，eclpise控制台中已经显示了要插入的信息

如下图所示，数据库中已经添加了齐天的信息

如下图所示我要删除《齐天》这首歌
在这里插入图片描述

当要完成一个功能时，前端页面都会向后台发出一个添加或者删除的请求，在这里我主要将接口和后端的业务设计，前端页面的功能设计比较简单。

mylove.vue代码块

<template>
    <div>
        <h2>我喜爱的歌曲</h2>
        <table class="table table-striped">
            <tr>
                <th scope="col">#</th>
                <th scope="col">歌曲名</th>
                <th scope="col">演唱者</th>
                <th scope="col">作词 | 作曲</th>
                <th scope="col">删除</th>
            </tr>
            <tbody id="stuTBody">
                <tr v-for="(song,index) in mysong" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{song.songname}}</td>
                    <td>{{song.songer}}</td>
                    <td>{{song.composer}}</td>
                    <td><button class="button-trash" @click="del(index)"></button></td>
                </tr>
            </tbody>
        </table>
        <el-input v-model="input1" placeholder="请输入歌曲名"  class="inp"></el-input>
        <el-input v-model="input2" placeholder="请输入演唱者" class="inp"></el-input>
        <el-input v-model="input3" placeholder="请输入作词 | 作曲者"  class="inp"></el-input>
        <el-button type="warning" plain @click="addsong()">添加</el-button>
    </div>
</template>

<script>
import axios from 'axios'
// import data from '../../public/mylove.json'
export default {
    data(){
        return{
            mysong:[],
            input1:'',
            input2:'',
            input3:'',
            songname:'',
            songer:'',
            composer:''
        };
    },
    created(){

         const url = 'http://localhost:8080/vue/myloveList';
      fetch(url)
      .then(res => res.json())
      .then(data => {this.mysong=data})///将获取的data赋值给mysong{songname:'',songer:'',composer:''}
        
    },
    methods:{
        del(index){
           
            
            const url = 'http://localhost:8080/vue/delete';
            fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                songname:this.mysong[index].songname,
                songer:this.mysong[index].songer,
                composer:this.mysong[index].composer
                }
            )
            })
            this.mysong.splice(index,1); 
        },
        addsong(){
        
            var arr={"songname":this.input1,"songer":this.input2,"composer":this.input3};//注意是用等号而不是引号
            this.$set(this.mysong,this.mysong.length,arr);//用$set()方法更新时，页面会全部更新一遍
            //alert(this.input1)

            const url = 'http://localhost:8080/vue/myloveServlet';
            fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                songname: this.input1,
                songer: this.input2,
                composer: this.input3
            })
            })


        }
    }
}
</script>

<style>
h2{
    color: #F56C6C;
}
.button-trash {
    display: inline-block;
    border: 0;
    width: 2rem;
    height: 1rem;
    outline: 0;
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/></svg>");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    background-color: transparent;
      }
.inp{
    width: 250px;
    margin: 10px;
}
</style>

我们主要关注两个方法

addsong(){
        
            var arr={"songname":this.input1,"songer":this.input2,"composer":this.input3};//注意是用等号而不是引号
            this.$set(this.mysong,this.mysong.length,arr);//用$set()方法更新时，页面会全部更新一遍
            //alert(this.input1)

            const url = 'http://localhost:8080/vue/myloveServlet';
            fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                songname: this.input1,
                songer: this.input2,
                composer: this.input3
            })
            })
        }

如上代码所示，当我们发出添加请求时，前端会向myloveServlet发出一个fetch请求，其中包含要添加的数据组成的json数据包。

package controller;
import java.io.IOException;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import bean.mycomment;
import bean.mylove;
import tools.RequestBody;
@WebServlet("/myloveServlet")
public class myloveServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    public myloveServlet() {
        super();
    }
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 获取POST提交数据的Body
				String body = RequestBody.extractPostRequestBody(request);
				Gson gson = new Gson();	// 创建转换器
				System.out.println(body.toString());
				mylove mycom = gson.fromJson(body, mylove.class);	// 将JSON转换为comment对象
				try {
						mylove.insert(mycom);
				} catch (ClassNotFoundException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				} catch (SQLException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

body = RequestBody.extractPostRequestBody(request);我们用body接收请求，并用Gson解析数据包，将json数据转换为我们已经提前写好的mylove类型的数据，然后我们再调用mylove对象的insert方法，将数据插入数据库

public static void insert(mylove mylover) throws ClassNotFoundException,SQLException{
		Connection conn=null;
		PreparedStatement ps=null;
		ResultSet rs=null;
		try{
			conn=DBConnection.getConnection();
			conn.setAutoCommit(false);
			String sql="insert into mylove values(?,?,?)";
			//创建statement语句执行sql语句
			ps=conn.prepareStatement(sql);
			ps.setString(1, mylover.getSongname());
			ps.setString(2, mylover.getSonger());
			ps.setString(3, mylover.getComposer());
//			ps.setString(4, myc.formname);
			ps.executeUpdate();
			System.out.println("插入成功");
			conn.commit();
		}catch(Exception e){
			System.out.println(e.getMessage());
			System.out.println("插入失败");
		}finally{
			ps.close();
			conn.close();
		}
	}

这样就完成了增加信息的业务逻辑，而删除功能的实现方法如出一辙，在这里小白就不再介绍了，哈哈。
总而言之，小白对整个页面的设计流程大体为
1.页面设计，包括数据字段，页面样式
2.数据库设计，包括数据字段设计，数据表的创建
3.后台设计，包括实体类的编写，servlet的编写，数据库的连接，业务方法的实现
4.前端请求及接口的开发，包括前端业务功能的实现，与servlet的请求及响应
project源码https://pan.baidu.com/s/1JP6p3AkjULghIM9FY0Sf_A提取码8lir

异二次元

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaWeb-Vue+JavaBean+Servlet+Mysql实现一个简单的音乐播放器

上学期小白的vue课程中要求完成一个大作业，作业要求是使用vue搭建前端页面，使用简单的JavaWeb搭建后台，完成对数据的增删改查。今天小白偶然想起来了，就想简单分享一下思路（哈哈，在vue前端方面，小白是在网山下载的资源，主要的精力集中在了接口和后端的开发）前端我采用的是vue，其中页面跳转使用了router，页面的主要内容是就是在音乐播放器上完成添加及删除音乐，添加及删除评论等功能如下图所示，我将要添加Dangerous这首歌曲...
复制链接

扫一扫