【超详细】创建vue3+ts项目(引入ElementPlus、Axios)

news2024/12/23 10:31:20

目录

  • 前言
  • 1、使用vue脚手架创建项目
    • 1.1检查vue版本
    • 1.2 使用vue脚手架创建项目
  • 2、删除项目多余文件,修改配置项目
    • 2.1、删除以下文件
    • 2.1、在views下创建index文件
    • 2.2、修改router/index.ts路由文件:
    • 2.3、修改App.vue文件:
    • 2.4、初始化页面样式以及清除浮动
  • 3、引入ElementPlus 组件库
    • 3.1、导入依赖包
      • 第一种:全局挂载ElementPlus,在main.js中添加
      • 第一种:按需导入组件
    • 在页面中使用ElementPlus组件
  • 3、创建登录页面
  • 4、封装并使用 Axios
    • 4.1、安装Axios
    • 4.2、安装NProgress顶部进度条
    • 4.3、封装请求拦截
    • 4.4、前端设置跨域
    • 4.5、配置接口api
    • 4.6、将http请求全局封装


前言

本项目使用到了vue3、Element Plus、axios、spring。


1、使用vue脚手架创建项目

1.1检查vue版本

输入命令vue -V(V要大写),版本需要在4.5.1之后

1

1.2 使用vue脚手架创建项目

1、使用命令vue create vue3-element-demo 创建Vue项目。
2、通过上下键选择,选择 Manually select features,按回车,手动进行配置。
在这里插入图片描述
3、通过上下键选择,通过空格键选中(使用Babel,TypeScript,Router、Vuex、CSS Pre-processors、Linter / Formatter),按回车
在这里插入图片描述

4、选择vue3按回车
在这里插入图片描述
5、是否使用 Class 风格装饰器,此处输入【y】,然后回车确认;
在这里插入图片描述
6、Babel 和 TS 是否一起使用,用于现代模式、自动检测的 polyfills 和转译 JSX,此处输入【y】,然后回车确认;
在这里插入图片描述
7、是否使用history路由模式,此处输入【n】,即使用默认的 hash 模式,然后回车确认;
在这里插入图片描述
8、选择 CSS 预处理器,按上下方向键来选择,笔者习惯了 Less,然后回车确认;
在这里插入图片描述
9、选择第一个ESLint with error prevention only(仅具有错误预防功能的ESLint)
在这里插入图片描述
在这里插入图片描述
10、Babel、ESLint 等插件的配置是单独的文件进行配置,还是都在 package.json 文件里面?此处输选择 package.json 咯,并不想太多零散的配置文件,然后回车确认;
在这里插入图片描述
11、是否保存当前创建 Vue3 项目的特性配置,下次再创建 Vue 项目的时候,可以选择该特性,然后回车确认即可创建完成。这个可以不用保存,输入【n】,然后回车确认;
在这里插入图片描述12、项目创建中;
在这里插入图片描述
项目创建成功:
在这里插入图片描述
在这里插入图片描述
运行项目
在这里插入图片描述
在这里插入图片描述

2、删除项目多余文件,修改配置项目

2.1、删除以下文件

在这里插入图片描述

2.1、在views下创建index文件

在这里插入图片描述

<template>
    <div>我的首页</div>
</template>
  
<script lang="ts">
  export default {
    name: 'Index'
  }
</script>

<style scoped></style>

2.2、修改router/index.ts路由文件:

在这里插入图片描述
编译时会有报错:
vue eslint报错:Component name “index“ should always be multi-word.eslintvue/multi-word-component-names
在这里插入图片描述
原因:除了根组件(App.vue)外,自定义组件名称应该由多单词组成,防止和html标签冲突。
解决方法,关闭eslint校验,重新编译就正常了
lintOnSave: false

在这里插入图片描述

2.3、修改App.vue文件:

在这里插入图片描述

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

<style lang="less">
html,
body,
#app {
  width: 100%;
  height: 100%;
}
</style>

运行效果:
在这里插入图片描述

2.4、初始化页面样式以及清除浮动

