开源社交系统ThinkSNS+的 SPA(H5)安装教程
H5 是 HTML 5 的缩写,也代表新浏览器技术和标准,例如一些先进浏览所支持的一些 HTML 5 标准 APIs
#什么是SPA单页Web 应用(single page web application,SPA),就是只有一张 Web 页面的应用。单页应用程序 (SPA) 是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的 HTML、CSS 和 JavaScript,所有的操作都在这张页面上完成,都由 JavaScript 来控制。因此,对单页应用来说模块化的开发和设计显得相当重要。
说明参考:
·SPA · 百度百科
·单页应用· 维基百科
#简介Plus 小屏网页客户端(以下简称 Plus SPA)是使用 Vue.js 及 ES+ 等现代 Web 技术进行构建编写的 Web 单页应用。其纯前端的代码,允许将 Plus SPA 分发到网络上的各个地方,甚至你可以进行设备嵌入本地运行,只要你有一个可以渲染 JS + HTML + CSS 的应用即可。
#下载程序在前面的教程中,我们在CentOS7.4的服务器中已经安装可 Git 软件,如果你是直接跳过来看 SPA 安装教程的,请在 CentOS 中运行下面的命令安装,如果你不是 CentOS 系统,请自行从 Git 官网安装,命令如下:
yuminstall-ygit
我们的SPA 代码存放在slimkit/plus-small-screen-client」。
现在,我们进入CentOS 中,然后按照之前安装 Plus 的惯例,我们将程序代码存放在/usr/local/src目录中,所以我们执行cd /usr/local/src即可进入该目录,然后我们执行下面的命令:
gitclone https://github.com/slimkit/plus-small-screen-client spa&&cdspa
执行完成你,你可以执行pwd你可以看到你当前所处的位置为/usr/local/src/spa,这就是我们的代码位置了。
#安装Node.js我们打开Node.js 官网下载页面默认会选择 LTS 版本,目前我这里最新的是8.12.0版本,我们在页面找到 ·Linux Binaries (x86/x64)· 这一行,我这里系统是65 Bit所以我点击这一行的64-bit按钮,你更具你系统选择。如果你不清楚,请看下图:
通过上图可知,我这里需要64-bit右键后选择「复制链接地址」得到https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz这样的地址。我们现在回到服务器家目录(执行cd ~)然后使用下面的命令进行下载:
curl-L https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz>node-v8.12.0-linux-x64.tar.xz1
执行完成后,我们输入ls -al命令,你会看到有一个node-v8.12.0-linux-x64.tar.xz的归档文件。
现在我们下载解压工具对归档进行解压:
yuminstall-y xztar
执行完成后,我们开始解压吧!我们先执行xz -d node-v8.12.0-linux-x64.tar.xz命令,然后之前的.xz归档消失了,会多处一个node-v8.12.0-linux-x64.tar的归档文件,我们继续执行tar -xvf node-v8.12.0-linux-x64.tar就会出现一个node-v8.12.0-linux-x64的文件夹,这就是我们的 Node.js 程序了!
接下来,我们为了统一管理,我们将Node 软件放到指定位置(并不是必须,而是推荐),之前我们的软件都放在/usr/local下,所以这次也一样,我们执行:
mv-f ~/node-v8.12.0-linux-x64 /usr/local/node
然后为了方便我们全局使用node命令进行调用,我们需要将/usr/local/node/bin加入到环境变量,素以我们使用 Vim 打开/etc/profile文件,在结尾追加一行:
exportPATH=$PATH:/usr/local/node/bin/
加入后,我们执行source /etc/profile使其生效,最后我们输入node -v你会看到下面的信息,表示已经成功:
v8.12.0
#安装Yarn 依赖管理工具我们并不推荐使用NPM 进行依赖管理,因为开发人员在开发过程中也是重度依赖 Yarn 进行依赖管理,我们并不知道开发人员会搞出什么幺蛾子,所以我们和开发人员一样使用 Yarn 吧!常规安装 Yarn 较为麻烦,但是我们可以利用 NPM让媳妇把小三抱进家里☺️:
npm-g i yarn1
接下来,我们运行yarn --version就会输出 Yarn 的版本信息,说明我们已经安装完成了。
#配置Plus SPA好了,工具和环境都安装完成了,我们输入cd /usr/local/src/spa回到 Plus SPA 的代码目录,运行下面的命令,创建我们所需要的.env文件:
cat.env.example>.env1
运行完成后,我们使用Vim 工具进行编辑该文件,运行vim .env命令,编辑的内容如下:
BASE_URL=/# 我们假设你部署在一个域名下,所以默认 `/`, 例如你部署在子目录下,请设置子目录,必须以 `/` 结尾!
GENERATE_CSS_MAP=true
VUE_APP_ENABLE_SERVICE_WORKER=false
VUE_APP_API_HOST=http://127.0.0.1# 我们暂时只配置这里,将内容修改为我们服务器的 IP 地址(上一章我们使用 NPM + FPM 发布了站点的)
VUE_APP_API_VERSION=v2
VUE_APP_NAME="Plus (ThinkSNS+)"
VUE_APP_KEYWORDS="plus,web,spa,sns,think,thinksns,app,social,powerful,vue"
VUE_APP_DESCRIPTION=",built with Vue.js."
VUE_APP_ROUTER_MODE=hash
VUE_APP_THEME=src/console/theme.js
VUE_APP_EASEMOB_APP_KEY=#
VUE_APP_EASEMOB_API_URL=http://a1.easemob.com
VUE_APP_EASEMOB_ISDEBUG=false
VUE_APP_LBS_GAODE_KEY=
各个参数描述详情清查看slimkit/plus-small-screen-client#readme的描述
#安装依赖我们使用cd /usr/local/src/spa进入 Plus SPA 程序目录,这里我们使用 Yarn 工具进行程序的依赖安装:
yarninstall
这个过程会从国外的服务器上下载依赖包的元数据和依赖包数据,所以速度会很慢,因为vue-cli工具本身的依赖原因,过程中会出现一些warning开头的警告,这不是错误,所以无需理会!
#子目录发布SPA子目录发布H5 有一个不好的地方,就是我们只能使用hash模式理由,但是我们可以规避跨域请求的安全限制问题,当然,想使用history需要对 Nginx 做特殊处理,这里教程中并不会给出例子,因为我们后面有独立部署的章节,所以我们先来看如何子目录安装吧。
首先我们拟定我们希望放置在Plus 程序域名下的spa目录下,所以,我们重新打开Plus SPA 的 .env 文件,然后将下面的BASE_URL修改为/spa/这个值,修改后应该是这样的:
BASE_URL=/spa/
修改成功后,我们使用cd /usr/local/src/spa命令进入 Plus SPA 程序目录,然后执行虾米啊的命令进行打包编译:
yarn build
这个过程也是比较慢的,速度取决于你的磁盘速度。运行成功后会有类似下面的输出:
接下来我们执行下面的命令,将其编译好的输出软链到我们的Plus 程序的 public 下:
ln -s /usr/local/src/spa/dist /usr/local/src/plus/public/spa1
如果你不用软链,你可以将/usr/local/src/spa/dist里面的内容全部复制到/usr/local/src/plus/public/spa目录下。
然后我们现在打开你的网站,后面输入/spa查看 H5 吧!大概的样子如下:
#独立域名发布SPA我们在前面的教程中安装了Nginx 这一节教程将指导如何在独立域名(或者端口)进行程序的发布,因为这里是教程,我们就换一个网络端口(因为80端口已经被 Plus 程序占用)进行发布。
我们使用touch /usr/local/nginx/vhost/spa.conf命令创建配置文件,然后编辑该文件,内容如下:
server{
listen8080;# 因为 80 端口被占用了,所以我们使用 8080 端口
server_namelocalhost;# 如果你已经为 SPA 分配了域名,那么将这路的 `localhost` 替换为域名,然后 listen 可以继续使用 80 端口!
root/usr/local/src/spa/dist;
indexindex.html;
location/{
try_files$uri$uri//index.html$is_args$args;
}}
接下来,我们使用cd /usr/local/src/spa进入 Plus SPA 目录,编辑下面的.env文件,将BASE_URL的值修改为/修改后的样子:BASE_URL=/这样子。将VUE_APP_ROUTER_MODE的值替换为history修改后的样子:VUE_APP_ROUTER_MODE=history。
然后我们执行yarn build命令,等待命令执行完成。命令执行完成后,我们使用nginx -s reload命令重新加载 Nginx 配置。
然后我们在浏览器打开http://你的ip:8080看到类似于「子目录发布的站点了」。
#GitHub pages 发布 SPA首先,你需要一个GitHub 帐号,你可以任意创建一个空白仓库(打开网址https://github.com/new),创建仓库如下截图:
「Initialize this repository with a README」 一定要勾选上,因为看这个教程按照零基础进行,如果不勾选,会多处很多后续步骤,这个你们就自己学了 Git 命令自己探索吧!
接下来,我们使用cd /usr/local/src/spa进入 Plus SPA 目录,编辑下面的.env文件,将BASE_URL的值修改为仓库名字修改后的样子:BASE_URL=/spa/(这里的值之所以是/spa/是因为我们仓库名字叫做spa) 这样子。将VUE_APP_ROUTER_MODE的值替换为history修改后的样子:VUE_APP_ROUTER_MODE=history。
然后我们执行yarn build命令,执行完成后,我们得到了dist的文件,然后将里面的内容上传到你创建仓库的gh-pages分支中。访问https://<USERNAME>.github.io/<REPO>。
<USERNAME>是你的 GitHub 用户名,<REPO>是你的仓库名称。
#Plus 程序开启页面跳转我们现在打开Plus 程序的后台页面,然后点击「系统设置」在「基本信息」蓝中下拉,找到 「Web 终端」的设置版。首先我们在第二项的的地方输入 SPA 地址,输入后开关按钮变为可操作状态,然后点击开启,最后点击提交即可!截图如下:
所有我们的产品体验都在我们的官网“免费体验”页面可以找到:http://www.thinksns.com/experience.html
APP端体验,下载新版本的朋友们,请先卸载老版本,否则无法使用;iphone手机安装demo前请点击设置-通用-设备管理-信任(企业应用)
ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新系统为ThinkSNS V4及ThinkSNS+两个并行系统。感谢大家一致对Ts团队和产品的支持,2018我们在路上。
ThinkSNS拥有50多个功能模块,全方位覆盖SNS系统所需,微博(朋友圈)、即时聊天、直播、论坛、资讯、CMS、活动、频道、圈子、问答、打赏等主流社交功能应有尽有。价格梯度多样,根据您的项目需求灵活选型运用,支持深度灵活二次开发。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。