【前端Vue】Vue从0基础完整教程第7篇：组件化开发,组件通信【附代码文档】

Vue从0基础到大神学习完整教程完整教程（附代码资料）主要内容讲述：vue基本概念，vue-cli的使用，vue的插值表达式，{{ gaga }}，{{ if (obj.age > 18 ) { } }}，vue指令，综合案例 - 文章标题编辑vue介绍,开发vue的方式,基本使用,如何覆盖webpack配置,目录分析与清理,vue单文件组件的说明,vue通过data提供数据,通过插值表达式显示数据,安装vue开发者工具,v-bind指令,v-on指令,v-if 和 v-show,v-model,v-text 和 v-html。day-08vuex介绍,语法,模块化,小结。面经PC端-element (上)初始化,request,router,login模块,layout模块,dashboard模块（了解）。面经PC端 - Element (下)Article / list 列表,Article / add 添加,Article / del 删除,Article / upd 修改,Article / preview 预览,yarn-补充。vue指令（下），成绩案例，计算属性，属性监听v-for,样式处理,基本结构与样式,基本渲染,删除,新增,处理日期格式,基本使用,计算属性的缓存的问题,成绩案例-计算属性处理总分 和 平均分,计算属性的完整写法,大小选,基本使用,复杂类型的监听-监听的完整写法,成绩案例-监听数据进行缓存,配置步骤 （两步）,使用演示。vue指令（下），成绩案例，计算属性，属性监听v-for,样式处理,基本结构与样式,基本渲染,删除,新增,处理日期格式,基本使用,计算属性的缓存的问题,成绩案例-计算属性处理总分 和 平均分,计算属性的完整写法,大小选,基本使用,复杂类型的监听-监听的完整写法,成绩案例-监听数据进行缓存,配置步骤 （两步）,使用演示。组件化开发，组件通信，todo案例，作业什么是组件化开发,组件的注册,全局注册组件,组件的样式冲突 ,组件通信 - 父传子 props 传值,v-for 遍历展示组件练习,单向数据流,组件通信 - 子传父,props 校验,布局,任务组件todo,列表,删除,修改：不做了！下面代码其实就是我想让大家练习,添加,剩余数量,清空已完成,小选与大选,筛选：作业,本地存储,附加练习_1.喜欢小狗狗吗,附加练习_2.点击文字变色,附加练习_3. 循环展示狗狗,附加练习_4.选择喜欢的狗。v-model，ref 和 nextTick，dynamic 动态组件，自定义指令，插槽，案例：商品列表v-model 语法糖,v-model给组件使用,动态组件的基本使用,自定义指令说明,自定义指令 - 局部注册,自定义指令 - 全局注册,自定义指令 - 指令的值,默认插槽 slot,后备内容 (默认值),具名插槽,作用域插槽,案例概览,静态结构,MyTag 组件,MyTable 组件。生命周期，单页应用程序与路由，vue-router研究生命周期的意义,生命周期函数(钩子函数),组件生命周期分类,SPA - 单页应用程序,路由介绍,vue-router介绍,vue-router使用,配置路由规则,路由的封装,vue路由 - 声明式（a标签转跳）导航,vue路由 - 重定向和模式,vue路由 - 编程式（JS代码进行转跳）导航,综合练习 - 面经基础版,组件缓存 keep-alive。面经 H5 端 - Vant（上）初始化,vant,axios封装,router,主题定制-了解,登录&注册。面经 H5 端 - Vant（下）列表,详情,收藏 与 喜欢,我的（个人中心）。Day01_vuex今日学习目标(边讲边练),1.vuex介绍,2.vuex学习内容,3.vuex例子准备,vuex-store准备,5.vuex-state数据源,【vuex-mutations定义-同步修改,【vuex-mutations使用,8.vuex-actions定义-异步修改,9.vuex-actions使用,10.vuex-重构购物车-准备Store,11.vuex-重构购物车-配置项(上午结束),vuex-getters定义-计算属性,13.vuex-getters使用,14.vuex-modules定义-分模块,15.分模块-影响state取值方式,16.分模块-命名空间,扩展: 使用Devtools调试vuex数据。

