Vue.js实战：构建现代单页应用程序（SPA）的实用指南

欢迎来到《Vue.js实战指南》！本博客将深入探讨如何通过Vue.js构建现代单页应用程序（SPA）。无论你是初学者还是有一定经验的开发者，这里都有关键的实用指南，帮助你从概念到实际应用中构建强大的SPA。准备好迎接Vue.js的实际挑战吧！

1. SPA与Vue.js简介 

1.1 SPA是什么？为什么选择SPA？

a. 单页应用程序（SPA）简介：

单页应用程序是一种Web应用程序或网站，通过动态加载所有相关的代码，使用户在浏览过程中感受不到页面的重新加载。通常，SPA使用Ajax、WebSocket等技术在后台与服务器进行数据交互，实现异步加载内容，提供更流畅的用户体验。

b. 为什么选择SPA？

  • 无需页面刷新：  SPA无需每次用户操作都重新加载整个页面，提供了更快的页面切换体验。

  • 更接近原生应用：  SPA的交互方式更类似于桌面应用，给用户带来更直观、流畅的感觉。

  • 更好的性能：  通过异步加载内容，可以减轻服务器负担，提高前端性能。

  • 更好的用户体验：  SPA通过在前端处理路由和页面渲染，使用户感受到更快的加载速度和更流畅的交互。

1.2 Vue.js作为SPA的理想选择

a. Vue.js简介：

Vue.js是一套用于构建用户界面的渐进式JavaScript框架。它专注于视图层，易于集成到其他库或现有项目中。Vue.js的核心库只关注视图层，非常容易学习，同时它也完全可驱动整个单页应用。

b. 为什么选择Vue.js构建SPA？

  • 轻量灵活：  Vue.js相比其他框架更轻量，易于上手，使开发者能够快速构建SPA。

  • 双向数据绑定：  Vue.js提供了强大的双向数据绑定，简化了状态管理，使得开发更加高效。

  • 组件化开发：  Vue.js采用组件化开发模式，使得代码更易于维护和扩展。

  • 生态系统丰富：  Vue.js有着庞大的生态系统，众多插件和工具可用于构建复杂的SPA。

1.3 SPA开发中的挑战与机遇

a. 挑战：

  • SEO优化：  SPA对搜索引擎的爬取不友好，需要特殊处理以提高搜索引擎排名。

  • 首屏加载时间：  随着应用变得复杂，首屏加载时间可能增加，需要采取优化策略。

  • 状态管理：  随着应用复杂度增加，合理的状态管理变得至关重要。

b. 机遇：

  • 更好的用户体验：  SPA通过无缝的页面切换和流畅的交互提供更好的用户体验。

  • 更高的性能：  异步加载、前端路由等技术可以提高应用性能。

  • 更灵活的架构：  SPA可以采用模块化、组件化的架构，使得应用更易于维护和扩展。

通过深入理解SPA的优势、Vue.js的特点以及在SPA开发中可能面临的挑战，我们可以更好地规划和构建现代的单页应用程序。在接下来的章节中，我们将深入探讨Vue.js的基础知识，以及如何解决SPA开发中的具体问题。

2. Vue.js基础知识回顾 

2.1 Vue实例、组件与数据绑定

a. Vue实例简介：

Vue.js的核心是Vue实例，是Vue应用的入口。通过实例化Vue，我们可以将其挂载到一个DOM元素上，并定义数据、方法以及生命周期钩子函数。

// 创建一个Vue实例
var app = new Vue({el: '#app', // 指定挂载的元素data: {message: 'Hello Vue!'},methods: {showMessage: function () {alert(this.message);}}
});

b. 组件与数据绑定：

Vue中的组件是可复用的Vue实例，可以包含自己的模板、脚本和样式。组件之间通过props进行数据传递，通过事件进行通信。

<!-- 定义一个简单的组件 -->
<template><div><p>{{ message }}</p><button @click="sendMessage">Send Message</button></div>
</template><script>
export default {props: ['message'],methods: {sendMessage() {this.$emit('send', 'Message from child component');}}
}
</script>

2.2 路由管理与Vue Router

