作为一名h5开发者,我常常不会满足于仅仅写页面业务逻辑和对接后端接口。

(当然,如果是想当摸鱼王,我还是会满足的,哪怕只写一个静态页面,我也满足了。)

我不甘心只看到界面上的这一点区域,我渴望,了解更广阔的世界。

于是乎,就有了搭建自己的个人网站的想法。

使用的工具和技术包括:墨刀-vue-node.js-mysql-navicate-宝塔面板

步骤

以下步骤不用严格按照先后顺序,比如网站备案可能要花很久,可以作为第一步。

又比如,我一边开发,一边有点新想法,我又可以回来修改原型。

毕竟在这里,我是产品经理,是ui设计,是前端,也是后端。即,我可以,为所欲为。

1. 原型

搭建网站首先需要有需求和原型图。

我的网站有哪些内容,我想表达些什么,我想分享些什么,这个难度不低于写作文。

后期这还需要个人不断地思考和延伸,对网站版面进行更新升级。

推荐使用墨刀在线工具,进行原型设计。

2. 设计

有了原型图,就需要进行UI设计,进一步美化页面。推荐使用ps。

不过今天的重点是搭建网站,这里我先偷懒,直接下一步。

3. 开发

开发过程需要三个项目:前端项目,接口项目,后台项目。

前端开发不多说,使用vue全家桶即可。

后端开发这边,要对照原型,先设计数据库,使用navicate建库建表建字段。

然后创建node.js接口项目,使用express框架进行开发。

接口一般标配增删改查,我的习惯是增加用post,删除用delete,修改用put,查询用get。

4. 服务器

项目写完了,本地都可以跑了,下一步肯定是要想办法把它们部署到服务器上了。等等,我还没买服务器呢!

4.1 购买服务器

我买的是腾讯云的云服务器,先买最便宜的就行,我买的1核2GB的,选的是centOS系统,搞活动时买的,好像一年不到100块。

4.2 购买域名

顺便把域名也买了,用.top的就行,价格只需几块钱,比如我买的是hahaha.top。

不过后面域名备案会麻烦点,需要根据邮件和接到的电话,不断调整备案材料内容。

4.3 连接服务器

下载一个服务器连接工具,如finalShell(下载地址:https://www.jb51.net/softs/717120.html)
输入服务器的ip地址和密码,即可连接成功。

5. 宝塔面板

5.1 安装宝塔面板

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

输入y 就安装,安装完会显示登陆链接,以后就可以在线操作服务器了。

理论上来说,毕竟是linux系统,通过finalShell命令行,可以进行服务器的大部分操作。

但用惯了windows的我,还是更喜欢可视化的界面。所以就要安装宝塔面板。

宝塔面板常用的功能有添加站点、网站、ftp等。

需要先在软件商店里安装apache,pm2管理器,mysql,node环境等。

5.2 添加站点

进入宝塔面板,添加网站。比如我可以添加一个demo.hahaha.top,www.hahaha.top,m.hahaha.top。

添加完成后,进入网站目录,可上传静态文件,如简单的测试html或vue项目打包生成的文件。

注:网站需要dns解析,使得网站域名和ip地址挂钩。需要进入腾讯云,添加解析记录。将刚才添加的demo、m这些都添加到解析记录中。

5.3 添加数据库

在宝塔面板上添加数据库,可以先把本地数据库导出为sql文件,然后上传到线上的这个数据库。

然后在node项目中将连接mysql的账号密码改为线上的。

6.部署

6.1 前端项目

网站项目和管理后台项目,将通过npm run build打包之后生成的文件,上传到指定的网站目录就行了。

6.2 后端项目

先将除了node_modules文件夹之外的node项目文件,上传到某个目录,如/wwwroot/website-api/

使用finalShell进入该文件夹,使用npm install安装依赖。

使用node app.js测试是否启动

当退出该命令后,项目会停止,为了让项目一直启动,可以使用以下命令:

nohup node app.js &

以上命令仍然需要持续连接服务器,如需关闭连接,仍可运行,可采用pm2

pm2 start app.js

这样node项目就好持续运行了,和本地一直开着node app.js一个效果。

注:比如接口项目用的是3000端口,这个端口需要先在云服务器中添加到安全组规则

到这里,基本就完成了,网站可以打开访问,可以请求接口,后台可以修改数据。

Logo

前往低代码交流专区

更多推荐