全套笔记资料代码移步： 前往gitee仓库查看

感兴趣的小伙伴可以自取哦，欢迎大家点赞转发~

面经 H5 端 - Vant（上）

接口文档地址：

初始化

新建项目

创建项目

vue create hm-vant-h5
  • 选项
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features      选自定义
  • 手动选择功能

image-20220613025258757

  • 选择vue的版本
  3.x
> 2.x
  • 是否使用history模式

image-20201025150602129

  • 选择css预处理

image-20201025150716129

  • 选择eslint的风格

image-20201025150814535

  • 选择校验的时机 （直接回车）

image-20220613025447141

  • 选择配置文件的生成方式 （直接回车）

image-20201025151123023

  • 是否保存预设，下次直接使用？ => 不保存，输入 N

image-20220613025710360

  • 等待安装，项目初始化完成

image-20220613025814865

  • 启动项目
npm run serve

ESlint

代码规范：一套写代码的约定规则。例如：赋值符号的左右是否需要空格？一句结束是否是要加;？...

没有规矩不成方圆

ESLint:是一个代码检查工具，用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时，我们使用的是 [JavaScript Standard Style]( 代码风格的规则。

规范说明

建议把： 看一遍，然后在写的时候, 遇到错误就查询解决。

下面是这份规则中的一小部分：

  • 字符串使用单引号 – 需要转义的地方除外
  • 无分号 – [这](
  • 关键字后加空格 if (condition) { ... }
  • 函数名后加空格 function name (arg) { ... }
  • 坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null
  • ......
示范错误

如果你的代码不符合standard的要求，eslint会跳出来刀子嘴，豆腐心地提示你。

下面我们在main.js中随意做一些改动：添加一些空行，空格。

import Vue from 'vue'
import App from './App.vue'

import './styles/index.less'
import router from './router'
Vue.config.productionTip = false

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

按下保存代码之后：

你将会看在控制台中输出如下错误：

image-20200503164627096

eslint 是来帮助你的。心态要好，有错，就改。

修改
  • 手动修正

根据错误提示来一项一项手动修正。

如果你不认识命令行中的语法报错是什么意思，你可以根据错误代码（func-call-spacing, space-in-parens,.....）去 ESLint 规则列表中查找其具体含义。

打开 [ESLint 规则表]( + F）这个代码，查找对该规则的一个释义。

1561024887156

  • 通过vscode中的eslint插件来实现自动修正
  1. eslint会自动高亮错误显示
  2. 通过配置，eslint会自动帮助我们修复错误
  • 如何安装

image-20220613030644036

  • 如何配置 加vsc编辑器
// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false
  • 注意：
  • eslint的配置文件必须在根目录下，这个插件才能才能生效。打开项目必须以根目录打开，一次打开一个项目
  • **使用了eslint校验之后，把vscode带的那些格式化工具全禁用了 **
  • **Beatify **
  • Prettier - Code formatter

我的完整配置，供参考

{
  "editor.tabSize": 2,
  "workbench.iconTheme": "vscode-icons",
  "explorer.compactFolders": false,
  "security.workspace.trust.untrustedFiles": "open",
  "git.enableSmartCommit": true,
  // 不要有分号
  "prettier.semi": false,
  // 使用单引号
  "prettier.singleQuote": true,
  // 默认使用prittier作为格式化工具
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "emmet.showAbbreviationSuggestions": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "editor.fontSize": 16,  // 设置文字的大小
  "window.zoomLevel": 1,
  "emmet.triggerExpansionOnTab": true,
  // 保存时自动格式化 - 按照eslint的规则格式化
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // 保存代码，不自动格式化
  "editor.formatOnSave": false
}

image-20220613175123310

目录结构

强烈建议大家严格按照老师的步骤进行调整，为了符合企业规范

为了更好的实现后面的操作，我们把整体的目录结构做一些调整。

目标:

  1. 删除初始化的一些默认文件
  2. 修改没删除的文件
  3. 新增我们需要的目录结构
index.html

public/index.html 修改视口，开发的是移动端项目

<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0, user-scalable=0"
/>

main.js 不需要修改

router/index.js

删除默认的路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
]

const router = new VueRouter({
  routes
})

export default router

App.vue 样式删除

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
删除文件
  • src/views/AboutView.vue
  • src/views/HomeView.vue
  • src/components/HelloWorld.vue
  • src/assets/logo.png
新增目录
  • src/api 目录
  • 存储接口模块 (发送ajax请求接口的模块)
  • src/utils 目录

  • 存储一些工具模块 (自己封装的方法)

  • src/assets 目录

  • 新增项目使用的素材

目录效果如下:

image-20220613033022857

vant

组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。

组件库并不是唯一的

pc: element-ui iview ant-design

移动：vant-ui

  • 安装vant-ui
npm i vant@latest-v2

npm i vant@latest-v2 -S --legacy-peer-deps

  • 全部导入-了解

  • 在main.js中

import Vant from 'vant';
import 'vant/lib/index.css';
// 把vant中所有的组件都导入了
Vue.use(Vant)
  • 即可使用
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

image-20220613034144156

==vant-ui提供了很多的组件，全部导入，会导致项目打包变得很大。==

按需加载

  • 安装一个插件
npm i babel-plugin-import -D

npm i babel-plugin-import --force
  • 在babel.config.js中配置
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}
  • 按需加载，在main.js 
import { Button, Icon } from 'vant'

Vue.use(Button)
Vue.use(Icon)

单独配置

  • main.js引入，后期组件会越来越多，提取到 utils/vant.js中
import Vue from 'vue'
import { Button, Icon } from 'vant'
Vue.use(Button)
Vue.use(Icon)
  • main.js中引入
import '@/utils/vant'
  • app.vue中进行测试
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
  • 后续我们用到的所有的组件：
import Vue from 'vue'
import {
  Button, Icon, Tabbar, TabbarItem,
  NavBar,
  Form,
  Field,
  Toast,
  Cell,
  List,
  Grid,
  GridItem,
  CellGroup
} from 'vant'

Vue.use(Button)
Vue.use(Icon)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Toast)
Vue.use(Cell)
Vue.use(List)