a. Vue Router简介：

Vue Router是Vue.js官方的路由管理库，用于构建SPA中的路由系统。通过Vue Router，我们可以实现页面之间的导航、路由参数传递和嵌套路由。

// 在Vue项目中使用Vue Router
import Vue from 'vue';
import VueRouter from 'vue-router';Vue.use(VueRouter);const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];const router = new VueRouter({routes
});new Vue({el: '#app',router,template: '<App/>',components: { App }
});

b. 路由参数与嵌套路由：

通过路由参数，我们可以在路由之间传递数据。嵌套路由允许我们在一个路由内部再次定义子路由，形成嵌套的关系。

// 带参数的路由
{ path: '/user/:id', component: User }// 嵌套路由
{path: '/user',component: UserLayout,children: [{ path: '', component: UserProfile },{ path: 'posts', component: UserPosts }]
}

2.3 Vue状态管理与Vuex

a. Vuex简介：

Vuex是Vue.js官方提供的状态管理库，用于集中管理应用的状态。在大型SPA中，组件之间的数据传递和共享可能变得复杂，Vuex提供了一种统一的状态管理机制。

// 在Vue项目中使用Vuex
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}}
});

b. 状态管理流程：

  1. State（状态）：  应用的状态存储点。

  2. Mutations（变更）：  更改状态的唯一途径是通过提交mutations。

  3. Actions（动作）：  Actions提交mutations，而不直接更改状态，可以包含异步操作。

  4. Getters（获取器）：  从store中的state派生出一些状态，可以在组件中使用。

// 示例Mutations、Actions和Getters
mutations: {increment(state) {state.count++;}
},
actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}
},
getters: {doubleCount: state => state.count * 2
}

通过对Vue实例、组件、路由管理和状态管理的回顾，我们为构建SPA提供了必要的基础知识。在下一步中，我们将深入研究SPA项目的规划与结构设计。

3. 项目规划与结构设计 

3.1 制定项目计划和目标

a. 项目计划：

在开始项目之前，明确项目计划是至关重要的。确定项目的目标、范围和时间表，包括以下方面：

  • 功能需求：  描述项目应该具备的功能。

  • 非功能需求：  包括性能、安全性等方面的需求。

  • 项目时间表：  制定明确的开发、测试和部署计划。

  • 团队角色与责任：  定义团队成员的角色和任务。

b. 项目目标：

  • 提供优秀用户体验：  使用户在应用中感到舒适、流畅。

  • 高性能：  保证应用加载速度和响应时间。

  • 可维护性：  使项目易于维护和扩展。

  • 满足需求：  确保项目符合用户和业务需求。

3.2 设计项目目录结构与组件划分

a. 项目目录结构：

建立清晰的项目目录结构有助于提高代码的可读性和维护性。一个典型的Vue.js项目目录结构可能如下：

|-- src
|   |-- assets       # 存放静态资源
|   |-- components   # 组件目录
|   |-- views        # 视图目录
|   |-- router       # 路由配置
|   |-- store        # Vuex状态管理
|   |-- services     # 服务层，用于数据交互
|   |-- utils        # 工具函数
|   |-- App.vue      # 根组件
|   |-- main.js      # 项目入口文件

b. 组件划分：

合理的组件划分有助于提高代码的可维护性和复用性。根据功能和责任，划分组件可以包括：

  • 通用组件：  可以在整个应用中重复使用的基础组件。

  • 页面组件：  对应不同路由的视图组件。

  • 布局组件：  用于构建页面结构的组件，如头部、底部等。

  • 容器组件：  用于组合其他组件形成复杂结构的组件。

3.3 选择适当的状态管理策略

a. 状态管理的重要性：

在大型SPA中，合适的状态管理策略是确保数据流动一致性的关键。Vuex是Vue.js官方的状态管理库，但在小型项目中，也可以考虑使用简单的组件通信。

b. 使用Vuex的场景：

  • 大型项目：  当应用的状态较为复杂，包含多个组件共享状态时，使用Vuex更为合适。

  • 异步操作：  如果项目中存在较多异步操作，Vuex的Actions可以更好地管理这些操作。

  • 团队协作：  在团队开发中，使用Vuex可以统一状态管理的规范，提高协作效率。

