Vue2.0 项目实战篇-学不会算我的

#npm安装脚手架:
npm i @vue/cli -g		#以及安装,请忽略;

#使用: vue-cli 创建项目:
vue create shop-project	#选择Vue2版本、依赖配置:es6-es3、路由、less/css、eslint校验格式 感觉没啥用)
#Use history mode for router!  		==>		是否使用history模式;
#Pick a CSS pre-processor 			==>		选择css预处理;
#Pick a linter/formatter config		==>		选择eslint的风格;
#Pick a additional lint features	==>		选择校验的时机: Lint a save 开启保存即校验;
#Where do you prefer placing config for Babel ESlint etc? 配置文件的生成方式>In dedicated config files
#Save this as a preset for future projects? 是否保存预设，下次直接使用> 不保存,输入 N

#Vue 2项目安装 Vant2
npm i vant@latest-v2 -S
yarn add vant@latest-v2		#省略...脚手架、CDN安装;

//mainJS中引入Vant全部组件,注册至全局使用;
import 'vant/lib/index.css';
import Vant from 'vant';
Vue.use(Vant)

//它会在编译过程中将 import 的写法自动转换为按需引入的方式
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

//mainJS中按需引入Vant组件,注册至全局使用;
import { Button,Slider } from 'vant';
Vue.use(Button);
Vue.use(Slider);

import Vue from 'vue'
import { Button, Icon } from 'vant'
Vue.use(Button)
Vue.use(Icon)

npm install postcss-px-to-viewport --save-dev	#npm  安装、或
yarn add postcss-px-to-viewport --dev			#yarn 安装

module.exports = {
  plugins: {
	//适配的标准屏的宽度 iphoneX:375    
    'postcss-px-to-viewport': {
      viewportWidth: 375,
        /**     更多配置
        viewportHeight: 1334, 	// 可选，设计稿高度
        unitPrecision: 5, 		// 转换后的vw单位的小数位数
        viewportUnit: 'vw', 	// 转换的目标单位
        selectorBlackList: [], 	// 不转换选择器列表
        minPixelValue: 1, 		// 小于1px的值不转换
        mediaQuery: true, 		// 是否转换媒体查询中的px
        replace: true, 			// 是否直接替换px单位
        exclude: [/node_modules/], // 排除某些文件夹下的文件 		*/
    },
  },
};

my-app/
│
├── src/
│   ├── router/               		# 定义路由组件配置
│   │   ├── index.js
│   ├── views/                     	# 定义路由模块页面
│   │   ├── login/						#登录模块
│   │   │   │   ├── index.vue
│   │   └── layout/						#首页模块——内涵多个二级子模块;
│   │   │   │   ├── index.vue
│   │   │   │   ├── 首页.vue
│   │   │   │   ├── 我的.vue
│   │   │   │   ├── 购物车.vue
│   │   │   │   ├── 分类页.vue
│   │   └── pay/						#支付模块
│   │   │   │   ├── index.vue
│   │   └── sarch/						#搜索模块--内有搜索页、搜索列表页一级目录
│   │   │   │   ├── index.vue
│   │   │   │   ├── list.vue
│   │   └── myorder/					#订单模块
│   │   │   │   ├── index.vue
│   │   └── prodetail/					#商品模块——商品详情页,描述固定商品所以需要传递ID
│   │   │   │   ├── index.vue
│   ├── App.vue                     # 主页面
│   ├── main.js                     # 主配置文件

//省略导入路由配置:
const router = new VueRouter({
  routes: [
    // '/' 表示默认页
    { path: '/', component: Layout },
    { path: '/login', component: Login },
    { path: '/search', component: Search },
    { path: '/searchlist', component: SearchList },
    // 动态路由传参，确认将来是哪个商品，路由参数中携带 id
    { path: '/prodetail/:id', component: ProDetail },
    { path: '/myorder', component: MyOrder },
    { path: '/pay', component: Pay }
  ]
})

import Vue from 'vue'
import { Button,Slider,Tabbar,TabbarItem } from 'vant';
Vue.use(Button);
Vue.use(Slider);
Vue.use(Tabbar);
Vue.use(TabbarItem);

<template>
  <div>
    <!-- 二级路由的位置 -->
    <router-view></router-view>
    <!-- active-color	选中标签的颜色\inactive-color	未选中标签的颜色 -->
    <van-tabbar route active-color="#ee0a24" inactive-color="#000">
      <!-- 通过 icon 插槽自定义图标 -->
      <!-- 标签栏支持路由模式，用于搭配 vue-router 使用
           路由模式下会匹配页面路径和标签的 to 属性,并自动选中对应的标签 -->
      <van-tabbar-item to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/category" icon="apps-o">分类页</van-tabbar-item>
      <van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
  export default { name: 'LayoutIndex' }