Vue.use(Grid)
Vue.use(GridItem)
Vue.use(CellGroup)

等比适配【重要】

官方说明：

npm i postcss-px-to-viewport@1.1.1 -D --force
  • 项目根目录， 新建postcss的配置文件postcss.config.js
// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

// 重新启动项目！
  • 如何写页面的样式，比如 375屏幕下，写200px大小的盒子，直接写就可以
  • webpack装的这个包，会自动帮我们转换为vw vh单位！

axios封装

接口文档地址：

我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

  1. 安装 axios
npm i axios -S
  1. 新建 utils/request.js 封装 axios 模块

利用 axios.create 创建一个自定义的 axios 来使用

/* 封装axios用于发送请求 */
import axios from 'axios'

// 创建一个新的axios实例
const request = axios.create({
  baseURL: '
  timeout: 5000  // 超时5000ms
})

// 添加请求拦截器
request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

export default request
  1. 测试 (可以先注册后登录)
<script>
export default {
  async created () {
    // const res = await request.post('/user/register', {
    //   username: 'shuaipeng',
    //   password: '123456'
    // })
    const res = await request.post('/user/login', {
      username: 'shuaipeng',
      password: '123456'
    })
    console.log(res)
  }
}
</script>

image-20220614054157121

router

但凡是单个页面，独立展示的，都是一级路由

路由设计：基于昨天面试经验

  • 登录页 （一级） Login
  • 注册页（一级） Register
  • 文章详情页（一级） Detail
  • 首页（一级） Layout
  • 面经（二级）Article
  • 收藏（二级）Collect
  • 喜欢（二级）Like
  • 我的（二级）My

一级

router/index.js配置一级路由, 一级views组件于教学资料中直接 CV 即可

import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from '@/views/Login'
import Register from '@/views/Register'
import Detail from '@/views/Detail'
import Layout from '@/views/Layout'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/register', component: Register },
    { path: '/article/:id', component: Detail },
    {
      path: '/',
      component: Layout
    }
  ]
})

export default router

清理 App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  async created () {

  }
}
</script>
  • 底部 tabbar 标签页

