基于蘑菇博客建设个人SNS网站（二）--后台框架搭建

最新推荐文章于 2023-03-13 10:37:07 发布
最新推荐文章于 2023-03-13 10:37:07 发布
阅读量1.7k 收藏 4
点赞数 1
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43171656/article/details/113314626
版权

在github/gitee上面有很多别人写好的开源框架，选择适合的可以很大的减少开发人员的工作，我的网站用的是gitee上面的明星项目mogu博客，这里是项目地址：https://gitee.com/moxi159753/mogu_blog_v2.git
大家可以自己拉下来，按照教程部署。

这篇博客主要记录我的部署过程

首先把项目拉到本地
在这里插入图片描述
使用maven安装好所有的依赖，这里细节就不再赘述。

本项目使用的技术栈：
后端技术
技术 说明 官网
SpringBoot MVC框架 https://spring.io/projects/spring-boot
SpringCloud 微服务框架 https://spring.io/projects/spring-cloud/
SpringSecurity 认证和授权框架 https://spring.io/projects/spring-security
MyBatis-Plus ORM框架 https://mp.baomidou.com/
Swagger-UI 文档生产工具 https://github.com/swagger-api/swagger-ui
Kibana 分析和可视化平台 https://www.elastic.co/cn/kibana
Elasticsearch 搜索引擎 https://github.com/elastic/elasticsearch
Beats 轻量型数据采集器 https://www.elastic.co/cn/beats/
Logstash 用于接收Beats的数据并处理 https://www.elastic.co/cn/logstash
Solr 搜索引擎 http://lucene.apache.org/solr/
RabbitMQ 消息队列 https://www.rabbitmq.com/
Redis 分布式缓存 https://redis.io/
Docker 容器化部署 https://www.docker.com
Druid 数据库连接池 https://github.com/alibaba/druid
七牛云 七牛云 - 对象储存 https://developer.qiniu.com/sdk#official-sdk
JWT JWT登录支持 https://github.com/jwtk/jjwt
SLF4J 日志框架 http://www.slf4j.org/
Lombok 简化对象封装工具 https://github.com/rzwitserloot/lombok
Nginx HTTP和反向代理web服务器 http://nginx.org/
JustAuth 第三方登录的工具 https://github.com/justauth/JustAuth
Hutool Java工具包类库 https://hutool.cn/docs/#/
阿里大于 短信发送平台 https://doc.alidayu.com/doc2/index.htm
Github Actions 自动化部署 https://help.github.com/en/actions
Zipkin 链路追踪 https://github.com/openzipkin/zipkin
Flexmark-java Markdown转换Html https://github.com/vsch/flexmark-java
Ip2region 离线IP地址定位库 https://github.com/lionsoul2014/ip2region
Minio 本地对象存储服务 https://min.io/
Docker Compose Docker容器编排 https://docs.docker.com/compose/
Portainer Docker可视化管理 https://github.com/portainer/portainer

可以从项目里看到项目的配置文件都不在本地，项目使用的是Nacos管理项目的配置文件和实现项目服务的注册与发现

接下来在window部署框架的环境，包括redis缓存数据库，rabbtmq消息队列，slor搜索服务，mysql数据库连接，zipkin链路追踪，nacos配置文件，Sentinel流量控制

配置JDK

略

配置Maven

maven安装成功后，记得添加阿里源，不然有些东西下载会非常慢的

配置nginx

nginx的下载直接到nginx官网下载即可

下载完成后，我们需要修改nginx.conf配置文件，加入下面的内容

#蘑菇博客图片资源
server {
 listen       8600;
 server_name  localhost;
 add_header Access-Control-Allow-Origin *;
 add_header Access-Control-Allow-Methods *;
 add_header Access-Control-Allow-Headers *;
 if ($request_method = 'OPTIONS') {
   return 204;
 }	
 location / {
	root   D:\mogu_blog\data;
	index  index.html index.htm;
 }
}

就是将8600端口的请求映射到 D:\mogu_blog\data的目录下，如果没有这个目录的，可以提前创建好，当然不一定在D盘，可以在任意位置，其它位置修改成对应的即可。

