# 毕业设计电商

**Repository Path**: aidayouxidecxy/graduation-project-e-commerce

## Basic Information

- **Project Name**: 毕业设计电商
- **Description**: 毕业设计
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-28
- **Last Updated**: 2021-12-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# app

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

1)lodash防抖(debounced)与节流(throttle)  不用npm安装，vue项目自带有
2)nprogress 加载进度条 npm install --save nprogress
3)mockjs 模拟接口数据  npm install --save mockjs
    创建mock文件夹
    添加假的数据(你需要模拟的数据，json格式)
    把mock数据需要的图片放到public文件夹下
    创建mockServer.js文件，通过mockjs插件实现模拟数据
    把mockServer.js引入入口文件中至少执行一次，否则不能mock
4)安装swiper,npm install --save swiper@5  //5版本更稳定
    在组件中引入包
    在main.js中引入样式
    因为是要等待接口数据，所以用watch+nextTick监听bannerList的数据变化
    nextTick(将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。)

5)监听数据watch
    可以保证数据一定ok，但不能保证v-for遍历结构是否完事

6)产品信息的数据，【比较复杂：skuInfo】，通过会话存储（不持久化，会话结束数据再消失）
  本地存储|会话存储，一般存储的是字符串，需要把对象变为字符串存储(json),不能存储对象
  sessionStorge.setItem('SKUINFO',JSON.stringify(this.skuInfo));
  //获取存储数据
  computed:{
      skuInfo(){
        return JSON.parse(sessionStorage.getItem('SKUINFO'))
      }
    }
7)uuid临时游客身份获取购物车数据（解决方案）（项目自带）
  npm => uuid

8)判断复选框是否被选中（数组every方法）
      isAllChecked(){
        return this.cartInfoList.every(item=>item.isChecked==1)//只要有一个为false，就返回false
      }
9)注册业务
9.1注册业务|登录业务中表单验证先不处理【统一最后一天处理】
9.2获取验证码的接口   /api/...

10)登录业务
10.1注册---通过数据库储存用户信息（名字，密码）
10.2登录---登录成功的时候，后台为了区分你这个用户是谁-服务器下发token【令牌：唯一标识符】
登录接口做的不完美，一般登录成功服务器会下发token，前台持久化储存token，【带着token找服务器要用户信息进行展示】

10.3令牌理解：

11)退出登录
发送get请求，清除store中userInfo和token，以及本地存储的token（且要注意成功之后页面跳转home页面）

12）导航守卫
比如：用户已经登录，，用户不应该还能login页面

全局守卫：紫禁城大门守卫
路由独享守卫：去皇帝，太后，爱妃路上的守卫
组件内守卫：皇帝，太后，爱妃院子里的守卫

//13700000000 111111通用账号密码

13)微信支付的实现
后台返回微信支付链接
二维码图片地址src生成：qrcode插件（git找||npm）
前端使用elementui弹出框(能插入html内容)

14)全局守卫
未登录不能访问，交易相关（trade），支付相关（pay，paysuccess）、个人中心（center）

15)图片懒加载(Vue-Lazyload)
封装lazy插件
lazyload.js

16)vee-validate（表单验证插件）注册|登录页面
2.x版本的使用更简单
封装vue-validate.js
例子:<input type="text" placeholder="邮箱/用户名/手机号" v-model="phone" name='phone' v-validate="{require:true,regex:/^1\d{10}$/}" :class="{invoid:errors.has('phone')}">
错误提示信息
<span class="error-msg">{{errors.first("phone")}}</span>
密码regex一般是8-20字符

写完还需要判断，输入格式没问题后提交表单
async userRegister(){
        const success=this.$calidator.validateAll()
        if(success){
          try {
          //如果成功--路由跳转
          const {phone,code,password,password1}=this;
          //const phone=this.phone,code=this.code,password=this.password,password1=this.password1;
          (phone&&code&&password==password1) && await this.$store.dispatch('userRegister',{phone,code,password})
          this.$router.push('/login')
        } catch (error) {
          alert(error.message);
        }
        }
      }

17)路由懒加载
import('./Foo.vue') // 返回 Promise
第一种：const Foo = () => import('./Foo.vue')
第二种：component：（）=>import('...')
18)打包上线
项目打包后，代码都是经过加密的，如果运行时报错，输出的错误信息无法准确得知哪里的代码报错
有了 map 文件就可以像未加密的代码一样，准确的输出是哪一行那一列有错
改文件如果项目不需要可以去除掉
vue.config.js
productionSourceMap:false

19)服务器
Xshell6控制服务器
Xftp7可以往远程服务器上传项目