java音乐网站源码_Vue + SpringBoot + MyBatis 音乐网站

一、前言

这里对音乐网站这个项目的开发流程做一下描述,我觉得了解了具体实现的来龙去脉,上手自己做就容易得多了,要知道数据是怎么从数据库一步步跑到前端页面的,当知道了整个的流程再去处理中间的细节,具体实现的细节等有时间了就补充,接下来我们就开始吧。

二、开发环境

操作系统:Mac

JDK:jdk-8u141

mysql:mysql-5.7.21-1-macos10.13-x86_64

node:v12.4.0

IDE:IntelliJ IDEA 2018

三、后端项目构建

1、创建数据库及需要的表

2、创建项目

打开 idea,新建一个项目,在 new 一个新项目的时候,选择 Spring Initializr,在选择项目依赖的时候勾选 web下的 Spring Web Starter 和 SQL下的 MySQL Driver 和 MyBatis Framework ,然后一直继续后会得到如下结构(总体分三层)。

3、配置文件

1)application.properties

配置 application.properties 文件,用于连接数据库(代码见项目源码)。

2)generatorConfig.xml

利用MyBatis Generator 自动生成代码(实体类,Mapper接口和Mapper.xml文件),需要指定 mysql-connector-java ( src/main/resources 目录下)和生成文件的路径。在 src/main/resources 目录下创建 generatorConfig.xml 文件并配置(代码见项目源码)。

3)pom.xml

pom.xml 文件负责配置项目相关的依赖和插件,包括上面的 MyBatis Generator(项目plugins 标签中注视掉的代码是对 Mybatis-generator 插件的配置),在创建项目时,idea 已经帮我们引入了一些依赖,下面我们需要在 dependencies 标签中引入项目需要的一些依赖,配置的代码可以直接看代码,这里就不往出写了,下面对主要依赖进行下描述:

package 说明 mybatis-spring-boot-starter MyBatis核心for Spring Boot mysql-connector-java java与mysql连接的jar包驱动程序

在 plugins 标签中对 Mybatis-generator 进行配置,用于自动生成代码。

至此,项目的配置就弄完了,在命令行执行 ./mvnw mybatis-generator:generate 自动生成代码,得到的项目结构如下所示。此时会看到多生成了 dao、domain、mapper 目录及下面的文件。生成项目后,需要将上面 pom.xml 文件中 Mybatis-generator 插件的配置注视,因为这个文件就是初始时候自动生成代码用的,如果不注视每次运行都会再生成一次,即覆盖之前的代码。

4、测试(以新建一个用户为例)

创建好项目之后先测试一下,首先在 src/main/java/com/example/demo 目录下创建 service 包,service 包下创建 ConsumerService 接口和 impl包,impl包下创建 ConsumerServiceImpl 类,具体创建这个干嘛下面写接口时候再介绍。

(1)ConsumerService 接口的代码如下

ConsumerServiceImpl 类的代码如下

(2)在 src/main/java/com/example/demo 下的 ConsumerMapper 接口中添加如下代码。

在 src/main/resources/mapper 下的 ConsumerMapper.xml 文件中将 insertSelective 改成 addUser

(3)打开 SpringBoot 的启动类,加上 @MapperScan 注解,指向 dao 层接口所在的包路径。@MapperScan(“com.example.demo.dao”)

(4)然后在 src/test/java/com/example/demo 下的测试文件中写测试代码,如下,然后点如下所示运行,没有提示错误,且数据库中成功存入数据,说明项目构建成功,接下来就可以开始写接口了。

5、开发接口(以返回所有用户信息为例)

在写接口之前,先对项目层次做一下介绍。项目层次我将主要根据 domain、 DAO、Service、Controller 这几层主要实现的功能和它们之间的联系进行介绍。

1)实体类(domain 目录下)

定义数据库表所对应的实体类。

2)Mapper 层 / DAO 层(dao、mapper 目录下)

数据操作层:向数据库发送 SQL 语句,完成数据库操作。

分为 Mapper 接口 和 Mapper 接口映射文件。Mapper 接口在 dao 目录下,定义操作数据库的函数(函数不能直接去进行 CURD), Mapper 接口映射文件在 mapper 目录下,完成对数据库的访问。

3)Service 层(service 目录下)

