基于网易云API的音乐网站的登录注册（持续更新）

roooxy

已于 2022-06-14 20:00:28 修改

阅读量5k

点赞数 3

分类专栏：项目文章标签：前端 vue.js javascript

于 2022-06-09 19:15:23 首次发布

本文链接：https://blog.csdn.net/weixin_44611785/article/details/125208969

版权

项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、需求文档（登陆注册）

1、用户名登录（数据库+egg）
用户采用用户名登录
2、注册（数据库+egg）
用户进行注册，对账户的密码进行二次确认，对手机号进行校验，对两次密码进行校验
3、二维码登录（网易云API）
采用网易云的接口文档，用户使用手机app进行二维码扫码登录
4、短信登录（网易云API）
采用网易云的接口文档，用户采用手机发送短信进行，采用验证码登录
5、用户个人信息页（网易云API）
登录之后获取到用户的昵称，头像，性别，个性签名，生日，地址
6、修改用户个人信息（网易云API）
修改昵称，头像，性别，个性签名，生日，地址，

二、开发文档

三、接口文档数据库设计

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

user

user_id	user_name	password	phone	user_img	gender

四、进度安排

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、路由接口的配置

alt

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
        };