新建css/resset.css文件,并在index.html文件中引入,初始化样式
在这里插入图片描述

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
 
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video{
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   font-weight: normal;
   vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section{
   display: block;
 }
 ol, ul, li{
   list-style: none;
 }
 blockquote, q{
   quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after{
   content: '';
   content: none;
 }
 table{
   border-collapse: collapse;
   border-spacing: 0;
 }
  
 /* custom */
 a{
   color: #7e8c8d;
   text-decoration: none;
   -webkit-backface-visibility: hidden;
 }
 ::-webkit-scrollbar{
   width: 5px;
   height: 5px;
 }
 ::-webkit-scrollbar-track-piece{
   background-color: rgba(0, 0, 0, 0.2);
   -webkit-border-radius: 6px;
 }
 ::-webkit-scrollbar-thumb:vertical{
   height: 5px;
   background-color: rgba(125, 125, 125, 0.7);
   -webkit-border-radius: 6px;
 }
 ::-webkit-scrollbar-thumb:horizontal{
   width: 5px;
   background-color: rgba(125, 125, 125, 0.7);
   -webkit-border-radius: 6px;
 }
 html, body{
   width: 100%;
   font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
 }
 body{
   line-height: 1;
   -webkit-text-size-adjust: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 html{
   overflow-y: scroll;
 }
  
 /*清除浮动*/
 .clearfix:before,
 .clearfix:after{
   content: " ";
   display: inline-block;
   height: 0;
   clear: both;
   visibility: hidden;
 }
 .clearfix{
   *zoom: 1;
 }
  
 /*隐藏*/
 .dn{
   display: none;
 }

index.html中引用:
在这里插入图片描述

3、引入ElementPlus 组件库

3.1、导入依赖包

npm i element-plus -D
在这里插入图片描述

第一种:全局挂载ElementPlus,在main.js中添加

在这里插入图片描述

第一种:按需导入组件

vue.config.js中引入(按需导入方式),添加如下配置
在这里插入图片描述

const { defineConfig } = require('@vue/cli-service');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
module.exports = defineConfig({
  transpileDependencies: true,
  //关闭eslint校验
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
})

在页面中使用ElementPlus组件

在这里插入图片描述
效果:
在这里插入图片描述

3、创建登录页面

在view下新建Login.vue文件

在这里插入图片描述

<template>
    <div class="container" :class="{ 'sign-up-mode': signUpMode }">
      <!-- form表单容器 -->
      <div class="form-container">
        <div class="signin-signup">
          <!-- 登录 -->
            <el-form
            ref="ruleFormRef"
            :model="loginUser"
            :rules="rules"
            label-width="100px"
            class="login-form sign-in-form"
            >
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="loginUser.email" placeholder="Enter Email..." />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input
                v-model="loginUser.password"
                type="password"
                placeholder="Enter Password..."
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="submit-btn" @click="submitForm(ruleFormRef)">提交</el-button>
            </el-form-item>
            <!-- 找回密码 -->
            <el-form-item>
                <p class="tiparea">忘记密码<a>立即找回</a></p>
            </el-form-item>
            </el-form>
        </div>
      </div>
      <!-- 左右切换动画 -->
      <div class="panels-container">
        <div class="panel left-panel">
          <div class="content">
            <h3>Row,row,row your boat</h3>
            <p>Gentlely down the stream</p>
            <button @click="signUpMode = !signUpMode" class="btn transparent">
              注册
            </button>
          </div>
        </div>
        <div class="panel right-panel">
          <div class="content">
            <h3>Merrily,merrily,merrily,merrily,</h3>
            <p>Life is but a dream</p>
            <button @click="signUpMode = !signUpMode" class="btn transparent">
              登录
            </button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive, toRefs} from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
    // Vue3语法糖
    // Vue2是通过data和methods传递数据和方法
    // Vue3将data和methods直接耦合在了一起
      // 通过解构getCurrentInstance,获取this,这里的this就是ctx
    //   const { ctx } = getCurrentInstance()
      // 登录/注册模式
      const signUpMode = ref(false)
      const ruleFormRef = ref<FormInstance>()
      // 登录表单
      const loginUser = reactive({
        email: '',
        password: ''
      })
      // 校验规则
      const rules = reactive({
        email: [
          {
            required: true,
            type: 'email',
            message: 'email格式错误',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '密码不得为空', trigger: 'blur' },
          { min: 6, max: 30, message: '密码长度必须在6到30之间', trigger: 'blur' }
        ]
      })
      // 触发登录方法
      const submitForm  = (formEl: FormInstance | undefined) => {
        if(!formEl!) return
        formEl.validate((valid) => {
          if (valid) {
            console.log('submit!')
          } else {
            console.log('error submit!')
            return false
          }
        })
      }
  </script>
  <style scoped>
  .container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
    overflow: hidden;
  }
  .form-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .signin-signup {
    position: relative;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 44%;
    transition: 1s 0.7s ease-in-out;
    display: grid;
    grid-template-columns: 1fr;
    z-index: 5;
  }
  
  /* 左右切换动画 */
  .social-text {
    padding: 0.7rem 0;
    font-size: 1rem;
  }
  
  .social-media {
    display: flex;
    justify-content: center;
  }
  
  .social-icon {
    height: 46px;
    width: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0.45rem;
    color: #333;
    border-radius: 50%;
    border: 1px solid #333;
    text-decoration: none;
    font-size: 1.1rem;
    transition: 0.3s;
  }
  
  .social-icon:hover {
    color: #4481eb;
    border-color: #4481eb;
  }
  
  .btn {
    width: 150px;
    background-color: #5995fd;
    border: none;
    outline: none;
    height: 49px;
    border-radius: 49px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    margin: 10px 0;
    cursor: pointer;
    transition: 0.5s;
  }
  
  .btn:hover {
    background-color: #4d84e2;
  }
  .panels-container {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  
  .container:before {
    content: '';
    position: absolute;
    height: 2000px;
    width: 2000px;
    top: -10%;
    right: 48%;
    transform: translateY(-50%);
    background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);
    transition: 1.8s ease-in-out;
    border-radius: 50%;
    z-index: 6;
  }
  
  .image {
    width: 100%;
    transition: transform 1.1s ease-in-out;
    transition-delay: 0.4s;
  }
  
  .panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-around;
    text-align: center;
    z-index: 6;
  }
  
  .left-panel {
    pointer-events: all;
    padding: 3rem 17% 2rem 12%;
  }
  
  .right-panel {
    pointer-events: none;
    padding: 3rem 12% 2rem 17%;
  }
  
  .panel .content {
    color: #fff;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.6s;
  }
  
  .panel h3 {
    font-weight: 600;
    line-height: 1;
    font-size: 1.5rem;
  }
  
  .panel p {
    font-size: 0.95rem;
    padding: 0.7rem 0;
  }
  
  .btn.transparent {
    margin: 0;
    background: none;
    border: 2px solid #fff;
    width: 130px;
    height: 41px;
    font-weight: 600;
    font-size: 0.8rem;
  }
  
  .right-panel .image,
  .right-panel .content {
    transform: translateX(800px);
  }
  
  /* ANIMATION */
  
  .container.sign-up-mode:before {
    transform: translate(100%, -50%);
    right: 52%;
  }
  
  .container.sign-up-mode .left-panel .image,
  .container.sign-up-mode .left-panel .content {
    transform: translateX(-800px);
  }
  
  .container.sign-up-mode .signin-signup {
    left: 25%;
  }
  
  .container.sign-up-mode form.sign-up-form {
    opacity: 1;
    z-index: 2;
  }
  
  .container.sign-up-mode form.sign-in-form {
    opacity: 0;
    z-index: 1;
  }
  
  .container.sign-up-mode .right-panel .image,
  .container.sign-up-mode .right-panel .content {
    transform: translateX(0%);
  }
  
  .container.sign-up-mode .left-panel {
    pointer-events: none;
  }
  
  .container.sign-up-mode .right-panel {
    pointer-events: all;
  }
  
  @media (max-width: 870px) {
    .container {
      min-height: 800px;
      height: 100vh;
    }
    .signin-signup {
      width: 100%;
      top: 95%;
      transform: translate(-50%, -100%);
      transition: 1s 0.8s ease-in-out;
    }
  
    .signin-signup,
    .container.sign-up-mode .signin-signup {
      left: 50%;
    }
  
    .panels-container {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 2fr 1fr;
    }
  
    .panel {
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      padding: 2.5rem 8%;
      grid-column: 1 / 2;
    }
  
    .right-panel {
      grid-row: 3 / 4;
    }
  
    .left-panel {
      grid-row: 1 / 2;
    }
  
    .image {
      width: 200px;
      transition: transform 0.9s ease-in-out;
      transition-delay: 0.6s;
    }
  
    .panel .content {
      padding-right: 15%;
      transition: transform 0.9s ease-in-out;
      transition-delay: 0.8s;
    }
  
    .panel h3 {
      font-size: 1.2rem;
    }
  
    .panel p {
      font-size: 0.7rem;
      padding: 0.5rem 0;
    }
  
    .btn.transparent {
      width: 110px;
      height: 35px;
      font-size: 0.7rem;
    }
  
    .container:before {
      width: 1500px;
      height: 1500px;
      transform: translateX(-50%);
      left: 30%;
      bottom: 68%;
      right: initial;
      top: initial;
      transition: 2s ease-in-out;
    }
  
    .container.sign-up-mode:before {
      transform: translate(-50%, 100%);
      bottom: 32%;
      right: initial;
    }
  
    .container.sign-up-mode .left-panel .image,
    .container.sign-up-mode .left-panel .content {
      transform: translateY(-300px);
    }
  
    .container.sign-up-mode .right-panel .image,
    .container.sign-up-mode .right-panel .content {
      transform: translateY(0px);
    }
  
    .right-panel .image,
    .right-panel .content {
      transform: translateY(300px);
    }
  
    .container.sign-up-mode .signin-signup {
      top: 5%;
      transform: translate(-50%, 0);
    }
  }
  
  @media (max-width: 570px) {
    form {
      padding: 0 1.5rem;
    }
  
    .image {
      display: none;
    }
    .panel .content {
      padding: 0.5rem 1rem;
    }
    .container {
      padding: 1.5rem;
    }
  
    .container:before {
      bottom: 72%;
      left: 50%;
    }
  
    .container.sign-up-mode:before {
      bottom: 28%;
      left: 50%;
    }
  }
  
  /* 控制login & register显示 */
  form {
    padding: 0rem 5rem;
    transition: all 0.2s 0.7s;
    overflow: hidden;
  }
  
  form.sign-in-form {
    z-index: 2;
  }
  
  form.sign-up-form {
    opacity: 0;
    z-index: 1;
  }
  
  /* register */
  .loginForm,
  .registerForm {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px 40px 20px 20px;
    border-radius: 5px;
    box-shadow: 0px 5px 10px #cccc;
  }
  
  .submit-btn {
    width: 100%;
  }
  .tiparea {
    text-align: right;
    font-size: 12px;
    color: #333;
    width: 100%;
  }
  .tiparea a {
    color: #409eff;
  }
  </style>

