当前位置: 首页 > article >正文

前端+后端之网站部署(Front End and Backend Website Deployment)

???欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。

本人主要分享计算机核心技术:系统维护、数据库、网络安全、自动化运维、容器技术、云计算、人工智能、运维开发、算法结构、物联网、JAVA 、Python、PHP、C、C++等。
不同类型针对性训练,提升逻辑思维,剑指大厂,非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。

前端+后端之网站部署

首先前端是捡起很古早的html+css+js课程的部分知识,写了一些自己需要的页面以及接口的调用,数据的展示等,后端用的是python的flask框架来写的api。部署用的云服务器里面自带安装了一个宝塔套餐(之前没用宝塔这东西,确实比自己去服务器里面部署一堆环境方便太多了)

页面展示:

PC端样式

移动端样式:

部署部分:

一,域名

域名可以自己在阿里云或者华为云进行购买,购买之后,需要进行备案,深圳的需要居住证比较麻烦,其他的地方似乎只要一个自己打印一个文件签个名字拍照上传即可,我的这个域名有点久远了,具体步骤记不太清了。然后每年续费即可,不用了就注销。

二,服务器部署

首先搭建一个自己的网站最先需要的就是服务器了。选择有两种:

1,自己家的电脑,前提是需要你有一个公网IP。

2,去购买一个付费制的云服务器,这个比较方便自带一个公网IP。

我之前买过阿里云的,后来过期了就去看了华为云,有个新人活动49一年,就买了一个linux+宝塔套餐。

首先拿到云服务器需要自己稍微配置一下密码之类的基础操作都有指引

在控制台将购买好的域名解析到云服务器,这样你就能不用ip,只需要域名就能访问服务器了

基于我这次搭建说一下宝塔对于项目的部署:

前端:

先将代码上传到服务器,直接在宝塔的文件类目点击上传即可很方便,对应的是linux服务器里面的目录

点击网站,选择PHP,刚开始应该需要下载一些初始化的配置,看着点击就行了,下载Nginx之类的,下载完后点击新建站点,选择前端代码所在的目录,根据自己需求配置好点击确认

配置好域名和证书之类的,需要其他的设置建议补一下Nginx代理之类的知识,Nginx代理的作用就是可以隐藏真实的服务端口以及一些安全性的设置

后端:

先将代码传到服务器,然后在python类目点击添加一个python项目,对应的设置好路径,以及需要用到的python版本,然后我是用的flask框架就选择一下flask,点击确认即可添加

对于后续代码内需要用到的第三方库可以在模块进行安装,最后点击启动即可,要是报错了就去终端看一下是什么报错,自己对应的处理一下

【对于用到的一些端口除了宝塔写了入出站规则之外还需要去华为云的控制台添加入出站规则,要不然访问不了】

代码部分:

一开始自己的需求只是方便自己外出的时候能够调用自己写的接口来实现一下小功能之类的,后来想着不如写点简单的前端页面也比较方便,便有了如下

前端:

前端是简单的html+css+js的组合,js主要是用来调用我后端的接口,来进行一些数据在页面的展示以及传参的输入之类的

登录的js,通过账号密码的传参,后端api会返一个token参数,当验证成功的时候就会跳转到主页。

我有想在过要是在前端直接将js改掉,那样不需要密码就能进入主页了,于是我在每个需要登录之后访问的页面加了一个身份验证的接口,每次进入需要调用一次那个接口,在请求头内传登录之后拿到的token来验证是否有登录,为空或者错误的话就跳转到登录页

其他的也好像没啥可说的了,就是很常规的比如加了个搜索,留言板之类的一些小功能,把之前发邮件的接口也做了前端页面进行使用,后续看需要再补充吧

后端:

基本思路就是python的flask框架进行api的编写,首先安装flask库,然后写api路径以及请求方式,用flask.request来获取传参,再写逻辑,最后return响应数据

其他的更为详细的可以重新在一个文件内封装好函数,最后在这边调用即可

由于是随便写写的就没有用到数据库了,直接用的json文件做的一些信息的存储


http://www.kler.cn/a/456968.html

相关文章:

  • 【SpringMVC】拦截器
  • 【时时三省】(C语言基础)动态内存函数calloc
  • 四大自平衡树对比:AVL树、红黑树、B树与B+树
  • Unity SpriteAtlasManager.atlasRequested趟坑
  • ARM200~500部署
  • 基于Hadoop的物品租赁系统的设计与实现-springboot+vue
  • TCP Analysis Flags 之 TCP Out-Of-Order
  • C++的第一个程序
  • 1228java面经
  • Mybatis插件better-mybatis-generator的下载与使用
  • 为什么深度学习和神经网络要使用 GPU?
  • 数据标注的流程
  • C#中的属性索引器(Indexer)
  • JavaScript 箭头函数
  • 强化特种作业管理,筑牢安全生产防线
  • 【微信小程序】4|搜索框-历史搜索 | 我的咖啡店-综合实训
  • Numpy指南:解锁Python多维数组与矩阵运算(下)
  • LeetCode--排序算法(堆排序、归并排序、快速排序)
  • 防抖和节流的方法详解和CSS文本溢出小知识
  • 【学习总结|DAY025】JAVA-WEB基础
  • 代码随想录算法训练营第十六天-二叉树-513.找树左下角的值
  • python常用内建模块:struct
  • React(一)—— router/useRef/useState
  • 地理数据库Telepg面试内容整理-如何解决大规模地理数据导入时出现的性能瓶颈
  • 灾备方案和架构类型、跨区域
  • hive中的四种排序类型