1.使用虚拟环境Virtualenv来创建项目

 2. Flask框架介绍

Flask框架是一个用Python编写的轻量级Web应用程序框架，依赖于Werkzeug和Jinja2两个外部库。Werkzeug是一个WSGI工具包，用于接收和处理HTTP请求，匹配视图函数，支持Cookie和会话管理，交互式调试等功能。Jinja2是一个模板引擎，用于将响应结果渲染到模板文件，支持动态网页的呈现。Flask框架的核心构成简单，但具有很强的扩展性和兼容性，可以根据需要选择不同的数据库和其他功能扩展。Flask框架主要用于开发Web应用程序，例如网站或Web服务。

安装flask框架,使用以下代码,或者直接在pycharm设置的++下安装

pip install flask

 3.创建Flask项目

在终端中进入要创建项目的目录，输入以下命令创建Flask项目：

mkdir Online-Music-main
cd Online-Music-main

4. 创建Flask app  

在Online-Music-main目录下创建一个Python文件，命名为app.py

# _*_ codding:utf-8 _*_
from app import create_app, db
from app.models import *
from flask_script import Manager, Shell
from flask_migrate import Migrate, MigrateCommand
from flask import render_template

app = create_app('default')
manager = Manager(app)
migrate = Migrate(app, db)

def make_shell_context():
    return dict(app=app, db=db)

manager.add_command("shell", Shell(make_context=make_shell_context))
manager.add_command('db', MigrateCommand)

@app.errorhandler(404)
def page_not_found(error):
    """
    404
    """
    return render_template("home/404.html"), 404

if __name__ == '__main__':
    manager.run()

5.配置config.py文件,连接数据库 

# -*- coding=utf-8 -*-
import os
class Config:
    SECRET_KEY = 'mrsoft'
    SQLALCHEMY_TRACK_MODIFICATIONS = True

    @staticmethod
    def init_app(app):
        '''初始化配置文件'''
        pass

# the config for development
class DevelopmentConfig(Config):
    SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:123456@127.0.0.1:3306/music'
    DEBUG = True

# define the config
config = {
    'default': DevelopmentConfig
}

 6在添加models模型,

from . import db

# 用户表
class User(db.Model):
    __tablename__ = "user"
    id = db.Column(db.Integer, primary_key=True)             # 编号
    username = db.Column(db.String(100))                     # 用户名
    pwd = db.Column(db.String(100))                          # 密码
    flag = db.Column(db.Boolean,default=0)                   # 用户标识，0：普通用户 1：管理员

    def __repr__(self):
        return '<User %r>' % self.name

    def check_pwd(self, pwd):
        """
        检测密码是否正确
        :param pwd: 密码
        :return: 返回布尔值
        """
        return self.pwd == pwd


# 歌手表
class Artist(db.Model):
    __tablename__ =  'artist'
    id = db.Column(db.Integer, primary_key=True)             # 编号
    artistName = db.Column(db.String(100))                    # 歌手名
    style = db.Column(db.Integer)                             # 歌手类型
    imgURL = db.Column(db.String(100))                        # 头像
    isHot = db.Column(db.Boolean,default=0)                   # 是否热门

# 歌曲表
class Song(db.Model):
    __tablename__ = 'song'
    id = db.Column(db.Integer, primary_key=True)              # 编号
    songName = db.Column(db.String(100))                      # 歌曲名称
    singer = db.Column(db.String(100))                        # 歌手名称
    fileURL = db.Column(db.String(100))                       # 歌曲图片
    hits = db.Column(db.Integer,default=0)                    # 点击量
    style = db.Column(db.Integer)                             # 歌曲类型 0：全部 1:华语 2：欧美 3：日语 4：韩语 5 其他
    collect = db.relationship('Collect', backref='song')      # 收藏外键关系关联

# 歌曲收藏
class Collect(db.Model):
    __tablename__ = "collect"
    id = db.Column(db.Integer, primary_key=True)              # 编号
    song_id = db.Column(db.Integer, db.ForeignKey('song.id')) # 所属歌曲
    user_id = db.Column(db.Integer)                           # 所属用户

7.写视图views.py,最后渲染前端网页实现界面

# _*_ coding: utf-8 _*_
from . import home
from app import db
from app.home.forms import LoginForm,RegisterForm,SuggetionForm
from app.models import User ,Artist,Song,Collect
from flask import render_template, url_for, redirect, flash, session, request,jsonify
from werkzeug.security import generate_password_hash
from functools import wraps

