个人备案域名可以做哪些网站吗建设云网站

当前位置： 首页 > news >正文

个人备案域名可以做哪些网站吗,建设云网站,泉州住房和城乡建设部网站,石狮建设网站✅作者简介#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者#xff0c;修心和技术同步精进。 #x1f34e;个人主页#xff1a;Java Fans的博客 #x1f34a;个人信条#xff1a;不迁怒#xff0c;不贰过。小知识#xff0c;大智慧。 #x1f49e;当前专栏… ✅作者简介2022年博客新星 第八。热爱国学的Java后端开发者修心和技术同步精进。 个人主页Java Fans的博客 个人信条不迁怒不贰过。小知识大智慧。 当前专栏Java案例分享专栏 ✨特色专栏国学周更-心性养成之路 本文内容用 Vue.js 打造炫酷的动态数字画廊展示学生作品的创意之旅 文章目录 引言1. 项目准备1.1 技术选型1.2 创建 Vue.js 项目 2. 数据准备2.1 数据结构设计2.2 数据来源2.3 在 Vue.js 中使用数据2.3.1 使用静态数据2.3.2 使用外部 API 2.4 数据验证 3. 创建画廊组件3.1 组件结构3.1.1 HTML 结构 3.2 组件逻辑3.2.1 数据管理3.2.2 事件处理 3.3 样式设计3.3.1 基本样式3.3.2 响应式设计 4. 动态循环展示4.1 实现动画效果 5. 交互功能5.1 点击查看作品详情5.1.1 使用模态框5.1.1.1 模态框结构5.1.1.2 模态框逻辑5.1.1.3 模态框样式 5.2 作品切换5.2.1 添加箭头按钮5.2.2 按钮逻辑5.2.3 按钮样式 5.3 响应式设计 6. 完整代码1. 创建 Vue 项目2. 修改 src/App.vue3. 创建 src/components/Gallery.vue4. 运行项目 总结 引言 在当今数字化时代展示学生的创作不仅是对他们努力的认可更是激励他们继续探索和创新的重要方式。一个生动有趣的数字画廊能够吸引观众的目光让每一件作品都焕发出独特的光彩。本文将带您走进一个充满创意的项目使用 Vue.js 和 JavaScript 构建一个动态数字画廊展示学生的优秀作品。通过简单易懂的步骤和实用的代码示例您将能够轻松实现这一项目打造出一个令人惊叹的视觉体验。无论您是教育工作者、学生还是编程爱好者这个项目都将为您提供灵感和实用的技能让我们一起开始这段创意之旅吧

1. 项目准备 在开始构建动态数字画廊之前我们需要做好充分的准备工作。这包括选择合适的技术栈和创建一个新的 Vue.js 项目。以下是详细的阐述。 1.1 技术选型 在选择技术栈时我们需要考虑项目的需求、可维护性和开发效率。对于本项目我们选择以下技术 Vue.js: Vue.js 是一个渐进式的 JavaScript 框架适合构建用户界面。它的组件化设计使得开发和维护变得更加简单特别适合用于构建动态交互的应用程序。Vue.js 的生态系统丰富拥有大量的插件和工具可以帮助我们快速实现各种功能。 anime.js 或 GSAP: 这两个库都是非常流行的动画库可以帮助我们实现流畅的动画效果。anime.js 轻量且易于使用适合简单的动画需求而 GSAP 则功能强大适合更复杂的动画场景。在本项目中我们可以选择其中一个来增强画廊的视觉效果。 HTML5 和 CSS3: 作为基础的前端技术HTML5 和 CSS3 将用于构建画廊的结构和样式。HTML5 提供了丰富的标签和 APICSS3 则可以帮助我们实现美观的布局和样式。
   1.2 创建 Vue.js 项目 在确定了技术栈后我们需要创建一个新的 Vue.js 项目。以下是详细的步骤 步骤 1: 安装 Node.js 和 Vue CLI 首先确保您的计算机上已经安装了 Node.js。您可以在 Node.js 官网 下载并安装最新版本。安装完成后您可以使用以下命令检查 Node.js 和 npmNode 包管理器的版本 node -v npm -v接下来安装 Vue CLI这是一个用于快速构建 Vue.js 项目的命令行工具。您可以使用以下命令全局安装 Vue CLI npm install -g vue/cli步骤 2: 创建新的 Vue.js 项目 使用 Vue CLI 创建一个新的项目非常简单。打开终端或命令提示符输入以下命令 vue create digital-gallery在命令中digital-gallery 是项目的名称。您可以根据自己的需求更改这个名称。执行命令后Vue CLI 会提示您选择一些配置选项。您可以选择默认配置或者根据需要自定义配置。 步骤 3: 进入项目目录 项目创建完成后进入新创建的项目目录 cd digital-gallery步骤 4: 启动开发服务器 在项目目录中您可以使用以下命令启动开发服务器 npm run serve这将启动一个本地开发服务器您可以在浏览器中访问 http://localhost:8080 查看您的项目。此时您应该能够看到一个默认的 Vue.js 欢迎页面。