image-20220614061531984

utils/vant.js 引入组件

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

Layout.vue

<template>
  <div class="layout-page">
    首页架子 - 内容区域

    <van-tabbar>
      <van-tabbar-item icon="notes-o">面经</van-tabbar-item>
      <van-tabbar-item icon="star-o">收藏</van-tabbar-item>
      <van-tabbar-item icon="like-o">喜欢</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

二级

router/index.js配置二级路由, 二级路由views组件于教学资料中直接 CV 即可

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login'
import Register from '@/views/Register'
import Detail from '@/views/Detail'
import Layout from '@/views/Layout'

import Like from '@/views/Layout/Like'
import Article from '@/views/Layout/Article'
import Collect from '@/views/Layout/Collect'
import User from '@/views/Layout/User'


Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/register', component: Register },
    { path: '/article/:id', component: Detail },
    {
      path: '/',
      component: Layout,
      children: [
        { path: '/', redirect: '/article' },
        { path: '/article', component: Article },
        { path: '/like', component: Like },
        { path: '/collect', component: Collect },
        { path: '/user', component: User }
      ]
    }
  ]
})

export default router

layout.vue 配置路由出口, 配置 tabbar

<template>
  <div class="layout-page">
    <router-view></router-view>

    <van-tabbar route>
      <van-tabbar-item to="/article" icon="notes-o">面经</van-tabbar-item>
      <van-tabbar-item to="/collect" icon="star-o">收藏</van-tabbar-item>
      <van-tabbar-item to="/like" icon="like-o">喜欢</van-tabbar-item>
      <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="less" scoped>
.layout-page {
  .van-tabbar-item--active {
    color: #FA6D1D;
  }
}
</style>

效果图：

image-20220614062353202

主题定制-了解

整体网站风格，其实都是橙色的，可以通过变量覆盖的方式，制定主题色

babel.config.js 制定样式路径

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      // 指定样式路径
      style: (name) => `${name}/style/less`
    }, 'vant']
  ]
}

vue.config.js 覆盖变量

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量
            'blue': '#FA6D1D',
          },
        },
      },
    },
  },
})

登录&注册

login布局

image-20220614062935057

使用组件

  • van-nav-bar
  • van-form
  • van-field
  • van-button

vant-ui.js 注册

import Vue from 'vue'
import {
  NavBar,
  Form,
  Field
} from 'vant'
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)

Login.vue 使用

