精华内容
下载资源
问答
  • utils文件夹作用
    千次阅读
    2021-08-13 15:14:00

    utils文件夹utils.js文件是干什么用的

    更多相关内容
  • pages文件夹,utils文件夹,全局文件app.js文件,全局文件app.json文件, 样式app.wxss文件,项目配置文件project.config.json,页面收录配置文件 sitemap.json。 pages: 存放小程序的页面文件,书写各个页面...
  • 1、在src下面新建一个目录utils文件夹 2、在utils文件夹下新建一个index.js文件 3、main.js挂载到vue实例中 三、如何使用 vue项目工程中,有很多公用的js函数,为了便于集中管理,可以在src下面新建一个utils...

    目录

    一、总体思路

    二、具体流程

    1、在src下面新建一个目录utils文件夹

    2、在utils文件夹下新建一个index.js文件

    3、main.js挂载到vue实例中

    三、如何使用


    vue项目工程中,有很多公用的js函数,为了便于集中管理,可以在src下面新建一个utils文件夹统一管理。这样在使用时候直接调用这个utils文件夹的内容就行。

    一、总体思路

    src下面新建一个utils文件夹,里面存在所有的函数js文件,utils文件夹下面在建一个index.js文件,可以将所有的函数js文件注册到这个index.js里面,方便统一管理调用。最后将这个index.js在main.js里面注册到vue实例中

    二、具体流程

    1、在src下面新建一个目录utils文件夹

    2、在utils文件夹下新建一个index.js文件

    index.js里面的内容:

    import test1 from "./test1";  //引入单个函数方法
    import test2 from "./test2";   //引入单个函数方法
    import * as test3 from "./test3";  //引入多个函数方法
    import classtest from "./classtest";   //引入class类
    export default {
        test1:test1,
        test2:test2,
        test3:test3,
        classtest:classtest,
    }

    其中test1.js文件写法:

    function test1(){
        alert("123");
    }
    export default test1;

    test3.js文件写法:

    export function test3(){
        alert("test3");
    }
    export function test4(){
        alert("test4");
    }

    classtest.js文件写法:

    class Person{
        // 构造函数
        constructor(x,y){
            this.x = x;
            this.y = y;
        }
        todoSome(){
            alert(this.x + "的年龄是" +this.y+"岁");
        }
    }
    export default  Person;

    3、main.js挂载到vue实例中

    //main.js文件中
    import myutils from './utils/index';   //引入文件
    
    Vue.prototype.$myutils=myutils;   //挂载实例属性,所有的往vue实例的prototype属性中挂载,这样挂 载后就可以使用this.来调用了。

     

    三、如何使用

    如何使用单个方法、多个方法、class类的js调用方法不一样:

    this.$myutils.test1();  //调用单个方法
    this.$myutils.test2();
    this.$myutils.test3.test4();  //调用多个方法中的某个方法
    var test= new this.$myutils.classtest('haha','33');   //调用类js,先new,注意根据constrator传参
    test.todoSome();    //调用class类下面的方法

     

    展开全文
  • 在backtrader源代码的文件夹utils中主要分为7个文件, _initi_.py py3.py autodict.py date.py dateintern.py flushfile.py ordereddefaultdict.py _init_.py的作用 这个文件主要用于python包和模块,方便在包和...

    在backtrader源代码的文件夹utils中主要分为7个文件,

    • _initi_.py
    • py3.py
    • autodict.py
    • date.py
    • dateintern.py
    • flushfile.py
    • ordereddefaultdict.py

    _init_.py的作用

    这个文件主要用于python包和模块,方便在包和模块之间进行import

    ###############################################################################
    from __future__ import (absolute_import, division, print_function,
                            unicode_literals)
    
    from collections import OrderedDict
    import 
    展开全文
  • PHP-Utils-开源

    2021-04-23 21:04:52
    PHP-Utils是一组类,可让您更轻松地构建各种应用程序,而不仅仅是Web应用程序。 目的之一是使其真正易于使用,并且同样易于使用您自己的类进行扩展。 所有类都是用PHP编写的,并且
  • 尚品汇

    Components文件夹

    Carousel

    <template>
       <div class="swiper-container" id="floor1Swiper">
                    <div class="swiper-wrapper">
                        <div  class="swiper-slide" v-for="(carousel, index) in list" :key="carousel.id" >
                            <img :src="carousel.imgUrl" />
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
    
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                  </div>
    </template>
    
    <script>
    import Swiper from "swiper";
    export default {
    name:"Carousel",
      props: ["list"],
      watch: {
        list: {
          immediate: true,
          //为什么watch监听不到list,list是父组件给的,给的时候是一个对象,对象中该有的都有(所以加上immediate,一开始就建东)
          handler() {
            //只是v-for动态渲染结构我们是没办法确定的,还是要用到nextTick
            this.$nextTick(() => {
              //不是在自己的组件发请求的,数据是父组件给的,而且结构已经有了,上一个是在自己内部发送请求的
              var mySwiper = new Swiper(".swiper-container", {
                // direction: 'vertical', // 垂直切换选项
                loop: true, // 循环模式选项
    
                // 如果需要分页器
                pagination: {
                  el: ".swiper-pagination",
                  //点击小球的时候也可以切换图片
                  clickable: true,
                },
    
                // 如果需要前进后退按钮
                navigation: {
                  nextEl: ".swiper-button-next",
                  prevEl: ".swiper-button-prev",
                },
    
                // 如果需要滚动条
                scrollbar: {
                  el: ".swiper-scrollbar",
                },
              });
            });
          },
        },
      },
    
    }
    </script>
    
    
    <style>
    
    
    </style>
    

    Footer

    <template>
      <!-- 底部 -->
      <div class="footer">
        <div class="footer-container">
          <div class="footerList">
            <div class="footerItem">
              <h4>购物指南</h4>
              <ul class="footerItemCon">
                <li>购物流程</li>
                <li>会员介绍</li>
                <li>生活旅行/团购</li>
                <li>常见问题</li>
                <li>购物指南</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>配送方式</h4>
              <ul class="footerItemCon">
                <li>上门自提</li>
                <li>211限时达</li>
                <li>配送服务查询</li>
                <li>配送费收取标准</li>
                <li>海外配送</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>支付方式</h4>
              <ul class="footerItemCon">
                <li>货到付款</li>
                <li>在线支付</li>
                <li>分期付款</li>
                <li>邮局汇款</li>
                <li>公司转账</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>售后服务</h4>
              <ul class="footerItemCon">
                <li>售后政策</li>
                <li>价格保护</li>
                <li>退款说明</li>
                <li>返修/退换货</li>
                <li>取消订单</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>特色服务</h4>
              <ul class="footerItemCon">
                <li>夺宝岛</li>
                <li>DIY装机</li>
                <li>延保服务</li>
                <li>尚品汇E卡</li>
                <li>尚品汇通信</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>帮助中心</h4>
             <img src="./images/wx_cz.jpg" alt="">
            </div>
          </div>
          <div class="copyright">
            <ul class="helpLink">
              <li>
                关于我们
                <span class="space"></span>
              </li>
              <li>
                联系我们
                <span class="space"></span>
              </li>
              <li>
                关于我们
                <span class="space"></span>
              </li>
              <li>
                商家入驻
                <span class="space"></span>
              </li>
              <li>
                营销中心
                <span class="space"></span>
              </li>
              <li>
                友情链接
                <span class="space"></span>
              </li>
              <li>
                关于我们
                <span class="space"></span>
              </li>
              <li>
                营销中心
                <span class="space"></span>
              </li>
              <li>
                友情链接
                <span class="space"></span>
              </li>
              <li>关于我们</li>
            </ul>
            <p>地址:北京市昌平区宏福科技园综合楼6</p>
            <p>京ICP备19006430</p>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "",
    };
    </script>
    
    <style lang="less" scoped>
      .footer {
            background-color: #eaeaea;
    
            .footer-container {
                width: 1200px;
                margin: 0 auto;
                padding: 0 15px;
    
                .footerList {
                    padding: 20px;
                    border-bottom: 1px solid #e4e1e1;
                    border-top: 1px solid #e4e1e1;
                    overflow: hidden;
                    padding-left: 40px;
    
                    .footerItem {
                        width: 16.6666667%;
                        float: left;
    
                        h4 {
                            font-size: 14px;
                        }
    
                        .footerItemCon {
                            li {
                                line-height: 18px;
                            }
                        }
    
                        &:last-child img {
                            width: 121px;
                        }
                    }
                }
    
                .copyright {
                    padding: 20px;
    
                    .helpLink {
                        text-align: center;
    
                        li {
                            display: inline;
    
                            .space {
                                border-left: 1px solid #666;
                                width: 1px;
                                height: 13px;
                                background: #666;
                                margin: 8px 10px;
                            }
                        }
                    }
    
                    p {
                        margin: 10px 0;
                        text-align: center;
                    }
                }
            }
        }
    </style>
    

    Header

    <template>
      <header class="header">
        <!-- 头部的第一行 -->
        <div class="top">
          <div class="container">
            <div class="loginList">
              <p>尚品汇欢迎您!</p>
              <p v-if="!userName">
                <span></span>
                <!-- <a href="###">登录</a> -->
                <!-- 编程式导航,务必有to属性 -->
                <router-link to="/login">登录</router-link>
                <router-link to="/register" class="register">免费注册</router-link>
              </p>
              <p v-else>
                <a href="">{{ userName }}</a>
                <a class="register" @click="logout">退出登录</a>
              </p>
            </div>
            <div class="typeList">
              <!-- <a href="###">我的订单</a> -->
              <!-- <a href="###">我的购物车</a> -->
              <router-link to="/center">我的订单</router-link>
              <router-link to="/shopcart">我的购物车</router-link>
              <a href="###">我的尚品汇</a>
              <a href="###">尚品汇会员</a>
              <a href="###">企业采购</a>
              <a href="###">关注尚品汇</a>
              <a href="###">合作招商</a>
              <a href="###">商家后台</a>
            </div>
          </div>
        </div>
        <!--头部第二行 搜索区域-->
        <div class="bottom">
          <h1 class="logoArea">
            <router-link class="logo" to="/home">
              <img src="./images/logo.png" alt="" />
            </router-link>
          </h1>
          <div class="searchArea">
            <form action="###" class="searchForm">
              <input
                type="text"
                id="autocomplete"
                class="input-error input-xxlarge"
                v-model="keyword"
              />
              <button
                class="sui-btn btn-xlarge btn-danger"
                type="button"
                @click="goSearch"
              >
                搜索
              </button>
            </form>
          </div>
        </div>
      </header>
    </template>
    
    <script>
    export default {
      name: "",
      data() {
        return {
          keyword: "",
        };
      },
      mounted() {
        //通过全局事件总线,清空关键字
        this.$bus.$on("isclear", () => {
          this.keyword = "";
        });
      },
      methods: {
        //搜索这个按钮回调函数,进行路由跳转
        goSearch() {
          /*路由传参:
          1.字符串形式(需要占位,点击完之后,可以查看网址上确实携带了信息)
           this.$router.push("/search/"+this.keyword+"?k="+this.keyword.toUpperCase());*/
          /* 2.模板字符串
          this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`);*/
          //3.对象写法
    
          // this.$router.push({
          //   name: "search",
          //   params: { keyword: this.keyword },
          //   query: { k: this.keyword.toUpperCase() },
          // });
          let location = {
            name: "search",
            params: { keyword: this.keyword },
            query: { k: this.keyword.toUpperCase() },
          };
          //给location加上query参数
          if (this.$route.query) {
            location.query = this.$route.query;
          }
    
          this.$router.push(location);
        },
        async logout() {
          try {
            await this.$store.dispatch("userLogout");
            //回到首页
            this.$router.push("/home");
          } catch (error) {
            alert(error.message);
          }
        },
      },
      computed: {
        userName() {
          return this.$store.state.user.userInfo.loginName;
        },
      },
    };
    </script>
    
    <style scoped lang="less">
    .header {
      & > .top {
        background-color: #eaeaea;
        height: 30px;
        line-height: 30px;
    
        .container {
          width: 1200px;
          margin: 0 auto;
          overflow: hidden;
    
          .loginList {
            float: left;
    
            p {
              float: left;
              margin-right: 10px;
    
              .register {
                border-left: 1px solid #b3aeae;
                padding: 0 5px;
                margin-left: 5px;
              }
            }
          }
    
          .typeList {
            float: right;
    
            a {
              padding: 0 10px;
    
              & + a {
                border-left: 1px solid #b3aeae;
              }
            }
          }
        }
      }
    
      & > .bottom {
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
    
        .logoArea {
          float: left;
    
          .logo {
            img {
              width: 175px;
              margin: 25px 45px;
            }
          }
        }
    
        .searchArea {
          float: right;
          margin-top: 35px;
    
          .searchForm {
            overflow: hidden;
    
            input {
              box-sizing: border-box;
              width: 490px;
              height: 32px;
              padding: 0px 4px;
              border: 2px solid #ea4a36;
              float: left;
    
              &:focus {
                outline: none;
              }
            }
    
            button {
              height: 32px;
              width: 68px;
              background-color: #ea4a36;
              border: none;
              color: #fff;
              float: left;
              cursor: pointer;
    
              &:focus {
                outline: none;
              }
            }
          }
        }
      }
    }
    </style>
    

    Pagination

    <template>
      <div class="pagination">
        <button :disabled="pageNo==1" @click="$emit('getPageNo',pageNo-1)">上一页</button>
        <button v-if="startNumAndendNum.start>1"  @click="$emit('getPageNo',1)" :class="{active:pageNo==1}">1</button>
        <button v-if="startNumAndendNum.start>2">···</button>
    
        <button v-for="(page,index) in startNumAndendNum.end" :key="index" v-if="page>=startNumAndendNum.start"  @click="$emit('getPageNo',page)" :class="{active:pageNo==page}">{{page}}</button>
      
    
        <button v-if="startNumAndendNum.end<totalPage-1" >···</button>
        <button v-if="startNumAndendNum.end<totalPage"  @click="$emit('getPageNo',totalPage)"  :class="{active:pageNo==totalPage}">{{ totalPage }}</button>
        <button :disabled="pageNo==totalPage" @click="$emit('getPageNo',pageNo+1)">下一页</button>
    
        <button style="margin-left: 30px">{{ total }}</button>
      </div>
    </template>
    
    <script>
    export default {
      name: "Pagination",
      props: ["pageNo", "pageSize", "total", "continues"],
      computed: {
        totalPage() {
          //向上取整
          return Math.ceil(this.total / this.pageSize);
        },
        //计算出连续的页面的其实数字与结束数字【连续页码的数字:至少是5】
        startNumAndendNum() {
          const {totalPage , continues} = this; //后面用到这个地方的时候就不用写this了
          let start = 0,
            end = 0;
          //1.不正常的情况
          if (totalPage < continues) {
            start = 1;
            end = totalPage;
          }
          //2.正常的情况
          else {
            start = this.pageNo - parseInt(continues / 2);
            end = this.pageNo + parseInt(continues / 2);
            if (start <= 0) {
              //2.1左边越界start从1开始
              start = 1;
              end = continues;
            }
            if (end > totalPage) {
              //2.2右边越界
              end = totalPage;
              start = totalPage - continues + 1;
            }
          }
    
          return { start, end };
        },
      },
    };
    </script>
    
    <style lang="less" scoped>
    .pagination {
      button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        outline: none;
        border-radius: 2px;
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;
    
        &[disabled] {
          color: #c0c4cc;
          cursor: not-allowed;
        }
    
        &.active {
          cursor: not-allowed;
          background-color: #409eff;
          color: #fff;
        }
      }
    
    }
    </style>
    

    TypeNav

    <template>
      <!-- 商品分类导航 -->
      <div class="type-nav">
        <div class="container">
          <div @mouseleave="leaveIndex" @mouseenter="changeShow">
            <h2 class="all">全部商品分类</h2>
    
            <transition name="sort">
              <div class="sort" v-show="show">
                <div class="all-sort-list2" @click="goSearch">
                  <div
                    class="item"
                    v-for="(c1, index) in categoryList"
                    :key="c1.categoryId"
                  >
                    <h3
                      @mouseenter="changeIndex(index)"
                      :class="{ cur: currentIndex === index }"
                    >
                      <a
                        :data-categoryName="c1.categoryName"
                        :data-category1id="c1.categoryId"
                        >{{ c1.categoryName }}--{{ index }}</a
                      >
                    </h3>
                    <!-- 二三级分类 -->
                    <div
                      class="item-list"
                      clearfix
                      :style="{
                        display: currentIndex === index ? 'block' : 'none',
                      }"
                    >
                      <div
                        class="subitem"
                        v-for="(c2, index) in c1.categoryChild"
                        :key="c2.categoryId"
                      >
                        <dl class="fore">
                          <dt>
                            <a
                              :data-categoryName="c2.categoryName"
                              :data-category2id="c2.categoryId"
                              >{{ c2.categoryName }}</a
                            >
                          </dt>
                          <dd>
                            <em
                              v-for="(c3, index) in c2.categoryChild"
                              :key="c3.categoryId"
                            >
                              <a
                                :data-categoryName="c3.categoryName"
                                :data-category3id="c3.categoryId"
                                >{{ c3.categoryName }}</a
                              >
                            </em>
                          </dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </transition>
          </div>
          <nav class="nav">
            <a href="###">服装城</a>
            <a href="###">美妆馆</a>
            <a href="###">尚品汇超市</a>
            <a href="###">全球购</a>
            <a href="###">闪购</a>
            <a href="###">团购</a>
            <a href="###">有趣</a>
            <a href="###">秒杀</a>
          </nav>
        </div>
      </div>
    </template>
    
    <script>
    import { mapState } from "vuex";
    //把lodash全部功能函数引入
    // import _ from "lodash";
    // console.log(_);
    
    //按需引入
    import throttle from "lodash/throttle";
    export default {
      name: "TypeNav",
      data() {
        return {
          // -1代表哪一个h3都没有hover
          currentIndex: "-1",
          show: true, //代表在search组件里是否展示
        };
      },
    
      // 组件挂载完毕,获取数据,存储于仓库中
      mounted() {
        if (this.$route.path != "/home") {
          this.show = false;
        }
      },
      methods: {
        /*   changeIndex(index){
           console.log(index);
          this.currentIndex=index;
        },*/
    
        //使用es5语法 Key:value 的形式,es6没办法写这种形式
        changeIndex: throttle(function (index) {
          //  console.log(index);
          this.currentIndex = index;
        }, 50),
    
        leaveIndex() {
          this.currentIndex = -1;
          if (this.$route.path != "/home") {
            this.show = false;
          }
        },
        goSearch(event) {
          //最好的解决方式:编程式路由导航+事件委派
          /*存在一些问题:
                  事件委派是将全部的子节点(h3 dt dl em)的事件委派给父节点
                  点击节点的时候,如何判断是a标签(把子节点当做a标签,加上自定义属性data-categoryName,其余的子节点是没有的)
                  判断a标签之后,如何区别一级,二级,三级分类的标签
    
    
    获取到当前触发这个事件的结点(h3 dt dl em),带有data-categoryName这样的结点一定是a结点(event)
    结点有一个属性dataset,可以获取结点的自定义属性与属性值
    
    */
          // console.log(event.target.dataset);
    
          let { categoryname, category1id, category2id, category3id } =
            event.target.dataset;
          if (categoryname) {
            //如果身上拥有categoryname一定是a标签
            let location = { name: "search" };
            let query = { categoryName: categoryname };
            if (category1id) {
              query.category1id = category1id;
            } else if (category2id) {
              query.category2id = category2id;
            } else {
              query.category3id = category3id;
            }
            if (this.$route.params) {
              location.params = this.$route.params;
            }
            //把两个参数合并到一起
            location.query = query;
            this.$router.push(location);
          }
        },
        changeShow() {
          if (this.$route.path != "/home") {
            //其实进入的时候写不写都行
            this.show = true;
          }
        },
      },
      computed: {
        ...mapState({
          //右侧需要的是一个函数,当使用这个计算属性的时候,右侧函数会立即执行一次
          //注入一个参数state,其实就是大仓库中的数据
          categoryList: (state) => {
            // console.log(state);
            return state.home.categoryList;
          },
        }),
      },
    };
    </script>
    
    <style scoped lang="less">
    .type-nav {
      border-bottom: 2px solid #e1251b;
    
      .container {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        position: relative;
    
        .all {
          width: 210px;
          height: 45px;
          background-color: #e1251b;
          line-height: 45px;
          text-align: center;
          color: #fff;
          font-size: 14px;
          font-weight: bold;
        }
    
        .nav {
          a {
            height: 45px;
            margin: 0 22px;
            line-height: 45px;
            font-size: 16px;
            color: #333;
          }
        }
    
        .sort {
          position: absolute;
          left: 0;
          top: 45px;
          width: 210px;
          height: 461px;
          position: absolute;
          background: #fafafa;
          z-index: 999;
    
          .all-sort-list2 {
            .item {
              h3 {
                line-height: 30px;
                font-size: 14px;
                font-weight: 400;
                overflow: hidden;
                padding: 0 20px;
                margin: 0;
    
                a {
                  color: #333;
                }
              }
    
              .item-list {
                // display: none;
                position: absolute;
                width: 734px;
                min-height: 460px;
                background: #f7f7f7;
                left: 210px;
                border: 1px solid #ddd;
                top: 0;
                z-index: 9999 !important;
    
                .subitem {
                  float: left;
                  width: 650px;
                  padding: 0 4px 0 8px;
    
                  dl {
                    border-top: 1px solid #eee;
                    padding: 6px 0;
                    overflow: hidden;
                    zoom: 1;
    
                    &.fore {
                      border-top: 0;
                    }
    
                    dt {
                      float: left;
                      width: 54px;
                      line-height: 22px;
                      text-align: right;
                      padding: 3px 6px 0 0;
                      font-weight: 700;
                    }
    
                    dd {
                      float: left;
                      width: 415px;
                      padding: 3px 0 0;
                      overflow: hidden;
    
                      em {
                        float: left;
                        height: 14px;
                        line-height: 14px;
                        padding: 0 8px;
                        margin-top: 5px;
                        border-left: 1px solid #ccc;
                      }
                    }
                  }
                }
              }
    
              &:hover {
                .item-list {
                  // display: block;
                }
              }
            }
            // .item:hover {
            //   background-color: skyblue;
            // }
            .cur {
              background-color: skyblue;
            }
          }
        }
        .sort-enter {
          height: 0px;
        }
        .sort-enter-to {
          height: 461px;
        }
        .sort-enter-active {
          transition: all 0.5s linear;
        }
      }
    }
    </style>
    

    Plugin文件夹

    myPlugins.js

    //也封装一个类似的插件,使小写变成大写
    let myPlugins={};
    myPlugins.install=function(Vue,options){
        //只要Vue.use这个插件了,里面的内容就会被自动调用
        // console.log('调用');
        //全局指令
        Vue.directive(options.name,(element,params)=>{
            element.innnerHTML=params.value.toUpperCase();
            // console.log(params);
        })
    }
    export default myPlugins
    

    validate.js

    // validate插件:表单验证区域
    import Vue from "vue"
    import VeeValidate from "vee-validate"
    // 引入中文 提示信息
    import zh_CN from 'vee-validate/dist/locale/zh_CN'
    Vue.use(VeeValidate);
    
    //表单验证
    VeeValidate.Validator.localize('zh_CN', {
        messages: {
            ...zh_CN.messages,//使用中文
            is: (field) => `${field}必须与密码相同` // 修改内置规则的 message,让确认密码和密码相同
        },
        attributes: { // 给校验的 field 属性名映射中文名称
            phone: '手机号',
            code: '验证码',
            password: '密码',
            password1: '确认密码',
            isCheck: '协议',
            ageree:"协议",
        }
    })
    
    //自定义校验规则(叫agree)
    //定义协议必须打勾同意
    VeeValidate.Validator.extend('tongyi', {
        validate: value => {
            return value
        },
        getMessage: field => field + '必须同意'
    })
    

    utils文件夹

    token.js

    export const setToken=(token)=>{
        localStorage.setItem("TOKEN",token)
    }
    //需要返回数据
    export const getToken=()=>{
        return localStorage.getItem("TOKEN")
    }
    //不需要返回数据
    export const removeToken=()=>{
         localStorage.removeItem("TOKEN")
    }
    

    uuid_token.js

    import { v4 as uuidV4 } from "uuid"
    //要生成一个随机字符串,且每次执行不能发生变化,游客身份持久存储
    export const getUUID = () => {
        //先从本地存储获取uuid,(看一下本地存储里面是否有)
        let uuid_token = localStorage.getItem("UUIDTOKEN");
        //如果没有
        if (!uuid_token) {
            //我生成游客临时身份
            uuid_token = uuidV4();
            //本地存储储存一次
            localStorage.setItem("UUIDTOKEN", uuid_token);
        }
        //一定要有返回值,没有返回值undefined
        return uuid_token;
    }
    

    router文件夹

    index.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    //使用插件
    Vue.use(VueRouter)
    
    import routes from "./routes"
    import store from "@/store"
    //先把VueRouter原型对象的push,先保存一份
    let originPush = VueRouter.prototype.push;
    let originReplace = VueRouter.prototype.replace;
    //第一个参数:告诉原来的push方法,你往哪里跳转(传递那些参数)
    /* call和apply区别
    相同:都可以调用函数一次,都可以篡改函数的上下文一次
    不同:call和apply传递参数,call传递参数用逗号隔开,apply方法执行,传递数组
    */
    VueRouter.prototype.push = function (location, resolve, reject) {
        if (resolve && reject) {
            //不使用call方法,this就是window,就不是push原来的上下文了
            originPush.call(this, location, resolve, reject)
        }
        else {
            originPush.call(this, location, () => { }, () => { })
        }
    
    }
    
    VueRouter.prototype.replace = function (location, resolve, reject) {
        if (resolve && reject) {
            //不使用call方法,this就是window,就不是push原来的上下文了
            originReplace.call(this, location, resolve, reject)
        }
        else {
            originReplace.call(this, location, () => { }, () => { })
        }
    
    }
    
    //配置路由
    let router = new VueRouter({
        //配置路由
        //routes:routes,//kv一致省略v
        routes,
    
        scrollBehavior(to, from, savedPosition) {
            // 始终滚动到顶部
            return { y: 0 }
        },
    })
    // 全局前置守卫
    router.beforeEach(async (to, from, next) => {
        //to:要跳转的路由信息是什么
        //from 可以获取到从哪个路由来的信息
        //next 放行函数
        next()
        //只有登录了token才是存在的
        let token = store.state.user.token;
        let name = store.state.user.userInfo.name;
        if (token) {
            if (to.path == "/login") {
                // console.log("22");
                next("/home")
    
            } else {
                /*登录了,但是去的不是login
                但是放行之前,我们要确保userInfo存在
                */
                if (name) {
                    next();
                } else {
                    //如果没有名字
                    try {
                        await store.dispatch("getUserInfo");
                        next()
                    } catch (error) {
                        //token过期了获取不到用于的信息,从新登录
                        //清除token 
                        await store.dispatch("userLogout")
                        // console.log("111");
                        next("/login");
    
                    }
                }
    
            }
        } else {
            //未登录的时候访问个人信息,是不允许的
            // next()
            let toPath = to.path;    
            // console.log(toPath);
            if (toPath.indexOf("/center") != -1 || toPath.indexOf("/trade") != -1 || toPath.indexOf("/pay") != -1|| toPath.indexOf("/shopcart") != -1) {
                // 把未登录的时候 想去但是没去成的信息存储在地址栏中(路由)
                // console.log("/login?redirect="+toPath);
                next('/login?redirect='+toPath)
            }
            else {
        //未登录的时候访问其他是可以通行的
                next();
            }
        }
        // console.log(store);
    })
    
    export default router;
    

    routes.js

    
    //引入路由组件
    // import Home from "@/pages/Home"
    import Search from "@/pages/Search"
    import Login from "@/pages/Login"
    import Register from "@/pages/Register"
    // import Detail from "@/pages/Detail"
    import AddCartSuccess from "@/pages/AddCartSuccess"
    import ShopCart from "@/pages/ShopCart"
    import Trade from "@/pages/Trade"
    import Pay from "@/pages/Pay"
    import PaySuccess from "@/pages/PaySuccess"
    import Center from "@/pages/Center"
    //引入二级路由组件
    import myOrder from "@/pages/Center/myOrder"
    import groupOrder from "@/pages/Center/groupOrder"
    
    // const Foo = () => import('./Foo.vue')
    const Foo = () =>{
        console.log("我是Detail组件")
        return import("@/pages/Detail")
    }
    /*
    当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。
    如果我们能把不同路由对应的组件分割成不同的代码块,
    然后当路由被访问的时候!!!才加载对应组件,这样就更加高效了。 */
    //路由的配置信息
    export default [
    
        {
            path: "/home",
            component:  () => import('@/pages/Home'),
            //当用户访问的时候才会执行
            meta: { show: true }
        },
        {
            path: "/search/:keyword?",//不写的话,路径中就没有关键字了
            // component: Foo,
            component: Search ,
            meta: { show: true },
            name: "search",
    
        },
        {
            path: "/login",
            component: Login,
            meta: { show: false }
        },
        {
            path: "/register",
            component: Register,
            meta: { show: false }
        },
        {
            //重定向:在项目跑起来的时候,立马定位到首页
            path: '*',
            redirect: "/home"
        },
        {
            path: "/detail/:id",
            component: Foo,
            name: "detail",
            meta: { show: false }
        },
        {
            path: "/addcartsuccess",
            name: "addcartsuccess",
            component: AddCartSuccess,
            meta: { show: true }
        },
        {
            path: "/shopcart",
            component: ShopCart,
            name: "shopcart",
            meta: { show: true }
        },
        {
            path: "/trade",
            component: Trade,
            name: "trade",
            beforeEnter: (to, from, next) => {
                //   console.log(from);
                if (from.path == "/shopcart") {
                    next();
                } else {
                    next(false);
                }
            }
    
        },
        {
            path: "/pay",
            component: Pay,
            name: "pay",
            beforeEnter: (to, from, next)=>{
                if (from.path == "/trade") {
                    next()
                }
                else {
                    next(false);
                }
            }
    
        },
        {
            path: "/paysuccess",
            component: PaySuccess,
            name: "paysuccess",
    
        },
        {
            path: "/center",
            component: Center,
            name: "center",
            //二级路由组件
            children: [
                {
                    path: "myorder",
                    component: myOrder,
                },
                {
                    path: "grouporder",
                    component: groupOrder,
    
                },
                {
                    //重定向,默认界面在我的订单这
                    path: "/center",
                    redirect: "/center/myorder"
                }
            ],
        },
    
    ]
    
    
    
    
    
    展开全文
  • 前端框架里面utils文件的使用。

    万次阅读 2018-05-18 11:57:32
    1.概念:此文件狭存放自己封装的工具类函数,是一个共享的方法。2.使用:import conf from '../config'; export const $ = {}; /** * * @param time * @returns {number} ...export const unify = function (time)...
  • utils是工具的意思,是一个用来处理css的文件,这个文件包含了三个工具函数: 生成静态资源的路径 生成 ExtractTextPlugin对象或loader字符串 生成 style-loader的配置 var path = require(‘path’)// node自带的...
  • Python中的模块

    千次阅读 2020-11-21 01:26:14
    ")defgreet_user(username):print("hello" + username.title()) test.py importutils #注意使用函数前需要用模块名加 .(点) utils.print() 这样就可以打印“hello world !”了。 解释:Python在读取test文件时,...
  • src assets css base.css : 项目基础的 css normalize.css: githut 上一个很多企业都会引入的 css 用来规定一些基础空间的外貌的样式 images common: 放一些 share 的 js 文件,默认文件名为 utils.js components : ...
  • pages文件夹,utils文件夹,全局文件app.js文件,全局文件app.json文件, 样式app.wxss文件,项目配置文件project.config.json,页面收录配置文件 sitemap.json。 在这里插入图片描述 pages: 存放小程序的...
  • Python Utils

    万次阅读 多人点赞 2018-04-24 07:37:31
    在Python开发中,将常用功能封装成为接口,并放入Utils工具类中,直接调用,可以提升效率。 常用的函数有: 文件夹遍历 文件夹创建 文件读取 时间可读 时间统计 安全除法 双列表排序 配置读取 脚本路径 Numpy判空 ...
  • 我们再src 文件夹下创建一个utils文件夹,来放置我们所有的配置请求文件 然后创建对应的文件 1、 utils.ts文件 的 配置 import { message } from 'antd'; // 引入antd中的全局提示 // 判断是否是IE export function...
  • 首先在主目录下创建utils文件夹(与manage.py在同一个目录) 右键mark为source root 在views中导入时用: from utils import xxxx
  • Django的Utils模块提供了很多强大的实用工具(utilities),可以简化我们的日常开发工作。小编我就精选几个Utils模块的工具分享给大家。django.utils.date...
  • util文件的作用

    万次阅读 2018-03-01 09:19:43
    经常在程序里见到 Util文件 ,例如,util.pyutil包中放一些常用的公共方法,提供一些实用的方法和数据结构,例如:1.日期类来产生和获取日期及时间;2.提供随机数类来产生各种类型的随机数;3.提供堆栈类表示堆栈...
  • 文件夹的释义——utils、tools、store-module和modules 好的代码像粥一样,都是用时间熬出来的 前端工程化 工程化是一种思想而不是某种技术(当然为了实现工程化我们会用一些技术) 前端工程化就是用做工程的思维...
  • 1.创建工具类文件夹 备注:wxs是微信小程序中可以再wxml文件里引用的格式文件。类似vue中的过滤器。 2.在wxs文件中声明方法 // 把10000解析成1万 function formatCount(count) { var counter = parseInt...
  • 小程序utils的使用简介

    万次阅读 多人点赞 2018-08-24 09:59:38
    你可以留意到这个项目里边生成了一个util/utils.js 可以将一些公共的代码抽离成为一个单独的 js (utils.js)文件,作为一个模块; 模块只有通过 module.exports 或者 exports 才能对外暴露接口。 所以当你在util....
  • 不附图了,非常简单,你把你所有require路径有问题的地方全部改好再编译就行了,没改好前,会一直提示一个分包下错误的路径给你
  • vue创建工具utils文件

    千次阅读 2020-01-19 14:41:54
    说明: 封装一个公共方法...1、在src下创建utils文件夹,目录下创建index.html import config from '@/config' export default { // websocket websocket: '', // 创建websocket链接 connectWebsocket (val) {...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 97,536
精华内容 39,014
关键字:

utils文件夹作用

友情链接: oled.rar