Vue2项目知识点总结-尚品汇

最新推荐文章于 2023-07-16 15:19:31 发布
最新推荐文章于 2023-07-16 15:19:31 发布
阅读量452 收藏 10
点赞数 1
分类专栏： Vue细节合集 文章标签： vue.js webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33399435/article/details/125992731
版权

目录

1. 从零开始-项目的搭建

1.1 创建项目

安装vue-cli脚手架

npm install -g @vue/cli
yarn global add @vue/cli

通过VueCLI创建项目

vue create app

注：vue-cli@4.5及之后版本的脚手架可以选择vue3项目

1.2 项目结构分析

├── node_modules 
├── public: 静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中。
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── api: 存放API请求的模块
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放公共组件
│   │   └── HelloWorld.vue
│   │── mock: 存放mock假数据以及配置
│   │── views/pages: 存放路由组件
│   │── router: 存放路由配置
│   │── store: 存放拆分的vuex模块
│   │── utils: 存放所有工具类
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .editorconfig: 统一代码风格的配置文件
├── .env.development: 开发环境的配置
├── .env.production: 生产环境的配置
├── .env.staging: 预发布环境的配置
├── .eslintignore: eslint校验忽略的配置
├── .eslintrc.js: eslint代码校验配置
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
├── vue.config.js：vue项目的可选配置文件

1.3 配置项目中的一些细节

1.3.1 项目运行浏览器自动打开

package.json：在scripts配置项下找到serve或dev，在后面空一格加上--open

  "scripts": {
    "dev": "vue-cli-service serve --open",
    ....
  },
1.3.1 关闭eslint校验工具（工作中建议开启，代码规范有利于同组人员协助开发）

在项目文件夹根目录下找到vue.config.js（与src同级），没有的话创建一个。

module.exports = {
	//关闭eslint提示。
	lintOnSave: false
}
1.3.2 配置代理跨域

在项目文件夹根目录下找到vue.config.js（与src同级），没有的话创建一个。

devServer: {
	proxy: {
		// 代理地址的前缀
		'/dev-api' : {
			// 代理地址
			target: 'http://gmall-h5-api.atguigu.cn',
			// 是否更改请求头中的host地址，true：更改，为target地址； false：不更改，默认为本机地址。
			changeOrigin: true,
			// 重写请求地址
			pathRewrite:  { '^/dev-api': '' },
		}
	}
}
1.3.3 配置@为路径别名
  • paths：配置路径别名
  • exclude：排除的文件夹
 {
	"compilerOptions": {
		"paths": {
			"@/*": [
				"src/*"
			]
		}
	},
	
    "exclude": [
        "node_modules",
        "dist"
    ]
 }

2. 路由问题

2.1 路由传参

路由传参可看这篇文章Vue2高级-配置路由、路由传参与路由路径的两种模式

2.2 编程式路由导航多次点击报错问题

  • 原因：Vue-router@3.0 之后添加了同一路径跳转错误异常功能导致。

  • 具体原因

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

    多次执行警告

    执行结果发现：push的返回结果为一个Promise函数，因为Promise函数需要成功和失败的回调作为两个参数而此处没有传递，所以导致了报错。

    此时可以想到给push传递两个成功和失败的回调即可，但是该方法过于麻烦，并且治标不治本。例： this.$router.push({name:"Search",query:{keyword:this.keyword}},()=>{},()=>{})

  • 完美的解决方法：重写$router.push()和$router.replace()方法

    // 重写push|replace
// function(跳转路径，请求成功回调函数，请求失败回调函数)

// call|apply区别
//  相同点：都可以调用函数一次，都可以篡改函数上下文一次。
//  不同点：call传参用逗号隔开，apply传参用数组传递。
VueRouter.prototype.push = function (location, resolve, reject) {
    if (resolve && reject) {
        //代表着两个形参接受参数【箭头函数】
        originPush.call(this, location, resolve, reject);
    } else {
        originPush.call(this, location, () => {}, () => {});
    }
};