c. 示例Vuex状态管理：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {user: null},mutations: {setUser(state, user) {state.user = user;}},actions: {login({ commit }, user) {// 异步操作，如登录请求commit('setUser', user);},logout({ commit }) {// 异步操作，如注销请求commit('setUser', null);}},getters: {isLoggedIn: state => state.user !== null}
});

通过明确的项目计划、清晰的目录结构和合适的状态管理策略，我们为构建现代SPA奠定了基础。在下一章中，我们将深入研究SPA中的路由与导航。

4. 路由与导航 

4.1 Vue Router的安装与配置

a. 安装Vue Router：

首先，确保已安装Vue.js，然后通过以下命令安装Vue Router：

npm install vue-router

b. 配置Vue Router：

在项目入口文件（通常是main.js）中，配置和使用Vue Router：

// main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';Vue.use(VueRouter);const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];const router = new VueRouter({routes
});new Vue({el: '#app',router,render: h => h(App)
});

4.2 动态路由与嵌套路由

a. 动态路由：

在路由路径中使用冒号标记参数，使得路由可以匹配不同的动态值：

// 在路由配置中定义动态路由
const routes = [{ path: '/user/:id', component: User }
];

在组件中通过this.$route.params.id访问动态路由参数。

b. 嵌套路由：

在路由配置中使用children定义嵌套路由：

const routes = [{path: '/user',component: UserLayout,children: [{ path: '', component: UserProfile },{ path: 'posts', component: UserPosts }]}
];

在组件中使用<router-view>标签来渲染子路由。

4.3 导航守卫的使用与场景案例

a. 导航守卫：

Vue Router提供了导航守卫，允许在路由导航过程中执行代码。常用的导航守卫包括：

  • beforeEach:  在路由跳转前执行，用于拦截导航。

  • beforeResolve:  在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后执行。

  • afterEach:  导航成功完成后执行。

// 路由配置中使用导航守卫
const router = new VueRouter({routes
});router.beforeEach((to, from, next) => {// 在路由跳转前执行// 可以进行登录验证等操作next(); // 继续导航
});router.afterEach(() => {// 导航成功后执行
});

b. 场景案例：

使用导航守卫实现登录验证，确保用户在访问需要登录的页面时已登录：

router.beforeEach((to, from, next) => {const isAuthenticated = /* 判断用户是否登录 */;if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {next('/login'); // 未登录，跳转至登录页} else {next(); // 已登录或不需要登录，继续导航}
});

通过Vue Router的配置和导航守卫，我们能够更灵活地处理SPA中的路由和导航，满足不同的场景需求。在下一章节中，我们将深入研究数据管理与状态同步。

5. 数据管理与状态同步 

5.1 Vuex的基本概念与使用

a. Vuex简介：

Vuex是Vue.js官方的状态管理库，用于集中管理应用的状态。它包含了一系列的规则，确保状态以一种可预测的方式发生变化。

b. 基本概念：

  • State（状态）：  应用的状态存储点，即数据源。

  • Mutations（变更）：  更改状态的唯一途径是通过提交mutations。

  • Actions（动作）：  Actions提交mutations，而不直接更改状态，可以包含异步操作。

  • Getters（获取器）：  从store中的state派生出一些状态，可以在组件中使用。

c. 使用Vuex：

1. 安装Vuex：

npm install vuex

2. 在项目中创建并配置Vuex store：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}},getters: {doubleCount: state => state.count * 2}
});

3. 在入口文件中使用Vuex store：

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';new Vue({el: '#app',store,render: h => h(App)
});

    

4. 在组件中使用Vuex：

 <!-- MyComponent.vue -->
<template><div><p>{{ $store.state.count }}</p><p>{{ $store.getters.doubleCount }}</p><button @click="increment">Increment</button><button @click="incrementAsync">Increment Async</button></div>
</template><script>
export default {methods: {increment() {this.$store.commit('increment');},incrementAsync() {this.$store.dispatch('incrementAsync');}}
}
</script>