<template>
  <div class="login-page">
    <van-nav-bar title="面经登录" />

    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'login-page',
  data () {
    return {
      username: 'zhousg',
      password: '123456'
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</script>

Login.vue添加 router-link 标签（跳转到注册）

<template>
  <div class="login-page">
    <van-nav-bar title="面经登录" />

    <van-form @submit="onSubmit">
      ...
    </van-form>

    <router-link class="link" to="/register">注册账号</router-link>
  </div>
</template>

Login.vue调整样式

<style lang="less" scoped>
.link {
  color: #069;
  font-size: 12px;
  padding-right: 20px;
  float: right;
}
</style>

register布局

register.vue

<template>
  <div class="login-page">
    <van-nav-bar title="面经注册" />

    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
    <router-link class="link" to="/login">有账号，去登录</router-link>
  </div>
</template>

<script>
export default {
  name: 'register-page',
  data () {
    return {
      username: 'zhousg',
      password: '123456'
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</script>

<style lang="less" scoped>
.link {
  color: #069;
  font-size: 12px;
  padding-right: 20px;
  float: right;
}
</style>

toast 轻提示

1/组件内 **通过this直接调用

import { Toast } from 'vant';
Vue.use(Toast)  // vant.js内部注册

this.$toast('提示内容')  // 全局使用

2/某个组件内，单独导入，单独调用

import { Toast } from 'vant';
Toast('提示内容');

实现注册

  • 点击按钮实现注册：有成功和错误的报错！
async onSubmit (values) {
    try {
        await this.$axios({ method: 'POST', url: '/user/register', data: values })
        this.$toast.success('注册成功')
    } catch (error) {
        this.$toast.fail(error.response.data.message)
    }
}
  • 成功注册后：转跳到登录的路由
this.$router.push({path:"/login"})

实现登录

  • 点击按钮实现登录的api
async onSubmit (values) {
    try {
        const { data } = await this.$axios({ method: 'POST', url: '/user/login', data: values })
        this.$toast.success('登录成功')
        localStorage.setItem('h5-token', 'Bearer ' + data.token) // 存token，后续所有接口都要用!
        this.$router.push({ path: '/article' }) // 路由切换主页layout下Arcticle路由
    } catch (error) {
        this.$toast.fail(error.response.data.message)
    }
}

统一错误处理

request.js响应拦截器，统一处理错误提示

import { Toast } from 'vant'



// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data
}, function (error) {
  if (error.response) {
    // 有错误响应, 提示错误提示
    Toast(error.response.data.message)
  }
  // 对响应错误做点什么
  return Promise.reject(error)
})

路由拦截

  • token去限制

这个 面经移动端 项目，只对 登录用户 开放，如果未登录，一律拦截到登录

  1. 如果访问的是首页，无token， 拦走

  2. 如果访问的是列表页，无token，拦走

  3. 如果访问的是详情页，无token，拦走

....

分析：哪些页面，是不需要登录，就可以访问的！ => 注册 和 登录 （白名单）

核心逻辑：

  1. 判断用户有没有token， 有token， 直接放行
  2. 没有token，
  3. 如果是白名单中的页面，直接放行
  4. 否则，无token，且在访问需要权限访问的页面，直接拦截到登录

vue路由内置了一个语法

**全局前置守卫： 路由守卫 **

  1. 所有的路由一旦被匹配到，在真正渲染解析之前，都会先经过全局前置守卫
  2. 只有全局前置守卫放行，才能看到真正的页面
// 全局前置守卫：
// 1. 所有的路由一旦被匹配到，在真正渲染解析之前，都会先经过全局前置守卫
// 2. 只有全局前置守卫放行，才能看到真正的页面

// 任何路由，被解析访问前，都会先执行这个回调
// 1. from 你从哪里来， 从哪来的路由信息对象
// 2. to   你往哪里去， 到哪去的路由信息对象
// 3. next() 是否放行，如果next()调用，就是放行 => 放你去想去的页面
//    next(路径) 拦截到某个路径页面

const whiteList = ['/login', '/register'] // 白名单列表，记录无需权限访问的所有页面

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem("h5-token");

  // 如果有token，直接放行
  if (token) {
    next()
  } else {
    // 没有token的人, 看看你要去哪
    // (1) 访问的是无需授权的页面（白名单），也是放行
    //     就是判断，访问的地址，是否在白名单数组中存在 includes
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // (2) 否则拦截到登录
      next('/login')
    }
  }
})

未完待续， 同学们请等待下一期

全套笔记资料代码移步： 前往gitee仓库查看

感兴趣的小伙伴可以自取哦，欢迎大家点赞转发~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/552588.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

使用WebSocket实现答题积分排名实时更新的功能

使用WebSocket实现答题积分排名实时更新的功能

需求分析 接到一个需求&#xff0c;是一个答题积分小程序&#xff0c;其中有一个功能需求是需要实时更新答题积分排名的。之前通常比较常见的需求&#xff0c;都是指定某个时间点才更新答题排行榜的数据的。 经过技术调研&#xff0c;要实现答题积分排名实时更新的功能&#…
阅读更多...
基于SpringBoot+Vue的装饰工程管理系统（源码+文档+包运行）

基于SpringBoot+Vue的装饰工程管理系统（源码+文档+包运行）

一.系统概述 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统装饰工程项目信息管理难度大&#xff0c;容错率低&a…
阅读更多...
Word分节后，页码不连续、转PDF每节后多出空白页解决办法

Word分节后，页码不连续、转PDF每节后多出空白页解决办法

1. 问题图例 废话少说&#xff0c;先上图&#xff1a; 2. 问题分析 问题分析&#xff1a;出现以上问题的原因可能有&#xff0c; 未链接到上一节页面布局中节的起始位置设置为[奇数页] 3. 解决问题 若为【1. 未链接到上一节】导致该问题出现&#xff0c;则我们需要选中页脚…
阅读更多...
【Java开发指南 | 第十一篇】Java运算符