2. 数据准备 在构建动态数字画廊之前数据准备是至关重要的一步。我们需要为画廊提供展示的内容包括学生作品的相关信息。以下是详细的阐述涵盖数据结构设计、数据来源以及如何在 Vue.js 中使用这些数据。 2.1 数据结构设计 为了有效地管理和展示学生作品我们需要设计一个合理的数据结构。每个作品通常包含以下几个属性 id: 唯一标识符用于区分不同的作品。title: 作品的标题简洁明了地描述作品内容。imageUrl: 作品的图像 URL指向存储作品图像的地址。description (可选): 作品的描述提供更多背景信息或创作灵感。 以下是一个示例数据结构的 JSON 格式 [{id: 1,title: 作品1,imageUrl: https://example.com/artwork1.jpg,description: 这是作品1的描述。},{id: 2,title: 作品2,imageUrl: https://example.com/artwork2.jpg,description: 这是作品2的描述。},{id: 3,title: 作品3,imageUrl: https://example.com/artwork3.jpg,description: 这是作品3的描述。}// … 其他作品 ]2.2 数据来源 数据可以来自多种来源具体取决于项目的需求和实现方式。以下是几种常见的数据来源 静态数据: 如果作品数量较少且不经常更改可以直接在代码中定义静态数据。这种方式简单直接适合小型项目。 外部 API: 如果作品数据存储在服务器上可以通过 RESTful API 或 GraphQL API 获取数据。这种方式适合需要动态更新数据的项目。 本地 JSON 文件: 可以将作品数据存储在本地的 JSON 文件中然后通过 AJAX 请求加载。这种方式结合了静态和动态数据的优点适合中小型项目。
   2.3 在 Vue.js 中使用数据 无论选择哪种数据来源最终都需要将数据引入到 Vue.js 组件中。以下是如何在 Vue.js 中使用静态数据和外部数据的示例。 2.3.1 使用静态数据 如果选择使用静态数据可以在组件的 data 函数中直接定义作品数组 export default {data() {return {artworks: [{ id: 1, title: 作品1, imageUrl: https://example.com/artwork1.jpg, description: 这是作品1的描述。 },{ id: 2, title: 作品2, imageUrl: https://example.com/artwork2.jpg, description: 这是作品2的描述。 },{ id: 3, title: 作品3, imageUrl: https://example.com/artwork3.jpg, description: 这是作品3的描述。 }// … 其他作品],};}, };2.3.2 使用外部 API 如果选择使用外部 API可以在组件的 mounted 钩子中通过 fetch 或 axios 请求数据。以下是一个使用 fetch 的示例 export default {data() {return {artworks: [],};},mounted() {fetch(https://example.com/api/artworks).then(response response.json()).then(data {this.artworks data;}).catch(error {console.error(获取作品数据失败:, error);});}, };2.4 数据验证 在使用数据之前确保数据的完整性和有效性是非常重要的。可以在获取数据后进行简单的验证例如检查每个作品是否包含必要的属性 mounted() {fetch(https://example.com/api/artworks).then(response response.json()).then(data {// 验证数据this.artworks data.filter(artwork artwork.id artwork.title artwork.imageUrl);}).catch(error {console.error(获取作品数据失败:, error);}); }3. 创建画廊组件 在构建动态数字画廊的过程中创建一个专门的画廊组件是至关重要的。这一组件将负责展示学生的作品并处理用户的交互。以下是对画廊组件的详细阐述包括组件结构、逻辑和样式设计。 3.1 组件结构 组件结构是指组件的 HTML 结构和 Vue.js 的模板部分。在 Gallery.vue 文件中我们将使用 Vue 的模板语法来定义画廊的结构。 3.1.1 HTML 结构 以下是一个基本的画廊组件结构示例 templatediv classgallerydiv v-forartwork in artworks :keyartwork.id classartwork clickopenArtwork(artwork)img :srcartwork.imageUrl :altartwork.title /div classartwork-infoh3{{ artwork.title }}/h3p{{ artwork.description }}/p/div/div/div /template在这个结构中 gallery 是画廊的容器使用 flex 布局来排列作品。artwork 是每个作品的容器使用 v-for 指令循环展示每个作品。每个作品包含一张图像和一些文本信息标题和描述。点击作品时会触发 openArtwork 方法。 3.2 组件逻辑 组件逻辑部分主要包括数据管理和事件处理。在 Gallery.vue 的 script 部分我们需要定义数据、方法和生命周期钩子。 3.2.1 数据管理 在 data 函数中我们将定义一个 artworks 数组用于存储作品数据。可以从静态数据或外部 API 中获取这些数据。 script export default {data() {return {artworks: [], // 存储作品数据};},mounted() {// 在这里加载作品数据this.loadArtworks();},methods: {loadArtworks() {// 假设我们从静态数据或 API 获取作品数据this.artworks [{ id: 1, title: 作品1, imageUrl: https://example.com/artwork1.jpg, description: 这是作品1的描述。 },{ id: 2, title: 作品2, imageUrl: https://example.com/artwork2.jpg, description: 这是作品2的描述。 },{ id: 3, title: 作品3, imageUrl: https://example.com/artwork3.jpg, description: 这是作品3的描述。 }// … 其他作品];},openArtwork(artwork) {// 打开作品的逻辑比如弹出框或新页面alert(打开作品: \({artwork.title});},}, }; /script3.2.2 事件处理 在 openArtwork 方法中我们可以实现点击作品后打开详细信息的逻辑。这里我们使用简单的 alert 来演示您可以根据需要扩展为模态框或新页面。 3.3 样式设计 样式设计是确保画廊组件美观和用户友好的关键部分。我们将使用 CSS 来定义画廊的布局和样式。 3.3.1 基本样式 以下是一个基本的样式示例您可以根据需要进行调整 style scoped .gallery {display: flex;overflow: hidden;width: 100vw; /* 全屏宽度 */height: 100vh; /* 全屏高度 */background-color: #f9f9f9; /* 背景色 */ }.artwork {min-width: 100vw; /* 每个作品占满屏幕 */transition: transform 0.5s ease; /* 动画效果 */position: relative; /* 使子元素绝对定位 */ }.artwork img {width: 100%; /* 图像宽度自适应 */height: auto; /* 高度自适应 */border-radius: 8px; /* 圆角效果 */ }.artwork-info {position: absolute; /* 绝对定位 */bottom: 10px; /* 距离底部10px */left: 10px; /* 距离左侧10px */color: #fff; /* 字体颜色 */background-color: rgba(0, 0, 0, 0.7); /* 半透明背景 */padding: 10px; /* 内边距 */border-radius: 5px; /* 圆角效果 */ }.artwork-info h3 {margin: 0; /* 去掉默认外边距 */font-size: 1.5em; /* 标题字体大小 */ }.artwork-info p {margin: 5px 0 0; /* 上边距5px去掉其他边距 */font-size: 1em; /* 描述字体大小 */ } /style3.3.2 响应式设计 为了确保画廊在不同设备上的良好展示可以使用媒体查询来调整样式。例如 media (max-width: 768px) {.artwork-info {font-size: 0.8em; /* 小屏幕上字体缩小 */} }4. 动态循环展示 动态循环展示是数字画廊的重要功能之一它可以让观众以流畅的方式浏览学生的作品。通过实现动画效果我们可以提升用户体验使画廊更加生动。以下是关于如何实现动态循环展示的详细阐述。 4.1 实现动画效果 为了实现动态循环展示我们可以使用 CSS 动画或 JavaScript 动画库如 anime.js 或 GSAP。在本节中我们将使用 JavaScript 和 CSS 结合的方式来实现这一功能。 组件结构调整 首先我们需要确保画廊组件的结构适合动态展示。我们将使用一个外部容器来包裹所有作品并通过 CSS 的 transform 属性来实现平移效果。 templatediv classgallerydiv classartwork-container refartworkContainerdiv v-forartwork in artworks :keyartwork.id classartwork clickopenArtwork(artwork)img :srcartwork.imageUrl :altartwork.title /div classartwork-infoh3{{ artwork.title }}/h3p{{ artwork.description }}/p/div/div/div/div /template在这个结构中artwork-container 是一个新的 div用于包裹所有的作品。 CSS 样式 接下来我们需要为 artwork-container 添加样式以便它可以横向排列所有作品并隐藏溢出的部分。 style scoped .artwork-container {display: flex; /* 使用 flexbox 布局 */transition: transform 0.5s ease; /* 动画效果 */width: 100%; /* 容器宽度 */ }.artwork {min-width: 100vw; /* 每个作品占满屏幕 *//* 其他样式保持不变 */ } /style动态循环逻辑 在组件的 JavaScript 部分我们将实现动态循环的逻辑。我们需要设置一个定时器每隔一段时间更新 artwork-container 的 transform 属性以实现平移效果。 script export default {data() {return {artworks: [], // 存储作品数据currentIndex: 0, // 当前展示的作品索引};},mounted() {this.loadArtworks();this.startAnimation();},methods: {loadArtworks() {// 假设我们从静态数据或 API 获取作品数据this.artworks [{ id: 1, title: 作品1, imageUrl: https://example.com/artwork1.jpg, description: 这是作品1的描述。 },{ id: 2, title: 作品2, imageUrl: https://example.com/artwork2.jpg, description: 这是作品2的描述。 },{ id: 3, title: 作品3, imageUrl: https://example.com/artwork3.jpg, description: 这是作品3的描述。 }// ... 其他作品];},startAnimation() {setInterval(() {this.currentIndex (this.currentIndex 1) % this.artworks.length; // 更新当前索引this.updateArtworkPosition(); // 更新作品位置}, 3000); // 每3秒切换},updateArtworkPosition() {const container this.\)refs.artworkContainer;const offset -this.currentIndex * 100; // 计算偏移量container.style.transform translateX(\({offset}vw); // 更新容器的 transform 属性},openArtwork(artwork) {alert(打开作品: \){artwork.title});},}, }; /script逻辑解释 数据管理: 在 data 中我们定义了 currentIndex 来跟踪当前展示的作品索引。 定时器: 在 startAnimation 方法中我们使用 setInterval 每隔 3 秒更新 currentIndex并调用 updateArtworkPosition 方法更新作品的位置。 位置更新: 在 updateArtworkPosition 方法中我们计算出新的偏移量并通过 transform 属性将 artwork-container 平移到相应的位置。
   过渡效果 为了使切换效果更加平滑可以在 CSS 中添加过渡效果。我们已经在 artwork-container 的样式中添加了 transition: transform 0.5s ease;这将使得每次平移都有一个平滑的过渡效果。
3. 交互功能 在动态数字画廊中交互功能是提升用户体验的关键部分。通过实现多种交互功能我们可以让观众更好地与作品进行互动增加参与感。以下是关于如何在画廊中实现交互功能的详细阐述。 5.1 点击查看作品详情 最基本的交互功能是允许用户点击作品以查看详细信息。我们可以通过弹出模态框或新页面来实现这一功能。 5.1.1 使用模态框 模态框是一种常见的用户界面元素可以在不离开当前页面的情况下展示更多信息。我们可以使用 Vue.js 的条件渲染来控制模态框的显示与隐藏。 5.1.1.1 模态框结构 首先在 Gallery.vue 中添加模态框的 HTML 结构 templatediv classgallerydiv classartwork-container refartworkContainerdiv v-forartwork in artworks :keyartwork.id classartwork clickopenArtwork(artwork)img :srcartwork.imageUrl :altartwork.title /div classartwork-infoh3{{ artwork.title }}/h3p{{ artwork.description }}/p/div/div/div!– 模态框 –div v-ifselectedArtwork classmodal clickcloseModaldiv classmodal-content click.stopspan classclose clickcloseModaltimes;/spanh2{{ selectedArtwork.title }}/h2img :srcselectedArtwork.imageUrl :altselectedArtwork.title /p{{ selectedArtwork.description }}/p/div/div/div /template5.1.1.2 模态框逻辑 在组件的 script 部分添加 selectedArtwork 数据属性和打开/关闭模态框的方法 script export default {data() {return {artworks: [],currentIndex: 0,selectedArtwork: null, // 当前选中的作品};},mounted() {this.loadArtworks();this.startAnimation();},methods: {loadArtworks() {// 假设我们从静态数据或 API 获取作品数据this.artworks [{ id: 1, title: 作品1, imageUrl: https://example.com/artwork1.jpg, description: 这是作品1的描述。 },{ id: 2, title: 作品2, imageUrl: https://example.com/artwork2.jpg, description: 这是作品2的描述。 },{ id: 3, title: 作品3, imageUrl: https://example.com/artwork3.jpg, description: 这是作品3的描述。 }// … 其他作品];},startAnimation() {setInterval(() {this.currentIndex (this.currentIndex 1) % this.artworks.length;this.updateArtworkPosition();}, 3000);},updateArtworkPosition() {const container this.\(refs.artworkContainer;const offset -this.currentIndex * 100;container.style.transform translateX(\){offset}vw);},openArtwork(artwork) {this.selectedArtwork artwork; // 设置选中的作品},closeModal() {this.selectedArtwork null; // 清空选中的作品},}, }; /script5.1.1.3 模态框样式 接下来为模态框添加样式以确保它在页面上正确显示 style scoped .modal {display: flex;justify-content: center;align-items: center;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8); /* 半透明背景 /z-index: 1000; / 确保模态框在最上层 / }.modal-content {background-color: #fff;padding: 20px;border-radius: 8px;max-width: 600px;width: 80%;text-align: center; }.close {cursor: pointer;font-size: 24px;position: absolute;top: 10px;right: 20px; } /style5.2 作品切换 除了点击查看作品详情外用户还可以通过左右箭头或手势来切换作品。我们可以在画廊组件中添加左右箭头按钮。 5.2.1 添加箭头按钮 在 Gallery.vue 中添加左右箭头按钮的 HTML 结构 div classarrow left clickprevArtwork#10094;/div div classarrow right clicknextArtwork#10095;/div5.2.2 按钮逻辑 在组件的 script 部分添加切换作品的方法 methods: {// … 其他方法prevArtwork() {this.currentIndex (this.currentIndex - 1 this.artworks.length) % this.artworks.length;this.updateArtworkPosition();},nextArtwork() {this.currentIndex (this.currentIndex 1) % this.artworks.length;this.updateArtworkPosition();}, }5.2.3 按钮样式 为箭头按钮添加样式使其在画廊中显眼且易于点击 style scoped .arrow {position: absolute;top: 50%;transform: translateY(-50%);font-size: 48px;color: white;cursor: pointer;z-index: 100; / 确保箭头在最上层 / }.left {left: 10px; / 左侧位置 / }.right {right: 10px; / 右侧位置 / } /style5.3 响应式设计 为了确保画廊在不同设备上的良好展示您可以使用媒体查询来调整样式。例如在小屏幕上调整模态框和箭头的大小 media (max-width: 768px) {.arrow {font-size: 36px; / 小屏幕上箭头缩小 /}.modal-content {width: 90%; / 模态框在小屏幕上宽度自适应 */} }6. 完整代码 以下是一个完整的可运行的 Vue.js 项目代码示例用于创建一个动态数字画廊展示学生作品并实现交互功能。您可以将这些代码复制到您的 Vue.js 项目中确保您已经安装了 Vue CLI 并创建了一个新的 Vue 项目。
4. 创建 Vue 项目 首先确保您已经安装了 Vue CLI然后创建一个新的 Vue 项目 vue create digital-gallery cd digital-gallery2. 修改 src/App.vue 在 src/App.vue 文件中替换默认内容为以下代码 templatediv idappGallery //div /templatescript import Gallery from ./components/Gallery.vue;export default {name: App,components: {Gallery,}, }; /scriptstyle #app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px; } /style3. 创建 src/components/Gallery.vue 在 src/components 目录下创建一个新的文件 Gallery.vue并添加以下代码 templatediv classgallerydiv classartwork-container refartworkContainerdivv-forartwork in artworks:keyartwork.idclassartworkclickopenArtwork(artwork)img :srcartwork.imageUrl :altartwork.title /div classartwork-infoh3{{ artwork.title }}/h3p{{ artwork.description }}/p/div/div/divdiv classarrow left clickprevArtwork#10094;/divdiv classarrow right clicknextArtwork#10095;/divdiv v-ifselectedArtwork classmodal clickcloseModaldiv classmodal-content click.stopspan classclose clickcloseModaltimes;/spanh2{{ selectedArtwork.title }}/h2img :srcselectedArtwork.imageUrl :altselectedArtwork.title /p{{ selectedArtwork.description }}/p/div/div/div /templatescript export default {data() {return {artworks: [],currentIndex: 0,selectedArtwork: null,};},mounted() {this.loadArtworks();this.startAnimation();},methods: {loadArtworks() {this.artworks [{id: 1,title: 作品1,imageUrl: https://via.placeholder.com/600x400?textArtwork1,description: 这是作品1的描述。,},{id: 2,title: 作品2,imageUrl: https://via.placeholder.com/600x400?textArtwork2,description: 这是作品2的描述。,},{id: 3,title: 作品3,imageUrl: https://via.placeholder.com/600x400?textArtwork3,description: 这是作品3的描述。,},];},startAnimation() {setInterval(() {this.currentIndex (this.currentIndex 1) % this.artworks.length;this.updateArtworkPosition();}, 3000);},updateArtworkPosition() {const container this.\(refs.artworkContainer;const offset -this.currentIndex * 100;container.style.transform translateX(\){offset}vw);},openArtwork(artwork) {this.selectedArtwork artwork;},closeModal() {this.selectedArtwork null;},prevArtwork() {this.currentIndex (this.currentIndex - 1 this.artworks.length) % this.artworks.length;this.updateArtworkPosition();},nextArtwork() {this.currentIndex (this.currentIndex 1) % this.artworks.length;this.updateArtworkPosition();},}, }; /scriptstyle scoped .gallery {position: relative;overflow: hidden;width: 100vw;height: 100vh;background-color: #f9f9f9; }.artwork-container {display: flex;transition: transform 0.5s ease;width: 100%; }.artwork {min-width: 100vw;position: relative; }.artwork img {width: 100%;height: auto;border-radius: 8px; }.artwork-info {position: absolute;bottom: 10px;left: 10px;color: #fff;background-color: rgba(0, 0, 0, 0.7);padding: 10px;border-radius: 5px; }.arrow {position: absolute;top: 50%;transform: translateY(-50%);font-size: 48px;color: white;cursor: pointer;z-index: 100; }.left {left: 10px; }.right {right: 10px; }.modal {display: flex;justify-content: center;align-items: center;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);z-index: 1000; }.modal-content {background-color: #fff;padding: 20px;border-radius: 8px;max-width: 600px;width: 80%;text-align: center; }.close {cursor: pointer;font-size: 24px;position: absolute;top: 10px;right: 20px; } /style4. 运行项目 在项目目录中使用以下命令启动开发服务器 npm run serve然后在浏览器中访问 http://localhost:8080您将看到动态数字画廊的效果。您可以点击作品查看详细信息使用左右箭头切换作品。 总结 在这篇博文中我们详细探讨了如何使用 Vue.js 和 JavaScript 创建一个动态数字画廊展示学生的优秀作品。我们从项目准备开始选择合适的技术栈创建 Vue.js 项目并逐步实现画廊组件的结构、逻辑和样式设计。通过引入动态循环展示和多种交互功能我们不仅提升了用户体验还增强了观众与作品之间的互动。 通过实现点击查看作品详情的模态框、作品切换的箭头按钮等功能我们使得画廊变得更加生动有趣。这些功能的实现展示了现代前端开发的灵活性和强大能力能够为用户提供流畅的视觉体验。 码文不易本篇文章就介绍到这里如果想要学习更多Java系列知识点击关注博主博主带你零基础学习Java知识。与此同时对于日常生活有困扰的朋友欢迎阅读我的第四栏目《国学周更—心性养成之路》学习技术的同时我们也注重了心性的养成。