5.2 在SPA中处理异步操作

a. Actions中的异步操作：

在Vuex中，Actions用于提交Mutations，可以包含异步操作。在Actions中进行异步操作，例如发送异步请求：

// store.js
actions: {fetchData({ commit }) {// 发送异步请求api.fetchData().then(data => {commit('setData', data);});}
}

b. 组件中的异步操作：

在组件中调用Actions中的异步操作：

<!-- MyComponent.vue -->
<template><div><button @click="fetchData">Fetch Data</button></div>
</template><script>
export default {methods: {fetchData() {this.$store.dispatch('fetchData');}}
}
</script>

5.3 持久化状态与数据缓存

a. 持久化状态：

在某些情况下，需要将Vuex中的状态持久化，以便在页面刷新后数据不丢失。可以使用插件如vuex-persistedstate来实现：

1. 安装插件：

npm install vuex-persistedstate

    

2. 在Vuex的store中配置插件：

 // store.js
import createPersistedState from 'vuex-persistedstate';export default new Vuex.Store({// ...其他配置plugins: [createPersistedState()]
});

b. 数据缓存：

在某些情况下，可以通过在Vuex中缓存数据来提高应用性能。例如，使用一个简单的缓存对象：

// store.js
state: {cache: {}
},
mutations: {setCache(state, { key, value }) {state.cache[key] = value;}
},
actions: {fetchData({ commit, state }, { key }) {if (state.cache[key]) {// 如果数据在缓存中存在，直接使用缓存数据return Promise.resolve(state.cache[key]);} else {// 否则，发送异步请求获取数据return api.fetchData().then(data => {// 将数据存入缓存commit('setCache', { key, value: data });return data;});}}
}

在SPA中，通过合理使用Vuex的状态管理，我们能够更好地处理数据同步和异步操作，同时通过持久化状态和数据缓存来提高应用性能。在下一章中，我们将深入研究SPA中的组件化开发。

6. SPA中的组件化开发 

6.1 单文件组件与Vue文件结构

a. 单文件组件（SFC）：

Vue.js推崇组件化开发，其中单文件组件是一种将模板、脚本和样式封装在一个文件中的方式。一个典型的Vue单文件组件结构如下：

<!-- MyComponent.vue -->
<template><div><p>{{ message }}</p></div>
</template><script>
export default {data() {return {message: 'Hello from MyComponent'};}
}
</script><style scoped>
/* 样式仅在当前组件内生效 */
p {color: blue;
}
</style>

b. Vue文件结构：

在项目中，可以按照以下结构组织Vue文件：

|-- components
|   |-- MyComponent.vue
|   |-- AnotherComponent.vue
|-- views
|   |-- Home.vue
|   |-- About.vue
|-- App.vue
|-- main.js

6.2 组件通信模式与最佳实践

a. 组件通信模式：

在Vue.js中，组件之间的通信可以通过以下方式实现：

  • Props：  从父组件向子组件传递数据。

  • Custom Events：  子组件通过自定义事件通知父组件。

  • Vuex：  使用Vuex进行状态管理，实现组件间的数据共享。

  • Provide/Inject：  祖先组件使用`provide`向后代组件注入数据。

b. Props传递数据：

父组件向子组件传递数据通过Props实现：

<!-- ParentComponent.vue -->
<template><child-component :message="parentMessage" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from ParentComponent'};}
}
</script>

<!-- ChildComponent.vue -->
<template><div><p>{{ message }}</p></div>
</template><script>
export default {props: ['message']
}
</script>

c. Custom Events自定义事件：

子组件通过自定义事件通知父组件：

<!-- ChildComponent.vue -->
<template><button @click="sendMessage">Send Message</button>
</template><script>
export default {methods: {sendMessage() {this.$emit('message', 'Message from ChildComponent');}}
}
</script>

<!-- ParentComponent.vue -->
<template><child-component @message="handleMessage" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleMessage(message) {console.log(message);}}
}
</script>

6.3 使用插槽打造灵活组件

a. 插槽：