VueRouter.prototype.replace = function (location, resolve, reject) {
    if (resolve && reject) {
        //代表着两个形参接受参数【箭头函数】
        originReplace.call(this, location, resolve, reject);
    } else {
        originReplace.call(this, location, () => {}, () => {});
    }
}

3. 封装Axios&引入进度条

  • axios的使用可以参考Axios文档

  • 提示：在js文件中可以引入其他js文件，所以在axios.js配置文件中使用store也是可以的，可以将这些配置仅当成js文件来看待。

  • nprogress进度条：

    • import nprogress from 'nprogress'
    • nprogress.start()进度条开始，nprogress.done()进度条结束
    // 对于axios进行二次封装
import axios from 'axios'
// 引入进度条
import nprogress from 'nprogress'
// 引入进度条样式
import "nprogress/nprogress.css"

// 引入store
import store from "@/store";

// start: 进度条开始； done：进度条结束

// 1.利用axios对象的方法create，创建一个axios实例
// 2.request就是axios，只是稍微配置一下
const requests = axios.create({
    // 配置对象
    // 基础路径
    baseURL: '/api',
    // 请求超时的时间
    timeout: 5000,
})

// 请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
    nprogress.start()
    // config:配置对象，对象里面的Header请求头很重要。
    if (store.state.detail.uuid_token) {
        // 给请求头添加字段，后台为 userTempId
        config.headers.userTempId = store.state.detail.uuid_token
    }
    // 判断：携带token给服务器
    if (store.state.user.token) {
        config.headers.token = store.state.user.token
    }
    return config
})

// 响应拦截器
requests.interceptors.response.use((res) => {
	    // 成功的回调函数：服务器数据回来后，响应拦截器可以拦截到，处理一些事情。
	    nprogress.done()
	    return res.data
	}, (error) => {
	    console.log(error);
	    // 失败的回调函数
	    // 终止Promise链
	    return new Promise()
	}
)


// 对外暴露
export default requests

3.1 请求接口统一封装

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

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

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

3.2 请求接口获取

  1. 通过引入js获取

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

  2. 将js模块统一暴露挂载到Vue实例上

    // * AS API ：统一引入，别名为API
import * as API from '@/api'    // 统一接收api文件夹里面全部请求函数

new Vue({
    render: (h) => h(App),
    ...
    beforeCreate() {
        // 将API模块挂载到Vue原型上
        Vue.prototype.$API = API
    }
}).$mount("#app");

4. 模块化引入Vuex

  • store/index.js下配置Vuex模块

    import Vue from 'vue'
import Vuex from 'vuex'
// 引入模块仓库
import home from './home'
import search from './search'
import detail from "./detail";
import cart from "./cart";
import user from "./user";
import trade from "./trade";

// 使用插件
Vue.use(Vuex)


// 对外暴露Store类的一个实例
export default new Vuex.Store({
    modules: {
        home,
        search,
        detail,
        cart,
        user,
        trade
    }
})

  • main.js下将Vuex挂载到Vue实例身上

    import store from '@/store'     // 引入Vuex仓库

new Vue({
    render: (h) => h(App),
    // 注册仓库：组件实例身上会多一个$store属性
    store,
}).$mount("#app");

5. 防抖与节流

防抖与节流可以看我的这篇文章，总结的比较详细 Vue细节篇【防抖与节流】

6. ES6知识-await和async

  • 使用原因：封装了axios，导致返回结果为Promise函数。

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

    在这里插入图片描述

  • 代码改写

    actions:{
   categoryList({commit}){
         let result =  reqCateGoryList().then(
             res=>{
	             console.log(res)
	             return res
             }
         )
         console.log(result)
         commit('CATEGORYLIST', result.data)
     }
}

    由于Promise是异步请求，执行此段代码后发现，console.log(result)比console.log(res)先执行，此时就导致commit('CATEGORYLIST', result.data)方法并不能拿到result.data数据，所以需要await和async。

  • 含义：await含义是async标识的函数体内的并且在await标识代码后面的代码，先等待await标识的异步请求执行完，再执行。这也使得只有reqCateGoryList执行完，result 得到返回值后，才会执行后面的输出操作。

    async categoryList(){
	let result = await reqCateGoryList()
	console.log("result")
	console.log(result)
}