服务层:完成业务逻辑处理。调用 Mapper 层操作数据库。

分为 Service 接口 + Service 实现,用面向接口的编程思想,方便后续功能的解耦及扩展。

4)Controller 层(controller 目录下)

控制层:对请求和响应进行控制,调用 Service 层进行业务逻辑处理,最后将处理好的数据返回给前端。

5)实战(写一个返回所有用户信息的接口)

假如前端访问 http://localhost:8888/allUser 就要拿到所有用户的信息,那么按照上面的层次我们可以这么写。

(1)访问的接口由 Controller 层来处理,所以这里这样定义,要返回所有用户信息,把它当一个命令,交给 Service 层去做。

(2)到了 Service 层,Service 层的 ConsumerService 接口中先定义下面方法

然后在 ConsumerServiceImpl 类中这样去实现它。

(3)Service 层会让 dao 层的 ConsumerMapper 接口调 allUser 方法去返回数据,

而 ConsumerMapper 接口操作数据库又要依赖 Mapper.xml 文件。

(4)这样,一个返回所有用户信息的接口就写完了,打开 Terminal 输入如下命令跑一下项目。如下所示

./mvnw spring-boot:run

在浏览器中输入 http://localhost:8888/allUser 查看结果。

知道一个接口怎么写,其他接口也类似,需要注意的地方有两点,第一个是解决跨域问题(可以查看代码 config 文件夹下面设置),第二个问题是关于静态资源的处理(这个就是最开始跑这个项目时候修改图片、音乐路径做的事情)。

6)最后再总结一下

当前端要访问数据的时候后端就提供相应接口,接口的编写是通过 Controller 层监听请求, 数据的处理交给 Service 层,而 Service 层再通过 Mapper 层操作数据库,操作完成后数据再一层层往上走,最后返回给前端。

6、最终项目结构

.├── avatorImages // 用户头像├── img│   ├── singerPic // 歌手图片│   ├── songListPic // 歌单图片│   └── songPic // 歌曲图片├── song // 存放歌曲├── src│   ├── main│   │   ├── java│   │   │   └── com.example.demo│   │   │   ├── config // 配置(跨域)│   │   │   ├── controller // 控制层,接收请求返回响应│   │   │   ├── dao // 数据操作层│   │   │   ├── domain // 实体类│   │   │   ├── service│   │   │   │ └── impl // Service 层的接口│   │   │   └── HwMusicApplicationTests.java // 项目入口│   │   └── resources│   │   ├── mapper // mapper.xml文件,操作数据库│   │   ├── static // 存放静态资源│   │   ├── templates│ │   ├── application.properties // 连接数据库│ │   └── generatorConfig.xml // MyBatis Generator 自动生成代码│   └── test│   └── java│   └── com.example.demo // 测试用的├── pom.xml // 添加相关依赖和插件└── target

四、客户端项目构建

1、创建项目

这里项目的创建比后端要简单的多,直接用官方提供的脚手架,运行如下命令先全局安装 vue,然后进行安装

npm install -g @vue/cli# 要创建项目的地方vue init webpack music-client

进入项目,执行如下命令安装项目依赖,

npm install

然后直接如下命令项目就跑起来了。

npm run dev

但是假如你是新手,不建议上来就用脚手架,先看一下 官网 了解一下组件、路由等等。

2、开发思路

创建一个vue项目后,在 views 文件夹中写一个页面的组件,因为代码都放在一起对后期维护和修改都不方便,所以把他们根据功能或者位置拆分开,放到 components 文件夹下面去实现,最后再整合到 views 文件夹下。加载到 App.vue 文件中,最后渲染到页面中。

最开始构建页面可以写死,当基本样子搭起来之后就可以去向后端去请求数据,请求数据用到的是axios插件,获取到数据后console一下,在控制台查看请求的数据,确保数据保存到正确的变量中去(这里如果遇到跨域的问题可以在后端用 CORS 解决)。

组件的问题解决了接下来就是访问的问题,我们如何通过点击的时候切换组件呢?我们在 router 文件夹中引入组件,给它们设定访问它们的路径。这里用到了vue-router插件。