插槽是Vue.js中一种强大的组件通信方式，允许父组件向子组件传递内容。有两种类型的插槽：

  • 具名插槽：  允许父组件指定插入内容的位置。

  • 作用域插槽：  允许子组件访问父组件的数据。

b. 具名插槽示例：

<!-- ChildComponent.vue -->
<template><div><slot name="header"></slot><div><!-- 默认插槽 --><slot></slot></div><slot name="footer"></slot></div>
</template>

<!-- ParentComponent.vue -->
<template><child-component><!-- 具名插槽 --><template v-slot:header><h1>Header Content</h1></template><!-- 默认插槽 --><p>Main Content</p><!-- 具名插槽 --><template v-slot:footer><footer>Footer Content</footer></template></child-component>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent}
}
</script>

通过组件化开发，我们可以更好地管理和维护代码，提高代码的复用性。在下一章节中，我们将学习SPA中的性能优化与懒加载。

7. 性能优化与懒加载 

7.1 优化SPA加载速度的常用策略

a. SPA加载速度优化策略：

提高SPA加载速度是优化用户体验的关键。以下是一些常用的优化策略：

  • 代码压缩与混淆：  使用工具（如UglifyJS）对代码进行压缩与混淆，减小文件体积。

  • 减少HTTP请求：  合并和压缩文件，减少页面所需的HTTP请求数。

  • 延迟加载：  将不必要立即加载的资源（如图片、脚本）进行延迟加载。

  • 使用CDN：  使用内容分发网络（CDN）加速静态资源的加载。

  • 服务端渲染（SSR）：  在服务器端进行页面渲染，减轻客户端负担。

7.2 使用Webpack进行代码分割

a. Webpack代码分割：

Webpack提供了代码分割（Code Splitting）的功能，允许将代码切分成小块，按需加载。这有助于减小初始加载时的文件体积，提高应用性能。

// webpack.config.js
const path = require('path');module.exports = {entry: './src/main.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},optimization: {splitChunks: {chunks: 'all'}}
};

7.3 图片懒加载与异步组件

a. 图片懒加载：

延迟加载页面中的图片，使页面能够更快地加载。使用v-lazy指令可以轻松实现图片懒加载：

<!-- MyComponent.vue -->
<template><img v-lazy="imageSrc" alt="Lazy Loaded Image">
</template><script>
export default {data() {return {imageSrc: 'path/to/your/image.jpg'};}
}
</script>

b. 异步组件：

使用异步组件实现按需加载，提高初始加载速度。在路由配置中使用component的工厂函数：

// router.js
const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];

通过以上性能优化策略，我们可以有效地提升SPA的加载速度，从而提供更好的用户体验。在下一章节中，我们将学习与后端的交互与部署。

8. 与后端的交互与部署 

8.1 RESTful API的使用与Axios

a. RESTful API：

RESTful API是一种设计风格，通过HTTP协议进行通信。在SPA中，通过RESTful API与后端进行数据交互是常见的做法。

b. Axios库的使用：

Axios是一个流行的HTTP客户端库，用于在浏览器和Node.js中发送HTTP请求。以下是Axios的基本用法：

// 安装Axios
npm install axios// 在Vue组件中使用Axios
<template><div><button @click="fetchData">Fetch Data</button></div>
</template><script>
import axios from 'axios';export default {methods: {fetchData() {axios.get('/api/data').then(response => {console.log(response.data);}).catch(error => {console.error(error);});}}
}
</script>

8.2 处理跨域请求与认证

a. 跨域请求：

由于浏览器的同源策略，SPA无法直接向其他域名发起Ajax请求。解决跨域问题的方法包括：

  • 在后端设置CORS（跨域资源共享）规则。

  • 使用代理服务器。

  • 使用JSONP（仅支持GET请求）。

b. 认证：

在SPA中进行认证，通常使用JWT（JSON Web Token）或其他类似的身份验证机制。在与后端交互时，需要将认证信息（例如token）发送到后端，以确保安全性。

8.3 部署SPA应用到不同环境

a. 部署到生产环境：

将SPA应用部署到生产环境时，通常需要进行以下步骤：

