ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

音乐项目-环境搭建

2022-06-04 15:34:02  阅读:146  来源: 互联网

标签:npm vue cli 环境 音乐 boot 组件 org 搭建


1.后端环境搭建

1.新建工程

2.依赖导入

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.xuge</groupId>
    <artifactId>music</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>music</name>
    <description>音乐网站</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
<!--            <exclusions>-->
<!--                <exclusion>-->
<!--                    <groupId>org.springframework.boot</groupId>-->
<!--                    <artifactId>spring-boot-starter-logging</artifactId>-->
<!--                </exclusion>-->
<!--            </exclusions>-->
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.16</version>
            <scope>runtime</scope>
        </dependency>
       <dependency>
           <groupId>com.alibaba</groupId>
           <artifactId>druid</artifactId>
           <version>1.1.8</version>
       </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <executable>true</executable>
                    <fork>true</fork>
                </configuration>
            </plugin>

        </plugins>
    </build>

</project>

3.数据库创建

2.前端环境搭建

1.在windows搭建vue开发环境

1.安装node.js
2.设置node的全局和缓存路径
npm config set prefix"D:\ProgramFiles(x86)\Node\node_global"

npm config set cache "D:\Program Files (x86)\Node\node_cache"

3.安装淘宝镜像
npm install -g cnpm - -registry=https://registry.npm.taobao.org
4.设置环境变量

5.安装Vue
cnpm install vue -g
6.安装Vue-cli脚手架
cnpm install - g vue@cli
cnpm install -g @vue/cli 
出错后:
npm i npm -g
npm i @vue/cli -g
cnpm i @vue/cli -g
7.创建一个Vue项目
vue create first
cd first
npm run serve
npm uninstall -g @vue/cli
npm install - g vue-cli
npm i npm  -g
npm i vue-cli -g
cnpm i vue-cli -g

2.客户端项目构建

1、创建项目

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

vue init webpack music-manage

vue 在帮我们创建项目的时候依赖包也会装好,装好后进入项目,执行如下命令项目就跑起来了。

npm run serve

img

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

2、开发思路

因为代码都放在一起对后期维护和修改都不方便,所以要根据功能把他们拆分到不同目录。

在 pages 目录下放一些视图,里面的每一个组件主要是对整个试图的控制,具体里面的实现可以根据具体情况自己封装组件,或者直接使用第三方组件,components 目录下放置我们封装好的组件,利用 vue-router 把试图都组织起来,加载到 App.vue 文件中,最后渲染到页面中。

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

随着组件的增多,组件之间的传值就是问题,不可能一些数据一直好几个组件里一直传,我们需要 vuex 插件来对数据进行管理(这里通过 sessionStorage 解决 vuex 刷新数据丢失问题)。

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

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

这个项目的话组件基本是自己实现的,第三方用的少,对练习组件的封装还是很有帮助的。

3、最终项目结构

.
├── build // webpack相关配置文件
├── config // vue基本配置文件
├── node_modules // 包
├── index.html // 入口页面
├── package.json // 管理包的依赖
├── src // 项目源码目录
│   ├── assets  // icon,图片、css 等
│   ├── api  // 封装请求的 api
│   ├── mixins // 公共方法
│   ├── enums // 枚举
│   ├── utils // 工具方法
│   ├── router // 路由
│   ├── store // 管理数据
│   ├── components
│   │   ├── Comment.vue // 评论
│   │   ├── PlayList.vue // 展示歌单歌手区
│   │   ├── SongList.vue // 展示歌单歌手包含的歌曲
│   │   └── layouts
│   │       ├── YinAudio.vue // 接收音乐并播放的位置
│   │       ├── YinCurrentPlay.vue // 播放列表
│   │       ├── YinFooter.vue // 页脚
│   │       ├── YinHeader.vue // 页头
│   │       ├── YinLoginLogo.vue // 登录界面的logo
│   │       ├── YinPlayBar.vue // 页面底部的播放控制区
│   │       └── YinScrollTop.vue // 回到顶部
│   ├── views // 组件
│   │   ├── error
│   │   │   └── 404.vue // 404
│   │   ├── Home.vue // 首页
│   │   ├── YinContainer.vue
│   │   ├── personal
│   │   │   ├── Personal.vue // 个人中心
│   │   │   ├── PersonalData.vue // 修改信息
│   │   │   └── Upload.vue // 修改头像
│   │   ├── setting
│   │   │   └── Setting.vue // 设置
│   │   ├── SignIn.vue // 登录区
│   │   ├── SignUp.vue // 注册区
│   │   ├── Lyric.vue // 歌词显示区
│   │   ├── search
│   │   │   ├── Search.vue // 搜索区
│   │   │   ├── SearchSong.vue // 按歌手搜索
│   │   │   └── SearchSongList.vue // 按歌单搜索
│   │   ├── singer
│   │   │   ├── Singer.vue // 歌手区
│   │   │   └── SingerDetail.vue // 歌手详情
│   │   └── song-sheet
│   │       ├── SongSheet.vue // 歌单区
│   │       └── SongSheetDetail.vue // 歌单详情
│   ├── main.js // 入口js文件
│   └── App.vue // 根组件
├── static // 存放静态资源 
├── test // 测试文件目录
├── .babelrc // bable 编译配置
└── .gitignore // 提交忽略的文件配置

3.管理端项目构建

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

1、最终项目结构

.
├── build
├── config
├── node_modules
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── main.js
│   ├── api
│   ├── assets
│   ├── mixins
│   ├── enums
│   ├── components
│   │   ├── dialog
│   │   │   └── YinDelDialog.vue
│   │   └── layouts
│   │       ├── YinAside.vue
│   │       ├── YinAudio.vue
│   │       └── YinHeader.vue
│   ├── views
│   │   ├── CollectPage.vue
│   │   ├── CommentPage.vue
│   │   ├── ConsumerPage.vue
│   │   ├── Home.vue
│   │   ├── InfoPage.vue
│   │   ├── ListSongPage.vue
│   │   ├── Login.vue
│   │   ├── SingerPage.vue
│   │   ├── SongListPage.vue
│   │   └── SongPage.vue
│   ├── router
│   ├── store
│   └── utils
├── static
└── test

标签:npm,vue,cli,环境,音乐,boot,组件,org,搭建
来源: https://www.cnblogs.com/XugeA/p/16341936.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有