【Java开发指南 | 第十一篇】Java运算符

读者可订阅专栏&#xff1a;Java开发指南 |【CSDN秋说】 文章目录 算术运算符关系运算符位运算符逻辑运算符赋值运算符条件运算符&#xff08;?:&#xff09;instanceof 运算符Java运算符优先级 Java运算符包括&#xff1a;算术运算符、关系运算符、位运算符、逻辑运算符、赋值…
阅读更多...
Resilience中的RateLimiter

Resilience中的RateLimiter

Resilience中的RateLimiter 一、RateLimiter&#xff08;限流&#xff09;1.常见的限流算法漏桶算法&#xff08;Leaky Bucket&#xff09;令牌桶算法&#xff08;Token Bucket&#xff09;——Spring cloud 默认使用该算法滚动时间窗口&#xff08;tumbling time window&#…
阅读更多...
JVM之方法区的详细解析

JVM之方法区的详细解析

方法区 方法区&#xff1a;是各个线程共享的内存区域&#xff0c;用于存储已被虚拟机加载的类信息、常量、即时编译器编译后的代码等数据&#xff0c;虽然 Java 虚拟机规范把方法区描述为堆的一个逻辑部分&#xff0c;但是也叫 Non-Heap&#xff08;非堆&#xff09; 设置方法…
阅读更多...
就业班 第三阶段（nginx） 2401--4.17 day1 nginx1

就业班 第三阶段（nginx） 2401--4.17 day1 nginx1

负载均衡集群 1、集群是什么&#xff1f; 1 集群&#xff08;cluster&#xff09;技术是一种较新的技术&#xff0c;通过集群技术&#xff0c;可以在付出较低成本的情况下获得在性能、可靠性、灵活性方面的相对较高的收益&#xff0c;其任务调度则是集群系统中的核心技术。 …
阅读更多...
【AI】什么是Ai Agent

【AI】什么是Ai Agent

什么是AI Agent&#xff1f; AI Agent是指人工智能代理&#xff08;Artificial Intelligence Agent&#xff09;是一种能够感知环境进行自主理解&#xff0c;进行决策和执行动作的智能体。AI Agent具备通过独立思考、调用工具逐步完成给定目标的能力。不同于大模型的区别在于&…
阅读更多...
20240417，友元 FRIEND

20240417，友元 FRIEND

本来要学习的吃瓜吃了一下午 目录 3.1 全局函数做友元 3.2 友元类 3.3 成员函数做友元 三&#xff0c;友元 3.1 全局函数做友元 #include<iostream> using namespace std; class Building {friend void goodGay(Building* building);//好朋友&#xff0c;可以访问…
阅读更多...
13.哀家要长脑子了！

13.哀家要长脑子了！

1. 442. 数组中重复的数据 - 力扣&#xff08;LeetCode&#xff09; 哎哟&#xff0c;可能是我太蠢了&#xff0c;我是真的觉得这些题目好神奇的&#xff0c;就这样做到了。感觉这道题跟昨天那道消失的它很类似&#xff0c;但是简单一点。 按照题目的要求数组如果排好序的话应…
阅读更多...
必应Bing国内广告推广，帮助企业降低获客成本！

必应Bing国内广告推广，帮助企业降低获客成本！

搜索引擎广告作为数字营销的重要手段之一&#xff0c;因其精准定位和效果可衡量而备受青睐。而在众多搜索引擎平台中&#xff0c;必应Bing以其独特的市场定位和用户群体成为不可忽视的广告推广渠道。云衔科技作为一家专业的数字营销服务提供商&#xff0c;致力于帮助企业实现高…
阅读更多...
Fiddler抓包工具之高级工具栏中的Inspectors的使用

Fiddler抓包工具之高级工具栏中的Inspectors的使用

高级工具栏中的Inspectors的使用 Inspectors 页签允许你用多种不同格式查看每个请求和响应的内容。JPG 格式使用 ImageView 就可以看到图片&#xff0c;HTML/JS/CSS 使用 TextView 可以看到响应的内容。Raw标签可以查看原始的符合http标准的请求和响应头。Cookies标签可以看到…
阅读更多...
标志寄存器

