c#购物车功能实现,用户登录及收藏功能实现

当前位置:

首页 > temp > C#教程 >

c#购物车功能实现,用户登录及收藏功能实现

一.思路逻辑:

首先我先来说一下我自己的理解,一个萌新的见解,要实现购物车的功能,首先要获取到登录时的用户id及商品的编号(商品id),这里我用的模式是mvc模式进行实现功能的,用户登录时,利用session保存用户的登录用户名,然后在控制器里进行传值操作,定义一个session进行接收用户输入的用户名,登录成功后进行保存用户的用户名,登录成功,前台在进行跳转到显示界面,点击事先创建好的购物车按钮,把我们已经保存好的用户名传过去,在进行session接收用户名字,添加到购物车时,前面我也说到需要两个值,我们现在已经获取到了用户id(用户名),再获取到商品id就可以进行添加到购物车功能的实现,在显示的ajax拼接字符串进行显示的时候,我们需要再添加一个多选按钮(多选按钮是为了进行多项数据选择时,添加到购物车以及添加收藏时更方便一些),为多选按钮添加一个id属性或者name属性,这里是为了我们方便获取它的数据,获取多选框的id值的方法我就不在这里过多介绍了,既然我们需要的两个值都已经获取到,我们的添加购物车功能就可以实现了,今天先写这么多,明天还要周考,在以后的时间里我会继续修改和添加这篇文章的后续内容,大佬们看过之后,若是有空闲时间,在评论区多给小学生一些建议,我会进行改正的.今天我就说到这里了,购物车的添加基本说完了,后续我会及时利用空闲时间进行后续功能及代码思路逻辑的更新.

二.代码如下:

实例化模型层(model层),共创建了四个表,我用的方法是EF架构中的codefirst方法,详细解释大家可以百度,或者可以看一看另一个博主的博客,https://www.cnblogs.com/zpyplan/p/9565863.html:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MODEL
{
   //购物车表
   [Table("MyShoppingCar")]
   public class MyShoppingCar
   {
       [Key]
       public int  Id { get; set; }
       public string UserId { get; set; }
       public string Pno { get; set; }
       public int? Account { get; set; }
   }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MODEL
{
   //收藏表
   [Table("MyFavorite")]
   public class MyFavorite
   {
       [Key]
       public string UserId { get; set; }
       public string Pno { get; set; }
   }
}

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MODEL
{
   //商品表
   [Table("Product")]
   public class Product
   {
       [Key]
       public int Id { get; set; }
       public string Pno { get; set; }
       public string Pname { get; set; }
       public int? Price { get; set; }
       public string ImgPath { get; set; }
   }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MODEL
{
   //登录用户表
   [Table("UserInfo")]
   public class UserInfo
   {
       [Key]
       public String UserID { get; set; }
       public String UserName { get; set; }
       public String WX { get; set; }
       public String Pwd { get; set; }
       public String QQ { get; set; }
   }
}

搭建好model层,我们要开始写dal层里的方法了,我们要实现的功能有用户登录功能,商品的显示功能,添加到购物车功能,加减一功能,收藏功能,显示购物车列表,批量删除购物车

dal层如下(codefirst方法):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DAL
{
   public class MyFavoriteDAL
   {
       public int Favorite(string userid,string pnos)
       {
           string[] arr = pnos.Trim(',').Split(',');
           using (Model1 mc = new Model1())
           {
               foreach (string str in arr)
               {
                   string sql = $"insert into MyFavorite(userid,pno) values('{userid}','{str}')";
                   mc.Database.ExecuteSqlCommand(sql);
               }
           }
               
           return 1;
       }
   }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using MODEL;

namespace DAL
{
   public class MyShoppingCarDAL
   {
       //添加到购物车的方法
       public int AddMyShoppingCar(string userid, string pnos)
       {
           string[] arr = pnos.Trim(',').Split(',');
           using (Model1 mc = new Model1())
           {
               foreach (string str in arr)
               {
                   string sql = $"insert into MyShoppingCar(userid,pno,Account) values('{userid}','{str}',1)";
                   mc.Database.ExecuteSqlCommand(sql);
               }
           }

           return 1;
       }

       //获取购物车的信息
       public List<V_MyShoppingCar> GetList(string userid)
       {
           using (Model1 mc = new Model1())
           {

               var query = from s in mc.Products
                           from t in mc.MyShoppingCars
                           where s.Pno == t.Pno && t.UserId== userid
                           select new V_MyShoppingCar { Pno = s.Pno, Pname = s.Pname, Price = s.Price, Id = t.Id, Account = t.Account, TotalMoney = t.Account * s.Price, ImgPath=s.ImgPath };
               return query.ToList();
           }
       }

       //批量删除
       public int DelMyShoppingCars(string ids)
       {
           //1,2,3,4,....
           using (Model1 mc = new Model1())
           {
               string sql = $"delete MyShoppingCar where id in({ids.Trim(',')})";
               mc.Database.ExecuteSqlCommand(sql);
           }
           return 1;
       }

       //加减1
       public int MyShoppingCarsUpDown(string id,string sType)
       {
           using (Model1 mc = new Model1())
           {
               string sql;
               if (sType.Equals("up"))
                    sql = $"update MyShoppingCar set Account=Account+1 where id={id}";
               else
                   sql = $"update MyShoppingCar set Account=Account-1 where id={id}";
               mc.Database.ExecuteSqlCommand(sql);
           }
           return 1;
       }

   }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using MODEL;

namespace DAL
{
   public class ProductDAL
   {
       //商品显示的方法
       public List<Product> GetList(string pname)
       {
           using (Model1 mc = new Model1())
           {
               //linq查询
               return mc.Products.Where(x=>x.Pname.Contains(pname)).ToList();
           }
       }



   }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DAL
{
   public class UserInfoDAL
   {
       //用户登良路的方法
       public int Login(string userid,string pwd)
       {
           using (Model1 mc = new Model1())
           {
              //linq查询的方法
              return mc.UserInfos.Where(x => x.UserID.Equals(userid) && x.Pwd.Equals(pwd)).Count();
           }
       }
   }
}

控制器里的方法(因为这里我是搭三层写的,有个bll层,也就是业务逻辑层,控制器里调用的方法大多是调用的业务逻辑层的方法,因为我吧所有业务处理的代码都写在了dal层,我在这里就不写bll层了,复制代码时只需将bll层的方法调用替换成dal层的方法调用):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using BLL;
using MODEL;

namespace WT01.Controllers
{
   public class HomeController : Controller
   {
       UserInfoBLL bll = new UserInfoBLL();

       //登录页面
       public ActionResult Login()
       {
           return View();
       }
       //显示页面
       public ActionResult Index()
       {
           return View();
       }
       //购物车页面
       public ActionResult MyShoppingCar()
       {
           return View();
       }

       //登录验证
       [HttpPost]
       public int LoginValidate(string userid,string pwd)
       {
           HttpContext.Session["userid"] = userid;
           return bll.Login(userid, pwd);
       }

       //收藏
       [HttpPost]
       public int Favorite(string pnos)
       {
           string userid= HttpContext.Session["userid"].ToString();
           return  new MyFavoriteBLL().Favorite(userid, pnos);
       }

       //加入购物车
       [HttpPost]
       public int AddMyShoppingCar(string pnos)
       {
           string userid = HttpContext.Session["userid"].ToString();
           return new MyShoppingCarBLL().AddMyShoppingCar(userid, pnos);
       }


       //获取产品的List
       [HttpGet]
       public JsonResult GetList(string pname)
       {
           ProductBLL productBLL = new ProductBLL();
           return Json(productBLL.GetList(pname),JsonRequestBehavior.AllowGet);
       }


       //获取我的购物车列表信息List
       [HttpGet]
       public JsonResult GetMyShoppingCarList()
       {
           MyShoppingCarBLL myShoppingCar = new MyShoppingCarBLL();
           string userid = HttpContext.Session["userid"].ToString();          
           return Json(myShoppingCar.GetList(userid), JsonRequestBehavior.AllowGet);
       }

       //批量删除购物车
       [HttpPost]
       public int DelMyShoppingCar(string ids)
       {
           return new MyShoppingCarBLL().DelMyShoppingCars(ids);
       }

       //加减1
       [HttpPost]
       public int MyShoppingCarsUpDown(string id, string sType)
       {
           return new MyShoppingCarBLL().MyShoppingCarsUpDown(id, sType);
       }

   }
}

登录视图中的代码如下:

@{
   ViewBag.Title = "Login";
  
}
<h2>Login</h2>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script>

   //验证登录
   function LoginCheck() {
       var userid = $("#txtAmount").val();
       var pwd = $("#txtPwd").val();

       if (userid == "") {
           alert("账号不能为空！");
           return;
       }
       if (pwd == "") {
           alert("账号不能为空！");
           return;
       }


       $.ajax({
           url: '/Home/LoginValidate',
           type: 'post',
           dataType: 'json',
           data: { userid: userid, pwd: pwd },
           success: function (data) {
               if (data > 0) {
                   location.href = '/Home/Index';
               }
               else {
                   alert("账号或密码错误，请重新输入");
                   location.href = '/Home/Login';
               }
           }
       })
   }

</script>
<table border="1">
   <tr>
       <td>账号：</td>
       <td><input type="text" id="txtAmount" /></td>
   </tr>
   <tr>
       <td>密码：</td>
       <td><input type="password" id="txtPwd" /></td>
   </tr>
   <tr>
       <td colspan="2">
           <input value="登录" type="button" id="btnLogin" onclick="LoginCheck()"  />
       </td>
   </tr>
</table>

商品显示的视图代码如下:

@{
   ViewBag.Title = "Home Page";
   Layout = null;
}
<script src="~/Scripts/jquery-3.3.1.min.js"></script>

<script>

   //文档就绪函数
   $(function () {
       QueryList();
   })

   //收藏
   function MyFavorite() {
       var arr = document.getElementsByName("xselect");
       var str = "";
       for (var i = 0; i < arr.length; i++) {
           if (arr[i].checked)
               str += arr[i].id + ",";
       }
       //alert(str);
       $.ajax({
           url: '/Home/Favorite',
           type: 'post',
           dataType: 'json',
           data: { pnos: str },
           success: function (data) {
               if (data > 0)
                   alert("收藏成功！");
           }
       })
   }

   //加入购物车
   function MyShoppingCar() {
       var arr = document.getElementsByName("xselect");
       var str = "";
       for (var i = 0; i < arr.length; i++) {
           if (arr[i].checked)
               str += arr[i].id + ",";
       }
       //alert(str);
       $.ajax({
           url: '/Home/AddMyShoppingCar',
           type: 'post',
           dataType: 'json',
           data: { pnos: str },
           success: function (data) {
               if (data > 0)
                   alert("加入购物车成功！");
           }
       })
   }

   //转到我的购物车
   function ToMyShoppingCar() {
       location.href ='/Home/MyShoppingCar'
   }
   //查询信息
   function QueryList() {
       var content = $("#txtContent").val();

       $.ajax({
           url: '/Home/GetList',
           type: 'get',
           dataType: 'json',
           data: { pname: content },
           success: function (data) {
               $("#tbProduct").empty();
               for (var i = 0; i < data.length; i++) {
                   var tr = ' <tr>';
                   tr += ' <td>';
                   tr += '<img src="../' + data[i].ImgPath + '" />';
                   tr += '<br>';
                   tr += data[i].Price;
                   tr += '<br>';
                   tr += data[i].Pname;
                   tr += '<br>';
                   tr += '<input name="xselect" type="checkbox" id="' + data[i].Pno + '" />';
                   tr += ' </td>';

                   tr += "</tr>";
                   $("#tbProduct").append(tr);
               }
           }
       })
   }

</script>

<input type="text" id="txtContent" /><input value="查询" type="button" onclick="QueryList();" />&nbsp;<input value="收藏" type="button" onclick="MyFavorite();" />&nbsp;<input value="加入购物车" type="button" onclick="MyShoppingCar();" />&nbsp;<input value="我的购物车" type="button" onclick="ToMyShoppingCar();" />
<table id="tbProduct"></table>

购物车显示的视图代码如下:

@{
   ViewBag.Title = "MyShoppingCar";
  // Layout = null;
}

<h2>我的购物车</h2>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script>

   //文档就绪函数
   $(function () {
       QueryList();
   })   

   //全选
   function CheckAll(o) {
       var chks = document.getElementsByName("xselect");
       for (var i = 0; i < chks.length; i++) {
           chks[i].checked = o.checked;
       }
   }

   //批量删除
   function BathDel() {
       var chks = document.getElementsByName("xselect");
       var ids = "";
       for (var i = 0; i < chks.length; i++) {
           if (chks[i].checked)
               ids+=  chks[i].id+",";
       }
       $.ajax({
           url: '/Home/DelMyShoppingCar',
           type: 'post',
           dataType: 'json',
           data: { ids: ids },
           success: function (data) {
               if (data > 0) {
                   QueryList();
                   alert('删除成功！');
               }
           }
       })
   }

   //删除
   function DelBid(id) {      
       $.ajax({
           url: '/Home/DelMyShoppingCar',
           type: 'post',
           dataType: 'json',
           data: { ids: id },
           success: function (data) {
               if (data > 0) {
                   QueryList();
                   alert('删除成功！');
               }
           }
       })

   }

   //加减1
   function upDown(id, sType) {
       $.ajax({
           url: '/Home/MyShoppingCarsUpDown',
           type: 'post',
           dataType: 'json',
           data: { id: id, sType: sType},
           success: function (data) {
               if (data > 0) {
                   QueryList();                  
               }
           }
       })

   }

   //查询信息
   function QueryList() {

       $.ajax({
           url: '/Home/GetMyShoppingCarList',
           type: 'get',
           dataType: 'json',        
           success: function (data) {
               $("#tbProduct").empty();
               //拼接字符串
               for (var i = 0; i < data.length; i++) {
                   var tr = ' <tr>';

                   //商品
                   tr += ' <td>';
                   tr += '<input name="xselect" type="checkbox" id="' + data[i].Id + '" />&nbsp;';
                   tr += '<img src="../' + data[i].ImgPath + '" />';
                   tr += '<br>';
                   tr += data[i].Pname;
                   tr += ' </td>';

                   //单价
                   tr += ' <td>';
                   tr += data[i].Price;
                   tr += ' </td>';

                   //数量
                   tr += ' <td>';
                   tr += '<a href="javascript:upDown(' + data[i].Id + ',\'down\')">-</a><input type="text" value="' + data[i].Account + '"  style="width:20px" /><a href="javascript:upDown(' + data[i].Id + ',\'up\')">+</a>';
                   tr += ' </td>';

                   //小计
                   tr += ' <td>';
                   tr += data[i].TotalMoney;
                   tr += ' </td>';

                   //操作
                   tr += ' <td>';
                   tr += '<input type="button" value="删除" onclick="DelBid(' + data[i].Id+')" />';
                   tr += ' </td>';

                   tr += "</tr>";
                   $("#tbProduct").append(tr);
               }
           }
       })
   }

</script>
<table border="1" width="100%">
   <thead>
       <tr>
           <th>
               <input type="checkbox" onclick="CheckAll(this)" />全选&nbsp;商品
           </th>
           <th>
               单价
           </th>
           <th>
               数量
           </th>
           <th>
               小计
           </th>
           <th>
               操作
           </th>
       </tr>
   </thead>
   <tbody id="tbProduct">

   </tbody>
</table>
<input type="button" value="批量删除" onclick="BathDel()"/>

文章出处：https://www.cnblogs.com/bwxw/p/13381989.html

栏目列表