7. 编程式路由导航+事件委派实现三级分类路由跳转

  • 案例：三级标签列表有很多，每一个标签都是一个页面链接，我们要实现通过点击表现进行路由跳转。
    路由跳转的两种方法：导航式路由<router-link/>、编程式路由。

    1. 导航式路由<router-link/>：有多少个a标签就会生成多少个<router-link/>标签，这样当我们频繁操作时会出现卡顿现象。
    2. 编程式路由$router.push()：我们是通过触发点击事件实现路由跳转。同理有多少个a标签就会有多少个触发函数。虽然不会出现卡顿，但是也会影响性能。

  • 事件委派问题：

    （1）如何确定我们点击的一定是a标签呢？如何保证我们只能通过点击a标签才跳转呢？

    （2）如何获取子节点标签的商品名称和商品id(我们是通过商品名称和商品id进行页面跳转的)

  • 解决方法：

    • 问题1：为三个等级的a标签添加自定义属性date-categoryName绑定商品标签名称来标识a标签（其余的标签是没有该属性的）。

    • 问题2：为三个等级的a标签再添加自定义属性data-category1Id、data-category2Id、data-category3Id来获取三个等级a标签的商品id，用于路由跳转。
      我们可以通过在函数中传入event参数，获取当前的点击事件，通过event.target属性获取当前点击节点，再通过dataset属性获取节点的属性信息。

<div class="all-sort-list2" @click="goSearch">
    <div class="item" v-for="(c1, index) in categoryList" :key="c1.categoryId"
        :class="{ cur: currentIndex === index }">
        <div v-show="index !== 9 && index !== 16">
            <!-- 一级分类 -->
            <h3 @mouseenter="changeIndex(index)">
                <a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId">{{ c1.categoryName }}</a>
            </h3>
            <!-- 二级、三级分类 -->
            <div class="item-list clearfix"
                :style="{ display: currentIndex === index ? 'block' : 'none' }">
                <div class="subitem" v-for="(c2) 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) 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>
  • 对应的goSearch方法
// 进行路由跳转的方法
goSearch(event) {
    let element = event.target
    console.log(element);
    // <a data-v-18b3c0cc data-categoryname="手机" data-category3id="61">手机</a>
    let { categoryname, category1id, category2id, category3id } = element.dataset

    // 标签身上拥有categoryname一定是a标签
    if (categoryname) {
        // 定义路由跳转的参数
        let location = { name: 'search' }
        let query = { categoryName: categoryname }
        // 区分一级、二级、三级分类标签
        if (category1id) {
            query.category1Id = category1id
        } else if (category2id) {
            query.category2Id = category2id
        } else if (category3id) {
            query.category3Id = category3id
        }

        // 判断：如果路由中有params参数，则需要一起收集
        if (this.$route.params) {
            location.params = this.$route.params
            // 整理完参数
            location.query = query
            this.$router.push(location)

        }
    }
},

8. 数据获取问题

当遇到需要多次切换的路由时，将该路由的数据获取放到App.vue的mounted中能够减少性能的消耗

export default {
    name: 'App',
    mounted() {
        // 将获取数据的方法放在App中会更好，每次组件切换不会重新获取，仅会获取一次。
        // 触发Vuex发送请求获取数据
        this.$store.dispatch('home/categoryList')
    },
}
</script>

9. 提取轮播图为公共组件

需要注意的是我们要把定义swiper对象放在watch中执行，并且还要设置immediate：true属性，这样可以实现，无论数据有没有变化，上来立即监听一次。

公共组件Carousel代码

<template>
  <div class="swiper-container" ref="cur" id="floor1Swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(carouse,index) in carouselList" :key="carouse.id">
        <img :src="carouse.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";
