尚品汇项目笔记

最新推荐文章于 2022-09-07 21:03:28 发布
VIP文章 最新推荐文章于 2022-09-07 21:03:28 发布
阅读量676 收藏 6
点赞数
分类专栏： 前端 html 文章标签： 正则表达式 python 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/drhrht/article/details/123220689
版权

尚品汇项目笔记

前端Vue核心

开发一个前端模块可以概括为以下几个步骤：
（1）写静态页面、拆分为静态组件；
（2）发请求（API）；
（3）vuex（actions、mutations、state三连操作）；
（4）组件获取仓库数据，动态展示；

1、vue文件目录分析

public文件夹：静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中。

pubilc/index.html是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html。

src文件夹（程序员代码文件夹）

assets： 存放公用的静态资源
components： 非路由组件（全局组件），其他组件放在views或者pages文件夹中
App.vue： 唯一的跟组件
main.js： 程序入口文件，最先执行的文件

babel.config.js: 配置文件（babel相关）
package.json: 项目的详细信息记录
package-lock.json: 缓存性文件（各种包的来源）

2、项目配置

2.1 项目运行，浏览器自动打开

package.json
    "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
    },

2.2 关闭eslint校验工具（不关闭会有各种规范，不按照规范就会报错）

  • 根目录下创建vue.config.js,进行配置

    module.exports = {
    //关闭eslint
    lintOnSave: false
    }