不过如果需要修改的话，需要到mogu_picture项目的yml文件里也一起修改对应的配置文件，如下图的 file.upload.path 修改成自定义的即可 【如果是nacos分支，需要在nacos中进行修改】

#Data image url
file:
  upload:
    path: D:/mogu_blog/data

配置redis

去redis官网，进行下载：https://redis.io/
在这里插入图片描述

然后双击启动即可

注意，如果使用docker的方法安装的蘑菇博客镜像，里面设置了默认的密码mogu2018，如果直接复制的本地配置，还需要修改一下默认密码

配置RabbitMq

RabbitMQ是一款比较优秀的消息中间件，在这里主要用于同步solr索引，redis缓存更新，以及邮件和验证码发送等功能。

关于配置，参考这篇博客：蘑菇博客配置RabbitMQ

配置搜索模块【非必须】

目前蘑菇博客支持三种搜索模式的配置，分别是Solr、ElasticSearch和SQL，小伙伴可以按照自己的服务器配置进行相应的部署

参考：蘑菇博客切换搜索模式 ，进行三种模式的切换（三种方式选择一种，默认是SQL搜索，可以配置ElasticSearch或者Solr作为全文检索 ）

配置Solr【非必须】

关于window下配置蘑菇博客的solr，其实和我之前写的一篇博客大同小异，在这里我就不多叙述了，详情参考：CentOS下Solr的安装和部署

注意：需要修改schema.xml文件

最近很多小伙伴说solr不好配置，所以我特意把solr的上传到蓝奏云和百度云了，小伙伴只需要下载后，放到tomcat的webapps目录下，然后修改一下solrhome的配置即可

蓝奏云：

https://wws.lanzous.com/i3drtj8l8ja
百度云：

链接：https://pan.baidu.com/s/1gpKs7oixT8RBn8zuDSiEGQ
提取码：ditj
下载完成后，解压
在这里插入图片描述

然后找到 web.xml文件
在这里插入图片描述

修改里面的地址，把路径改成你的目录即可

    <env-entry>
       <env-entry-name>solr/home</env-entry-name>
       <env-entry-value>E:\Software\xampp\tomcat\webapps\solr\solr_home</env-entry-value>
       <env-entry-type>java.lang.String</env-entry-type>
    </env-entry>

然后查看solr admin页面：http://localhost:8080/solr/#/

如果能正常显示，说明已经安装成功

配置ElasticSearch【非必须】

关于ElasticSearch的配置和相关介绍，可以参考这篇博客：Elasticsearch介绍和安装

window也可自行百度进行安装，或者直接下载我上传的压缩包

百度网盘：

链接：https://pan.baidu.com/s/1X1z47Osm_MBjwSBckhUmTQ
提取码：pnfp
备用地址：

http://picture.moguit.cn/blog/resource/java/ElasticSearch.zip
下载完后，解压能看到这个目录

在这里插入图片描述

我们首先进入elasticsearch下的config目录，修改elasticsearch.yml文件，把下面两个路径，改成你对应的目录即可
在这里插入图片描述

然后启动ElasticSearch：

在这里插入图片描述

启动Kibana：
在这里插入图片描述

启动完成后：我们输入网址

http://localhost:5601/

如果能出现下面的页面，说明已经成功安装了 ElasticSearch 和 Kibana，在这里kibana只是作为ElasticSearch的图形化显示工具，相当于原来的SolrAdmin页面一样，在生产环境中，可以不部署也行

在这里插入图片描述

配置Mysql

使用命令把项目clone下来

git clone https://gitee.com/moxi159753/mogu_blog_v2.git
然后找到目录下的doc文件夹，里面有个数据库脚本，打开后，我们能够看到下面的文件

在这里插入图片描述

mogu_blog.sql：代表mogu_blog数据库的文件

mogu_blog_update.sql：代表mogu_blog在后续开发时候更新的字段（首次无需导入）

mogu_picture.sql：代表mogu_picture数据库文件