def admin_login(f):
    @wraps(f)
    def decorated_function(*args, **kwargs):
        if session['username'] != 'mr' :
            return redirect(url_for("home.index"))
        return f(*args, **kwargs)
    return decorated_function

def user_login(f):
    """
    登录装饰器
    """
    @wraps(f)
    def decorated_function(*args, **kwargs):
        if "user_id" not in session:
            return "<script>alert('请先登录');history.go(-1)</script>"
        return f(*args, **kwargs)

    return decorated_function


@home.route("/contentFrame")
def contentFrame():
    """
    主页面
    """
    hot_artist = Artist.query.filter_by(isHot=1).limit(12).all()                              # 获取歌手数据
    hot_song = Song.query.order_by(Song.hits.desc()).limit(10).all()                          # 获取歌曲数据
    return render_template('home/contentFrame.html',hot_artist=hot_artist,hot_song=hot_song) # 渲染模板

@home.route("/")
def index():
    """
    首页
    """
    return render_template('home/index.html') # 渲染模板

@home.route("/login/", methods=["GET", "POST"])
def login():
    """
    登录
    """
    if request.method == 'POST':
        username = request.form.get("username")
        pwd =  request.form.get("pwd")
        user = User.query.filter_by(username=username).first()    # 获取用户信息
        res = {}
        # 检测用户名
        if not user :
            res['status'] = -1
            res['message'] = '用户名不存在'
            return jsonify(res)
        # 检测密码
        if not user.check_pwd(pwd):     # 调用check_pwd()方法，检测用户名密码是否匹配
            res['status'] = -2
            res['message'] = '用户名和密码不匹配'
            return jsonify(res)
        # 用户名和密码正确，写入session
        session["user_id"] = user.id  # 将user_id写入session, 后面用户判断用户是否登录
        session["username"] = user.username  # 将user_id写入session, 后面用户判断用户是否登录
        res['status'] = 1
        res['message'] = '登录成功'
        return jsonify(res)
    return render_template("home/login.html")

@home.route("/register/", methods=["GET","POST"])
def register():
    """
    注册功能
    """
    if request.method == "POST":   # 提交注册表单
        username = request.form.get("username")
        pwd =  request.form.get("pwd")
        # 判断用户名是否存在
        user = User.query.filter_by(username=username).first()  # 获取用户信息
        if user:
            res = {}
            res['status'] = -2
            res['message'] = '该用户已存在'
            return jsonify(res)
        # 写入到user表
        try:
            # 为User类属性赋值
            user = User(
                username = username,  # 用户名
                pwd = generate_password_hash(pwd),# 对密码加密
            )
            db.session.add(user) # 添加数据
            db.session.commit()  # 提交数据
            res = {}
            res['status'] = 1
            res['message'] = '注册成功'
        except:
            res = {}
            res['status'] = -1
            res['message'] = '注册失败'
        return jsonify(res)
    return render_template("home/register.html")

@home.route("/logout/")
def logout():
    """
    退出登录
    """
    # 重定向到home模块下的登录。
    session.pop("user_id", None)
    session.pop("username", None)
    return redirect(url_for('home.index'))


@home.route("/artist/<int:id>")
def artist(id=None):
    """
    歌手页
    """
    song = Song.query.join(Artist,Song.singer==Artist.artistName).filter(Artist.id==id).all()
    hot_artist = Artist.query.limit(6).all()
    return render_template('home/artist.html',song=song,hot_artist=hot_artist) # 渲染模板

@home.route("/toplist")
def toplist():
    top_song = Song.query.order_by(Song.hits.desc()).limit(30).all()
    hot_artist = Artist.query.limit(6).all()
    return render_template('home/toplist.html', top_song=top_song, hot_artist=hot_artist)  # 渲染模板

@home.route('/style_list')
def styleList():
    """
    曲风
    """
    type = request.args.get('type',0,type=int)
    page = request.args.get('page',type=int)  # 获取page参数值
    if type:
        page_data = Song.query.filter_by(style=type).order_by(Song.hits.desc()).paginate(page=page, per_page=10)
    else:
        page_data = Song.query.order_by(Song.hits.desc()).paginate(page=page, per_page=10)
    return render_template('home/styleList.html', page_data=page_data,type=type)  # 渲染模板

