Ajax在線音樂網(wǎng)站（3）Part one 功能實(shí)現(xiàn)

今天打算把網(wǎng)站功能的具體實(shí)現(xiàn)給總結(jié)一下，如果你想了解整個(gè)小項(xiàng)目，建議你先看看前面2篇博客。

1.AJAX在線音樂網(wǎng)站（1）需求和功能結(jié)構(gòu)

2.AJAX在線音樂網(wǎng)站（2）數(shù)據(jù)庫和開發(fā)環(huán)境

7.網(wǎng)站主要模塊實(shí)現(xiàn)

a.在線音樂前臺(tái)

由于在線音樂網(wǎng)站要提供用戶在線音樂的相關(guān)服務(wù)，當(dāng)用戶打開網(wǎng)站時(shí)，引入眼簾的是首頁，所以首頁的對(duì)于整個(gè)網(wǎng)站來說是非常重要的一個(gè)頁面，首頁排版和設(shè)計(jì)的美觀與否將直接影響到游客的瀏覽和用戶的注冊。首頁不僅要實(shí)現(xiàn)各種功能的展示，而且還要著眼于系統(tǒng)整體風(fēng)格，能讓首頁做到功能完善，頁面簡潔美觀。

網(wǎng)站前臺(tái)有歌曲排行榜展示、專輯排行榜展示、歌手排行榜展示、用戶登錄和注冊、系統(tǒng)歌曲搜索、試聽排行榜歌曲和下載排行榜歌曲、我的收藏等功能。程序運(yùn)行結(jié)果如圖7.1所示。

圖7.1 前臺(tái)主界面圖

實(shí)現(xiàn)過程：

1）在進(jìn)入音樂排行榜、專輯排行榜、歌手排行榜、我的收藏等功能時(shí)，實(shí)現(xiàn)AJAX技術(shù)效果，不刷新整個(gè)頁面，只是異步刷新相應(yīng)的排行表格數(shù)據(jù)，這樣在增強(qiáng)用戶體驗(yàn)的同時(shí)，也最大化的保證了已經(jīng)登錄的用戶信息的安全，關(guān)鍵代碼如下：

