效果
-
主页
-
购物车
-
用户界面
-
商品详细介绍
-
实现方法
- 项目前端采用了jquery,并还引入了轮播图插件swiper用来制作轮播效果
- 用户进入主界面时,前端采用ajax技术向后端请求轮播图和商品信息
- 用户点击搜索时,后端根据用户搜索返回相应信息
- 在商品信息页面,客户可以加入购物车,也可以点击进去查看商品,这里通过绑定点击事件直接将商品id传入,以便后续使用
- 再加入购物车时,需要判定一下购物车是非存在该商品
- 在购物车页面,用户可以增加,减少,删除,这个通过拿到text里面的值,点击加时就加一并将值重新赋给text文本框
- 用户可以点击登录或注册完成登录,这里通过ajax向后台发送请求时要携带输入框中内容
- 判定当用户登陆后,拿到后台给的信息并渲染欢迎页面
- 后端在主页面需要解决跨域问题,封装res.send信息,并且需要收集错误信息并判断出错内容
- 在路由代码模块,需要引入模式验证,对前端传来的用户名,密码,id进行模式验证,强度验证
- 在路由处理中,注册用户名时需要先对用户名进行判定是否已经存在该用户名,判定没有该用户才将用户名和密码存入数据库中
- 搜索处理中,拿到前端传入的信息进行比较,正确后向数据库进行查询
前端
- 主界面
-
HTML
Document 云点餐项目<!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <div class="specificFunctions"></div> <div class="render"> </div> </div> <div id="foot"> <span class="iconfont icon-dingdan"></span> <span class="iconfont icon-gouwuche"></span> <span class="iconfont icon-yonghu"></span> </div> <script src="../lib/swiper8/swiper-bundle.min.js"></script> <script src="../js/jquery.js"></script> <script src="../js/index.js"></script>
-
JS
//获取轮播图信息
function getBanner(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ide"><img src="{item.url}">
`
}).join(‘’)
$(‘.swiper-wrapper’).html(bannerStr)
//渲染完成后初始化轮播图
var mySwiper = new Swiper (‘.swiper’, {
direction: ‘horizontal’, // 垂直切换选项
loop: true, // 循环模式选项
autoplay:true,
// 如果需要分页器
pagination: {
el: ‘.swiper-pagination’,
},// 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }) } } })
}
//渲染商品列表
function render(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: … <img src="{item.url}" οnclick=shoplist( i t e m . i d ) > < d i v > < p > {item.id})> <div> <p> item.id)><div><p>{item.product}
¥ i t e m . i d < / p > < / d i v > < s p a n c l a s s = " i c o n f o n t i c o n − g o u w u c h e " d a t a − i n d e x = " {item.id}</p> </div> <span class="iconfont icon-gouwuche" data-index=" item.id</p></div><spanclass