@home.route('/artist_list')
def artistList():
    '''
    歌手列表
    '''
    type = request.args.get('type',0,type=int)
    page = request.args.get('page',type=int)  # 获取page参数值
    if type:
        page_data = Artist.query.filter_by(style=type).paginate(page=page, per_page=10)
    else:
        page_data = Artist.query.paginate(page=page, per_page=10)
    return render_template('home/artistList.html', page_data=page_data,type=type)  # 渲染模板

# 发现音乐
@home.route('/search')
def search():
    keyword = request.args.get('keyword')  # 获取关键字
    page = request.args.get('page', type=int)  # 获取page参数值
    if keyword:
        keyword = keyword.strip()
        page_data = Song.query.filter(Song.songName.like('%'+keyword+'%')).order_by(Song.hits.desc()).paginate(page=page, per_page=10)
    else:
        page_data = Song.query.order_by(Song.hits.desc()).paginate(page=page, per_page=10)
    return render_template('home/search.html',keyword=keyword,page_data=page_data)


@home.route('/modify_password',methods=['GET','POST'])
def modifyPassword():
    if request.method == 'POST':
        old_pwd =  request.form.get("old_pwd")
        new_pwd =  request.form.get("new_pwd")
        # 检查原始密码是否正确
        user = User.query.filter_by(id=session['user_id']).first()  # 获取用户信息
        res = {}
        if not user.check_pwd(old_pwd):
            res['status'] = -1
            res['message'] = '原始密码错误'
            return jsonify(res)
        # 更改密码
        try:
            user.pwd = generate_password_hash(new_pwd) # 对新密码加密
            db.session.add(user)
            db.session.commit()
            res['status'] = 1
            res['message'] = '密码修改成功'
            return jsonify(res)
        except:
            res['status'] = -2
            res['message'] = '密码修改错误'
            return jsonify(res)
    return render_template("home/modifyPassword.html")


@home.route("/collect")
@user_login
def collect():
    """
    收藏歌曲
    """
    song_id = request.args.get("id", "")            # 接收传递的参数歌曲ID
    user_id   = session['user_id']                  # 获取当前用户的ID
    collect = Collect.query.filter_by(              # 根据用户ID和景区ID判断是否该收藏
        user_id =int(user_id),
        song_id=int(song_id)
    ).count()
    res = {}
    # 已收藏
    if collect == 1:
        res['status'] = 0
        res['message'] = '已经收藏'
    # 未收藏进行收藏
    if collect == 0:
        collect = Collect(
            user_id =int(user_id),
            song_id=int(song_id)
        )
        db.session.add(collect)  # 添加数据
        db.session.commit()      # 提交数据
        res['status'] = 1
        res['message'] = '收藏成功'
    return jsonify(res)     # 返回json数据

@home.route("/collect_list")
@user_login
def collectList():
    page = request.args.get('page',type=int)  # 获取page参数值
    page_data = Collect.query.paginate(page=page, per_page=10)
    return render_template('home/collectList.html',page_data=page_data)


@home.route("/manage_artist_list")
@admin_login
def manageArtist():
    '''
    后台管理
    '''
    page = request.args.get('page',type=int)  # 获取page参数值
    page_data = Artist.query.paginate(page=page, per_page=10)
    return render_template('home/manageArtist.html', page_data=page_data)


@home.route("/manage_artist_add", methods=["GET","POST"])
@admin_login
def manageArtistAdd():
    '''
    新增歌手
    '''
    if request.method == "POST":   # 提交注册表单
        artistName = request.form.get("artistName")
        style =  request.form.get("style")
        imgURL =  request.form.get("imgURL")
        isHot =  request.form.get("isHot")
        # 判断歌手是否存在
        artist = Artist.query.filter_by(artistName=artistName).first()  # 获取用户信息
        if artist:
            res = {}
            res['status'] = -2
            res['message'] = '该歌手已存在'
            return jsonify(res)
        # 写入到Artist表
        try:
            # 为Artist类属性赋值
            artist = Artist(
                artistName = artistName,
                style  = int(style),
                imgURL = imgURL,
                isHot  = int(isHot)
            )
            db.session.add(artist) # 添加数据
            db.session.commit()    # 提交数据
            res = {}
            res['status'] = 1
            res['message'] = '添加成功'
        except:
            res = {}
            res['status'] = -1
            res['message'] = '添加失败'
        return jsonify(res)
    return render_template('home/manageArtistAdd.html')

