文章目录

前言
一.成果展示
二. 后端流程
- 2.1数据库表设计
- 2.2. 后端搭建
- - 2.2.1 mybatis-plus逆向工程生成代码简化开发
  - 2.2.2 配置数据,跨域和静态资源放行
  - 2.3. 流水线式开发模式
三.前端vue搭建
- 3.1 前端基本环境搭建
- - 3.1.1 脚手架搭建和容易出现的错误
  - 3.1.2 axios与后端交互搭建
- 3.2 基本书写流程
- 3.3 前端再次强调注意的
四.项目部署步骤.
总结

前言

前端使用: vue/cli “^4.5.15”
后端使用: springboot2.6.2, mybatis-plus3.5.9,mybatis-plus-generator3.5.1
部署:nginx,tomcat,webpack
小结.虽然项目花里胡哨,但是难度不大.收获最多的是:
1.技术选型,任务需求.一旦确定,后期变更代价惨重.
2. 注意备份
3.数据库表单设计
4.bug解决方案
5.更深入体会的是MVVM架构开发模式,流水线式创建实体并实现业务逻辑:
domain/pojo/bean → dao/mapper → mapper.xml → service → serviceimpl → controller
6.记得优先对前端进行数据校验.

感谢b站王汉远前辈和开发中帮助我的人.由于版权原因,开源项目不公布任何歌曲
由于当时选型失误,也没有围绕api开发.这就导致歌曲都是自己一首一首上传的…因此技术选型是我踩得最大的坑.

一.成果展示

前台大概总览

后台大概总览

二. 后端流程

2.1数据库表设计

在这一个单用户项目中基本手握一本 java开发手册,遵守其中规约就可以了.(但是这怎么说呢,目前阶段感觉像鸡肋.因此我接着打算看看mysql高级)
单用户项目开发基本通用样例,但仍然应当考虑自己项目的实际需求

2.2. 后端搭建

2.2.1 mybatis-plus逆向工程生成代码简化开发

为了方便开发,我们应当先建立数据库.之后使用mybatis-plus的逆向工程,代码生成器! 这里不建议使用 lombok 省略实体的构造器和get,set方法.(我曾看到过这样一句话,如果java内部到处充斥着这种像lmobok可以修改源代码的插件,那么就如同无根浮萍,没有自己的核心竞争力,java迟早被取代!)但我们不可否认,它也很方便,我一般用lombok主要是用他的@slf4j日志.

这种方式可以帮助我们自动生成
domain/pojo/bean(完全生成) → dao/mapper (生成模型和一般crud方法)→ mapper.xml (生成模型和一般crud方法)→ service (生成模型和一般crud方法)→ serviceimpl (生成模型和一般crud方法) → controller (生成模型和一般crud方法) 如果不满意它自带的crud方法,我们可以自己写,建议自己写!
该方法要注意的是mybatis-plus-generator3.5.1版本是一个转变 代码生成详见此处

2.2.2 配置数据,跨域和静态资源放行

由于基本配置是可以复用的,因此我将其粘贴下方.
采用配置类和yaml配置文件相结合的方式
1.druid类配置文件

