23-Beego优选添加购物车

上一篇文章我们讲了如何添加购物车,并将用户购物车中商品数量显示在界面上,但是如果没有执行添加操作,新进入的页面是不会传入购物车商品数量的,所以要在Get方法中传出购物车商品数量,这里我们会用函数来提高代码复用率,同时,在讲了AJAX传递JSON格式数据的时候,我们就实现了前后端分离,从前端传回JSON格式数据,再从后端传去JSON数据,这样不用重新刷新界面,实现局部数据的更新,也实现了前后端的分离,我们来回顾一个web应用程序,首先是简历models数据库模型,然后实现数据库中表数据的增删改查,AJAX前后端分离,基本学完购物车的添加,我们就熟悉了整个web应用程序开发流程,这篇文章,将更加详细的讲解上一章的内容,从中要深刻体会前后端分离的思想,以及整个web应用程序开发流程

效果图.gif

0.url

http://redisdoc.com/
https://beego.me/docs/mvc/controller/jsonxml.md

1.新知识点

1.利用AJAX发送异步请求,不用刷新界面,可以改变界面的局部内容,go/beego专门用于做服务端,前端用以前的写,通过AJAX/AXIOS发送请求
2.通过Beego创建一个API项目,不用于之前的混合开发,专门用于后端开发,执行指令
bee api applicationname
此项目专门用于返回接口数据

image.png

3.beego返回JSON数据

image.png

过去返回的是模板,直接在界面上渲染,现在返回的是JSON格式数据和过去请求的API是一样的,是通过data.key调用,如下:

image.png

4.通过自定义属性传值
获取商品id有两种传值方式
4.1隐藏输入框

image.png

image.png

4.2自定义属性

image.png

image.png

5.修改界面元素数据

image.png

image.png

6.如果要在函数中调用c中的方法需要传控制器参数

image.png

image.png

image.png

2.逻辑注意点

1.Redis数据存储格式

image.png

哈希存储,能够保证每一个用户对应一个键,商品Id不重复添加
2.返回的错误都要处理
2.1会话错误

image.png

2.2存储数据失败

image.png

3.如果要对Redis中的数据进行操作必须先建立链接

3.语法注意点

1.会话传递过来的数据默认是interface{},在传递给数据库模型的时候要断言强制转换为指定的数据格式

image.png

2.从Redis数据库中获取的数据默认是interface{},要强制转换为需要的类型,Redis数据库操作包括存储,类型转换

image.png

4.代码优化

封装函数

一.前端

1.获取goodsId
2.监听购物车按钮点击
2.1当前商品Id
2.2当前商品数量
2.3利用AJAX发送异步请求

image.png

image.png

image.png

二.后端

1.获取传递过来的数据

2.将用户需要购买的商品存储起来
2.1建立Redis链接
2.2关闭链接
2.3通过Do执行指令

image.png

image.png

image.png

三.界面显示当前用户购物车数据

由于上一篇文章通过普通的get控制器,无法显示购物车数量,所以我们在后天要将购物车数量传递给get控制器,显示在前台
1.创建函数用于返回购物车数量
1.1获取当前用户
1.2查询当前用户购物车数量(相当于求哈希表的长度)
1.3返回值
2.在get方法总调用该函数
3.在界面显示模板数据

image.png

image.png

image.png