用vue和node写的简易购物车实现

站长资源 2024/11/13 佚名

44 1538 44

富贵资源网 Design By www.hznty.com

项目介绍

这是用vue写前端，用node来接收前端发来的请求，然后进行相应的数据操作，例如数据的存取和删除等。这是个人的练习项目，目前功能做的比较简单，主要是展示商品列表，把商品加入购物车，从购物车删除商品三个小功能。

搭建本地环境

因为是用vue，需要用babel把es6语法转为es5语法。

1.配置.babelrc文件

{
 "presets": [
  "es2015",
  "stage-2"
 ],
 "plugins": ["transform-runtime"]
}

2.配置package.json文件

3.配置webpack.config.js文件。因为babel后的代码是遵循commonjs规范的代码，不能直接在浏览器上运行，需要用webpack打包成可直接运行的代码。

配置完成后运行 npm run build 和 webpack 命令。运行后会生成lib和dist文件夹。

文件目录

-dist
  -index
-lib
  -index.js
  -my_server.js
-src
  -component
    -list.vue
  -public
    -view
      -index.pug
    -index.js
    -my_server.js
-.babelrc
-package.json
-webpack.config.js

数据库使用mysql，仅有两张表，一张表存储的是商品id,商品名，商品图。另一张表存储的是用户id和商品id。

my_server.js 使用node的expres,mysql,path,pug模块，为了能解析http请求数据，还需要引入body-parser。

lib文件夹下的文件是babel生成的，src文件夹下的文件这是webpack打包后的文件。

购物车实例

今天优化了下，购物车首屏加载使用pug模板将数据直出到页面，提高加载速度。

1、连接数据库

var conn = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'root',
  database:'test',
  port: 3306
});
conn.connect();

2.初始化查询商品列表和购物车。商品列表数据是直出的，而购物车列表是用post请求的数据，后续会优化成数据直出到页面，减少http请求，加快页面加载速度。

index.pug首页模板

doctype html

  html(lang="en")
    head
      title= 'index'
    body
      div(id='app')
        app
    script.
     init_data= !{init_data};
    script(src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js')
    script(src='http://localhost:4444/index.js')

list.vue

<template>
  <div class="content_wrap">
    <div class="content_left">
      <h3>商品列表</h3>
      <div class="item" v-for="list in mess" @click="add_to_cart" data-id="{{list.f_id}}">
        <div class="img_wrap">
          <img :src='list.f_avatar' >
        </div>
        <span>{{list.f_name}}</span>
      </div>
    </div>
    <div class="content_right" id="content_right" @click="delete_item">
      <h3>购物车</h3>
      <div class="item" v-for="list in cart_mess" data-id="{{list.f_id}}">
        <div class="img_wrap">
          <img :src='list.f_avatar'>
        </div>
        <span>{{list.f_name}}</span>
        <div class="delete_layer">
          <p class="delete">删除</p>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  export default {
    
    },
    data(){
      return {
        mess:init_data,
        cart_mess:[]
      }
    },
    methods:{
     
    },
    init:function(){
      let self = this;
      //初始化购物车
      this.$http.post('/search_cart',{user_id:2333}).then(response => {
        if(response.data.errcode===0){
          let data = response.data;
          self.cart_mess = data.data;
        }
      }, response => {
        // error callback
      });
    }
  }
</script>

my_server.js

 //初始化查询商品列表
  app.get('/',function(req,res){
  var selectSQL = 'select * from t_list limit 4';
  conn.query(selectSQL, function (err2, rows) {
    if (err2) console.log(err2);
    var seach_result = JSON.stringify(rows);
    res.render('index',{//pug(jade)是express默认模板
      init_data:seach_result,
    });
  });
});

初始化查询购物车列表

这里逻辑是根据用户id查出商品id,再根据商品id查出商品信息添加到页面上

用promise写异步逻辑

app.post('/search_cart', function (req, res) {
  return new Promise(function(resolve){
    let return_data = {
      req :req
    };
    resolve(return_data);
  })
  .then(function(return_data){
    let user_id=return_data.req.body.user_id;
    let query = 'SELECT * FROM t_item_user WHERE f_uid = "htmlcode">

add_to_cart:function (e) {
    let item_id = parseInt(e.currentTarget.getAttribute('data-id'));//vue获取当前dom对象
    let data = {id:2333,item_id:item_id};
    $.ajax({
      type: "post",
      url: "/add_to_cart",
      dataType: "json",
      data: JSON.stringify(data),
      contentType: 'application/json',
      success: function (response) {
        if(response.errcode ===1 ){
          console.log('加入购物车成功');
          let div = document.createElement('div');
          div.setAttribute('class','item');
          div.setAttribute('data-id',item_id);
          let img_src;
          if(e.target.nodeName==='IMG'){
            img_src = e.target.getAttribute('src');
          }else if(e.target.nodeName==='SPAN'){
            img_src = e.target.previousSbiling.getAttribute('src');
          }
          let str = '<div class="img_wrap"> '+'<img src="/UploadFiles/2021-04-02/'+ img_src +'">

my_server.js接收请求 


app.post('/add_to_cart', function (req, res) {
  let request = req.body;
  let query = 'SELECT f_uid,f_item_id FROM t_item_user WHERE f_item_id = "_blank" href="https://github.com/yunhongyao/simple_shopping_cart" rel="external nofollow" >https://github.com/yunhongyao/simple_shopping_cart


完整代码下载：simple_shopping_cart_jb51.rar


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                
                                    vue实现购物车,vue实现购物车功能,vue,购物车 
                                富贵资源网 Design By www.hznty.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

富贵资源网 Design By www.hznty.com

评论“用vue和node写的简易购物车实现”

暂无评论...

用vue和node写的简易购物车实现

详谈jQuery中使用attr(), prop(), val()获取value的异同

ES6数组的扩展详解

评论“用vue和node写的简易购物车实现”

友情链接