</script>
<style></style>

//src/styles/common.less 项目全局样式配置
//去除内外边距、盒子样式
* { margin: 0; padding: 0; box-sizing: border-box; }
//文字溢出省略号样式
.text-ellipsis-2 {
  overflow: hidden; -webkit-line-clamp: 2;
  text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;
}
//Vant导航通用样式
.van-nav-bar {
  //设置头部导航 < 颜色;
  .van-nav-bar__arrow { color: #333; }
}

/** 封装axios 
 *  后端基地址: https://smart-shop.itheima.net/index.php?s=/api */
import axios from 'axios'
// 创建 axios 实例，将来对创建出来的实例，进行自定义配置
// 好处：不会污染原始的 axios 实例
const instance = axios.create({
    baseURL: 'https://smart-shop.itheima.net/index.php?s=/api/',
    timeout: 5000
})
 
// 自定义配置 - 请求/响应 拦截器
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么 (默认axios会多包装一层data，需要响应拦截器中处理一下)
    return response.data;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数
    return Promise.reject(error);
})

// 导出配置好的实例
export default instance

<template>
  <div class="login">
	    <!-- ..省略部分代码.. -->
        <div class="form-item">
          <input class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">
          <img v-if="picUrl" :src="picUrl" @click="getPicCode">
        </div>
      	<!-- ..省略部分代码.. -->
    </div>
  </div>
</template>
<script>
  //导入request封装的axios模块;
  import request from '@/utils/request'

  export default { 
    name: 'LoginPage',
    //钩子函数页面初始化,获取验证码图片;
    async created () { this.getPicCode() },
    data(){ return { picUrl: '', picKey: '' } },
    methods: {
      //获取验证码图片;
      async getPicCode () {  
        const { data:{ base64,key }} = await request.get('/captcha/image');  //解构赋值获取图片信息;
        this.picUrl = base64
        this.picKey = key
    },
    }
  }
</script>

import request from '@/utils/request'

// 获取图形验证码
export const getPicCode = () => {
  return request.get('/captcha/image')
}

//导入api/login.js 登录接口模块,并选择需要的函数对象引入
import { getPicCode } from '@/api/login'

//获取验证码图片;
async getPicCode () {  
    const { data:{ base64,key }} = await getPicCode();  //调用登录接口模块接口函数;
    this.picUrl = base64
    this.picKey = key
},

export const getMsgCode = (captchaCode, captchaKey, mobile) => {
  return request.post('/captcha/sendSmsCaptcha', {
    form: { captchaCode, captchaKey, mobile }
  })
}

//导入api/login.js 登录接口模块,并选择需要的函数对象引入
import { getPicCode,getMsgCode } from '@/api/login'
//省略部分代码....
export default {
    //省略部分代码....
	methods: {
        //点击:获取验证码
        async getCode () {  
          //验证手机号码合法性
          if (!this.validFn()) { return }
          //避免重复倒计时,发送请求: 
          //判断当前目前没有定时器开 且 totalSecond 和 second 一致秒数归位)
          if (!this.timer && this.second === this.totalSecond) {
            //发送请求...开启倒计时1000毫秒触发1次;
         	await getMsgCode(this.picCode, this.picKey, this.mobile)
	        this.$toast('短信发送成功，注意查收')
            //每秒-1 秒到至≤0 清理定时器,重置数据;
            this.timer = setInterval(() => {
              this.second--                         
              if (this.second <= 0) {     
                clearInterval(this.timer);
                this.timer = null // 重置定时器 id
                this.second = this.totalSecond // 归位
              }
            }, 1000)
          }
        },
    }
}

export const codeLogin = (mobile, smsCode) => {
  return request.post('/passport/login', {
    form: {
      isParty: false,   //是否存在第三方用户信息  
      partyData: {},    //三方登录信息
      smsCode,          //短信验证码
      mobile,           //手机号
    }
  })
}

//<input class="inp" placeholder="请输入短信验证码" type="text" v-model="msgCode" >
//<div class="login-btn" @click="login" >登录</div>
//省略.... v-model表单元素、登录按钮注入函数;

//导入api/login.js 登录接口模块,并选择需要的函数对象引入
import { getPicCode,getMsgCode,login } from '@/api/login'
//省略部分代码....
export default {
    //省略部分代码....
	methods: {
        //点击:登录
        async login(){
          if (!this.validFn()) { return }             //校验手机\图形验证码;
          if (!/^\d{6}$/.test(this.msgCode)) {        //校验短信;
            this.$toast('请输入正确的手机验证码')
            return
          }
          await codeLogin(this.mobile, this.msgCode); //登录请求;
          this.$toast('登录成功');
          this.$router.push('/');                     //路由首页;
        }
    }
}