mogu_picture_update.sql：代表mogu_picture在后续开发时候更新的字段（首次不需要导入）

nacos_config.sql：代表nacos的配置信息，用来存放每个模块的配置信息【nacos分支需要导入】

我们需要提前创建好 mogu_blog 、mogu_picture 、nacos_config 这三个数据库，然后把备份脚本导入即可。

注意：首次导入的时候，我们只需要执行mogu_blog.sql 、 mogu_picture.sql、nacos_config文件即可，如果你在之前已经部署了本项目，那么你需要在对应的update.sql文件中，打开后，从中找到没有的字段，复制上执行即可
里面每个字段的添加，都会有对应的日期提示，如果有些字段是你clone项目后添加的，那么你就需要执行它们一遍即可
在这里插入图片描述

同时设置数据库访问账户和密码为: root root

当然不设置也没关系，就是后面修改yml文件里面的配置即可【Nacos分支，配置文件存储在Nacos中】

配置zipkin链路追踪【非必须】

Zipkin是一个开源的分布式的链路追踪系统，每个微服务都会向zipkin报告计时数据，聚合各业务系统调用延迟数据，达到链路调用监控跟踪。

参考博客：使用Zipkin搭建蘑菇博客链路追踪

链路追踪服务可以选择安装，不过如果没有安装的话，在启动的时候会出现这样一个错误，不过该错误不会影响正常使用，可以忽略

I/O error on POSt request for “http://localhost:9411/api/v2/span” ：connect timeout

配置Nacos

Nacos服务注册和配置中心，如果使用的使用的是Eureka作为服务注册中心，那么直接跳过Nacos和Sentinel的安装过程。

参考 【SpringCloud】使用Nacos实现服务注册发现和配置中心等功能，了解Nacos的使用

参考 蘑菇博客Nacos部署指南，完成蘑菇博客中Nacos的安装和配置

配置Sentinel流量控制【非必须】

Sentinel存在于Nacos分支下，如果你的注册中心是Eureka，那么不需要配置

随着微服务的流行，服务和服务之间的稳定性变得越来越重要。Sentinel 以流量为切入点，从流量控制、熔断降级、系统负载保护等多个维度保护服务的稳定性。

参考【SpringCloud】使用Sentinel实现熔断和限流 ，了解Sentinel以及使用

参考 蘑菇博客Sentinel安装指南，完成蘑菇博客中Sentinel的配置

启动后端项目

首先进入项目根目录文件夹，执行下面命令

#下载依赖
mvn clean install

如果下面都是success，那就说明依赖下载成功了

在这里插入图片描述

下面就把项目导入到IDEA中

在这里插入图片描述

关于项目的介绍

MoguBlog 是一款基于最新技术开发的多人在线、简洁的博客系统。
mogu_admin: 提供admin端API接口服务；
mogu_web：提供web端API接口服务；
mogu_eureka： 服务发现和注册
mogu_picture： 图片服务，用于图片上传和下载；
mogu_sms：消息服务，用于更新ElasticSearch、Solr索引、邮件和短信发送
mogu_monitor：监控服务，集成SpringBootAdmin用于管理和监控SpringBoot应用程序
mogu_spider：爬虫服务（目前还未完善）
mogu_spider：网关服务（目前还未完善）
mogu_zipkin：链路追踪服务，目前使用java -jar的方式启动
mogu_search：搜索服务，ElasticSearch和Solr作为全文检索工具，支持可插拔配置，默认使用SQL搜索
mogu_commons：公共模块，主要用于存放Entity实体类、Feign远程调用接口、以及公共config配置
mogu_utils: 是常用工具类；
mogu_xo: 是存放 VO、Service，Dao层的
mogu_base: 是一些Base基类
doc: 是蘑菇博客的一些文档和数据库文件
vue_mogu_admin：VUE的后台管理页面
vue_mogu_web：VUE的门户网站
uniapp_mogu_web：基于uniapp 和 colorUi 的蘑菇博客移动端门户页面（Nacos分支）
nuxt_mogu_web：Nuxt的门户网站，主要用于支持SEO搜索引擎优化（目前还未完善）

