# lune-web

**Repository Path**: yanjizhw/lune-web

## Basic Information

- **Project Name**: lune-web
- **Description**: 使用vuetify组件库开发的Material 样式博客
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-09-16
- **Last Updated**: 2024-11-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vuetify, Vue, blog

## README

# lune-web

### 项目介绍

使用vuetify组件库开发的 Material 风格博客

### 使用技术

| 技术                | 说明                          | 官网                                                         |
| ------------------- | ----------------------------- | ------------------------------------------------------------ |
| Vue                 | 前端框架                      |                                                              |
| Vuetify             | Material 样式的 Vue UI 组件库 | https://vuetifyjs.com/zh-Hans/                               |
| Vuex                | 全局状态管理框架              | https://vuex.vuejs.org/                                      |
| Axios               | 前端Http框架                  | http://www.axios-js.com/                                     |
| Vue-router          | 路由框架                      | https://router.vuejs.org/                                    |
| Echarts             | 图标组件库                    | https://echarts.apache.org/zh/index.html                     |
| mavon-editor        | markdown 文本编辑器           | https://www.npmjs.com/package/mavon-editor                   |
| github-markdown-css | markdown 样式                 | https://github.com/sindresorhus/generate-github-markdown-css |
| marked              | markdown 转 html插件          | https://www.npmjs.com/package/marked                         |
| hbl-comment         | 含表情的评论插件              | https://github.com/wanglinyong/hbl-comment                   |
| tag-cloud           | 云标签插件                    | https://gitee.com/homeleaf/tagCloud                          |
| zw-player           | 音频播放插件                  | https://www.npmjs.com/package/zw-player                      |

### 使用

基于 `node` 确保安装 `node`

`clone` 到本地

```bash
npm install
```

启动

```bash
npm run dev
```



`zw-player` 使用

依赖

[NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)

请先自行下载安装启动

一、在`node_modules`中找到`zw-palyer`项目打开`api/music.js`

添加登录`api`

```js
// 登录 phone：注册网易音乐手机号，password：注册网易音乐密码
export const login=(phone, password)=>{
    return axios.get(`http://localhost:3000/login/cellphone?phone=${phone}&md5_password=${password}`);
}
```

二、修改地址

`把所有 https://blogme.top:3000 改成 http://localhost:3000`

三、修改获取热门歌曲API

```js
//获取热门歌曲
export const getHotMusic=(id)=>{
    return axios.get(`http://localhost:3000/playlist/detail?id=${id}`);
}
```

四、修改`player.vue`

```vue
<script>
// 1、添加 login 方法
import { login,getWords,getMusicInfo,getMusicUrl,getHotMusic,getSearchSuggest,getHotTalk } from './api/music'
export default {
    data () {
        return {
            // 2、修改 musicTypeList id 的值
            musicTypeList: [
                {name:'热歌榜',id:3778678},
                {name:'新歌榜',id:3779629},
                {name:'飙升榜',id:19723756},
                {name:'嘻哈榜',id:991319590},
                {name:'My Songs',id:-1}
            ],
            // 3、填写自己网易音乐用户名和密码，如果是用的MD5加密API，请填写MD5加密后的密码
            username: 'xx',
            password: 'xx'
        }
    },
    created () {
        // 4、调用登录方法
        this.loginHandle()
    },
    methods: {
        // 5、添加登录方法
        loginHandle () {
            login(this.username, this.password).then(res => {
                // 6、从created钩子函数中复制到这，登录成功后调用，并且参数改为 3778678
                this._getMusicType(3778678)
            })
        }
    }
}
</script>
```

至此音乐播放器就可以播放，如果不能播放请重启[NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)

歌曲列表可能会出现盒子偏左挡住`热歌榜`、`新歌榜`、`飙升榜`、`嘻哈榜`按钮，请自行修改`player.css`

```css
/* 请自行修改定位的左或右的值 */
.music_list{
    width: 1320px;
    height: 840px;
    position: absolute;
    left: 500px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    margin: 0 auto;
    border-radius: 5px;
}
```



### 致谢

感谢[vuetify](https://vuetifyjs.com)提供的主题

感谢[闪烁之狐](https://blinkfox.github.io)博客模板

感谢[NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)提供的网易音乐API

感谢[蘑菇博客](https://gitee.com/moxi159753/mogu_blog_v2)提供的帮助

### 开源协议

[Apache License 2.0](http://www.apache.org/licenses/LICENSE-2.0.html)

### 博客截图

![](https://gitee.com/yanjizhw/img/raw/master/lune-web/202109171019759.png)

![](https://gitee.com/yanjizhw/img/raw/master/lune-web/202109171022718.png)

![](https://gitee.com/yanjizhw/img/raw/master/lune-web/202109171023021.png)

![](https://gitee.com/yanjizhw/img/raw/master/lune-web/202109171023220.png)

![](https://gitee.com/yanjizhw/img/raw/master/lune-web/202109171023957.png)

![](https://gitee.com/yanjizhw/img/raw/master/lune-web/202109171023284.png)

![](https://gitee.com/yanjizhw/img/raw/master/lune-web/202109171023527.png)

![](https://gitee.com/yanjizhw/img/raw/master/lune-web/202109171023825.png)

![](https://gitee.com/yanjizhw/img/raw/master/lune-web/202109171023855.png)

![](https://gitee.com/yanjizhw/img/raw/master/lune-web/202109171023988.png)