Git Product home page Git Product logo

myshop's Introduction

coffeshop

邮箱正则：/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
配置vant
cnpm i vant -S

自动按需引入组件 (推荐)
cnpm i babel-plugin-import -D

babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

Rem 适配
cnpm i postcss-pxtorem lib-flexible -D

在postcss.config.js写入以下代码
module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

在main.js导入lib-flexible
import 'lib-flexible';

配置font-awesome字体图标库
cnpm i font-awesome --save

在main.js引入font-awesome的样式文件
import 'font-awesome/css/font-awesome.min.css'
配置axios
npm i axios vue-axios --save

在main.js引入
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
局部配置携带cookie
withCredentials 表示跨域请求时是否需要使用凭证
withCredentials: false, // 默认的

配置请求基础路径
axios.defaults.baseURL = 'http://192.168.48.131:10002'

全局配置请求时携带cookie
axios.defaults.withCredentials = true

配置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'

vue-cookies

参考链接 https://www.jianshu.com/p/60c13168cc8f

安装
npm i vue-cookies --save

使用
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

设置cookie
过期时间以秒为单位
this.$cookies.set(键名, 值, 过期时间)

  //修改底部按钮颜色
      // this.$nextTick(() => {

      //   let ele = document.querySelectorAll(".van-button--danger");
      //   let ele2 = document.querySelectorAll(".van-radio__icon");

      //   for (let i = 0; i < ele.length; i++) {
      //     ele[i].style.backgroundColor = "#1989fa";
      //     ele[i].style.border = "1px solid #1989fa";
      //   }
      // })
vscode 当前项目全局匹配 ctrl+shift+f

比如删除所有




vue-cli4 打包