@home.route("/manage_artist_edit", methods=["GET","POST"])
@admin_login
def manageArtistEdit():
    '''
    编辑歌手
    '''
    id = request.values['id']      # POST和GET提交都可以获取ID
    artist = Artist.query.filter_by(id=id).first()  # 获取用户信息
    if request.method == "POST":   # 提交注册表单
        # 更改Artist表
        artistName = request.form.get("artistName")
        style = request.form.get("style")
        imgURL = request.form.get("imgURL")
        isHot = request.form.get("isHot")
        try:
            artist.artistName = artistName
            artist.style = int(style)
            artist.imgURL = imgURL
            artist.isHot = int(isHot)
            db.session.add(artist) # 添加数据
            db.session.commit()    # 提交数据
            res = {}
            res['status'] = 1
            res['message'] = '保存成功'
        except :
            res = {}
            res['status'] = -1
            res['message'] = '保存失败'
        return jsonify(res)
    return render_template('home/manageArtistEdit.html',artist=artist)

@home.route("/manage_artist_del")
@admin_login
def manageArtistDel():
    '''

    删除歌手

    '''

    id = request.args.get('id')      # 获取ID
    try:
        artist = Artist.query.get_or_404(int(id))
        db.session.delete(artist)
        db.session.commit()
        res = {}
        res['status'] = 1
        res['message'] = '删除成功'
    except:
        res = {}
        res['status'] = -1
        res['message'] = '删除失败'
    return jsonify(res)

@home.route("/manage_song_list")
@admin_login
def manageSong():
    '''
    歌曲管理
    '''
    page = request.args.get('page',type=int)  # 获取page参数值
    page_data = Song.query.paginate(page=page, per_page=10)
    return render_template('home/manageSong.html', page_data=page_data)

@home.route("/manage_song_add", methods=["GET","POST"])
@admin_login
def manageSongAdd():
    '''
    新增歌曲
    '''
    if request.method == "POST":   # 提交注册表单
        songName = request.form.get("songName")
        singer = request.form.get("singer")
        style =  request.form.get("style")
        fileURL =  request.form.get("fileURL")
        # 判断歌手是否存在
        song = Song.query.filter_by(songName=songName).first()  # 获取歌曲信息
        if song:
            res = {}
            res['status'] = -2
            res['message'] = '该歌曲已存在'
            return jsonify(res)
        # 写入到Song表
        # 为Song类属性赋值
        try:
            # 为Song类属性赋值
            song = Song(
                songName = songName,  # 歌曲名称
                singer = singer,      # 歌手
                style  = 1,  # 歌曲类型
                fileURL = fileURL     # 文件路径
            )
            db.session.add(song) # 添加数据
            db.session.commit()    # 提交数据
            res = {}
            res['status'] = 1
            res['message'] = '添加成功'
        except :
            res = {}
            res['status'] = -1
            res['message'] = '添加失败'
        return jsonify(res)
    return render_template('home/manageSongAdd.html')

@home.route("/manage_song_edit", methods=["GET","POST"])
@admin_login
def manageSongEdit():
    '''
    编辑歌曲
    '''
    id = request.values['id']      # POST和GET提交都可以获取ID
    song = Song.query.filter_by(id=id).first()  # 获取用户信息
    if request.method == "POST":   # 提交注册表单
        # 更改Song表
        songName = request.form.get("songName")
        singer = request.form.get("singer")
        style = request.form.get("style")
        fileURL = request.form.get("fileURL")
        try:
            song.songName = songName
            song.singer = singer
            song.style = int(style)
            song.fileURL = fileURL
            db.session.add(song)   # 添加数据
            db.session.commit()    # 提交数据
            res = {}
            res['status'] = 1
            res['message'] = '保存成功'
        except :
            res = {}
            res['status'] = -1
            res['message'] = '保存失败'
        return jsonify(res)
    return render_template('home/manageSongEdit.html',song=song)

@home.route("/manage_song_del")
@admin_login
def manageSongDel():
    '''
    删除歌曲
    '''
    id = request.args.get('id')      # 获取ID
    try:
        song = Song.query.get_or_404(int(id))
        db.session.delete(song)
        db.session.commit()
        res = {}
        res['status'] = 1
        res['message'] = '删除成功'
    except:
        res = {}
        res['status'] = -1
        res['message'] = '删除失败'
    return jsonify(res)