1. 构建生产版本：  使用工具如Webpack，构建生产版本的应用。

2. 配置服务器：  配置Web服务器，确保正确处理SPA的路由请求。

3. 域名配置：  配置域名和SSL证书，确保应用通过HTTPS访问。

b. 部署到测试环境：

测试环境的部署过程类似于生产环境，但可以更灵活，可能包括：

  • 模拟后端服务：  使用模拟的后端服务，方便前端进行测试。

  • 打包分析：  使用工具分析打包后的文件，优化性能。

通过合理配置和使用工具，SPA应用可以顺利部署到不同环境，确保稳定性和安全性。希望你的SPA应用在与后端的交互和部署过程中取得成功！

9. 调试与测试 

9.1 Vue DevTools的使用

a. Vue DevTools：

Vue DevTools是一个浏览器扩展，用于调试Vue.js应用。它提供了一组强大的工具，帮助开发者检查组件层次、监视状态、跟踪事件等。

b. 安装与使用：

1. 安装Vue DevTools浏览器扩展。

2. 打开浏览器开发者工具，切至Vue标签页。

3. 即可查看组件树、状态、事件等信息。

9.2 单元测试与端到端测试

a. 单元测试：

单元测试用于测试应用中的最小单元，通常是一个函数或一个组件。Vue应用常使用工具如Jest、Mocha、Vue Test Utils等进行单元测试。

b. 示例使用Jest进行单元测试：

// MyComponent.spec.js
import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';describe('MyComponent', () => {test('renders message correctly', () => {const wrapper = mount(MyComponent, {propsData: {message: 'Hello Test'}});expect(wrapper.text()).toContain('Hello Test');});
});

c. 端到端测试（E2E）：

端到端测试涵盖整个应用，测试应用的多个组件之间的协同工作。工具如Cypress、Nightwatch等可用于编写E2E测试。

d. 示例使用Cypress进行E2E测试：

// my_spec.js
describe('MyComponent', () => {it('shows the correct message', () => {cy.visit('/');cy.get('p').should('contain', 'Hello from MyComponent');});
});

9.3 处理常见的SPA调试问题

a. 常见调试问题：

在SPA开发中，可能会遇到一些常见的调试问题，如：

  • 路由问题：  确保路由配置正确，使用Vue DevTools检查当前路由状态。

  • 状态管理问题：  使用Vue DevTools检查Vuex状态变化，确保状态更新正确。

  • 异步操作问题：  使用`console.log`等方式输出信息，检查异步操作的执行顺序和结果。

b. Chrome DevTools调试技巧：

  • 断点调试：  在代码中设置断点，逐步执行代码。

  • Console输出：  使用console.log在控制台输出信息。

  • Network面板：  检查网络请求、响应，查找问题。

  • Application面板：  检查本地存储、Session存储等。

通过合理使用调试工具和测试工具，可以更容易地发现和解决SPA中的问题，确保应用的稳定性和可靠性。在下一章中，我们将讨论与后端的交互与部署。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SQL分类

SQL分类

SQL分类 DDL 查询库 查询表 创建表 修改表 DML 添加数据 修改数据 删除数据 DQL 基本查询 条件查询 聚合函数 分组查询 排序查询 分页查询 执行顺序 DCL 管理用户 管理权限 数据类型 数值类型 字符串类型 日期类型
阅读更多...
【Py/Java/C++三种语言OD2023C卷真题】20天拿下华为OD笔试之【模拟】2023C-结队编程【欧弟算法】全网注释最详细分类最全的华为OD真题题解

【Py/Java/C++三种语言OD2023C卷真题】20天拿下华为OD笔试之【模拟】2023C-结队编程【欧弟算法】全网注释最详细分类最全的华为OD真题题解

文章目录 题目描述与示例题目描述输入描述输出描述示例一输入输出说明 示例二输入输出说明 解题思路代码PythonJavaC时空复杂度 华为OD算法/大厂面试高频题算法练习冲刺训练 题目描述与示例 题目描述 某部门计划通过结队编程来进行项目开发&#xff0c;已知该部门有 N 名员工…
阅读更多...
startUML6.0.1破解方法

