一、需求文檔（登陸注冊）

1、用戶名登錄 （數據庫+egg）
用戶采用用戶名登錄
2、注冊（數據庫+egg）
用戶進行注冊，對賬戶的密碼進行二次確認，對手機號進行校驗，對兩次密碼進行校驗
3、二維碼登錄 （網易云API）
采用網易云的接口文檔，用戶使用手機app進行二維碼掃碼登錄
4、短信登錄 （網易云API）
采用網易云的接口文檔，用戶采用手機發送短信進行，采用驗證碼登錄
5、用戶個人信息頁 （網易云API）
登錄之后獲取到用戶的昵稱，頭像，性別，個性簽名，生日，地址
6、修改用戶個人信息（網易云API）
修改昵稱，頭像，性別，個性簽名，生日，地址，

二、開發文檔

三、接口文檔 數據庫設計

網易云的API文檔
https://neteasecloudmusicapi.vercel.app/#/?id=neteasecloudmusicapi

user

user_iduser_namepasswordphoneuser_imggender

四、進度安排

day1

1、路由注冊100%
2、登錄總頁面100%
3、賬號登錄頁面100%（egg后端+數據庫+前端）
4、用戶注冊頁面實現（egg后端+數據庫+前端）100%

day2

1、實現二維碼登錄（網易云API）100%
2、實現短信登錄（網易云API）100%

day3

1、路由守衛攔截
2、登錄成功后返回狀態和信息
3、登錄退出

day4

1、個人信息頁面100%
2、個人信息頁面修改昵稱，修改頭像，性別，生日，地址

day5

bug修護以及優化

六、項目錄頻

五、遇到的問題

1、路由接口的配置

2、跨域處理

前端： vue.config.js

前端： vue.config.js

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({transpileDependencies: true,devServer: {port: 8080,host: 'localhost',// 可設置多個代理proxy: { //目的是解決跨域，若測試環境不需要跨域，則不需要進行該配置'/api': {target: 'http://127.0.0.1:7001/', // 目標 API 地址changeOrigin: true, //開啟跨域pathRewrite: {'^/api': ''}}}},lintOnSave: true})

main.js

const http = axios.create({timeout: 1000 * 1000000,withCredentials: true,BASE_URL: '/api',headers: {'Content-Type': 'application/json; charset=utf-8'} })

后端：cconfig.default.js

//配置允許post請求config.security = {csrf: {enable: false,ignoreJSON: true,}}//配置跨域config.cors = {// origin: '*',origin:'http://localhost:8080',//cookie自帶允許跨域allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',credentials: true};

3、路由攔截

4、二維碼傳值的時候，key值傳遞過來后，能打印出來，但是就是用不了，用的時候就是undefined

因為我在寫axios.get方法時，沒寫params，導致這個問題，采用打印語句，一步一步找到答案

5 通過短信發送驗證碼的時候，最好采用form表單，便于后面檢驗驗證碼的狀態，就是需要檢驗按鈕的狀態，按鈕能否被選擇，還有就是要做防抖和節流

6 今天上午網易云的api突然訪問不了，不知道是什么原因，后期在解決

7 采用短信登錄的時候，應該是驗證碼輸入之后，點擊登錄才跳轉，而不是驗證碼一輸入成功就登錄成功。

8 用axios的時候最好是res返回值寫在.then里面，這樣更好拿后端的值

9 封裝axios最好是封裝起來再用

10 組長更換了服務器，采用部署的服務器，啟動項目的時候，先將vue.config.js里面的devserver注釋，啟動之后在注釋回來

11 template中有兩個及以上的跟標簽就會導致編譯不通過卡死

12 background-image的用法

13 測試號

之后的開發中若需要測試，一定要用測試賬號進行測試，今天干掉了兩個網易云賬號，不過也發現了官網網易云的小bug

14 session用法

15 獲取用戶id

16 組件之間session傳值

17 router的跳轉

18 接口有風控，注意接口調用次數

19 npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock

npm版本需要升級

解決：

npm install -g npm

之后查看npm版本 重新npm i
在運行

總結

以上是生活随笔為你收集整理的基于网易云API的音乐网站的登录注册（持续更新）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。