1、删除路由的hisotry模式
2、保证vue项目没有任何vue抛出的警告或者错误
3、去除所有
4、在根目录下创建vue.config.js, 写入 module.exports = {publicPath: './'}
  注册接口
  请求地址：http://www.kangliuyong.com:10002/register
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    nickName: 昵称,
    password: 密码,
    phone: 手机号
  }

  登录接口
  请求地址：http://www.kangliuyong.com:10002/login
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    password: 密码,
    phone: 手机号
  }


  返回数据含有token
    token: 一个加密字符串
    token一般用于身份验证

    前端使用一个正确的账号和正确密码，向后台服务器换取一个合法token, 然后将token返回到前端，前端将token保存在cookie中，然后如果访问有关于用户个人信息的页面时，必须携带token到后台服务器验证，后台服务器验证通过，则放行，否则，则拦截操作
  banner接口
  请求地址：http://www.kangliuyong.com:10002/banner
  请求类型： GET
  请求参数： {
    appkey: 你的appkey
  }

  商品类型接口
  请求地址：http://www.kangliuyong.com:10002/type
  请求类型： GET
  请求参数： {
    appkey: 你的appkey
  }

  根据商品类型获取商品接口
  请求地址：http://www.kangliuyong.com:10002/typeProducts
  请求类型： GET
  请求参数： {
    appkey: 你的appkey,
    key: '商品类型键名',
    value: '商品类型值'
  }

  例如查看最新推荐商品
    {
      appkey: 你的appkey,
      key: 'isHot',
      value: 1
    },

  例如查看咖啡类型商品
    {
      appkey: 你的appkey,
      key: 'type',
      value: 'coffee'
    }
  查看商品详情接口
  请求地址：http://www.kangliuyong.com:10002/productDetail
  请求类型： GET
  请求参数： {
    appkey: 你的appkey,
    pid: 商品pid
  }
  收藏商品接口
  请求地址：http://www.kangliuyong.com:10002/like
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    pid: 商品pid,
    tokenString: token字符串
  }
  取消收藏商品接口
  请求地址：http://www.kangliuyong.com:10002/notlike
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    pid: 商品pid,
    tokenString: token字符串
  }
  查询收藏商品接口
  请求地址：http://www.kangliuyong.com:10002/findlike
  请求类型： GET
  请求参数： {
    appkey: 你的appkey,
    pid: 商品pid,
    tokenString: token字符串
  }
  查询用户所有收藏商品接口
  请求地址：http://www.kangliuyong.com:10002/findAllLike
  请求类型： GET
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串
  }
  添加购物车商品接口
  请求地址：http://www.kangliuyong.com:10002/addShopcart
  请求类型： POST
  请求参数： {
    pid: 商品pid,
    count: 商品数量,
    rule: 商品规格,
    appkey: 你的appkey,
    tokenString: token字符串
  }

  其中商品rule格式为: 无糖/默认奶油,

  返回值的
    {
      msg: '',
      code: '',
      status: ''
    }

  其中status = 0, 表示修改数量
      status = 1, 添加一条新的数据
  查询购物车商品总数量接口
  请求地址：http://www.kangliuyong.com:10002/shopcartCount
  请求类型： GET
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串
  }

  查询用户所有购物车商品接口
  请求地址：http://www.kangliuyong.com:10002/findAllShopcart
  请求类型： GET
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串
  }

  修改购物车商品数量接口
  请求地址：http://www.kangliuyong.com:10002/modifyShopcartCount
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    sid: 购物车唯一标识,
    count: 商品数量
  }

  删除 一个或者多个 购物车商品接口 该接口为：逻辑删除(假删除，数据仍在数据库中，但不能查询，以便后续客服手动恢复)
  请求地址：http://www.kangliuyong.com:10002/removeShopcart
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    sids: sid购物车唯一标识集合字符串
  }

  其中 sids 值为 JSON.stringify([sid1, sid2, sid3])

  删除 一个或者多个 购物车商品接口 该接口为：物理删除(真删除，数据不在数据库中)
  请求地址：http://www.kangliuyong.com:10002/deleteShopcart
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    sids: sid购物车唯一标识集合字符串
  }

  其中 sids 值为 JSON.stringify([sid1, sid2, sid3])

  获取购物车商品条目 (不是商品总数量)
  请求地址：http://www.kangliuyong.com:10002/shopcartRows
  请求类型： GET
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串
  }

  新增地址接口
  请求地址：http://www.kangliuyong.com:10002/addAddress
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    name: 姓名,
    tel: 电话,
    province: 省份,
    city: 市,
    county: 区县,
    addressDetail: 详细地址,
    areaCode: 地区编号,
    postalCode: 邮政编码,
    isDefault: 默认地址
  }

  其中 isDefault 的值只能为 0 或者 1, ==> 0: 非默认地址, 1: 默认地址

  删除地址接口
  请求地址：http://www.kangliuyong.com:10002/deleteAddress
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    aid: 地址唯一标识
  }

  查询地址接口
  请求地址：http://www.kangliuyong.com:10002/findAddress
  请求类型： GET
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串
  }

  编辑地址接口
  请求地址：http://www.kangliuyong.com:10002/editAddress
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串
    aid: 地址的唯一标识
    name: 姓名,
    tel: 电话,
    province: 省份,
    city: 市,
    county: 区县,
    addressDetail: 详细地址,
    areaCode: 地区编号,
    postalCode: 邮政编码,
    isDefault: 默认地址
  }

  其中 isDefault 的值只能为 0 或者 1, ==> 0: 非默认地址, 1: 默认地址

  根据地址aid查询地址接口
  请求地址：http://www.kangliuyong.com:10002/findAddressByAid
  请求类型： GET
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    aid: 地址的唯一标识
  }

  结算页面查询需要购买商品接口
  请求地址：http://www.kangliuyong.com:10002/commitShopcart
  请求类型： GET
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    sids: 购物车唯一标识集合
  }
  其中 sids 值为 JSON.stringify([sid1, sid2, sid3])
  立即结算接口
  请求地址：http://www.kangliuyong.com:10002/pay
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    sids: 购物车唯一标识集合,
    phone: 手机号,
    address: 收货地址,
    receiver: 收货人
  }

  其中 sids 值为 JSON.stringify([sid1, sid2, sid3])
  查询订单接口
  请求地址：http://www.kangliuyong.com:10002/findOrder
  请求类型： GET
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    status: 订单状态
  }


  其中 status 值为 0, 1, 2 ==> 0: 全部，1: 待收货，2: 已收货
  确认收货接口
  请求地址：http://www.kangliuyong.com:10002/receive
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    oid: 订单oid
  }

  删除订单接口
  请求地址：http://www.kangliuyong.com:10002/removeOrder
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    oid: 订单oid
  }

  我的接口
  请求地址：http://www.kangliuyong.com:10002/findMy
  请求类型： GET
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串
  }

  账号管理接口
  请求地址：http://www.kangliuyong.com:10002/findAccountInfo
  请求类型： GET
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串
  }

  修改昵称接口
  请求地址：http://www.kangliuyong.com:10002/updateNickName
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    nickName: 你的昵称
  }

  修改简介接口
  请求地址：http://www.kangliuyong.com:10002/updateDesc
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    desc: 简介
  }

  修改密码接口
  请求地址：http://www.kangliuyong.com:10002/updatePassword
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    password: 新密码
    oldPassword: 旧密码
  }

  退出登录接口
  请求地址：http://www.kangliuyong.com:10002/logout
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串
  }

  注销账号接口
  请求地址：http://www.kangliuyong.com:10002/destroyAccount
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串
  }

  上传头像接口
  请求地址：http://www.kangliuyong.com:10002/updateAvatar
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    imgType: 图片类型jpg,jpeg,png.....
    serverBase64Img: 图片base64码
  }

  上传用户背景接口
  请求地址：http://www.kangliuyong.com:10002/updateUserBg
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    tokenString: token字符串,
    imgType: 图片类型jpg,jpeg,png.....
    serverBase64Img: 图片base64码
  }

  获取邮箱验证码接口
  请求地址：http://www.kangliuyong.com:10002/emailValidCode
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    email: 接收验证码邮箱
  }

  验证码验证接口
  请求地址：http://www.kangliuyong.com:10002/checkValidCode
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    validCode: 你的验证码
  }

  找回密码接口
  请求地址：http://www.kangliuyong.com:10002/retrievePassword
  请求类型： POST
  请求参数： {
    appkey: 你的appkey,
    phone: 注册时的手机号,
    password: 新密码
  }

myshop's People

Contributors

qianshengzi avatar

Watchers

James Cloos avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.