在这里插入图片描述
在这里插入图片描述

4、封装并使用 Axios

4.1、安装Axios

npm i axios
在这里插入图片描述

4.2、安装NProgress顶部进度条

npm i --save-dev @types/nprogress
在这里插入图片描述

4.3、封装请求拦截

在 src 目录新建 utils 文件夹,再新建 requestUtil.ts 文件,写上以下代码
在这里插入图片描述

import axios from 'axios'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import { ElMessage } from 'element-plus'
 
const http = axios.create({
  baseURL: '',
  timeout: 300 * 1000, // 请求超时时间设置为300秒
})
 
const NETWORK_ERROR = '网络错误,请联系开发人员'
 
/**
 * 请求拦截器
 */
http.interceptors.request.use((req) => {
  console.log('请求拦截器 =>', req)
  Nprogress.start()
  return req;
}, (error) => {
  Nprogress.done()
  return Promise.reject(error);
});
 
/**
 * 响应拦截器
 */
http.interceptors.response.use(function (res) {
  console.log('响应拦截器 =>', res)
  Nprogress.done()
  if (res.status == 200) {
    return res.data
  } else {
    ElMessage.error((NETWORK_ERROR))
    return Promise.reject(NETWORK_ERROR)
  }
});
 
export default http

4.4、前端设置跨域

