前端（jquery）+ 后端（nodeJS）+数据库（mysql）实现云点餐

效果

1. 主页
   

2. 购物车
   

3. 用户界面
   

4. 商品详细介绍
   

5. 实现方法

• 项目前端采用了jquery，并还引入了轮播图插件swiper用来制作轮播效果
• 用户进入主界面时，前端采用ajax技术向后端请求轮播图和商品信息
• 用户点击搜索时，后端根据用户搜索返回相应信息
• 在商品信息页面，客户可以加入购物车，也可以点击进去查看商品，这里通过绑定点击事件直接将商品id传入，以便后续使用
• 再加入购物车时，需要判定一下购物车是非存在该商品
• 在购物车页面，用户可以增加，减少，删除，这个通过拿到text里面的值，点击加时就加一并将值重新赋给text文本框
• 用户可以点击登录或注册完成登录，这里通过ajax向后台发送请求时要携带输入框中内容
• 判定当用户登陆后，拿到后台给的信息并渲染欢迎页面
• 后端在主页面需要解决跨域问题，封装res.send信息，并且需要收集错误信息并判断出错内容
• 在路由代码模块，需要引入模式验证，对前端传来的用户名，密码，id进行模式验证，强度验证
• 在路由处理中，注册用户名时需要先对用户名进行判定是否已经存在该用户名，判定没有该用户才将用户名和密码存入数据库中
• 搜索处理中，拿到前端传入的信息进行比较，正确后向数据库进行查询

前端

1. 主界面

• HTML

  云点餐项目
          <!-- 如果需要导航按钮 -->
          <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($item.id)><div><p>${item.product}

  
  

  ￥$item.id</p></div><spanclass$