随着组件的增多,组件之间的传值就是问题,不可能一些数据一直好几个组件里一直传,我们需要把它们单独拿出来放到 store 文件夹下面保存起来,当需要的时候在获取(这里通过 sessionStorage 解决vuex刷新数据丢失问题)。这里用到了vuex组件。

不同的组件有时候会用到相同的方法,当要修改方法时就要改好多地方,所以把它们单独拿出来放到mixins文件夹下面,当用到这些方法的时候在对应组件中引入即可。

vue支持很多的第三方组件,能给我们项目带来很好的交互和显示效果,具体在需要的时候npm或yarn就行了,当然了,一些样式和js语句也可以放到assets文件夹下。

3、最终项目结构

五、管理端项目构建

这里相比前台的开发要简单得多,因为基本使用 Element UI 快速搭建的,实现和前台一样。

最终项目结构

.├── build├── config├── node_modules├── index.html├── package.json├── src│   ├── App.vue│   ├── main.js│   ├── api│   ├── assets│   ├── mixins│   ├── components│   │   ├── Header.vue│   │   ├── Home.vue│   │   ├── Sidebar.vue│   │   └── SongAudio.vue│   ├── pages│   │   ├── CollectPage.vue│   │   ├── CommentPage.vue│   │   ├── ConsumerPage.vue│   │   ├── InfoPage.vue│   │   ├── ListSongPage.vue│   │   ├── Login.vue│   │   ├── SingerPage.vue│   │   ├── SongListPage.vue│   │   └── SongPage.vue│   ├── router│   └── store├── static└── test
一、前言 这里对音乐网站这个项目的开发流程做一下描述,我觉得了解了具体实现的来龙去脉,上手自己做就容易得多了,要知道数据是怎么从数据库一步步跑到前端页面的,当知道了整个的流程再去处理中间的细节,具体实现的细节等有时间了就补充,接下来我们就开始吧。 二、开发环境 操作系统:Mac JDK:jdk-8u141 mysql:mysql-5.7.21-1-macos10.13-x86_64 node:v12.4.0 IDE:IntelliJ IDEA 2018 三、后端项目构建 1、创建数据库及需要的表 2、创建项目 打开 idea,新建一个项目,在 new 一个新项目的时候,选择 Spring Initializr,在选择项目依赖的时候勾选 web下的 Spring Web Starter 和 SQL下的 MySQL Driver 和 MyBatis Framework ,然后一直继续后会得到如下结构(总体分三层)。 3、配置文件 1)application.properties 配置 application.properties 文件,用于连接数据库(代码见项目源码)。 2)generatorConfig.xml 利用MyBatis Generator 自动生成代码(实体类,Mapper接口和Mapper.xml文件),需要指定 mysql-connector-java ( src/main/resources 目录下)和生成文件的路径。在 src/main/resources 目录下创建 generatorConfig.xml 文件并配置(代码见项目源码)。 3)pom.xml pom.xml 文件负责配置项目相关的依赖和插件,包括上面的 MyBatis Generator(项目plugins 标签中注视掉的代码是对 Mybatis-generator 插件的配置),在创建项目时,idea 已经帮我们引入了一些依赖,下面我们需要在 dependencies 标签中引入项目需要的一些依赖,配置的代码可以直接看代码,这里就不往出写了,下面对主要依赖进行下描述: package 说明 mybatis-spring-boot-starter MyBatis核心for Spring Boot mysql-connector-java java与mysql连接的jar包驱动程序 在 plugins 标签中对 Mybatis-generator 进行配置,用于自动生成代码。 至此,项目的配置就弄完了,在命令行执行 ./mvnw mybatis-generator:generate 自动生成代码,得到的项目结构如下所示。此时会看到多生成了 dao、domain、mapper 目录及下面的文件。生成项目后,需要将上面 pom.xml 文件中 Mybatis-generator 插件的配置注视,因为这个文件就是初始时候自动生成代码用的,如果不注视每次运行都会再生成一次,即覆盖之前的代码。 4、测试(以新建一个用户为例) 创建好项目之后先测试一下,首先在 src/main/java/com/example/demo 目录下创建 service 包,service 包下创建 ConsumerService 接口和 impl包,impl包下创建 ConsumerServiceImpl 类,具体创建这个干嘛下面写接口时候再介绍。 (1)ConsumerService 接口的代码如下 ConsumerServiceImpl 类的代码如下 (2)在 src/main/java/com/example/demo 下的 ConsumerMapper 接口中添加如下代码。 在 src/main/resources/mapper 下的 ConsumerMapper.xml 文件中将 insertSelective 改成 addUser (3)打开 SpringBoot 的启动类,加上 @MapperScan 注解,指向 dao 层接口所在的包路径。@MapperScan(“com.example.demo.dao”) (4)然后在 src/test/java/com/example/demo 下的测试文件中写测试代码,如下,然后点如下所示运行,没有提示错误,且数据库中成功存入数据,说明项目构建成功,接下来就可以开始写接口了。 5、开发接口(以返回所有用户信息为例) 在写接口之前,先对项目层次做一下介绍。项目层次我将主要根据 domain、 DAO、Service、Controller 这几层主要实现的功能和它们之间的联系进行介绍。 1)实体类(domain 目录下) 定义数据库表所对应的实体类。 2)Mapper 层 / DAO 层(dao、mapper 目录下) 数据操作层:向数据库发送 SQL 语句,完成数据库操作。 分为 Mapper 接口 和 Mapper 接口映射文件。Mapper 接口在 dao 目录下,定义操作数据库的函数(函数不能直接去进行 CURD), Mapper 接口映射文件在 mapper 目录下,完成对数据库的访问。 3)Service 层(service 目录下) 服务层:完成业务逻辑处理。调用 Mapper 层操作数据库。 分为 Service 接口 + Service 实现,用面向接口的编程思想,方便后续功能的解耦及扩展。 4)Controller 层(controller 目录下) 控制层:对请求和响应进行控制,调用 Service 层进行业务逻辑处理,最后将处理好的数据返回给前端。 5)实战(写一个返回所有用户信息的接口) 假如前端访问 http://localhost:8888/allUser 就要拿到所有用户的信息,那么按照上面的层次我们可以这么写。 (1)访问的接口由 Controller 层来处理,所以这里这样定义,要返回所有用户信息,把它当一个命令,交给 Service 层去做。 (2)到了 Service 层,Service 层的 ConsumerService 接口中先定义下面方法 然后在 ConsumerServiceImpl 类中这样去实现它。 (3)Service 层会让 dao 层的 ConsumerMapper 接口调 allUser 方法去返回数据, 而 ConsumerMapper 接口操作数据库又要依赖 Mapper.xml 文件。 (4)这样,一个返回所有用户信息的接口就写完了,打开 Terminal 输入如下命令跑一下项目。如下所示 ./mvnw spring-boot:run 在浏览器中输入 http://localhost:8888/allUser 查看结果。 知道一个接口怎么写,其他接口也类似,需要注意的地方有两点,第一个是解决跨域问题(可以查看代码 config 文件夹下面设置),第二个问题是关于静态资源的处理(这个就是最开始跑这个项目时候修改图片、音乐路径做的事情)。 6)最后再总结一下 当前端要访问数据的时候后端就提供相应接口,接口的编写是通过 Controller 层监听请求, 数据的处理交给 Service 层,而 Service 层再通过 Mapper 层操作数据库,操作完成后数据再一层层往上走,最后返回给前端。 6、最终项目结构 .├── avatorImages // 用户头像├── img│ ├── singerPic // 歌手图片│ ├── songListPic // 歌单图片│ └── songPic // 歌曲图片├── song // 存放歌曲├── src│ ├── main│ │ ├── java│ │ │ └── com.example.demo│ │ │ ├── config // 配置(跨域)│ │ │ ├── controller // 控制层,接收请求返回响应│ │ │ ├── dao // 数据操作层│ │ │ ├── domain // 实体类│ │ │ ├── service│ │ │ │ └── impl // Service 层的接口│ │ │ └── HwMusicApplicationTests.java // 项目入口│ │ └── resources│ │ ├── mapper // mapper.xml文件,操作数据库│ │ ├── static // 存放静态资源│ │ ├── templates│ │ ├── application.properties // 连接数据库│ │ └── generatorConfig.xml // MyBatis Generator 自动生成代码│ └── test│ └── java│ └── com.example.demo // 测试用的├── pom.xml // 添加相关依赖和插件└── target 四、客户端项目构建 1、创建项目 这里项目的创建比后端要简单的多,直接用官方提供的脚手架,运行如下命令先全局安装 vue,然后进行安装 npm install -g @vue/cli# 要创建项目的地方vue init webpack music-client 进入项目,执行如下命令安装项目依赖, npm install 然后直接如下命令项目就跑起来了。 npm run dev 但是假如你是新手,不建议上来就用脚手架,先看一下 官网 了解一下组件、路由等等。 2、开发思路 创建一个vue项目后,在 views 文件夹中写一个页面的组件,因为代码都放在一起对后期维护和修改都不方便,所以把他们根据功能或者位置拆分开,放到 components 文件夹下面去实现,最后再整合到 views 文件夹下。加载到 App.vue 文件中,最后渲染到页面中。 最开始构建页面可以写死,当基本样子搭起来之后就可以去向后端去请求数据,请求数据用到的是axios插件,获取到数据后console一下,在控制台查看请求的数据,确保数据保存到正确的变量中去(这里如果遇到跨域的问题可以在后端用 CORS 解决)。 组件的问题解决了接下来就是访问的问题,我们如何通过点击的时候切换组件呢?我们在 router 文件夹中引入组件,给它们设定访问它们的路径。这里用到了vue-router插件。 随着组件的增多,组件之间的传值就是问题,不可能一些数据一直好几个组件里一直传,我们需要把它们单独拿出来放到 store 文件夹下面保存起来,当需要的时候在获取(这里通过 sessionStorage 解决vuex刷新数据丢失问题)。这里用到了vuex组件。 不同的组件有时候会用到相同的方法,当要修改方法时就要改好多地方,所以把它们单独拿出来放到mixins文件夹下面,当用到这些方法的时候在对应组件中引入即可。 vue支持很多的第三方组件,能给我们项目带来很好的交互和显示效果,具体在需要的时候npm或yarn就行了,当然了,一些样式和js语句也可以放到assets文件夹下。 3、最终项目结构 五、管理端项目构建 这里相比前台的开发要简单得多,因为基本使用 Element UI 快速搭建的,实现和前台一样。 最终项目结构 .├── build├── config├── node_modules├── index.html├── package.json├── src│ ├── App.vue│ ├── main.js│ ├── api│ ├── assets│ ├── mixins│ ├── components│ │ ├── Header.vue│ │ ├── Home.vue│ │ ├── Sidebar.vue│ │ └── SongAudio.vue│ ├── pages│ │ ├── CollectPage.vue│ │ ├── CommentPage.vue│ │ ├── ConsumerPage.vue│ │ ├── InfoPage.vue│ │ ├── ListSongPage.vue│ │ ├── Login.vue│ │ ├── SingerPage.vue│ │ ├── SongListPage.vue│ │ └── SongPage.vue│ ├── router│ └── store├── static└── test
一、前言 这里对音乐网站这个项目的开发流程做一下描述,我觉得了解了具体实现的来龙去脉,上手自己做就容易得多了,要知道数据是怎么从数据库一步步跑到前端页面的,当知道了整个的流程再去处理中间的细节,具体实现的细节等有时间了就补充,接下来我们就开始吧。 二、开发环境 操作系统:Mac JDK:jdk-8u141 mysql:mysql-5.7.21-1-macos10.13-x86_64 node:v12.4.0 IDE:IntelliJ IDEA 2018 三、后端项目构建 1、创建数据库及需要的表 2、创建项目 打开 idea,新建一个项目,在 new 一个新项目的时候,选择 Spring Initializr,在选择项目依赖的时候勾选 web下的 Spring Web Starter 和 SQL下的 MySQL Driver 和 MyBatis Framework ,然后一直继续后会得到如下结构(总体分三层)。 3、配置文件 1)application.properties 配置 application.properties 文件,用于连接数据库(代码见项目源码)。 2)generatorConfig.xml 利用MyBatis Generator 自动生成代码(实体类,Mapper接口和Mapper.xml文件),需要指定 mysql-connector-java ( src/main/resources 目录下)和生成文件的路径。在 src/main/resources 目录下创建 generatorConfig.xml 文件并配置(代码见项目源码)。 3)pom.xml pom.xml 文件负责配置项目相关的依赖和插件,包括上面的 MyBatis Generator(项目plugins 标签中注视掉的代码是对 Mybatis-generator 插件的配置),在创建项目时,idea 已经帮我们引入了一些依赖,下面我们需要在 dependencies 标签中引入项目需要的一些依赖,配置的代码可以直接看代码,这里就不往出写了,下面对主要依赖进行下描述: package 说明 mybatis-spring-boot-starter MyBatis核心for Spring Boot mysql-connector-java java与mysql连接的jar包驱动程序 在 plugins 标签中对 Mybatis-generator 进行配置,用于自动生成代码。 至此,项目的配置就弄完了,在命令行执行 ./mvnw mybatis-generator:generate 自动生成代码,得到的项目结构如下所示。此时会看到多生成了 dao、domain、mapper 目录及下面的文件。生成项目后,需要将上面 pom.xml 文件中 Mybatis-generator 插件的配置注视,因为这个文件就是初始时候自动生成代码用的,如果不注视每次运行都会再生成一次,即覆盖之前的代码。 4、测试(以新建一个用户为例) 创建好项目之后先测试一下,首先在 src/main/java/com/example/demo 目录下创建 service 包,service 包下创建 ConsumerService 接口和 impl包,impl包下创建 ConsumerServiceImpl 类,具体创建这个干嘛下面写接口时候再介绍。 (1)ConsumerService 接口的代码如下 ConsumerServiceImpl 类的代码如下 (2)在 src/main/java/com/example/demo 下的 ConsumerMapper 接口中添加如下代码。 在 src/main/resources/mapper 下的 ConsumerMapper.xml 文件中将 insertSelective 改成 addUser (3)打开 SpringBoot 的启动类,加上 @MapperScan 注解,指向 dao 层接口所在的包路径。@MapperScan(“com.example.demo.dao”) (4)然后在 src/test/java/com/example/demo 下的测试文件中写测试代码,如下,然后点如下所示运行,没有提示错误,且数据库中成功存入数据,说明项目构建成功,接下来就可以开始写接口了。 5、开发接口(以返回所有用户信息为例) 在写接口之前,先对项目层次做一下介绍。项目层次我将主要根据 domain、 DAO、Service、Controller 这几层主要实现的功能和它们之间的联系进行介绍。 1)实体类(domain 目录下) 定义数据库表所对应的实体类。 2)Mapper 层 / DAO 层(dao、mapper 目录下) 数据操作层:向数据库发送 SQL 语句,完成数据库操作。 分为 Mapper 接口 和 Mapper 接口映射文件。Mapper 接口在 dao 目录下,定义操作数据库的函数(函数不能直接去进行 CURD), Mapper 接口映射文件在 mapper 目录下,完成对数据库的访问。 3)Service 层(service 目录下) 服务层:完成业务逻辑处理。调用 Mapper 层操作数据库。 分为 Service 接口 + Service 实现,用面向接口的编程思想,方便后续功能的解耦及扩展。 4)Controller 层(controller 目录下) 控制层:对请求和响应进行控制,调用 Service 层进行业务逻辑处理,最后将处理好的数据返回给前端。 5)实战(写一个返回所有用户信息的接口) 假如前端访问 http://localhost:8888/allUser 就要拿到所有用户的信息,那么按照上面的层次我们可以这么写。 (1)访问的接口由 Controller 层来处理,所以这里这样定义,要返回所有用户信息,把它当一个命令,交给 Service 层去做。 (2)到了 Service 层,Service 层的 ConsumerService 接口中先定义下面方法 然后在 ConsumerServiceImpl 类中这样去实现它。 (3)Service 层会让 dao 层的 ConsumerMapper 接口调 allUser 方法去返回数据, 而 ConsumerMapper 接口操作数据库又要依赖 Mapper.xml 文件。 (4)这样,一个返回所有用户信息的接口就写完了,打开 Terminal 输入如下命令跑一下项目。如下所示 ./mvnw spring-boot:run 在浏览器中输入 http://localhost:8888/allUser 查看结果。 知道一个接口怎么写,其他接口也类似,需要注意的地方有两点,第一个是解决跨域问题(可以查看代码 config 文件夹下面设置),第二个问题是关于静态资源的处理(这个就是最开始跑这个项目时候修改图片、音乐路径做的事情)。 6)最后再总结一下 当前端要访问数据的时候后端就提供相应接口,接口的编写是通过 Controller 层监听请求, 数据的处理交给 Service 层,而 Service 层再通过 Mapper 层操作数据库,操作完成后数据再一层层往上走,最后返回给前端。 6、最终项目结构 .├── avatorImages // 用户头像├── img│ ├── singerPic // 歌手图片│ ├── songListPic // 歌单图片│ └── songPic // 歌曲图片├── song // 存放歌曲├── src│ ├── main│ │ ├── java│ │ │ └── com.example.demo│ │ │ ├── config // 配置(跨域)│ │ │ ├── controller // 控制层,接收请求返回响应│ │ │ ├── dao // 数据操作层│ │ │ ├── domain // 实体类│ │ │ ├── service│ │ │ │ └── impl // Service 层的接口│ │ │ └── HwMusicApplicationTests.java // 项目入口│ │ └── resources│ │ ├── mapper // mapper.xml文件,操作数据库│ │ ├── static // 存放静态资源│ │ ├── templates│ │ ├── application.properties // 连接数据库│ │ └── generatorConfig.xml // MyBatis Generator 自动生成代码│ └── test│ └── java│ └── com.example.demo // 测试用的├── pom.xml // 添加相关依赖和插件└── target 四、客户端项目构建 1、创建项目 这里项目的创建比后端要简单的多,直接用官方提供的脚手架,运行如下命令先全局安装 vue,然后进行安装 npm install -g @vue/cli# 要创建项目的地方vue init webpack music-client 进入项目,执行如下命令安装项目依赖, npm install 然后直接如下命令项目就跑起来了。 npm run dev 但是假如你是新手,不建议上来就用脚手架,先看一下 官网 了解一下组件、路由等等。 2、开发思路 创建一个vue项目后,在 views 文件夹中写一个页面的组件,因为代码都放在一起对后期维护和修改都不方便,所以把他们根据功能或者位置拆分开,放到 components 文件夹下面去实现,最后再整合到 views 文件夹下。加载到 App.vue 文件中,最后渲染到页面中。 最开始构建页面可以写死,当基本样子搭起来之后就可以去向后端去请求数据,请求数据用到的是axios插件,获取到数据后console一下,在控制台查看请求的数据,确保数据保存到正确的变量中去(这里如果遇到跨域的问题可以在后端用 CORS 解决)。 组件的问题解决了接下来就是访问的问题,我们如何通过点击的时候切换组件呢?我们在 router 文件夹中引入组件,给它们设定访问它们的路径。这里用到了vue-router插件。 随着组件的增多,组件之间的传值就是问题,不可能一些数据一直好几个组件里一直传,我们需要把它们单独拿出来放到 store 文件夹下面保存起来,当需要的时候在获取(这里通过 sessionStorage 解决vuex刷新数据丢失问题)。这里用到了vuex组件。 不同的组件有时候会用到相同的方法,当要修改方法时就要改好多地方,所以把它们单独拿出来放到mixins文件夹下面,当用到这些方法的时候在对应组件中引入即可。 vue支持很多的第三方组件,能给我们项目带来很好的交互和显示效果,具体在需要的时候npm或yarn就行了,当然了,一些样式和js语句也可以放到assets文件夹下。 3、最终项目结构 五、管理端项目构建 这里相比前台的开发要简单得多,因为基本使用 Element UI 快速搭建的,实现和前台一样。 最终项目结构 .├── build├── config├── node_modules├── index.html├── package.json├── src│ ├── App.vue│ ├── main.js│ ├── api│ ├── assets│ ├── mixins│ ├── components│ │ ├── Header.vue│ │ ├── Home.vue│ │ ├── Sidebar.vue│ │ └── SongAudio.vue│ ├── pages│ │ ├── CollectPage.vue│ │ ├── CommentPage.vue│ │ ├── ConsumerPage.vue│ │ ├── InfoPage.vue│ │ ├── ListSongPage.vue│ │ ├── Login.vue│ │ ├── SingerPage.vue│ │ ├── SongListPage.vue│ │ └── SongPage.vue│ ├── router│ └── store├── static└── test
经验分享 程序员 微信小程序 职场和发展