在vue.config.js中配置如下代码:
在这里插入图片描述

 devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    // 设置跨域
    proxy: {
      '/api': {
        target: 'https://cbstest.ncbmip.com',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^api': ''
        }
      }
    },
    before: (app) => {}
  }

4.5、配置接口api

在src目录下创建api文件夹,里面创建index.ts
在这里插入图片描述

import http from '@/utils/requestUtils'
 
export default {
  /**
   * 根据用户ID查询用户信息
   * 请服务端先准备好此接口:http://localhost:8080/api/getUserPassword?Password=123456
   */
  getUserById(password: any) {
    return http.get(`/api/getUserPassword?Password=${password}`)
  },
 
  /**
   * 保存用户信息
   */
  saveUser(data: any) {
    return http.post(
      '/api/saveUser',
      data,
      {
        headers: {
          'Content-Type': 'application/json'
        },
      }
    )
  },
}

4.6、将http请求全局封装

在 main.ts 文件引入HTTP请求工具并配置为全局方法
在这里插入图片描述

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'
import UserManage_Api from '@/api/index'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

App.config.globalProperties.$http = {
    ...UserManage_Api,
  }
App.config.globalProperties.$axios = axios

更新中。。。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HTML---表单

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.表单概念 HTML表单是网页上用于收集用户输入信息的一种元素。它由一系列输入字段&#xff08;input&#xff09;、选择字段&#xff08;select&#xff09;、文本区域&#xff08;textarea&a…