const res = await codeLogin(this.mobile, this.msgCode); //登录请求;
if( res.status!=200 ){ return this.$toast('接口异常、登录失败'); }

// 自定义配置 - 请求/响应 拦截器
// 添加请求拦截器: 添加 loading 效果
instance.interceptors.request.use(function (config) {
    Toast.loading({
      message: '加载中...',
      forbidClick: true,      // 禁止背景点击
      duration: 0,            // 不会自动消失
      loadingType: 'spinner', // 配置loading图标
  })
    return config
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
})

// 添加响应拦截器: 处理接口异常情况\关闭 loading
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数
  // 对响应数据做点什么 (默认axios会多包装一层data，需要响应拦截器中处理一下)
  const res = response.data;
  if (res.status !== 200) {
    Toast(res.message);   //Toast给错误提示
    return Promise.reject(res.message);   //抛出一个错误的promise
  } else {
    // 正确情况，直接走业务核心逻辑，清除loading效果
    Toast.clear()
  }
  return res;
  }, function (error) {
    //超出 2xx 范围的状态码都会触发该函数,对响应错误做点什么;
    return Promise.reject(error)
})

export default {
  namespaced: true,
  state () {
    return {
      // 个人权证相关
      userInfo: { token: '', userId: '' }
    }
  },
  mutations: {
    //用于组件修改userInfo信息;
    setUserInfo (state, obj) { state.userInfo = obj }
  },
  actions: {},
  getters: {}
}

const res = await codeLogin(this.mobile, this.msgCode); //登录请求;
// if( res.status!=200 ){ return this.$toast('接口异常、登录失败'); }   //由响应拦截器统一处理;
this.$store.commit('user/setUserInfo',res.data);                     //调用Vuex模块函数,保存用户信息;

//定义用户信息key
const USERINFO_KEY = 'UserinfoKey'

// 设置个人信息
export const setInfo = (info) => { localStorage.setItem(USERINFO_KEY, JSON.stringify(info)) }

// 获取个人信息
export const getInfo = () => {
  //从localStorage获取用户信息,没有则返回空对象;
  const result = localStorage.getItem(USERINFO_KEY);
  return result ? JSON.parse(result) : { token: '', userId: '' }    //三元运算符判断是否存在个人信息返回;
}

// 注销:移除个人信息
export const removeInfo = () => { localStorage.removeItem(USERINFO_KEY) }

import { getInfo, setInfo } from '@/utils/storage';

export default {
  namespaced: true,
  state () {
    return {
      // 个人权证相关
      userInfo: getInfo(),        //从localStorage中获取用户信息;
    }
  },
  mutations: {
    //用于组件修改userInfo信息;
    setUserInfo (state, obj) {    //登录成功保存用户信息、保存localStorage
      state.userInfo = obj;
      setInfo(obj)
    }
  },
  actions: {},
  getters: {}
}

router.beforeEach((to, from, next) => {
  // 1. to   往哪里去， 到哪去的路由信息对象  
  // 2. from 从哪里来， 从哪来的路由信息对象
  // 3. next() 是否放行
  //    如果next()调用，就是放行
  //    next(路径) 拦截到某个路径页面
})

//引入Vuex数据对象;
import store from '@/store'
// 所有的路由在真正被访问到之前(解析渲染对应组件页面前),都会先经过全局前置守卫;
// 只有全局前置守卫next()放行了,才会到达对应的页面;
// 定义数组: 专门存放所有需要权限访问的页面;
const authUrls = ['/pay', '/myorder']
router.beforeEach((to, from, next) => {
  //校验 to.path 是否在 authUrls 中出现过,非权限页面,直接放行;
  if (!authUrls.includes(to.path)) { return next(); }

  // 是权限页面,判断token是否存在
  const token = store.getters.token;
  if (token) { 
    next() 
  } 
  else { 
    next('/login');           //跳转首页;
  }
})

git fsck --lost-found
git show be7792e60920d944b772d2154423e958e3a3a646
git reset --hard 1aa0cc91e883597b0769bf36499491b480c7bcb5
#上述命令应该可以解决大部分,分支、代码丢失问题: 2-3命令中索引编码需要根据需求变动)

#首先运行 git fsck --lost-found，这会列出所有悬空的对象
#进入 .git/lost-found 目录，它分为两个子目录: other 和 commit;
cd .git/lost-found		#在尝试删除之前，确保你已经检查过这些文件，确认没有需要恢复的数据;
#删除other和commit目录下的所有文件
rm -rf commit/*
rm -rf other/*
#清理Git数据库: 虽然上述步骤已经删除了文件，但Git的对象数据库中可能还保留着引用计数为0的对象;
git gc --prune=now 		#彻底清理这些不再被引用的对象，这一步会压缩并清理Git仓库