startUML6.0.1破解方法

startUML6.0.1破解方法 文章目录 startUML6.0.1破解方法1.startUML6.0.1快速破解2.概述3.安装Nodejs4.安装asar5.修改app.asar中的源码6.将修改后的源码重新压缩7.覆盖官方的asar文件8.重启startUML9.参考文档 1.startUML6.0.1快速破解 后绪步骤可以不看&#xff0c;直接下载我…
阅读更多...
使用@jiaminghi/data-view实现一个数据大屏

使用@jiaminghi/data-view实现一个数据大屏

<template><div class"content bg"><!-- 全局容器 --><!-- <dv-full-screen-container> --><!-- 第二行 --><div class"module-box" style"align-items: start; margin-top: 10px"><!-- 左 -->…
阅读更多...
1162字符串逆序

1162字符串逆序

一&#xff1a;题目 二.思路分析 1.如果不用递归&#xff0c;可以输入字符串后&#xff0c;再逆序输出&#xff0c;但是题目要求使用递归 2.使用递归&#xff1a; 2.1输入字符&#xff0c;直到输入的字符是‘&#xff01;’&#xff0c;停止输入&#xff0c;否则继续输入&…
阅读更多...
自学华为鸿蒙开发？一般人我还是劝你算了吧！！！

自学华为鸿蒙开发？一般人我还是劝你算了吧！！！

本人纯屌丝一枚&#xff0c;在学编程之前对电脑的认知也就只限于上个网&#xff0c;玩个办公软件。这里不能跑题&#xff0c;我为啥说自学鸿蒙开发&#xff0c;一般人我还是劝你算了吧。因为我就是那个一般人。 基础真的很简单&#xff0c;是个人稍微认点真都能懂&#xff0c;…
阅读更多...
Java八股文面试全套真题【含答案】- MyBatis Plus 篇

Java八股文面试全套真题【含答案】- MyBatis Plus 篇

MyBatis Plus 是什么&#xff1f;它与 MyBatis 有什么区别&#xff1f; 答&#xff1a;MyBatis Plus 是基于 MyBatis 进行扩展的一款持久层框架&#xff0c;它提供了一系列增强功能&#xff0c;简化了 MyBatis 的使用。与 MyBatis 相比&#xff0c;MyBatis Plus 提供了更多的便…
阅读更多...
【vscode插件】之点击指令，顶部弹出输入框 可以输入指令，获取输入的内容

【vscode插件】之点击指令，顶部弹出输入框 可以输入指令，获取输入的内容

ChatgGPT4.0国内站点: 海鲸AI-支持AI会话&#xff0c;文件分析&#xff0c;AI绘图 在Visual Studio Code&#xff08;VSCode&#xff09;中创建一个插件&#xff0c;使得当用户点击一个指令时&#xff0c;顶部会弹出一个输入框并允许用户输入内容&#xff0c;可以通过使用VSCo…
阅读更多...
win10下使用fastdds

win10下使用fastdds

参照网址&#xff1a;https://www.cnblogs.com/edkong/p/16522836.html 需要安装的软件和用处&#xff1a; Visual Studio&#xff0c;用于打开和编译fastdds示例工程。下载地址&#xff1a;下载 Visual Studio Tools - 免费安装 Windows、Mac、LinuxCmake&#xff0c;用于将…
阅读更多...
【String str = new String(“hollis“) 创建了几个对象？】

【String str = new String(“hollis“) 创建了几个对象？】

✅典型解析 创建的对象数应该是1个或者2个。 首先要清楚什么是对象? Java是一种面向对象的语言&#xff0c;而Java对象在JVM中的存储也是有一定的结构的&#xff0c;在HotSpot虚机中&#xff0c;存储的形式就是oop-klass model&#xff0c;即ava对象模型。我们在Java代码中&am…
阅读更多...
FastGPT+ChatGLM3-6b搭建知识库

FastGPT+ChatGLM3-6b搭建知识库