CV计算机视觉每日开源代码Paper with code速览-2023.12.8

点击计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【显著目标检测】Texture-Semantic Collaboration Network for ORSI Salient Object Detection 论文地址&#xff1a;https://arxiv.org//pdf/…

深入理解Java虚拟机---Java内存模型

JMM Java内存模型主内存和工作内存volatile Java内存模型 Java内存模型是Java虚拟机规范中试图定义一种Java内存模型(JMM)来屏蔽掉各种硬件和操作系统的内存访问差异&#xff0c;以实现让Java程序在各种平台上都能达到一致的内存访问效果。可以理解为JMM定义一套在多线程读写共…

leetcode 34. 在排序数组中查找元素的第一个和最后一个位置(优质解法)

代码&#xff1a; class Solution {public int[] searchRange(int[] nums, int target) {int[] resultnew int[2];result[0]result[1]-1;//排除特殊情况if(numsnull||nums.length0){return result;}//查找左边界int left0;int rightnums.length-1;while (left<right){int m…

独立完成软件的功能的测试(4)

独立完成软件的功能的测试&#xff08;4&#xff09; &#xff08;12.14&#xff09;&#xff08;功能测试>头条项目实战&#xff09; 项目总体概述 项目背景和定位&#xff1a;一款汇聚科技咨询&#xff0c;技术文章和问答交流的用户移动终端产品&#xff0c;用户可以通过…

【玩转TableAgent数据智能分析】TableAgent全功能详解及多领域数据分析实践(下)数据分析过程及总结展望

6 TableAgent的数据分析过程解析 TableAgent的整个分析过程包括以下步骤&#xff0c;形成一个有机结构&#xff0c;让我们理清其工作原理。 6.1 Data Graph阶段 TableAgent首先绘制数据图&#xff0c;以解决问题。这个图形表示了问题的分解和细化&#xff0c;将大问题分解成…

在WPF窗口中增加水印效果

** 原理&#xff1a; ** 以Canvas作为水印显示载体&#xff0c;在Canvas中创建若干个TextBlock控件用来显示水印文案&#xff0c;如下图所示 然后以每一个TextBlock的左上角为中心旋转-30&#xff0c;最终效果会是如图红线所示&#xff1a; 为了达到第一行旋转后刚好与窗口…

深算院YashanDB与长亮科技联合,推出国产数据库金融核心解决方案

近期&#xff0c;深圳计算科学研究院&#xff08;简称“深算院”&#xff09;携手深圳市长亮科技股份有限公司&#xff08;简称“长亮科技”&#xff09;重磅推出基于崖山数据库YashanDB的金融核心解决方案&#xff0c;为推动金融机构实现技术自主可控与数字化转型全面赋能。 …

C# 从代码入门 Mysql 数据库事务

在业务开发中&#xff0c;使用数据库事务是必不可少的。而开发中往往会使用各种 ORM 执行数据库操作&#xff0c;简化代码复杂度&#xff0c;不过&#xff0c;由于各种 ORM 的封装特性&#xff0c;开发者的使用方式也不一样&#xff0c;开发者想要了解 ORM 对事务做了什么处理是…

Facebook的DINO,无监督模型,可用于分类和分割任务

Facebook的DINO 参考&#xff1a;https://blog.csdn.net/hello_dear_you/article/details/133695006 代码&#xff1a;https://github.com/facebookresearch/dino/tree/main DINO本质上是一种自监督学习方法&#xff0c;其核心思想是通过在大规模的无标签数据集上进行对比学习&…

