# e-commerce-manage

**Repository Path**: gitee_store/e-commerce-manage

## Basic Information

- **Project Name**: e-commerce-manage
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-14
- **Last Updated**: 2024-02-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue2, Vuex, Element-UI, yarn

## README

### git相关命令

  ## 创建提交项目相关命令

  1. 将要提交的文件或文件夹添加到暂存区
    + 添加所有文件命令：git add .
    + 添加单个文件命令：git add ./notes.md
  2. 为操作添加相关的描述
    + 添加描述命令：git commit -m "add files"
    - （注意：这是新建项目时的操作）（其中远程库的名字就是origin，这是git默认的叫法，也可以改成别的，但是origin这个名字一看就知道是远程库。）本地仓库与远程仓库进行同步命令：git remote add origin https://gitee.com/trojanpa/e-commerce-manage.git
  3. 拉取远程仓库的代码
    + git pull origin master
  4. 将本地仓库新增的的文件推送到远程仓库
    + git push origin master

  ## 其他相关命令

  + git init                                 ==》初始化一个本地仓库命令（用于记录所有与管理本仓库相关的文件，隐藏的.git文件不建议改动）
  - git status                               ==》查看当前未提交的内容
  + git checkout                             ==》创建分支、切换分支
  - git fetch                                ==》将远程仓库分支及分支最新版本代码拉取到本地
  + git branch                               ==》查看本地分支
  + git branch -r                            ==》查看远程分支
  + git branch -a                            ==》查看所有分支
  - git remote                               ==》查看已经存在的远程分支
  - git remote -v                            ==》查看关联的所有的远程仓储名称及地址
  - git remote remove "要删除的远程仓库名"    ==》删除本地指定的远程仓库
  + git log                                  ==》查看所有提交历史
  + git log --pretty=oneline --branches      ==》查看所有提交历史，一行展示
  + git log --pretty=oneline --branches -- src\assets\images\demo\  ==》查看某个目录的提交历史

  - git checkout master                      ==》本地分支切换到master
  - git checkout -b user                     ==》本地创建一个叫user的分支，并本地切换到该分支
  - git merge login                          ==》基于master分支把login分支的代码合并起来
  - git push                                 ==》》把本地的master分支推送到码云中

  + git checkout login                       ==》本地分支切换到login
  + git push -u origin login                 ==》(第一次推送要加-u)把本地的login分支推送到码云中的login分支中保存

  - git filter-branch -f --prune-empty --index-filter "git rm --cached --ignore-unmatch -fr ./src/assets/images/demo" -- --all   ==》删除./src/assets/images/demo目录的文件及其历史提交记录，然后使用下面的强制推送命令。–prune-empty会清除那些空的失去联系的历史记录，–tree-filter用于重写tree，也可以理解成修改历史里的文件，–index-filter的功能和–tree-filter一样，但比–tree-filter更快
  - git push origin master --force          ==》强制推送到仓库
  - 参考：https://www.jianshu.com/p/418d9422da9d
### 登录概述

## 登录业务流程
  1. 在登录页面输入用户名和密码
  2. 调用后台接口进行验证
  3. 通过验证之后，根据后台的响应状态跳转到项目主页

## 登录业务的相关技术点

  + http是无状态的
  + 通过后台接口进行验证
  + 通过session在服务端记录状态
  + 通过token方式维持状态

什么时候用cookie、session，什么情况下用token呢？
服务器与前端项目可能存在跨域的问题。
不存在跨域问题的时候：推荐使用cookie和session来记录登录状态
存在跨域问题的时候：使用token的方式来维持登录状态

## 登录——token原理分析（客户端与服务器存在跨域问题）

  1. 客户端：在登录页面输入用户名密码进行登录请求
  2. 服务器：通过验证后生成该用户的token并返回给客户端
  3. 客户端：获取到token后，存储该token
  4. 客户端：后续的所有请求都需要携带该token发送请求
  5. 服务器：验证token是否存在（根据提交过来的token进行验证你是哪个用户），然后根据你的操作返回不同的结果

## 登录功能实现

  1. 登录页面的布局（通过Element-UI组件实现布局）

    + el-form
    + el-form-item
    + el-input
    + el-button
    + 字体图标
  
  2. 利用token限制其他API接口访问权限
    + 将登录成功之后的token保存到客户端的sessionStorage中
    + 项目中除了登录之外的其他API接口，必须登录之后才能访问
    + token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
  
  3. 路由导航守卫控制访问权限

    + 如果用户没有登录，但直接提供URL访问特定页面，需要重新导航到登录页面。
    ```
    // 为路由对象添加beforeEach导航守卫
    router.beforeEach((to, from, next) => {
      // 如果用户访问的是登录页面，直接放行
      if (to.path === '/login') return next()
      // 从sessionStorage中获取到保存的token值
      const tokenStr = window.sessionStorage.getItem('token')
      // 没有token，强制跳转到登录页
      if (!tokenStr) return next('/login')
      next()
    })
    ```
  4. 退出功能实现原理
    + 基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样后续的请求就不会携带token，必须登录生成一个新的token之后才可以访问页面。
    ```
    // 清空token
    window.sessionStorage.clear()
    // 跳转到登录页面
    this.$router.push('/login')
    ```
### eslint格式问题
  1. 在项目根目录添加.prettierrc文件（JSON格式的）
  2. 配置.prettierrc文件
  ```
  semi设置成false 表示格式化时不自动加分号
  singleQuote设置成true 表示格式化时自动将双引号变成单引号
  ```
  3. .eslintrc.js文件配置
  ```
  "space-before-function-paren": 0 表示禁用在函数括号前一定要加空格的问题
  ```