import 'swiper/css/swiper.css'
export default {
  name: "Carousel",
  props:["carouselList"],
  watch: {
    carouselList: {
      //这里监听，无论数据有没有变化，上来立即监听一次
      immediate: true,
      //监听后执行的函数
      handler(){
        //第一次ListContainer中的轮播图Swiper定义是采用watch+ this.$nextTick()实现

        this.$nextTick(() => {
          let mySwiper = new Swiper(this.$refs.cur,{
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              // clickable: true
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          })
        })
      }
    }
  }
}
</script>

10. ES6知识-合并对象

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

// 组件挂载之前执行
beforeMount() {
	// 商品分类搜索条件--复杂的写法
	// this.searchParams.category1Id = this.$route.query.category1Id;
	// this.searchParams.category2Id = this.$route.query.category2Id;
	// this.searchParams.category3Id = this.$route.query.category3Id;
	// this.searchParams.categoryName = this.$route.query.categoryName;
	
	// 合并对象，将第一个参数之后的参数摊入第一个参数中。
	Object.assign(this.searchParams, this.$route.query, this.$route.params)
},

11. 组件间通信方式（六种）

详细介绍请点击此处查看Vue2进阶篇-组件间通信的6钟方式

12. Vuex获取数据undefined警告

  • 对应的getters代码

    const getters =  {
    categoryView(state){
        return state.goodInfo.categoryView
    }
}

  • getters获取数据return state.goodInfo.categoryView，页面可以正常运行，但是会出现红色警告。
    在这里插入图片描述

  • 原因：假设我们网络故障，导致goodInfo的数据没有请求到，即goodInfo是一个空的对象，当我们去调用getters中的return state.goodInfo.categoryView时，因为goodInfo为空，所以也不存在categoryView，即我们getters得到的categoryView为undefined。所以我们在html使用该变量时就会出现没有该属性的报错。
    即：网络正常时不会出错，一旦无网络或者网络问题就会报错。

  • 总结：所以我们在写getters的时候要养成一个习惯在返回值后面加一个||条件。即当属性值undefined时，会返回||后面的数据，这样就不会报错。
    如果返回值为对象加|| {}，数组：|| []。

13. 路由导航守卫

  • 作用：拦截路由进入和离开，可进行权限判断等操作。

  • 全局前置守卫实现页面跳转验证
    在这里插入图片描述

//设置全局导航前置守卫
router.beforeEach(async(to, from, next) =>  {
    let token = store.state.user.token
    let name = store.state.user.userInfo.name
    //1、有token代表登录，全部页面放行
    if(token){
        //1.1登陆了，不允许前往登录页
        if(to.path==='/login'){
            next('/home')
        } else{
            //1.2、因为store中的token是通过localStorage获取的，token有存放在本地
            // 当页面刷新时，token不会消失，但是store中的其他数据会清空，
            // 所以不仅要判断token,还要判断用户信息

            //1.2.1、判断仓库中是否有用户信息，有放行，没有派发actions获取信息
            if(name)
                next()
            else{
                //1.2.2、如果没有用户信息，则派发actions获取用户信息
                try{
                    await store.dispatch('getUserInfo')
                    next()
                }catch (error){
                    //1.2.3、获取用户信息失败，原因：token过期
                    //清除前后端token，跳转到登陆页面
                    await store.dispatch('logout')
                    next('/login')
                }
            }
        }
    }else{
        //2、未登录，首页或者登录页可以正常访问
        if(to.path === '/login' || to.path === '/home' || to.path==='/register')
            next()
        else{
            alert('请先登录')
            next('/login')
        }
    }
})

14. Vue图片引入问题

非js内引入图片（html）：一般都是通过路径引入，例如：<img src="../assets/pay.jpg">。

js内引入图片: 可分为通过路径引入和不通过路径引入。
1、如果想要通过路径方式在vue中的js引入图片，必须require引入。
例如：js中引入个人支付二维码可以通过下面方式实现

this.$alert(`<img height="200px" width="200px" src="${require('@/assets/pay.jpg')}"  / >`, '请使用微信扫码', {
	dangerouslyUseHTMLString: true,
	showCancelButton: true,
	center: true
});

