# Shop

**Repository Path**: xumianqu/shop

## Basic Information

- **Project Name**: Shop
- **Description**: 构建商城后台管理
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-27
- **Last Updated**: 2022-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Shop

#### 介绍
构建商城后台管理

技术知识点回归 

问:http请求一般放在哪一个生命周期钩子函数中

生命周期钩子函数 一般可以用于created,beforeMount,mounted中调用，因为这三个钩子函数中，data已经创建，可以将服务器返回的数据进行赋值，但推荐created钩子函数调用异步请求，更快获取服务端数据，减少loading时间。

elementui中的表格可以增加一列索引列

```vue
<el-table-column type="index"></el-table-column>
```

插槽知识点复习

- **默认插槽**的话直接在子组件的标签内写入内容即可
- **具名插槽**是在默认插槽的基础上加上`slot`属性，值为子组件插槽`name`属性值
- **作用域插槽**则是通过`slot-scope`获取子组件的信息，在内容中使用。这里可以用解构语法去直接获取想要的属性

一层创建分支和合并的过程

- git branch 查看当前所在的分支

- git checkout -b user    -b创建新分支 checkout将分支切换过去

- git status 查看工作区修改代码 

- git add . 将修改代码添加到暂存区 
- git commit -m '对本次代码功能描述'
- git push -u origin user 将本地user分支推送到远程仓库的user分支上
- git checkout master切回到master分支 
- git merge user  在master分支对user分支做出合并操作
- git push 将代码推送到远程仓库

#### 软件架构
技术栈 Vue + Elementui + Vue-Router 

完成任务列表 

路由文件 router.js

main.js  创建VM实例，配置axios

1.login.vue 登录页面

2.Home.vue 首页页面 

​	main部分做路由切换 

​			2.1 Welcome.vue 首页页面的main

​			2.2 User.vue 首页页面的main部分

​					2.2.1完成面包屑导航

​					2.2.2完成用户列表页









技术实现详细细节

main.js入口文件

```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入字体图标
import './assets/fonts/iconfont.css'
// 导入全局样式表
import './assets/css/global.css'
import axios from 'axios'
// 配置请求的跟路径,文档地址 https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html
// 再vue的原型链上配置axios库,默认的baseurl路径
axios.defaults.baseURL = 'url'
// 设置请求拦截器,每次请求的时候都要带上token
axios.interceptors.request.use(config => {
  const token = window.sessionStorage.getItem('token')
  // 挂载config中的headers的authorization
  config.headers.authorization = token
  return config
})
Vue.prototype.$http = axios
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

```

1.登录页面

维护状态: 账号信息字段，密码信息字段 

样式:用到的组件为header,form,form-item,button,input,其中,对form动态绑定 rules,对输入的账号密码进行验证及其提示信息。表单元素input等使用v-modal指令进行双向绑定,v-bind是单向单向，组件动态属性随着data的值随时更新。v-modal底层实现实现也是:bind + 绑定监听事件对值进行修改。

功能函数：

表单重置，在form上绑定ref，调用组件resetFields()方法对表单进行重置

登录请求：先调用表单的validate方法， 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。Function(callback: Function(boolean, object)),因为我们要发送网络请求，传入的是一个异步函数，去接受validate校验方法传回来的第一个参数，为true情况下发送http请求。

对于登录状态的身份识别用到token，存放到会话缓存中,axios设置请求拦截器,请求头config.headers.authorization = 从会话缓存读取token。在路由配置文件中加入路由守卫，当想访问需要登录

状态后的路径时，路由退回到login

```js
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  //     next()  放行    next('/login')  强制跳转
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})
```

2.首页页面

3.用户页面

用到UI组件，面包屑，Card，grid栅格系统，