@home.route('/addHit')
def addHit():
    '''
    点击量加1
    '''
    id = request.args.get('id')
    song = Song.query.get_or_404(int(id))
    if not song:
        res = {}
        res['status'] = -1
        res['message'] = '歌曲不存在'
    # 更改点击量
    else:
        song.hits += 1
        db.session.add(song)
        db.session.commit()
        res = {}
        res['status'] = 1
        res['message'] = '播放次数加1'
    return jsonify(res)

8.templates/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <title>小林云音乐</title>
    <link href="{{ url_for('static',filename='css/core.css')}}" rel="stylesheet">
    <link href="{{ url_for('static',filename='css/pt_frame.css')}}" rel="stylesheet">
	<link href="{{ url_for('static',filename='js/toolTip/tooltip.css')}}" rel="stylesheet">
	<script type="text/javascript" src="{{url_for('static',filename='js/toolTip/tooltip.js')}}"></script>
	 <script type="text/javascript" src="{{url_for('static',filename='js/jquery-2.2.0.min.js')}}"></script>
    <style>html, body {
        overflow: hidden;
    }</style>
    <script>if (top != self)top.location = self.location;</script>
</head>
<body class="auto-1469062573613-parent auto-1469062573612-parent">


<div id="g-topbar" class="g-topbar">
    <div class="m-top">
        <div class="wrap">
            <h1 class="logo"><a hidefocus="true" target="contentFrame" href="{{url_for('home.index')}}">甜橙云音乐</a></h1>
            <ul class="m-nav j-tflag">
                <li class="fst">
                    <span><a hidefocus="true" target="contentFrame" href="{{url_for('home.search')}}" data-module="discover" class="z-slt"><em>发现音乐</em></a></span>
                </li>
                <li>
                    <span><a target="contentFrame" href="{{url_for('home.collectList')}}"><em>我的音乐</em><sub class="cor">&nbsp;</sub></a></span>
                </li>
            </ul>
			{% if session['username'] %}
            <div class="m-tophead f-pr j-tflag" >
				<a onmouseover="tooltip.pop(this, '#textContent',{position:1, offsetX:0,  effect:'slide'})"  class="tooltip" style="color:#1C2021">您好，{{ session['username']}}</a>
            </div>
			<div style="display: none">
				<div id="textContent" style="width: 75px; height: 45px;color:black">
					{% if session['username'] == 'mr' %}
					<a target="contentFrame" href="{{url_for('home.manageArtist')}}">后台管理</a>
					{% else %}
					<a target="contentFrame" href="{{url_for('home.modifyPassword')}}">修改密码</a>
					{% endif %}
					<br />
					<a id="blogUrl" href="{{url_for('home.logout')}}">退出</a>
				</div>
			</div>
			{% else %}
			<div class="m-tophead f-pr j-tflag">
				<a id="login" class="name f-thide f-fl f-tdn" style="color:#1C2021">登录</a>
				<a id="register" class="name f-thide f-fl f-tdn" style="color:#1C2021">注册</a>
			</div>
			{% endif %}
		</div>
    </div>
    <div class="m-subnav m-subnav-up f-pr j-tflag f-hide">
        <div class="shadow">&nbsp;</div>
    </div>
    <div id="g_nav2" class="m-subnav j-tflag">
        <div class="wrap f-pr">
            <ul class="nav">
                <li><a hidefocus="true" target="contentFrame" href="{{url_for('home.index')}}" data-module="discover"
                       class="z-slt menuTab"><em>推荐</em></a></li>
                <li><a hidefocus="true" target="contentFrame"  href="{{url_for('home.toplist')}}" data-module="toplist"
                       class="menuTab"><em>排行榜</em></a></li>
                <li><a hidefocus="true" target="contentFrame"  href="{{url_for('home.styleList')}}" data-module="playlist"
					   class="menuTab"><em>曲风</em></a>
                </li>
                <li><a hidefocus="true" target="contentFrame"  href="{{url_for('home.artistList')}}" data-module="artist"
                       class="menuTab"><em>歌手</em></a>
				</li>
            </ul>
        </div>
    </div>
</div>
<script>
$(".menuTab").bind("click", function(obj){
	$('.menuTab').removeClass("z-slt");
	obj.currentTarget.className='z-slt menuTab';
});
</script>
<iframe name="contentFrame" id="g_iframe" class="g-iframe" scrolling="auto" frameborder="0"
        src="{{ url_for('home.contentFrame') }}">