下面进行项目启动

Eureka版本： 需要启动 mogu_eureka -> mogu_picture -> mogu_sms -> mogu_admin -> mogu_web

如果是Nacos版本：需要启动 ：mogu_gateway -> mogu_picture -> mogu_sms -> mogu_admin -> mogu_web 【新加入了网关】

其它一些模块可以根据自己配置进行启动：如 mogu_monitor、mogu_search、Zipkin等 【下图是Eureka版本】

在这里插入图片描述

启动成功后，我们应该能够查看到对应的Swagger接口文档

tip：需要注意，swagger-ui在nacos版本和eureka版本使用的不一致
eureka版本：swagger-ui使用的是2.X，访问的页面是 http://localhost:8601/swagger-ui.html
nacos版本：swagger-ui使用的是3.X，访问的页面是 http://localhost:8601/swagger-ui/index.html

############ admin端swagger ##################
# Eureka分支
http://localhost:8601/swagger-ui.html
# Nacos分支
http://localhost:8601/swagger-ui/index.html

############ picture端swagger ##################
# Eureka分支
http://localhost:8602/swagger-ui.html
# Nacos分支
http://localhost:8602/swagger-ui/index.html

############ web端swagger ##################
# Eureka分支
http://localhost:8603/swagger-ui.html
# Nacos分支
http://localhost:8603/swagger-ui/index.html

Admin端接口文档：

在这里插入图片描述

Picture端接口文档
在这里插入图片描述

web端接口文档

在这里插入图片描述

因为Nacos分支引入了 mogu_gateway作为 微服务的网关入口，以后部署项目后，很多内部的服务端口可能就不会暴露出来了，因此以后测试，就需要我们通过 mogu_gateway提供的Knife4j 接口聚合

http://localhost:8607/doc.html

我们可以通过左上角的下拉框选择我们的微服务接口，使用方法和swagger一致

在这里插入图片描述

启动前端项目

前端项目使用的是Vue编写的，所以在这之前，需要下载好nodejs，因为nodejs里的npm模块是用于管理vue项目中的依赖，就类似于maven一样

node官网：https://nodejs.org/en/

在安装的时候，记得选择好加入到环境变量中，这样我们就能在任何使用了。

查看是否安装成功： npm -v

  1. 安装 vue_mogu_admin 项目的依赖

进入vue_mogu_admin 文件夹内，使用下面命令进行安装

# 使用淘宝镜像源进行依赖安装，解决国内下载缓慢的问题(出现警告可以忽略)
npm install --registry=https://registry.npm.taobao.org

# 启动项目
npm run dev

#打包项目（在部署的时候才需要使用）
npm run build

强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。若还是不行，可使用 yarn 替代 npm。

Windows 用户若安装不成功，很大概率是node-sass安装失败，解决方案。
这里可以看我的前一篇博客基于蘑菇博客建设个人SNS网站（一），有详细的部署过程

# 指定node-sass的国内镜像源
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass

# 重新安装
npm install --registry=https://registry.npm.taobao.org

2) 安装 vue_mogu_web 项目的依赖,

这个步骤其实和admin端的安装时一致的，这里就不做过多的叙述

# 使用淘宝镜像源进行依赖安装，解决国内下载缓慢的问题(出现警告可以忽略)
npm install --registry=https://registry.npm.taobao.org

# 启动项目
npm run dev

#打包项目（在部署的时候才需要使用）
npm run build

tip：特别注意！！！！！如果图片无法显示，那是因为本地没有对应的图片，需要做的事是查看nginx是否启动，然后就是在后台添加图片进行上传

然后进行图片上传

上传完毕后，再到博客管理页面，修改博客标题图，然后保存即可

