ZhChen7/ShoppingCart

购物车

大三web课期末实训 --- 购物车

创建时间： 2019/11/04

完成时间：

作者：周琛

本项目采用 前后端分离 ，本人同时撰写客户端（vue.js）和服务端（node.js）代码（数据库采用：mysql）

技术栈

前端：HTML5、CSS3、Sass、ES6(7|8)、Webpack4、Vue CLI 3、Vue.JS2.6.10、Vuex3.0.1、Vue Router3.1.3、Axios0.19.0

后端：Node.js（express ）、MySQL

说明

这个作品分为客户端和服务端2 个目录文件 --- > 需要 分别运行 。

亮点：

优势：前后端分离

前端目录：（vuecli3 构建、技术：vue）

启动： npm run serve 运行端口： 8080

服务端目录：（node.js , 使用框架 express）

启动： node app.js 运行端口： 3000

解决难题汇总

使用 vuecli3 构建项目时 sass 的选择问题
使用 bootstrap ，再vue项目中使用 bs 的问题（建议：尽量用 vue的ui框架，如：Element、Vuetify等...）

前后端交互式，同源策略的问题

解决方案： proxy

根目录下建立 vue.config.js 文件

const webpack = require("webpack");

module.exports = {
  devServer: {
    proxy: {
      '/api': { 
        target: 'http://192.168.1.109:3000/', //对应自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
      })
    ]
  }
}

监听路由变化问题

mounted() 和 watch 方法 配合使用 的使用

 mounted(){
      this.id = this.$route.params.id
      this.getHomeInfo(this.id)
      this.id=null
    },
    watch: {
      '$route' () {
        this.id = this.$route.params.id
        if(!this.id){
            return
        }
        this.getHomeInfo(this.id)
      }
    },

连接 mysql

const mysql = require('mysql');

//执行数据操作、 封装、暴露方法
module.exports = {
    query: function (sql, params, callback) {
        //1.创建链接
        const connection = mysql.createConnection({
            host: 'localhost',
            user: 'root',
            password: '123456',
            database: 'threeweb'
        });
        //每次使用的时候需要创建链接，数据操作完成之后要关闭连接
        connection.connect(function (err) {
            if (err) {
                console.log('数据库链接失败');
                throw err;
            }
            //开始数据操作
            //传入三个参数，第一个参数sql语句，第二个参数sql语句中需要的数据，第三个参数回调函数
            connection.query(sql, params, function (err, results, fields) {
                if (err) {
                    console.log('数据操作失败');
                    throw err;
                }
                //将查询出来的数据返回给回调函数
                callback && callback(results, fields);
                //results作为数据操作后的结果，fields作为数据库连接的一些字段
                //停止链接数据库，必须再查询语句后，要不然一调用这个方法，就直接停止链接，数据操作就会失败
                connection.end(function (err) {
                    if (err) {
                        console.log('关闭数据库连接失败！');
                        throw err;
                    }
                });
            });
        });
    }
};

使用 axios （类似于 ajax ）

import axios from 'axios'

    mounted(){
      this.id = this.$route.params.id
      this.getHomeInfo(this.id)
    },
    methods:{
      getHomeInfo(){
        axios.get('/api/his?',{
          params:{
            id:this.id
          }
        })
          .then((res) =>this.getHomeInfoSucc(res))
      },
      getHomeInfoSucc(res){
        // console.log(res.data)
        if(res.data){
          this.Cartshowintro = res.data
        }
        console.log(this.Cartshowintro)
      }
    }

注意： 子组件无法修改父组件传来的值（ props里面的值无法修改）

解决方案：可以通过触发（$emit ）来解决父子组件间传值的问题
```
addnum(index){
    this.$emit('func1',index)
}
```
结算页面复杂逻辑

 methods:{
      addnum(index){
        this.$emit('func1',index)
        this.selectid(this.list.result[index],index,true)
      },
      reducenum(index){
        this.$emit('func2',index)
        this.selectid(this.list.result[index],index,true)
      },
      selectid(key,index,numflag){
        let tprice=0

        if (!key.isChecked) {
          if(numflag){
            return
          }

          this.$set(key, 'isChecked', true);
          var obj={
            id:key.id,
            price: key.cartnum * key.cartprice
          }

          this.sum.push(obj)
          console.log(this.sum)

          this.sum.forEach((item) =>{
            tprice+=item.price
          })

          this.totalsum = tprice
          // console.log(tprice)
          return;
        }

        if(numflag){
          this.sum[index].price =  key.cartnum * key.cartprice
          this.sum.forEach((item) =>{
            tprice+=item.price
          })
          this.totalsum = tprice
          return
        }

        console.log(index)
        key.isChecked = !key.isChecked
        this.sum.splice(index,1)
        console.log(this.sum)


        this.sum.forEach((item) =>{
          tprice+=item.price
        })
        this.totalsum = tprice
        console.log(tprice)
      }
    }

解决用户登录注册成功后跳转到首页的相关显示问题

解决方案： vuex

ZhChen7 / ShoppingCart

购物车

技术栈

说明

亮点：

解决难题汇总

效果

About

Languages