华为云之轻松搭建 Nginx 静态网站

华为云之轻松搭建 Nginx 静态网站 一、本次实践介绍1. 本次实践目的2. 本次实践环境 二、ECS弹性云服务器介绍三、准备实践环境1. 预置环境2. 查看ECS服务器的账号密码信息3. 登录华为云4. 远程登录ECS服务器 四、安装配置 Nginx1. 安装nginx2. 启动nginx3. 浏览器中访问nginx服…

【Spark精讲】Spark内存管理

目录 前言 Java内存管理 Java运行时数据区 Java堆 垃圾回收机制 Executor内存管理 内存类型 堆内内存 堆外内存 内存管理模式 静态内存管理 统一内存管理 ​编辑 执行内存管理 多任务间内存分配 Shuffle 的内存占用 MemoryOverHead详解 任务内存调节 错误类型…

HarmonyOS给应用添加弹窗

给您的应用添加弹窗 概述 在我们日常使用应用的时候&#xff0c;可能会进行一些敏感的操作&#xff0c;比如删除联系人&#xff0c;这时候我们给应用添加弹窗来提示用户是否需要执行该操作&#xff0c;如下图所示&#xff1a; 弹窗是一种模态窗口&#xff0c;通常用来展示用户…

gRPC-Gateway:高效转换 RESTful 接口 | 开源日报 No.105

grpc-ecosystem/grpc-gateway Stars: 16.4k License: BSD-3-Clause gRPC-Gateway 是一个遵循 gRPC HTTP 规范的 gRPC 到 JSON 代理生成器。它是 Google 协议缓冲编译器 protoc 的插件&#xff0c;可以读取 protobuf 服务定义并生成反向代理服务器&#xff0c;将 RESTful HTTP…

有没有手机电脑同步的工作时间管理软件?

越来越多的职场人士感到每天的工作任务是比较多的&#xff0c;而工作时间又是有限的&#xff0c;所以经常时间不够用。因此&#xff0c;对于上班族来说&#xff0c;高效的时间管理是提高工作效率、按时完成任务的关键。为了满足这一需求&#xff0c;很多网友都在寻找一款既能在…

HarmonyOS给应用添加视频播放功能

Video组件的使用 概述 在手机、平板或是智慧屏这些终端设备上&#xff0c;媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集&#xff0c;还是视频的播放、切换、循环&#xff0c;亦或是相机的预览、拍照等功能&#xff0c;媒体组件都是必不可少的。…

【数学建模美赛M奖速成系列】报名流程与论文的基本格式

数学建模美赛M奖速成系列 写在前面报名方式1.官网直接报名2.赛氪软件辅助报名 论文的基本格式摘要模型建立模型求解结果分析与检验模型评价 竞赛的基本注意事项1. 选题后查找资料2. 写作能力和编程能力 历年优秀论文标题与摘要简明扼要善用图表 最后 写在前面 最近&#xff0c…

Stable Video Diffusion: Scaling Latent Video Diffusion Models to Large Datasets

Stable video diffusion&#xff1a;将潜在视频扩散模型扩展到大型数据集 可以做到&#xff1a;文本-视频的生成、&#xff08;文本-&#xff09;图像-视频的生成、通过图像-视频微调进行多视图合成 摘要 我们提出了Stable video diffusion——一种用于高分辨率、最先进的文…

代码随想录第三十一天(一刷C语言)|无重叠区间划分字母区间合并区间

创作目的&#xff1a;为了方便自己后续复习重点&#xff0c;以及养成写博客的习惯。 一、无重叠区间 思路&#xff1a;参考carl文档 按照右边界排序&#xff0c;从左向右记录非交叉区间的个数。最后用区间总数减去非交叉区间的个数就是需要移除的区间个数了。 ledcode题目&a…

跨境电商如何利用跨境客服软件提升销售额

随着全球化的推进&#xff0c;跨境电商成为了许多企业拓展市场的重要途径。然而&#xff0c;跨境电商面临着语言、文化、时差等多种挑战&#xff0c;为了提供更好的客户服务并提升销售额&#xff0c;跨境电商需要利用跨境客服软件。本文将探讨跨境电商如何利用跨境客服软件来提…