一.说明
此文是小白在学习张晨光老师的视频教学<<Asp.Net WEB服务器编程技术>>中做的学习笔记,一些知识点也是跟着教程走的,大家也可以去老师的主页去学习,谢谢大家.
这一篇要练习的是,如下课程的代码:
二.增加母版页(Musci_Menu.Master)
右击项目/添加/新建项:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Musci_Menu.master.cs" Inherits="MyMusci.Musci_Menu" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!--这里引用bootstrap5-->
<link href="bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet" />
<script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
<script src="js/jquery.js"></script>
<!--下面控件是将子页面的js引用至项目-->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<!--一些样式设置-->
<style>
.img {
height:126px;
width:126px;
}
/*导航栏渐变色*/
.bg-linear {
background:-webkit-linear-gradient(#ffffff,#63B8FF)
}
/*排行榜渐变色*/
.Repeater {
width:200px;
padding:50px;
margin:10px;
display:inline-block;
background: linear-gradient(to bottom right ,#1E90FF,#FFC0CB, #FF69B4);
border-radius: 25px;
}
/*歌曲推荐每首歌的样式*/
.recommend {
display:inline-flex;
width:400px;
}
</style>
<script>
/*实现母版导航栏按钮点击的方法,只要传入他的ID即可*/
btn_active = function (str) {
$("ul").find("a").removeClass("active");
$("#" + str).addClass("active");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="container-fluid">
<!--导航栏-->
<header class="d-flex justify-content-center py-3 bg-linear justify-content-lg-start">
<!--图片及音乐软件名称-->
<img alt="" src="img/music.png" style="width:50px;height:50px;margin-left:20px;margin-right:10px" /><span style="font-size:30px;color:#0a58ca;margin-right:150px;">薄雾音乐</span>
<ul class="nav nav-pills">
<li class="nav-item"><a href="main.aspx" class="nav-link" id="main" >发现音乐</a></li>
<li class="nav-item"><a href="#" class="nav-link ">我的主页</a></li>
<li class="nav-item"><a href="user_center.aspx" class="nav-link" id="center">个人中心</a></li>
<li class="nav-item"><a href="#" class="nav-link ">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link ">About</a></li>
</ul>
</header>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<!--固定在底部的栏位-->
<div style="width:100%;background-color:#363636;color:white;text-align:center;position:fixed;bottom:0;">
Copyright ©2021-2022 小白. 保留所有权利
</div>
</div>
</form>
</body>
</html>
三.优化个人中心(user_center.aspx)
右击项目/添加/新建项:
然后选择我们刚刚创建的母版页:
然后我们将Home.aspx里的代码转移至user_center.aspx里:前端
<%@ Page Title="" Language="C#" MasterPageFile="~/Musci_Menu.Master" AutoEventWireup="true" CodeBehind="User_Center.aspx.cs" Inherits="MyMusci.User_Center" %>
<!--这里可独立于母版页放置一些js或css-->
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!--此控件下放置内容-->
<div class="container-fluid">
<table class="table">
<tbody>
<tr>
<td>账号</td>
<td><asp:Label ID="userId" runat="server"></asp:Label></td>
<td rowspan="3"><asp:Image ID="userPhoto" runat="server" CssClass="img" />
<br />
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="上传" OnClick="btnUpload_Click" />
</td>
</tr>
<tr>
<td>昵称</td>
<td><asp:TextBox ID="userNetname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>性别</td>
<td><asp:DropDownList ID="userSex" runat="server">
<asp:ListItem Value="true">男</asp:ListItem>
<asp:ListItem Value="false">女</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>签名</td>
<td><asp:TextBox ID="userSign" runat="server" Height="101px" TextMode="MultiLine"></asp:TextBox></td>
</tr>
<tr>
<td>年龄</td>
<td><asp:TextBox ID="userAge" runat="server"></asp:TextBox></td>
</tr>
</tbody>
</table>
<asp:Button ID="sub_Btn" runat="server" Text="编辑" class="btn btn-primary" OnClick="sub_Btn_Click" />
</div>
<script>
btn_active("center");
</script>
</asp:Content>
后端:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using System.Data;
using Model;
namespace MyMusci
{
public partial class User_Center : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//防止用户直接进入用户中心
if (Session["userName"] == null)
{
Response.Redirect("login_new.aspx");
}
else
{
//将数据库中的值赋值于页面的控件中
if (!IsPostBack)
{
GetUser();
}
}
}
private void GetUser()
{
//读取Session,从数据库中获取相应的数据
string nameid = Session["userName"].ToString();
string sql = "select * from user_all where user_Name=?userName";
Hashtable ht = new Hashtable();
ht.Add("userName", nameid);
DataTable dt = ToolMysqlDate.executTable(sql, ht);
userId.Text = nameid;
userNetname.Text = dt.Rows[0]["u_nick"].ToString();
//下拉列表选中FindByValue,则时要选中的value值
//将数据库返回的BOOL值转换字符串后,再判断哪一项被选中
userSex.Items.FindByValue(dt.Rows[0]["u_sex"].ToString() == "True" ? "true" : "false").Selected = true;
userSign.Text = dt.Rows[0]["u_sign"].ToString();
userAge.Text = dt.Rows[0]["u_age"].ToString();
userPhoto.ImageUrl = dt.Rows[0]["u_photo"].ToString();
}
//上传图片按钮点击事件
protected void btnUpload_Click(object sender, EventArgs e)
{
//判断是否有图片
if (FileUpload1.HasFile)
{
//获取文件名
string imgName = FileUpload1.FileName;
//添加时间参数,可以规避掉图片重名问题
imgName = DateTime.Now.ToString("yyyymmddhhmmss") + imgName;
//图片上传的地址(路径)
FileUpload1.SaveAs(Server.MapPath("\\user_img\\") + imgName);
//显示到图片框上
userPhoto.ImageUrl = "\\user_img\\" + imgName;
}
else
{
Response.Write("<script>alert('需要先选择图片,再上传')</script>");
}
}
//编辑按钮提交事件
protected void sub_Btn_Click(object sender, EventArgs e)
{
//修改数据库中的值
string sql = "update user_all set " +
"u_Nick=?u_Nick,u_sex=?u_sex,u_Sign=?u_Sign,u_age=?u_age,u_photo=?u_photo " +
"where user_name=?user_name";
DataUser us = new DataUser();
//给中间实体类赋值
us.user_name = userId.Text;
us.u_Nick = userNetname.Text;
//判断下拉列表选中的数据,并提取,然后将其转换为int 类型,1为True,0为False
us.u_sex = userSex.SelectedValue == "true" ? 1 : 0;
us.u_Sign = userSign.Text;
us.u_age = Convert.ToInt32(userAge.Text);
us.u_photo = userPhoto.ImageUrl;
Hashtable ht = new Hashtable();
//参数的赋值
ht.Add("user_name", us.user_name);
ht.Add("u_Nick", us.u_Nick);
ht.Add("u_sex", us.u_sex);
ht.Add("u_Sign", us.u_Sign);
ht.Add("u_age", us.u_age);
ht.Add("u_photo", us.u_photo);
//调用增删改方法
int result = ToolMysqlDate.executeSql(sql, ht);
//向用户提示信息
if (result > 0)
{
Response.Write("<script>alert('信息修改成功')</script>");
}
else
{
Response.Write("<script>alert('信息修改失败')</script>");
}
}
}
}
这样我们在登录后,会得到如下的个人中心界面(ps:登录界面的路径需要大家修改一下):
四.发现音乐界面(Main.aspx)
我们同样使用包含母版页的web窗体来创建发现音乐,创建完毕后,填入如下代码:
<%@ Page Title="" Language="C#" MasterPageFile="~/Musci_Menu.Master" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="MyMusci.Main" %>
<!--这里可独立于母版页放置一些js或css-->
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!--内容区域-->
<div class="container">
<div style="background-color:gainsboro">
<span class="text-center" style="font-size:30px;">歌曲推荐</span><br />
<div class="tab-content row">
<div id="home" class="container tab-pane active" style="align-content:center;"><br>
<%--这里放置asp:Repeater 控件,读取数据库数据--%>
<asp:Repeater ID="Repeater5" runat="server">
<ItemTemplate>
<%--这里采用特殊样式--%>
<div class="col recommend">
<img src="<%# Eval("m_photo") %>"" style="width:125px;height:125px" />
<a href="Musci_Main.aspx?id">
<p><%# Eval("ROWS") %><%# Eval("m_name") %></p><p><%# Eval("m_singer") %></p>
</a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<asp:Repeater ID="Repeater6" runat="server">
<ItemTemplate>
<div class="col recommend">
<img src="img/music.png" style="width:125px;height:125px" />
<a href="Musci_Main.aspx?id">
<p><%# Eval("ROWS") %><%# Eval("m_name") %></p><p><%# Eval("m_singer") %></p>
</a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<asp:Repeater ID="Repeater7" runat="server">
<ItemTemplate>
<div class="col recommend">
<img src="img/music.png" style="width:125px;height:125px" />
<a href="Musci_Main.aspx?id">
<p><%# Eval("ROWS") %><%# Eval("m_name") %></p><p><%# Eval("m_singer") %></p>
</a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<%--这里是歌曲推荐下方的按钮,点击可以切换下一页推荐歌曲--%>
<div class="d-flex justify-content-center">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="pill" href="#home">.</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#menu1">.</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#menu2">.</a>
</li>
</ul>
</div>
</div>
<!--热歌榜数据-->
<div class="row">
<div class="col Repeater">
<span style="font-size:30px;align-content:center">热歌榜</span><p></p>
<!--同样使用aspx控件来填充数据-->
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="row">
<a href="Musci_Main.aspx?id">
<p><%# Eval("ROWS") %> <%# Eval("m_name") %></p>
<p><%# Eval("m_singer") %></p>
</a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div class="col Repeater">
<span style="font-size:30px;align-content:center">治愈榜</span><p></p>
<asp:Repeater ID="Repeater2" runat="server">
<ItemTemplate>
<div class="row">
<a href="Musci_Main.aspx?id">
<p><%# Eval("ROWS") %> <%# Eval("m_name") %></p>
<p><%# Eval("m_singer") %></p>
</a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div class="col Repeater">
<span style="font-size:30px;align-content:center">国风榜</span><p></p>
<asp:Repeater ID="Repeater3" runat="server">
<ItemTemplate>
<div class="row">
<a href="Musci_Main.aspx?id">
<p><%# Eval("ROWS") %> <%# Eval("m_name") %></p>
<p><%# Eval("m_singer") %></p>
</a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div class="col Repeater">
<span style="font-size:30px;align-content:center">欧美榜</span><p></p>
<asp:Repeater ID="Repeater4" runat="server">
<ItemTemplate>
<div class="row">
<a href="Musci_Main.aspx?id">
<p><%# Eval("ROWS") %> <%# Eval("m_name") %></p>
<p><%# Eval("m_singer") %></p>
</a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</div>
<script>
/*当运行至该页面,导航栏按钮则定位选中该页面的'发现音乐'按钮*/
btn_active("main");
</script>
</asp:Content>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MyMusci
{
public partial class Main : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
Bindlist();
}
}
//向控件填充数据
private void Bindlist()
{
//rows mysql特殊写法,用于返回序列排序个数
string sql = "SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t,"+
"(SELECT @rownum:=0)t1 ORDER BY m_clicknum DESC LIMIT 5 ";
//填充热歌榜的数据
Repeater1.DataSource = ToolMysqlDate.executTable(sql);
Repeater1.DataBind();
Repeater2.DataSource = ToolMysqlDate.executTable("SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t ,(SELECT @rownum:=0)t1 WHERE m_type IN (SELECT m_number FROM music_type WHERE m_type='治愈') ORDER BY m_clicknum DESC LIMIT 5");
Repeater2.DataBind();
Repeater3.DataSource = ToolMysqlDate.executTable("SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t ,(SELECT @rownum:=0)t1 WHERE m_type IN (SELECT m_number FROM music_type WHERE m_type='国风') ORDER BY m_clicknum DESC LIMIT 5");
Repeater3.DataBind();
Repeater4.DataSource = ToolMysqlDate.executTable("SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t ,(SELECT @rownum:=0)t1 WHERE m_type IN (SELECT m_number FROM music_type WHERE m_type='欧美') ORDER BY m_clicknum DESC LIMIT 5");
Repeater4.DataBind();
//填充歌曲推荐数据(0-9)(10-18)(19-27)
Repeater5.DataSource = ToolMysqlDate.executTable("SELECT t.* FROM (SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t ,(SELECT @rownum:= 0)t1 ORDER BY m_clicknum DESC)t WHERE ROWS BETWEEN(1 - 1)*9 AND(2 - 1) * 9 ORDER BY ROWS ");
Repeater5.DataBind();
Repeater6.DataSource = ToolMysqlDate.executTable("SELECT t.* FROM (SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t ,(SELECT @rownum:= 0)t1 ORDER BY m_clicknum DESC)t WHERE ROWS BETWEEN(2 - 1)*9+1 AND(3 - 1) * 9 ORDER BY ROWS ");
Repeater6.DataBind();
Repeater7.DataSource = ToolMysqlDate.executTable("SELECT t.* FROM (SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t ,(SELECT @rownum:= 0)t1 ORDER BY m_clicknum DESC)t WHERE ROWS BETWEEN(3 - 1)*9+1 AND(4 - 1) * 9 ORDER BY ROWS ");
Repeater7.DataBind();
}
}
}
歌曲推荐部分:
榜单部分:
五.ToolMysqlDate.cs增加方法
我们在之前的ToolMysqlDate.cs中添加如下方法:
//不带参数查询
public static DataTable executTable(String sql)
{
MySqlDataAdapter mda = new MySqlDataAdapter(sql, conn);
DataTable dt = new DataTable();
mda.Fill(dt);
return dt;
}
六.说明
推荐歌曲的图片存储位置(需要大家手动导入)
对应数据库的内容:
这样,一个比较简陋的音乐主页模块就做好了,谢谢大家
4144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