</iframe>

<link href="{{url_for('static',filename='css/jplayer.blue.monday.min.css')}}" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{{url_for('static',filename='js/jplayer/jquery.jplayer.min.js')}}"></script>
<script>
// 定义播放音乐的方法
function playMusic(name, id) {

   $("#jquery_jplayer").jPlayer( "destroy" );         	// 销毁正在播放的音乐
   $("#jquery_jplayer").jPlayer({						// 播放音乐
		ready: function(event) {						// 准备音频
			$(this).jPlayer("setMedia", {
				title: name,							// 设置音乐标题
				mp3: "static/images/song/53.mp3"		// 设置播放音乐
			}).jPlayer( "play" );						// 开始播放
		},
		swfPath: "dist/jplayer/jquery.jplayer.swf",     // IE8下的兼容播放
		supplied: "mp3",								// 音乐格式为mp3
		wmode: "window",								// 播放模式“window”
		useStateClassSkin: true,						// 设置默认样式
		autoBlur: false,								// 不支持模糊
		smoothPlayBar: true,							// 支持图标
		keyEnabled: true,								// 支持键盘
		remainingDuration: true,						// 支持动画
		toggleDuration: true 							// 支持进度条
	});
}
// 添加收藏
function addShow(id){
	var username= "{{session['username']}}";
	if(username=="null" || username==""){
		layer.msg("收藏请先登录!",{icon:2,time:1000});
		return;
	}
	$.ajax({
		url: "{{url_for('home.collect')}}",
		type: "get",
		data: {
			id: id
		},
		success: function(res){
			if(res.status==1){
				layer.msg(res.message,{icon:1})
			}else{
				layer.msg(res.message,{icon:2})
			}
        }
     });
}




</script>
		<div id="demo" style="z-index: 999; position: fixed;right:0;left:0;bottom:0;width:100%;">
			<div id="jquery_jplayer" class="jp-jplayer">
			</div>
			<div id="jp_container_1" class="jp-audio" role="application"
				aria-label="media player">
				<div class="jp-type-single">
					<div class="jp-details">
						<div class="jp-title" aria-label="title">
							暂无播放音乐
						</div>
					</div>
					<div class="jp-gui jp-interface" style="margin-left:30% " >
						<div class="jp-controls">
							<button class="jp-play" role="button" tabindex="0">
								play
							</button>
						</div>
						<div class="jp-progress">
							<div class="jp-seek-bar">
								<div class="jp-play-bar"></div>
							</div>
						</div>
						<div class="jp-volume-controls">
							<button class="jp-mute" role="button" tabindex="0">
								mute
							</button>
							<button class="jp-volume-max" role="button" tabindex="0">
								max volume
							</button>
							<div class="jp-volume-bar">
								<div class="jp-volume-bar-value"></div>
							</div>
							<div class="jp-duration" role="timer" aria-label="duration">
								&nbsp;
							</div>
							<div class="jp-time-holder">
								<div class="jp-duration" role="timer" aria-label="duration">
									&nbsp;
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>

<script type="text/javascript" src="{{url_for('static',filename='js/layer/layer.js')}}"></script>
<script>
// 登录弹窗
$("#login").click(function () {
	layer.open({
	  type: 2,
	  title: '登录',
	  shadeClose: true,
	  shade: 0.4,
	  area: ['700px', '550px'],
	  content: ['/login','no'] //iframe的url
	});
});
// 注册弹窗
$("#register").click(function () {
	layer.open({
	  type: 2,
	  title: '注册',
	  shadeClose: true,
	  shade: 0.4,
	  area: ['700px', '550px'],
	  content: ['/register','no'] //iframe的url
	});
})
</script>
</body>
</html>

templates/login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="{{ url_for('static',filename='css/core.css')}}" rel="stylesheet">
    <link href="{{ url_for('static',filename='css/pt_frame.css')}}" rel="stylesheet">
    <link href="{{ url_for('static',filename='css/login.css')}}" rel="stylesheet">
    <script type="text/javascript" src="{{url_for('static',filename='js/jquery-2.2.0.min.js')}}"></script>
     <script type="text/javascript" src="{{url_for('static',filename='js/layer/layer.js')}}"></script>