$(function () {            l(1);        })        function l(m) {            $.ajax({                type: "post",                url: "ajaxmlist.aspx",                data: "id=" + m,                success: function (msg) {                    if (m == "1") {                        $("#ltitle").html("音樂排行榜")                    }                    if (m == "2") {                        $("#ltitle").html("專輯排行榜")                    }                    if (m == "3") {                        $("#ltitle").html("歌手排行榜")                    }                    if (m == "4") {                        $("#ltitle").html("我的收藏")                    }                    //將數(shù)據(jù)放入LIST中                    $("#mlist").html(msg);                }            })        }

2）首頁的登錄區(qū)，可以在用戶提交登錄信息后，將信息與用戶數(shù)據(jù)表中對(duì)比，并判斷是用戶還是管理員，并做出不同的頁面跳轉(zhuǎn)動(dòng)作，關(guān)鍵代碼如下：

 session["type"] = "";            Session["userId"] = "";            string sql = "select passWord,[type] from [user] where userId=@userId";            SqlCommand cmd = new SqlCommand(sql, conn);            cmd.Parameters.Add("@userId",SqlDbType.NChar).Value = userId.Text.Trim();            cmd.Connection.Open();            SqlDataReader dr = cmd.ExecuteReader();            string passwd = "";            if (dr.Read())            {                passwd = dr.GetString(0);                if(passwd.Trim().ToString() == Password.Text.Trim().ToString())                {           Session["userId"] = userId.Text.ToString();           if (dr.GetString(1).Trim().ToString() == "admin")           Response.Redirect("~/musicChange.aspx?userId=" + userId.Text.ToString() + "");                    else                        Response.Redirect("Default.aspx");                }            }            else {                Session["userId"] = null;                Session.Clear();                FailureText.Text = "賬號(hào)或密碼錯(cuò)誤，登錄失敗！";            }

b.歌曲的試聽和下載

當(dāng)用戶進(jìn)入在線音樂網(wǎng)站時(shí)，可以試聽歌曲排行榜的任何一首歌曲，如下圖7.2，同時(shí)也可以把它下載到本地電腦上面如圖7.3。

圖7.2 歌曲試聽界面

圖7.3 歌曲下載界面

1）試聽功能的實(shí)現(xiàn)過程

在音樂排行榜數(shù)據(jù)表格中，定義如下代碼：

<a href='playlist.aspx?id="+ dt.Rows[i]["id"].ToString() + "' target='_blank' >"

用戶點(diǎn)擊歌曲名稱是進(jìn)入歌曲試聽界面，程序?qū)⑼ㄟ^歌曲ID，獲取歌曲文件路徑，并傳遞給播放器，關(guān)鍵代碼如下：

string path = new DirectoryInfo(Server.MapPath("")).FullName.ToString() + @"/file/" + updateMusic();            string str = path.Replace('//', '/');            fileUrl = str;            update_album();            update_singer();            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["LocalSqlServer"].ToString());            string sql = "select * from [music]";            SqlCommand cmd = new SqlCommand(sql, conn);            cmd.Connection.Open();            SqlDataReader dr = cmd.ExecuteReader();            while (dr.Read())            {                    ListItem listItem = new ListItem { Value = dr.GetString(0), Text = dr.GetString(1) };                    Select1.Items.Add(listItem);                    }            Select1.Items[0].Selected = true;            dr.Close();            cmd.Connection.Close();

2）下載功能的實(shí)現(xiàn)過程

在音樂排行榜數(shù)據(jù)表格中，定義如下代碼：

<a href='downLoadList.aspx?id=" + dt.Rows[i]["id"].ToString() + "'>下載</a>

當(dāng)用戶點(diǎn)擊下載按鈕后，程序?qū)⑼ㄟ^歌曲ID，獲取到歌曲的文件路徑，并通過Response對(duì)象將文件寫出，關(guān)鍵代碼如下：

string m_name = downMusic();            string path = new DirectoryInfo(Server.MapPath("")).FullName.ToString() + @"/file/" + m_name;            string str = path.Replace('//', '/');            update_album();            update_singer();            System.IO.FileInfo file = new System.IO.FileInfo(str);            if (file.Exists)            {                Response.Clear();                Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(Encoding.UTF8.GetBytes(m_name)));                Response.AddHeader("Content-Length", file.Length.ToString());                Response.ContentType = "application/octet-stream";                Response.Filter.Close();                Response.WriteFile(file.FullName);                Response.End();            }            else            {                Response.Write("This file does not exist.");            }            Response.Redirect("Default.aspx");

c. 歌曲模糊搜索功能

當(dāng)用戶只記得歌曲名、專輯、歌手的一部分的時(shí)候，在線音樂網(wǎng)站采用了模糊搜索，同樣可以搜到你想聽的歌曲，如圖7.4所示。

圖7.4 搜索

實(shí)現(xiàn)過程：

用戶在搜索框中輸出文本時(shí)，當(dāng)點(diǎn)擊搜索按鈕時(shí)，會(huì)觸發(fā)search_btn_Click事件，同時(shí)會(huì)將文本和搜索類型傳入搜索頁面的dataBind方法中，通過使用查詢數(shù)據(jù)庫含有l(wèi)ike '%'的語句，可以實(shí)現(xiàn)對(duì)歌曲的模糊搜索，關(guān)鍵代碼如下：

if (type.Equals("music"))            {cmd.CommandText = "SELECT * FROM [music] WHERE(musicName like '%'+@musicName+'%') ORDER BY count DESC";cmd.Parameters.Add("@musicName", SqlDbType.NChar).Value = name;            } else if(type.Equals("singer"))            {cmd.CommandText = "SELECT * FROM [music] WHERE(singer like '%'+@singer+'%') ORDER BY count DESC";cmd.Parameters.Add("@singer", SqlDbType.NChar).Value = name;            }            else            {cmd.CommandText = "SELECT * FROM [music] WHERE(album like '%'+@album+'%') ORDER BY count DESC";cmd.Parameters.Add("@album", SqlDbType.NChar).Value = name;            }            SqlDataAdapter da = new SqlDataAdapter();            da.SelectCommand = cmd;            SqlCommandBuilder sqlcb = new SqlCommandBuilder(da);            DataSet ds = new DataSet();            da.Fill(ds, "music");            if (ds.Tables["music"].Rows.Count > 0)            {                dg.DataSource = ds;                dg.DataBind();            }            else            {                dg.Visible = false;                msg.Text ="沒有找到相關(guān)文件！";            }        }