package com.vector.music.config;import com.alibaba.druid.pool.DruidDataSource;
import com.alibaba.druid.support.http.StatViewServlet;
import com.alibaba.druid.support.http.WebStatFilter;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.boot.web.servlet.ServletRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;import javax.annotation.PostConstruct;
import javax.sql.DataSource;
import java.sql.SQLException;
import java.util.Arrays;/*** @author WangYuanJie* @description: about jdbcDruidConfig* @ClassName MyDataSourceConfig* @date 2022/1/21 16:17*/
@Configuration
public class MyDataSourceConfig {@ConfigurationProperties(prefix = "spring.datasource")@Beanpublic DataSource dataSource() throws SQLException {DruidDataSource druidDataSource = new DruidDataSource();//加入监控功能
//        druidDataSource.setFilters("stat,wall");return druidDataSource;}/** 解决druid 日志报错：discard long time none received connection:xxx* */@PostConstructpublic void setProperties(){System.setProperty("druid.mysql.usePingMethod","false");}/*** 配置druid的监控页* @return*/@Beanpublic ServletRegistrationBean statViewServlet(){StatViewServlet statViewServlet = new StatViewServlet();ServletRegistrationBean<StatViewServlet> registrationBean = new ServletRegistrationBean<>(statViewServlet, "/druid/*");registrationBean.addInitParameter("loginUsername","admin");registrationBean.addInitParameter("loginPassword","123456");return registrationBean;}/*** WebStatFilter用于采集web-jdbc关联监控的数据*/@Beanpublic FilterRegistrationBean webStatFilter(){WebStatFilter webStatFilter = new WebStatFilter();FilterRegistrationBean<WebStatFilter> filterRegistrationBean = new FilterRegistrationBean<>(webStatFilter);filterRegistrationBean.setUrlPatterns(Arrays.asList("/*"));filterRegistrationBean.addInitParameter("exclusions","*.js,*.gif,*.jpg,*.ico,/druid/*");return filterRegistrationBean;}
}

2.后端解决跨域问题

/*** 解决跨域问题*/
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOriginPatterns("*").allowCredentials(true).allowedMethods("*");}

3.解决静态资源放行问题

你可以将静态资源放在你想放置的位置,但是尽量不要放在项目工程中,因为项目工程后来只会在内存中运行.不要增加内存负荷,而且你将会出现一个奇怪的问题 springboot图片回显 详见此处

    /*** 默认情况下Spring Boot 使用WebMvcAutoConfiguration中配置的各种属性。* 默认映射的文件夹有：* classpath:/META-INF/resources* classpath:/resources* classpath:/static* classpath:/public* 上面这几个都是静态资源的映射路径，优先级顺序为：META-INF/resources > resources > static > public* 原理： 静态映射/**。* 请求进来，先去找Controller看能不能处理。不能处理的所有请求又都交给静态资源处理器。静态资源也找不到则响应404页面* 静态资源访问前缀* 默认无前缀* spring:* mvc:* static-path-pattern: /res/*** 当前项目 + static-path-pattern + 静态资源名 = 静态资源文件夹下找*/// 以下是自定义静态资源访问@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {/*** spring boot中上传图片回显问题* 定位歌手头像地址* 绝对路径映射,这个不重新部署就可以回显,因为映射你的本地*/registry.addResourceHandler("static/**").addResourceLocations(System.getProperty("user.dir") + File.separator + "static" + File.separator);}

4.yaml配置文件

# 声明当前的服务端口号是8083
server:port: 8083
#spring配置
spring:
# 解决使用swagger高版本更新后路径匹配更新和mvc路径匹配模式不匹配的问题,导致druid报一个错mvc:pathmatch:matching-strategy: ANT_PATH_MATCHERdatasource:type: com.alibaba.druid.pool.DruidDataSourcedriver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/music?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&rewriteBatchedStatements=trueusername: musicpassword: 123456# 配置druid-ui的一些功能druid:filters: stat,wall,slf4jmax-active: 12stat-view-servlet:enabled: truelogin-username: adminlogin-password: 123456reset-enable: falseweb-stat-filter:enabled: trueurl-pattern: /*exclusions: '*.js,*.gif,*.jpg,*.ico,/druid/*'aop-patterns: com.vector.admin.*filter:stat:slow-sql-millis: 1000log-slow-sql: trueenabled: truewall:enabled: true# json对象解析处理jackson:date-format: yyyy-MM-dd HH:mm:sstime-zone: GMT+8# 声明我们后端每次接收的大小和总大小servlet:multipart:max-file-size: 10MBmax-request-size: 20000MB# 配置 mybatis 相关内容
mybatis:#  config-location: classpath:mybatis/mybatis-config.xmlmapper-locations: classpath:mapper/*.xmlconfiguration: #指定mybatis全局配置文件中的相关配置项map-underscore-to-camel-case: true
mybatis-plus:type-aliases-package: com.vector.music.pojo