</head>
<body>
<div id="loginHtml">
<div class="left">
</div>
<div class="right" style="background: #f0f3f9 url('../../static/image/login-rightBg.jpg') no-repeat;">
<div class="respond">
    <form  method="post" action="{{url_for('home.login')}}"  id="commentform" onsubmit="return false">
        <div class="comment-login"></div>
        <div class="comment-login" style="font-size:16px;margin-top:-40px">
        <ul style="margin-top:100px">
        <li class="form-inline">
        <label><strong>用户名：</strong></label>
        <input type="text" name="username" id="username" value="" tabindex="1" aria-required="true">
        </li>
        <li class="form-inline">
        <label><strong>密&nbsp&nbsp&nbsp&nbsp码：</strong></label>
        <input type="password" name="pwd" id="pwd" value="" tabindex="2" aria-required="true">
        </li>
        </ul>
        </div>
        <div class="comment-login">
            <input name="submit" type="submit" id="login"  class="submitButton" tabindex="5"  value="登录">
        </div>
    </form>
</div>
</div>
</div>
<script>
    $('#login').click(function(){
        var username = $('#username').val()
        var pwd = $('#pwd').val()
        if(username == ''){
            layer.msg('请输入用户名',{icon:2,time:1000});
            return false;
        }
         if(pwd == ''){
            layer.msg('请输入密码',{icon:2,time:1000});
            return false;
         }
        $.ajax({                                    // 使用Ajax异步提交
            url: "{{ url_for('home.login') }}",   // 提交到的URL
            type: "POST",                            // 提交方式为GET
            data:{username: username,pwd:pwd},       // 传递参数
            dataType: "json",                       // 数据类型为json
            success: function (res) {               // 操作成功后执行逻辑
                if (res.status == 1) {
                    layer.msg(res.message,{icon:1,time:2000},function(){
                        window.parent.location.reload();                        // 从新加载父页面
                        var index = parent.layer.getFrameIndex(window.name);    // 获取当frame标识
                        parent.layer.close(index);                              // 关闭当前页
                    });
                } else {
                    layer.msg(res.message,{icon:2,time:2000});   // 提示已收藏
                }
            }
        })
    })
</script>
</body>
</html>

最后运行python app.py runserver

因为前端网页页面有点多,需要源代码可以私信博主

1.3  论文结构与章节安排

• 绪论。主要讲述了对于当前音乐网的调研情况，介绍了此课题提出的背景和研究的意义，
•  相关介绍。介绍了此音乐网系统开发时所用的框架Flask和新型技术ORM作详细介绍。
• 需求分析。本章根据中国网数据得知，当前音乐网的发展趋势蓬勃发展，然后确定音乐网系统的总体需求，然后介绍开发音乐网所用到的开发工具做了详细概述。
• 系统概要设计。本章基于第三章的需求对音乐网管理系统作了全面的设计，首先设计了系统的总体架构，然后对音乐网管理系统的功能设计重点的作了介绍，接着对该套系统的数据库和ORM模型作了设计，最后系统的安全性作了分析。系统实现。按照系统的需求和设计说明书，实现了在线音乐网系统所有的功能模块。
• 数据库设计。介绍了在线音乐网数据库里面的数据表

第2章 相关技术

2.1 Flask框架介绍

2.2 ORM技术概述

2.3本章小结

第3章 需求分析

3.1 系统初步调查

3.2 总体需求

3.3 开发平台

操作系统：window 7及以上

3.4 本章小结

第4章 系统概要设计

4.1 系统设计概述

4.2 系统用例图

4.3 系统流程图

4.4 系统功能分析

4.5 本章小结

• 数据库设计

5.1.1数据库表

第6章 系统具体实现

6.1 项目基础框架搭建

6.2.1 推荐功能模块实现

6.2.2 用户登录功能实现

6.2.3用户注册功能实现

6.2.4 歌曲播放功能实现

6.2.6 排行榜功能实现：

6.2.7曲风功能实现

6.2.8 歌手功能实现

6.3 管理员功能实现

6.3.1 歌手管理功能实现

6.3.2 歌曲管理功能实现

 6.4 本章小结

第7章 系统测试

7.1系统测试方法介绍

7.2 系统功能测试

7.3系统测试结果

7.4 音乐网系统实现全过程

1.创建项目Online Music

2. 配置虚拟环境

3. 安装项目所需的库(requirements.txt)

4. 创建各类型文件，并编写源码

6. 在Terminal中使用migrate创建数据表

1. 新建数据库music表

7.5 本章小结

第8章.总结

8.1工作总结

致谢