2.3 src文件夹配置别名,创建jsconfig.json，用@/代替src/，exclude表示不可以使用该别名的文件

 {
    "compilerOptions": {
        "baseUrl": "./",
            "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },

    "exclude": [
        "node_modules",
        "dist"
    ]
 }

3、组件页面样式

组件页面的样式使用的是less样式，浏览器不识别该样式，需要下载相关依赖
npm install --save less less-loader@5
如果想让组件识别less样式，则在组件中设置
<script scoped lang="less">

4、清除vue页面默认的样式

vue是单页面开发，我们只需要修改public下的index.html文件

<link rel="stylesheet" href="reset.css">

5、pages文件夹

创建pages文件夹，并创建路由组件
5.1创建router文件夹，并创建index.js进行路由配置，最终在main.js中引入注册

5.2 总结
路由组件和非路由组件区别：

  • 非路由组件放在components中，路由组件放在pages或views中
  • 非路由组件通过标签使用，路由组件通过路由使用
  • 在main.js注册玩路由，所有的路由和非路由组件身上都会拥有$router $route属性
  • $router：一般进行编程式导航进行路由跳转
  • $route： 一般获取路由信息（name path params等）

5.3 路由跳转方式

  • 声明式导航router-link标签 ,可以把router-link理解为一个a标签，它 也可以加class修饰
  • 编程式导航 ：声明式导航能做的编程式都能做，而且还可以处理一些业务

6、footer组件显示与隐藏

  • footer在登录注册页面是不存在的，所以要隐藏，v-if 或者 v-show
  • 这里使用v-show，因为v-if会频繁的操作dom元素消耗性能，v-show只是通过样式将元素显示或隐藏
  • 配置路由的时候，可以给路由配置元信息meta,
  • 在路由的原信息中定义show属性，用来给v-show赋值，判断是否显示footer组件

7、路由传参

7.1、query、params

  • query、params两个属性可以传递参数
    query参数：不属于路径当中的一部分，类似于get请求，地址栏表现为 /searchk1=v1&k2=v2
    query参数对应的路由信息 path: "/search"
    params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 ,地址栏表现为 /search/v1/v2
    params参数对应的路由信息要修改为path: "/search/:keyword" 这里的/:keyword就是一个params参数的占位符

  • params传参问题
    （1）、如何指定params参数可传可不传

    如果路由path要求传递params参数,但是没有传递,会发现地址栏URL有问题，详情如下：
    Search路由项的path已经指定要传一个keyword的params参数，如下所示：
    path: “/search/:keyword”,
    执行下面进行路由跳转的代码：
    this.$router.push({name:“Search”,query:{keyword:this.keyword}})
    当前跳转代码没有传递params参数
    地址栏信息：http://localhost:8080/#/?keyword=asd
    此时的地址信息少了/search
    正常的地址栏信息: http://localhost:8080/#/search?keyword=asd
    解决方法：可以通过改变path来指定params参数可传可不传
    path: “/search/:keyword?”,?表示该参数可传可不传

参考连接：https://blog.csdn.net/weixin_44867717/article/details/109773945
（2）、由（1）可知params可传可不传，但是如果传递的时空串，如何解决 。

 this.$router.push({name:"Search",query:{keyword:this.keyword},params:{keyword:''}})
 出现的问题和1中的问题相同,地址信息少了/search
 解决方法： 加入||undefined，当我们传递的参数为空串时地址栏url也可以保持正常
 this.$router.push({name:"Search",query:{keyword:this.keyword},params:{keyword:''||undefined}})

（3）路由组件能不能传递props数据？
可以，但是只能传递params参数,具体知识为props属性 。
7.2、传参方法

  • 字符串形式
    this.$router.push("/search/"+this.params传参+“k=”+this.query传参)
  • 模板字符串
    this. r o u t e r . p u s h ( " / s e a r c h / + router.push("/search/+ router.push("/search/+{this.params传参}k=${this.query传参}")
    注意： 上面字符串的传参方法可以看出params参数和’/'结合，query参数和？结合
    http://localhost:8080/#/search/asd?keyword=asd
    上面url中asd为params的值，keyword=asd为query传递的值。
  • 对象（常用）
    this.$router.push({name:“路由名字”,params:{传参},query:{传参})。
    以对象方式传参时，如果我们传参中使用了params，只能使用name，不能使用path，如果只是使用query传参，可以使用path 。

8、多次执行相同的push问题

多次执行相同的push问题，控制台会出现警告
例如：使用this.$router.push({name:‘Search’,params:{keyword:"…"||undefined}})时，如果多次执行相同的push，控制台会出现警告。

let result = this.$router.push({name:"Search",query:{keyword:this.keyword}})
console.log(result)

执行一次上面代码：
在这里插入图片描述
多次执行出现警告：
在这里插入图片描述
原因：push是一个promise，promise需要传递成功和失败两个参数，我们的push中没有传递。
方法：this.$router.push({name:‘Search’,params:{keyword:"…"||undefined}},()=>{},()=>{})后面两项分别代表执行成功和失败的回调函数。
这种写法治标不治本，将来在别的组件中push|replace,编程式导航还是会有类似错误
push是VueRouter.prototype的一个方法，在router中的index重写该方法即可(看不懂也没关系，这是前端面试题)

//1、先把VueRouter原型对象的push，保存一份
let originPush = VueRouter.prototype.push;
//2、重写push|replace
//第一个参数：告诉原来的push，跳转的目标位置和传递了哪些参数
VueRouter.prototype.push = function (location,resolve,reject){
    if(resolve && reject){
        originPush.call(this,location,resolve,reject)
    }else{
        originPush.call(this,location,() => {},() => {})
    }
}

9、定义全局组件

我们的三级联动组件是全局组件，全局的配置都需要在main.js中配置

//将三级联动组件注册为全局组件
import TypeNav from '@/pages/Home/TypeNav';
//第一个参数：全局组件名字，第二个参数：全局组件
Vue.component(TypeNav.name,TypeNav);

在Home组件中使用该全局组件

<template>
<div>
<!--  三级联动全局组件已经注册为全局组件，因此不需要引入-->
  <TypeNav/>
</div>
</template>

全局组件可以在任一页面中直接使用，不需要导入声明
下面全部商品分类就是三级联动组件
在这里插入图片描述

10、代码改变时实现页面自动刷新

根目录下vue.config.js文件设置

module.exports = {
    //关闭eslint
    lintOnSave: false,
    devServer: {
        // true 则热更新，false 则手动刷新，默认值为 true
        inline: true,
        // development server port 8000
        port: 8001,

    }
}

注意：修改完该配置文件后，要重启一下项目

11、Home首页其它组件

home文件夹index.vue

<template>
<div>
<!--  三级联动全局组件已经注册为全局组件，因此不需要引入-->
  <TypeNav/>
<!--  轮播图列表-->
  <ListContainer/>
<!--  今日推荐-->
  <Recommend/>
<!--  商品排行-->
  <Rank/>
<!--  猜你喜欢-->
  <Like/>
<!-- 楼层 -->
  <Floor/>
  <Floor/>
<!--  商标-->
  <Brand/>
</div>
</template>

<script>
import ListContainer from './ListContainer'
import Recommend from './Recommend'
import Rank from './Rank'
import Like from './Like'
import Floor from './Floor'
import Brand from './Brand'
export default {
  name: "index",
  components: {
    ListContainer,
    Recommend,
    Rank,
    Like,
    Floor,
    Brand,
  }
}
</script>

<style scoped>

</style>

12、封装axios

axios中文文档，包含详细信息。
https://www.kancloud.cn/yunye/axios/234845
在根目录下创建api文件夹，创建request.js文件。
内容如下，当前文件代码还比较少，后续有需求可以增添内容。

import axios from "axios";
//1、对axios二次封装
const requests = axios.create({
    //基础路径，requests发出的请求在端口号后面会跟改baseURl
    baseURL:'/api',
    timeout: 5000,
})
//2、配置请求拦截器
requests.interceptors.request.use(config => {
    //config内主要是对请求头Header配置
    //比如添加token
    
    return config;
})
//3、配置相应拦截器
requests.interceptors.response.use((res) => {
    //成功的回调函数
    return  res.data;
},(error) => {
    //失败的回调函数
    console.log("响应失败"+error)
    return Promise.reject(new Error('fail'))
})
//4、对外暴露
export default requests;

13、前端通过代理解决跨域问题

在根目录下的vue.config.js中配置,proxy为通过代理解决跨域问题。
我们在封装axios的时候已经设置了baseURL为api,所以所有的请求都会携带/api，这里我们就将/api进行了转换。如果你的项目没有封装axios，或者没有配置baseURL，建议进行配置。要保证baseURL和这里的代理映射相同，此处都为’/api’。

module.exports = {
    //关闭eslint
    lintOnSave: false,
    devServer: {
        // true 则热更新，false 则手动刷新，默认值为 true
        inline: false,
        // development server port 8000
        port: 8001,
        //代理服务器解决跨域
        proxy: {
            //会把请求路径中的/api换为后面的代理服务器
            '/api': {
                //提供数据的服务器地址
                target: 'http://39.98.123.211',

            }
        },
    }
}

webpack官网相关知识解读
网站中的webpack.config.js就是vue.config.js文件。

14、请求接口统一封装

在文件夹api中创建index.js文件，用于封装所有请求
将每个请求封装为一个函数，并暴露出去，组件只需要调用相应函数即可，这样当我们的接口比较多时，如果需要修改只需要修改该文件即可。

如下所示：

//当前模块，API进行统一管理，即对请求接口统一管理
import requests from "@/api/request";

//首页三级分类接口
export const reqCateGoryList = () => {
    return  requests({
        url: '/product/getBaseCategoryList',
        method: 'GET'
    })
}

当组件想要使用相关请求时，只需要导入相关函数即可，以上图的reqCateGoryList 为例:

import {reqCateGoryList} from './api'
//发起请求
reqCateGoryList();

15、nprogress进度条插件

打开一个页面时，往往会伴随一些请求，并且会在页面上方出现进度条。它的原理时，在我们发起请求的时候开启进度条，在请求成功后关闭进度条，所以只需要在request.js中进行配置。
如下图所示，我们页面加载时发起了一个请求，此时页面上方出现蓝色进度条
在这里插入图片描述
对应的request.js设置

import axios from "axios";
//引入进度条
import nprogress from 'nprogress';
//引入进度条样式
import "nprogress/nprogress.css";
//1、对axios二次封装
const requests = axios.create({
    //基础路径，requests发出的请求在端口号后面会跟改baseURl
    baseURL:'/api',
    timeout: 5000,
})
//2、配置请求拦截器
requests.interceptors.request.use(config => {
    //config内主要是对请求头Header配置
    //比如添加token

    //开启进度条
    nprogress.start();
    return config;
})
//3、配置相应拦截器
requests.interceptors.response.use((res) => {
    //成功的回调函数

    //响应成功，关闭进度条
    nprogress.done()
    return  res.data;
},(error) => {
    //失败的回调函数
    console.log("响应失败"+error)
    return Promise.reject(new Error('fail'))
})
//4、对外暴露
export default requests;

可以通过修改nprogress.css文件的background来修改进度条颜色。
在这里插入图片描述

16、手动引入vuex

首先确保安装了vuex,根目录创建store文件夹，文件夹下创建index.js，内容如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//对外暴露store的一个实例
export default new Vuex.Store({
    state:{},
    mutations:{},
    actions:{},
    
})

如果想要使用vuex，还要再main.js中引入
main.js:
(1) 引入文件
(2) 注册store
但凡是在main.js中的Vue实例中注册的实体，在所有的组件中都会有（this.$.实体名）属性

import store from './store'
new Vue({
  render: h => h(App),
  //注册路由，此时组件中都会拥有$router $route属性
  router,
  //注册store,此时组件中都会拥有$store
  store
}).$mount('#app')

17、async await使用

如果我们没有封装请求api，而是直接调用axios，就不需要使用async await。
案例：我们将一个axios请求封装为了函数，我们在下面代码中调用了该函数：

import {reqCateGoryList} from '@/api'
export default {
    actions:{
        categoryList(){
            let result =  reqCateGoryList()
            console.log(result)
        }
    }
}

浏览器结果
在这里插入图片描述
返回了一个promise,证明这是一个promise请求，但是我们想要的是图片中的data数据。
没有将函数封装前我们都会通过then()回调函数拿到服务器返回的数据，现在我们将其封装了，依然可以使用then获取数据，代码如下

actions:{
        categoryList(){
            let result =  reqCateGoryList().then(
                res=>{
                console.log("res")
                console.log(res)
                return res
                }
            )
            console.log("result")
            console.log(result)
        }
    }

结果
在这里插入图片描述

最低0.47元/天 解锁文章
drhrht
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
尚品汇page.html
09-15
尚品汇页面html布局
【尚品汇】项目笔记
weixin_40852935的博客
06-25 1697
目录分析 文件夹：静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中。文件夹（程序员代码文件夹）:babel配置文件 ：看到项目描述、项目依赖、项目运行指令 : 缓存性文件（各种包的来源） :项目说明文件...................................................
项目笔记1（尚品汇）
Revin的博客
03-12 1051
项目创建与配置以及非路由组件与路由组件 项目创建与配置 首先利用脚手架创建项目，具体步骤如下。 在桌面新建一个名为SPH的文件夹。进入后打开命令行，如下图所示。输入vue create app。之后选择vue2，生成项目。 项目生成之后进行配置。配置三个地方。 1浏览器自动打开 在package.json文件中找到 "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-servi
尚硅谷电商项目尚品汇笔记1.5
03-01
尚硅谷电商项目尚品汇笔记1.5
尚硅谷电商项目尚品汇笔记4
03-01
尚硅谷电商项目尚品汇笔记4
尚硅谷电商项目尚品汇笔记3
03-01
尚硅谷电商项目尚品汇笔记3
尚硅谷电商项目尚品汇笔记2
03-01
尚硅谷电商项目笔记2
尚硅谷电商项目尚品汇笔记一
03-01
vue2项目
尚品汇项目以及资源、代码
09-05
尚品汇项目以及资源、代码
JAVA基于HTML与CSS的尚品汇项目
03-07
JAVA基于HTML与CSS的尚品汇项目
gshop_client:尚品汇前台项目PC
05-29
shop-client 尚品汇前台PC项目 芜湖起飞o(￣▽￣)ブ
尚品汇index.css
09-14
尚品汇页面布局样式，css层叠样式
JAVA基于HTML与CSS的尚品汇项目设计稿
最新发布
03-08
JAVA基于HTML与CSS的尚品汇项目设计稿
尚品汇项目笔记（持续更新中）
yuran1的博客
09-07 3260
vue项目、尚硅谷、项目笔记
尚品汇项目笔记01
lemonsea_的博客
07-15 448
路由组件Home、Search、Login（没有底部的Footer组件，带有二维码的）、Register（没有底部的Footer组件，带二维码的）public文件夹一般放置一些静态资源(图片)，需要注意，放在public文件夹中的静态资源，webpack进行打包的时候,assets文件夹一般也是放置静态资源(一般放置多个组件共用的静态资源)，需要注意，放置在assets文件夹里面静态。确定项目结构顺序上中下-----只有中间部分的V在发生变化，中间部分应该使用的是路由组件。...
尚品汇项目学习笔记（待更新...）
hyx_1225的博客
07-17 396
vue
项目笔记21（尚品汇）
Revin的博客
03-22 808
文章目录商品详情页放大镜功能与商品售卖属性展示放大镜功能数据获取动态替换图片放大镜实现商品售卖属性展示动态展示售卖属性售卖属性排他操作简单复习下轮播图的使用 商品详情页放大镜功能与商品售卖属性展示 放大镜功能 数据获取动态替换图片 在上一篇我们已经拿到了服务器的数据，但是并没有针对放大镜模块进行书写，在这里记录一下详情页放大镜模块的内容。首先放大镜是详情页一个子模块，同时放大镜需要详情页请求到的服务器的数据（比如图片地址），因此这里又涉及到了父给子组件传递数据。通过props。 具体如下所示 放大镜实
vue尚品汇后台管理系统
08-11
尚品汇后台管理系统是一个基于Vue和element-ui组件库开发的项目，它包括登录、首页、品牌管理、平台属性管理、SKU管理、SPU管理、用户管理、角色管理和菜单管理模块。<span class="em">1</span><span class="em">2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值