标志寄存器

文章目录 标志寄存器1. ZF标志2. PF标志3. SF标志4. CF标志5. OF标志6. adc指令7. sbb指令8. cmp指令9. 检测比较结果的条件转移指令10. DF标志和串传送指令11. pushf和popf 标志寄存器 flag 和其他寄存器不一样&#xff0c;其他寄存器是用来存放数据的&#xff0c;都是整个寄…
阅读更多...
MCU最小系统晶振模块设计

MCU最小系统晶振模块设计

单片机的心脏&#xff1a;晶振 晶振模块 单片机有两个心脏&#xff0c;一个是8M的心脏&#xff0c;一个是32.768的心脏 8M的精度较低&#xff0c;所以需要外接一个32.768khz 为什么是8MHZ呢&#xff0c;因为内部自带的 频率越高&#xff0c;精度越高&#xff0c;功耗越大&am…
阅读更多...
直拍打法 漫漫长夜

直拍打法 漫漫长夜

小时候爱玩的时候&#xff0c;有马琳&#xff0c;刘国梁这些大腿在&#xff0c;谁敢想象现在顶尖高手中只有一根独苗而且是欧洲本土独苗了&#xff1f; 小勒布伦&#xff0c;真*直拍之光。 有一说一&#xff0c;国际乒联对于器材的调整&#xff0c;无论是改低粘度的无机胶水&am…
阅读更多...
Docker(七)：容器监控工具(Portainer、CAdvisor)

Docker(七)：容器监控工具(Portainer、CAdvisor)

一&#xff1a;轻量级可视化监控工具Portainer 可视化监控工具, 可以通过docker安装&#xff0c;用于管理和监控docker&#xff0c;基本上的docker命令都有对应的按钮来操作。 # always 表示docker重启了该容器也跟着重启 docker run -d --name portainer -p 8000:8000 -p 90…
阅读更多...
使用docker部署数据可视化平台Metabase

使用docker部署数据可视化平台Metabase

目前公司没有人力开发数据可视化看板&#xff0c;因此考虑自己搭建开源可视化平台MetaBase。在此记录下部署过程~ 一、镜像下载 docker pull metabase/metabase:latest 运行结果如下&#xff1a; 二、创建容器 docker run -dit --name matebase -p 3000:3000\ -v /home/loc…
阅读更多...
将gidp模块、ipam集成到ultralytics项目中实现gidp-yolov8、ipam-yolov8

将gidp模块、ipam集成到ultralytics项目中实现gidp-yolov8、ipam-yolov8

gdip-yolo与ia-seg都是一种将图像自适应模块插入模型前面，从而提升模型在特定数据下检测能力的网络结构。gdip-yolo提出了gdip模块，可以应用到大雾数据与低亮度数据（夜晚环境），然后用于目标检测训练；ia-seg将ia-yolo中的代码修改了一下修车了ipam模块，应用到低亮度数据（…
阅读更多...
柯桥商务口语之怎么样说英语更加礼貌？十个礼貌用语get起来！

柯桥商务口语之怎么样说英语更加礼貌？十个礼貌用语get起来！

当你在国外需要帮助的时候&#xff0c;这些礼貌用语真的是能够帮到你的哦 1.Would/Could you help me? 你可帮助我吗&#xff1f; 相信有些人想请求帮助的时候&#xff0c;一开口就用Can you&#xff0c;这个用在朋友或者熟人上面当然是没有问题的&#xff0c;但是如果是向…
阅读更多...
揭秘“金松奖” | 一个金融科技行业的热门解决方案

揭秘“金松奖” | 一个金融科技行业的热门解决方案

近日&#xff0c;2023年度第十届“金松奖”金融科技行业评选结果正式揭晓&#xff0c;开源网安凭借「度小满互联网金融开源软件治理解决方案」入选合规科技发展热门方案。 “金松奖”是移动支付网主办的金融科技行业线上评选活动&#xff0c;旨在从企业、产品、方案和案例等多维…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站