班班_
关注
GitHub 星标 高分，个人博客网站【强烈推荐】
02-22
蘑菇博客( MoguBlog )，一个基于微服务架构的前后端分离博客系统。Web 端使用 Vue + ElementUi , 移动端使用 uniapp 和 ColorUI。后端使用 SpringCloud + SpringBoot + Mybatis-plus进行开发，使用 Jwt + Spring...
蘑菇博客(MoguBlog)，一个基于微服务架构的前后端分离博客系统
06-11
蘑菇博客(MoguBlog)，一个基于微服务架构的前后端分离博客系统。Web端使用Vue + Element , 移动端使用uniapp和ColorUI。后端使用Spring cloud + Spring boot + mybatis-plus进行开发，使用 Jwt + Spring Security做登录验证和权限校验，使用ElasticSearch和Solr作为全文检索服务，使用Github Actions完成博客的持续集成，使用ELK收集博客日志，文件支持上传七牛云和Minio，支持Docker Compose脚本一键部署。
蘑菇博客( MoguBlog )//..
心海非海_のBlog
11-01 1083
冲冲冲
基于蘑菇博客建设个人SNS网站（一）--前端搭建
qq_43171656的博客
01-25 623
一直想建设个人的SNS社交网站，类似于微博的可以follow的网站，顺便学习springcloud的微服务治理办法，这里我的前端使用的是网上的vue前端模板，本项目使用前后端分离，使用接口数据前后端访问，可以跟随作者一起搭建一个网站，建站详细会同步发布 至此，默认你对以下框架熟悉或会基础使用： 1.springboot 2.Mybatis 3.oracle 4.Vue的基础知识 搭建系统的前端 1.租一个服务器，推荐阿里云轻量应用服务器的1核2G基础版就ok，详细过程可以在网上搜索。 详细步骤 2.我使.
开源项目-蘑菇博客搭建
weixin_43169156的博客
04-25 2087
文章目录蘑菇博客Centos7安装准备工作那就开始吧centos镜像安装centos启动虚拟机连接外网Centos环境配置1.yum仓库配置2.创建新用户boothost2.安装Docker3.安装docker-compose4.安装git5.安装jdk6.安装maven 蘑菇博客 代码地址:https://gitee.com/moxi159753/mogu_blog_v2 Centos7安装 下载地址:http://mirrors.aliyun.com/centos/7/isos/x86_64/
MoguBlog（蘑菇博客）v5.3发布，前后端分离博客系统
zhenghhgz的博客
11-16 1297
IT实战联盟博客：http://blog.100boot.cn MoguBlog简介 MoguBlog（蘑菇博客），一个基于微服务架构的前后端分离博客系统。前台使用Vue + Element , 后端使用spring boot + spring cloud + mybatis-plus进行开发，使用 Jwt + Spring Security做登录验证和权限校验，使用ElasticSearch和Solr作为全文检索服务，使用Github Actions完成博客的持续集成，文件支持上传七牛云，使用unia
基于MindSpore的ResNet-50毒蘑菇识别python源码.zip
09-25
基于MindSpore的ResNet-50毒蘑菇识别python源码.zip基于MindSpore的ResNet-50毒蘑菇识别python源码.zip基于MindSpore的ResNet-50毒蘑菇识别python源码.zip基于MindSpore的ResNet-50毒蘑菇识别python源码.zip基于...
机器学习报告-基于PCA和KNN算法的毒蘑菇分类预测实验报告-机器学习高分大作业
11-18
报告概述了基于PCA（主成分分析）和KNN（K最近邻）算法的毒蘑菇分类预测实验，旨在解决误食毒蘑菇导致的安全问题。实验采用了UCI机器学习库中的mushroom数据集，该数据集包含8124个样本，每个样本有22个特征，分为毒...
基于微服务架构的蘑菇博客前后端分离系统设计源码
最新发布
04-12
本蘑菇博客项目基于微服务架构开发，包含4654个文件，包括JavaScript脚本、Java源代码、CSS样式表、Vue组件、PNG图片、JPG图片、SVG图形、YAML配置文件、XML配置文件、GIF动画。系统实现了前后端分离的博客系统，Web...
如何使用一条命令完成开源项目蘑菇博客的部署？
qq_17831715的博客
05-17 664
大家好，我是陌溪，欢迎点击下方的公众号名片，关注陌溪，让我们一起成长~ 陌溪教你学编程 三本院校出身，字节跳动后台开发工程师，开源项目蘑菇博客作者，分享一些我写开源项目的技术和心得，欢迎各位小伙伴跟着我一起学习
开源蘑菇博客网站环境搭建部署，可以正常访问
花开莫与流年错_的博客
03-04 2215
开源蘑菇博客网站环境搭建，可以正常访问
Windows环境下如何用hexo搭建个人博客？如何部署到github？
缘自天方的博客
09-11 236
用hexo本地搭建个人博客准备环境安装hexo安装插件 准备环境 准备好github账号，创建好仓库。 https://github.com/demo/demo.github.io.git 注意 demo 的位置，名字必须一样，否则部署不成功 准备好git环境和node环境，直接官网下载安装即可。 安装hexo 注：如果是在Windows命令窗口下执行命令需要加 npx，如果是idea下，不需要加。npx 想要解决的主要问题，就是调用项目内部安装的模块 本地创建一个文件夹，切换目录到新创建
干货|JustAuth三方账号授权登录免费搭建全流程
c_zyer的博客
03-13 3107
三方登录日常的微信、QQ，金融的支付宝，音视频的抖音、快手，码农领域的Github、Gitee等。取三方授权Gitee来尝试下。由于最近ChhatGPT写代码也是很火，这次的测试主要是chatGPT主导，本人负责辅助实现和测试，不经感叹效率高、能力强！Spring Boot+ JustAuth + Thymeleaf (+ Spring Security 完全没有登录逻辑，可以不加) + IDEA + 花生壳内网穿透
微信开放平台开发第三方授权登陆（二）：PC网页端
热门推荐
晋文子上的博客
07-24 3万+
微信开放平台开发系列文章： 微信开放平台开发第三方授权登陆（一）：开发前期准备 微信开放平台开发第三方授权登陆（二）：PC网页端 微信开放平台开发第三方授权登陆（三）：Android客户端 微信开放平台开发第三方授权登陆（四）：微信公众号 微信开放平台开发第三方授权登陆（五）：微信小程序 目录 一、需求 二、开发流程 1.网站应用：（微信客户端扫码授权登陆） 三、开发使用...
第三方登录实现
m0_59919829的博客
07-03 2359
第三方登录 自建了一个网站，想要增加一个登录入口，但是自己实现登录又很麻烦， 那么就可以尝试使用第三方登录的方式。 谈到第三方登录就不得不提到OAuth，OAuth是Open Authorization的简写,它就是一种授权机制。数据的所有者告诉系统，同意授权第三方应用进入系统，获取这些数据。系统从而产生一个短期的进入令牌（token），用来代替密码，供第三方应用使用。 底层协议： OAuth协议为用户资源的授权提供了一个安全、开放而又简易的标准。使用OAuth授权不会使第三方获取到到用户的帐号信息（如用户
搭建Gateway网关服务
lzh_97的博客
12-03 729
搭建Gateway网关服务
Nacos出现重大安全漏洞,开源项目险遭脱库
qq_17831715的博客
01-17 2152
前言 大家好，我是陌溪 昨天陌溪在蘑菇博客交流群和群里的小伙伴进行了一场比较激烈的讨论，主要是关于Nacos中一个绕过安全认证直接获取微服务项目的配置文件的安全漏洞。 截止到昨天为止，该issue已经有50条评论。下面是该issue的地址，感兴趣的小伙伴可以跳转进行查看。 https://github.com/alibaba/nacos/issues/4593 漏洞起源 可能有些小伙伴还不太清楚Nacos是啥，它是SpringCloudAlibaba微服务架构...
渣一本毕业，面试多家大厂（阿里、蘑菇街、腾讯、百度、网易），成功斩获网易Offer
小圆爱吃糖
08-06 1026
基本情况 先说一下个人基本情况，山东渣一本大三学生，计算机科学与技术专业。主要学的Android开发，所以投的岗位都是Android开发工程师。过完年开始准备找实习，投了知乎，内推了阿里蘑菇街腾讯百度网易。腾讯百度都没有收到面试，知乎Skype面试，蘑菇街阿里电话面试，网易现场面。知乎二面被拒，蘑菇街阿里一面被拒，网易三面，然后备胎了，前几天被通知过了，收到了offer。自己整理了一下被问到的问题，现在分享给大家，另外自己整理的一下资料也会分享给大家，希望能帮助到各位求职的小伙伴。 知乎 知乎面试前h
Linux手动部署MoguBlog 博客微服务 Springalibaba
htfghgg的博客
05-11 385
Linux手动部署MoguBlog微服务 安装docker 使用官方安装脚本自动安装 安装命令如下： curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 启动docker： service docker start 登录阿里云，链接： 阿里云地址 登录后，在容器镜像服务》镜像中心》镜像加速器中可以找到阿里云的专属镜像加速器；如下图： 在CentOS系统目录中找到daemon.json文件，使用vim命令vim /etc/
PHP获取页面加载完毕后内容
09-22
### 回答1： 你可以使用 JavaScript 来获取页面加载完毕后的内容。下面是一种方法： 1. 在 HTML 页面中，添加一个 JavaScript 函数，该函数将在页面加载完毕后运行： ``` <body onload="myFunction()"> ``` 2. 在 JavaScript 中，使用 `document.getElementById` 或其他 JavaScript 方法获取你想要的元素： ``` function myFunction() { var element = document.getElementById("myElement"); // Do something with the element } ``` 3. 如果你想获取整个页面的内容，可以使用 `document.body.innerHTML` 方法： ``` function myFunction() { var content = document.body.innerHTML; // Do something with the content } ``` 请注意，如果页面包含大量内容，获取整个页面的内容可能会导致性能问题。 ### 回答2： 在PHP中，无法直接获取页面加载完毕后的内容，因为PHP是在服务器端执行的语言，所以它在页面加载完毕后就已经完成了任务并将结果返回给客户端。但是，我们可以通过其他方式获取页面加载完毕后的内容。 一种方法是使用JavaScript中的Ajax技术来异步请求服务器端获取最新的内容。在页面加载完成后，可以使用JavaScript的事件监听器来触发Ajax请求，从而获取更新后的页面内容。通过这种方式，我们可以在页面中动态显示最新的内容。 另一种方法是使用JavaScript的Document对象的readyState属性来检测页面加载状态。当readyState属性的值为"complete"时，表示页面已经加载完毕。在PHP中，可以通过JavaScript内嵌在HTML代码中的方式，使用document.readyState属性来判断页面是否加载完毕，当页面加载完毕后，我们可以执行一些后续的操作，比如获取页面中的元素内容等。 总之，PHP本身无法直接获取页面加载完毕后的内容，但可以通过JavaScript等前端技术实现在加载完毕后获取最新的内容。 ### 回答3： 在PHP中，无法直接获取页面加载完毕后的内容，因为PHP是服务器端语言，负责生成HTML页面并发送给客户端。一旦PHP代码生成HTML页面并发送给客户端，它的任务就结束了，无法直接感知客户端页面加载的状态。 不过，可以通过一些其他的方法来实现类似的功能。其中一个常见的方法是使用JavaScript来检测页面加载状态。在页面加载完毕后，通过JavaScript发送一个异步请求给服务器端，请求需要的内容。服务器端可以使用PHP处理这个请求，并返回所需的内容。 具体实现步骤如下： 1. 在页面中嵌入带有JavaScript代码块的HTML文件。 2. 在JavaScript代码块中，使用window.onload事件监听页面加载完成事件。 3. 当页面加载完成后，使用XMLHttpRequest对象发送异步请求给服务器端。 4. 服务器端接收到该请求后，使用PHP代码处理请求，并返回所需的内容。 5. JavaScript代码通过XMLHttpRequest对象接收到服务器端返回的内容，处理并显示在页面上。 需要注意的是，这种方法依赖于客户端的浏览器支持JavaScript，并且需要在页面加载完成后执行相应的操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值