前言&#xff1a;我用fastgpt直接连接chatglm3&#xff0c;没有使用oneai&#xff0c;不是很复杂&#xff0c;只需要对chatglm3项目代码做少量修改就能支持使用embeddings&#xff0c;向量模型用的m3e&#xff0c;效果还可以 我的配置&#xff1a; 处理器&#xff1a;i5-13500 …
阅读更多...
VideoPoet: Google的一种用于零样本视频生成的大型语言模型

VideoPoet: Google的一种用于零样本视频生成的大型语言模型

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
【C++进阶02】多态

【C++进阶02】多态

一、多态的概念及定义 1.1 多态的概念 多态简单来说就是多种形态 同一个行为&#xff0c;不同对象去完成时 会产生出不同的状态 多态分为静态多态和动态多态 静态多态指的是编译时 在程序编译期间确定了程序的行为 比如&#xff1a;函数重载 动态多态指的是运行时 在程序运行…
阅读更多...
【Java异常】聊聊异常可能带来的坑

【Java异常】聊聊异常可能带来的坑

一个活生生的案例 本周帮同事排查了一个问题&#xff0c;比较诡异的是他通过测试&#xff0c;并没有找到根本原因&#xff0c;只是发现有对应的错误日志。 但是其实并没有将堆栈信息打印出来。很难看出问题。添加了 e.printStackTrace(); get exception in exter: / by zero显…
阅读更多...
Electron执行本地cmd命令

Electron执行本地cmd命令

javascript执行本地cmd命令,javascript代码怎么执行_js调用本机cmd-CSDN博客 使用 Node.js 打开本地应用_nodejs启动应用-CSDN博客 笔记:nodejs脚本唤醒本地应用程序或者调用命令-CSDN博客 electron调起本地应用_electron 调用本地程序-CSDN博客 命令行打开vscode 你可以使用…
阅读更多...
HP笔记本电脑进入BIOS的方法主要有两种，它们使用场合不同

HP笔记本电脑进入BIOS的方法主要有两种，它们使用场合不同

BIOS&#xff08;基本输入输出系统&#xff09;是一种实用程序&#xff0c;它在你按下电源按钮后启动并加载操作系统。无论是要更新HP笔记本电脑的BIOS系统&#xff0c;还是清除前一个系统中的错误&#xff0c;第一步都是进入BIOS实用程序。 在按键输入BIOS设置并对其进行修改…
阅读更多...
循环神经⽹络中的梯度算法GRU

循环神经⽹络中的梯度算法GRU

1. 什么是GRU 在循环神经⽹络中的梯度计算⽅法中&#xff0c;我们发现&#xff0c;当时间步数较⼤或者时间步较小时&#xff0c;**循环神经⽹络的梯度较容易出现衰减或爆炸。虽然裁剪梯度可以应对梯度爆炸&#xff0c;但⽆法解决梯度衰减的问题。**通常由于这个原因&#xff0…
阅读更多...
如何使用CMake查看opencv封装好的函数

如何使用CMake查看opencv封装好的函数

当我们有时想查看opencv自带的函数的源代码&#xff0c;比如函数cvCreateImage, 此时我们选中cvCreateImage, 点击鼠标右键->转到定义&#xff0c;我们会很惊讶的发现为什么只看到了cvCreateImage的一个简单声明&#xff0c;而没有源代码呢&#xff1f;这是因为openCV将很多…
阅读更多...
Java开发框架和中间件面试题(3)

Java开发框架和中间件面试题(3)

14.Spring事务中的隔离级别有哪几种&#xff1f; 在TransactionDefinition接口中定义了五个表示隔离级别的常量&#xff1a; 1⃣️ISOLATION DEFAULT&#xff1a;使用后端数据库默认的隔离级别&#xff0c;Mysql默认采用的可重复读隔离级别&#xff1b;Oracle默认采用的读已提…
阅读更多...
在Linux下探索MinIO存储服务如何远程上传文件

在Linux下探索MinIO存储服务如何远程上传文件

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、Cpolar杂谈 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. 创建Buckets和Access Keys二. Linux 安装Cpolar三. 创建连接MinIO服务公网地…
阅读更多...
最新文章

Copyright @ 2022~2023