2.3. 流水线式开发模式

domain/pojo/bean → dao/mapper→ mapper.xml → service → serviceimpl → controller
值得一提的是

一般的实体类的时间属性不要使用localdatetime,你驾驭不住!虽然它线程安全,你肯定要使用HttpRequestServlet来获取前端传入的字符串方法,然后通过datetime转化,之后拼接成必须的格式:
yyyy-MM-dd HH:mm:ss 赋值给localdatetime

1.文件上传功能: 详见此处数据库一般存url,之前配置的静态资源路径存上传的实际文件.我们不用害怕uuid或时间戳使我们看不懂,可以通过其他字段确定上传的是什么.
2.注意对前端数据的校验.
controller层:注意@RequestMapping等的请求方式和前端是否一致;注意是否写了@ResponseBody. 不要再使用HttpRequestServlet 获取前端传来的对象.因为他的代码重复度太高,修改时候也很麻烦.建议使用@RequestBody注解实体类获取前端的值.(注意前端传值的名称要与实体类的属性相对应) .`

mapper.xml: 我认为尽量带这个参数

三.前端vue搭建

声明: 前端技术自我感觉很菜

3.1 前端基本环境搭建

3.1.1 脚手架搭建和容易出现的错误

webstorm也和idea差不多了,搭建vue-cli很方便.搭建详见此处
需要注意的是后期npm run build 打包时候如果是空白页.就要看看config/index.js的
build方法中的 assetsPublicPath: ‘./’
router路由导航中是否是 history 模式.

3.1.2 axios与后端交互搭建

由于axios代码也是可复用的,因此将其粘贴如下

import axios from 'axios'
import router from '../router'axios.defaults.timeout = 5000 // 超市时间是5秒
axios.defaults.withCredentials = true // 允许跨域
// Content-Type 响应头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 基础url
// 对应后端yaml文件的端口号
axios.defaults.baseURL = 'http://127.0.0.1:8083'// 响应拦截器
axios.interceptors.response.use(response => {// 如果reponse里面的status是200，说明访问到接口了，否则错误if (response.status === 200) {return Promise.resolve(response)} else {return Promise.reject(response)}},error => {if (error.response.status) {switch (error.response.status) {case 401: // 未登录router.replace({path: '/',query: {redirect: router.currentRoute.fullPath}})breakcase 404: // 没找到break}return Promise.reject(error.response)}}
)/*** 封装get方法*/
export function get(url, params = {}) {return new Promise((resolve, reject) => {axios.get(url, {params: params}).then(response => {resolve(response.data)}).catch(err => {reject(err)})})
}/*** 封装post方法*/
export function post(url, data = {}) {return new Promise((resolve, reject) => {axios.post(url, data).then(response => {resolve(response.data)}).catch(err => {reject(err)})})
}

3.2 基本书写流程

基本分为axios请求,assets静态资源存放,router路由导航,vuex即store全局方法,view视图组件,componentsc具体功能组件和可复用组件
components分的比较细是为了解耦合.这些是基本的开发流程.但是一想到css我就头大.太难了,太难了啊.

3.3 前端再次强调注意的

1.注意后期npm run build 打包时候如果是空白页.就要看看config/index.js的
build方法中的 assetsPublicPath: ‘./’
router路由导航中是否是 history 模式.
2.注意对可复用组件的抽离,方便日后其他项目直接使用.
3.注意vue对象中的方法不可乱起名字,都要严格遵守vue官方文档.你可以随意发挥的只有,data(),methods(),computed(),watch()里面的.应该懂我说的什么意思吧.mixins混入
4.注意webpack安装失败的话要删除node_modules文件和package-lock.json文件
要想执行webpack命令必须先下载node

四.项目部署步骤.

1.项目中的访问地址修改成服务器的地址即(127.0.0.1或localhost或0.0.0.0修改至目标服务器),注意防火墙端口放行.可以使用tomcat
2.注意后台端口, 前台端口,并且都访问同一个后端端口.
3.前端npm run build 打包前台和后台 dist
4.后端利用idea maven版本控制功能生成jar

5.注意开发的jdk和linux的jdk版本匹配,之后把jar包随便放一个地方,在该地方执行

nohup java -jar 上传jar包全名 >temp.txt 2>&1 &

6.vue开发的前台和后台可以放在tomcat的webapps里 或 nginx的html里然后

#tomcat 启动 进入tomcat的bin路径下执行
sh start.sh
#nginx 启动 进入nginx的sbin
nginx

7.假如部署静态资源无法加载,那么可能是跨平台传输工具有问题
默认端口
MySQL 3306
nginx/http 80
https 443
tomcat 8080
堡塔 8888
项目端口自定义建议1024之后

注意tomcat和nginx以及项目访问路径的端口放行和安全策略组防火墙的放行
还有一个灵光一闪,忘了…

总结

第一次项目分离开发感觉很爽,收获最大的是熟悉了开发流程,了解了很多方便开发的技巧.但诚然很容易遗忘.但这些东西正想我们吃的饭,都不经意间转化成了我们的养分.
下阶段目标: mysql高级的学习:主要内容包括,b+树结构深入,索引优化,数据迁移,容灾备份,阻塞与死锁
之后再写一个boot项目.就开始redis学习.至于之后学习基础jvm,jmm还是cloud,那我认为是jvm,jmm了.

重申由于版权原因不会公布服务器地址,当然也怕被打....
github地址

有时我也会迷茫基础jvm,jmm,算法,编译原理,数据库,计网;高级mq消息队列,kafka,cloud,zookeeper,k8s…感觉都好远,都要学但时间远远不够,考不考研也无法确定,有时候真的觉得会很累…只有学习完了做出成果的喜悦,但过不了多久感觉又有多少是自己独立完成的呢?失落感又弥漫于我…
分享一首歌但泰勒斯威夫特的歌总能使我重燃信心!

springboot+vue音乐网站实战项目相关推荐

Java+MySQL基于springboot+vue音乐平台#毕业设计
项目编号:Java+MySQL spring260-基于springboot音乐平台#毕业设计开发语言:Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomca ...
idea 提示vue插件_Vue + SpringBoot + MyBatis 音乐网站
一.前言这里对音乐网站这个项目的开发流程做一下描述,我觉得了解了具体实现的来龙去脉,上手自己做就容易得多了,要知道数据是怎么从数据库一步步跑到前端页面的,当知道了整个的流程再去处理中间的细节,具体实 ...
基于springboot+Vue垃圾分类网站积分兑换商城礼品和考试考核系统【附项目源码+论文说明】分享
基于springboot+Vue垃圾分类网站积分商城礼品考试开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7 数据库工具: ...
java音乐网站源码_Vue + SpringBoot + MyBatis 音乐网站
一.前言这里对音乐网站这个项目的开发流程做一下描述,我觉得了解了具体实现的来龙去脉,上手自己做就容易得多了,要知道数据是怎么从数据库一步步跑到前端页面的,当知道了整个的流程再去处理中间的细节,具体实 ...
基于springboot的音乐网站的设计与实现（带论文）
项目描述临近学期结束,还是毕业设计,你还在做java程序网络编程,期末作业,老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等.这里根据疫情当下,你 ...
springboot+vue租房网站（源码+文档）
风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农.今天要和大家聊的是一款基于springboot的租房网站.项目源码请联系风歌,文末附上联系信息 . 目前有各类成品java毕设,需要 ...
springboot+vue音乐翻唱与分享平台（源码+文档）
风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农.今天要和大家聊的是一款基于springboot的音乐网站与分享平台.项目源码以及部署相关请联系风歌,文末附上联系信息 .
阿里服务器部署springboot+vue前后端分离项目
服务器部署springboot+vue前后端分离项目最近刚刚在实习熟悉公司的业务,所有尝试着自己将项目部署到服务器上.本次部署的项目是Spring Boot+Vue前后端分离项目,后端使用的技术有M ...
从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...

springboot+vue音乐网站实战项目