15. 表单验证

表单验证个人推荐使用element ui的from表单验证，看一下官网的示例就会用。
element ui from表单验证链接

16. 图片懒加载

懒加载vue-lazyload插件官网
插件的使用直接参考官方教程，很简单。

17. 路由懒加载

  • component: () => import('../pages/Detail')，只有在调用时才会执行该回调，然后挂在组件
  //详情页面组件
    {
        //需要params传参（产品id）
        path: "/detail/:skuId",
        name: 'Detail',
        component: ()=> import('../pages/Detail'),
        meta:{show: true},
    },
    //添加购物车成功
    {
        path: "/addcartsuccess",
        name: 'AddCartSuccess',
        component: ()=> import('../pages/AddCartSuccess'),
        meta:{show: true},
    },

18. 项目打包发布

在项目文件夹下执行npm run build。会生成dist打包文件。
在这里插入图片描述
将打包好的项目文件直接扔在服务器端，通过Nginx配置即可访问。

大脑不能为空
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
尚硅谷Vue2项目尚品汇笔记及技巧汇总
With_Sunflower的博客
11-18 417
B站尚硅谷Vue2前台项目尚品汇笔记及技巧汇总，整理自用，部分内容摘自老师上课所记笔记哈~
Vue前端项目【尚品汇】
Blue_Pepsi_Cola的博客
01-18 4463
----assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）学习完了Vue后并没有一个整体的项目，让我明白前端的工程化开发。public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面。-----components文件夹:一般放置非路由组件（或者项目共用的组件）package.json：看到项目描述、项目依赖、项目运行指令。main.js 入口文件【程序最先执行的文件】
尚品汇项目vue2笔记
qq_56688191的博客
07-16 70
Vue笔记
Vue2项目实战--b站尚硅谷--尚品汇项目--详细笔记--day09
m0_55644132的博客
10-25 325
是因为我们要发请求给服务器，让服务器做一些我们想要的操作（比如更新，添加），所以在仓库通知服务器做事情的时候，我们需要等待服务器做完，返回结果，而且在组件中也是，需要等待服务器返回的结果，再进一步操作。没有一次删除全部产品的接口，但是有通过ID一次删一个的接口----多调用几次。要知道删除的产品信息，也要接口。要知道修改的产品信息，也要接口。写的顺序：接口–仓库–组件。写的顺序：接口–仓库–组件。没有接口，同理，和上面一致。
尚品汇VUE项目实战知识点总结
qq_59079803的博客
04-13 2007
Vue尚硅谷项目 1. 脚手架目录 Public：一般放置静态资源（图片） Src:程序员的代码文件 Assets：文件夹里面的资源会webpack会打包成一个模块放进js文件夹里面 components:一般放置非路由组件（或者项目共用的组件） Pages:放路由组件 App.vue 唯一的根组件 main.js 入口文件【程序最先执行的文件】 babel.config.js:babel配置文件 package.json：看到项目描述、项目依赖、项目运行指令 README.md:项目说明文件 2.sr
uni-app+Vue3+pinia+uview-plus搭建的项目包
最新发布
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
vue2-gmap-custom-marker:Vue Google Map自定义标记组件
05-05
对于使用vue-google-maps的旧项目，您必须坚持使用该项目标签 。 您可能会在package.json中强制该插件的5.6.2版本保持兼容性，直到您想要切换到gmap-vue为止。 对于那些使用带有此插件的群集的用户，新版本可能会...
vue-dataflow-editor-Vue2数据流图编辑器-Vue.js开发
05-27
vue-dataflow-editor嗨，您可以使用https://github.com/jagenjo/litegraph.js。...导入“ @ krthr / vue-dataflow-editor / dist / vue-dataflow-editor.css”； const app = new Vue（{/ * ... * /}）;
vue基础知识总结--01
06-30
vue基础知识总结--01
vue微商城项目源码-vue-shop（适用于Node.js 10.x）.zip
06-06
以下将详细介绍如何理解和部署这个Vue-shop项目。 首先，确认你的开发环境。由于项目明确要求Node.js版本为10.x，你需要检查当前的Node.js版本。在终端或命令行界面输入`node -v`，如果显示的版本不在10.x系列，你...
基于springboot+vue的毕业论文选题答辩管理系统
QQ58850198的博客
10-22 2502
个人中心、学生管理、教师管理、课题信息管理、选题信息管理、论文信息管理、论文评分管理、答辩通知管理、成绩评定管理、系统管理；首页、个人中心、课题信息管理、论文信息管理、论文评分管理、答辩通知管理、成绩评定管理；（1）管理员模块：主要功能有：首页、个人中心、学生管理、教师管理、课题信息管理、选题信息管理、论文信息管理、论文评分管理、答辩通知管理、成绩评定管理、系统管理。（2）教师用户：首页、个人中心、课题信息管理、选题信息管理、论文信息管理、论文评分管理、答辩通知管理、成绩评定管理。
Vue2项目实战(一)
weixin_41989250的博客
02-08 1133
assets文件夹：一般也是放置静态资源(一般多个组件共用的静态资源)，需要注意，放在assets文件中的静态资源，webpack打包时会把静态资源当作一个模块打包到js文件里面。-编程式导航：利用组件实例的$router.push|replace方法，可以实现路由的跳转（可以写一些业务）答：不可以，路由传参的时候，对象的写法可以是name、path形式，但是不能与params参数一起使用。-params参数：属于路径当中的一部分，需要注意的是，在配置路由的时候，需要占位。
vue项目答辩题目【第二弹】
m0_60676278的博客
06-12 1345
单点登录（Single Sign-On，简称 SSO）是一种身份验证机制，允许用户使用一组凭据（例如用户名和密码）登录到多个应用程序或系统中，而不需要为每个应用程序或系统单独进行身份验证。这样可以提高用户体验和安全性。假设一个公司有多个应用程序，例如邮件系统、CRM系统、ERP系统等，每个应用程序都需要用户进行身份验证。如果用户需要登录多个应用程序，他们需要输入多次用户名和密码，这会降低用户体验和效率。使用单点登录，用户只需要登录一次，就可以访问所有应用程序。单点登录的实现需要使用一些标准协议和技术，例如：
前端项目(二) vue项目实战-尚品汇
m0_74151862的博客
05-25 3237
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
Vue2项目总结-电商后台管理系统
Czc1357618897的博客
03-20 3478
电商后台管理系统知识性总结
基于 Vue.js 实现的 SPA 尚品汇在线电商前后台项目
Spring-_-Bear 的 CSDN 博客
12-17 1127
基于 Vue.js 实现的 SPA 尚品汇在线电商项目，包含前台应用系统和后台管理系统两大部分，涵盖首页、购物车、订单支付和数据管理等众多子模块。前台项目基于 Vue 和前端三件套，后台项目基于 vue-admin-template 和 element-ui 组件库。采用模块化、组件化、工程化的模式开发，基于最新最热的前端技术如 Vue 全家桶、ES6、Webpack、Axios 等，包括首页、商品搜索列表、商品详情、购物车、订单、支付、用户登录与注册等多个子模块，功能齐全。
尚品汇前台项目总结
qq_42765776的博客
08-23 5982
自学前端，尚品汇前台项目
B站尚硅谷---vue2实战项目《尚品汇》---第二天
m0_64804076的博客
12-02 530
B站尚硅谷---vue2实战项目《尚品汇》---第二天
Vue2尚品汇项目
Frankabcdefgh的博客
11-23 784
Vue2尚品汇项目。
vue2项目vue-quill-editor使用
08-09
要在Vue2项目中使用vue-quill-editor，你可以按照以下步骤进行操作： 1. 在项目中安装vue-quill-editor库。你可以使用npm或者yarn来安装，具体命令如下： ``` npm install vue-quill-editor 或 yarn add vue-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值