写点什么

10 行代码,撸一个在线个人简历页面!

作者:老表
  • 2021 年 11 月 15 日
  • 本文字数:2137 字

    阅读完需:约 7 分钟

10行代码,撸一个在线个人简历页面!

这是我参与 11 月更文挑战的第 7 天。

一、前情回顾

在上一篇,我非常详细的给大家介绍了云服务器基本配置以及如何使用,并介绍了部分常用 Linux 指令,最后带大家一起部署了一个项目到服务器上。

不过由于 xx 云服务器赠送查询项目源码没法直接给大家,所以本文将带大家用 Python 快速搭建一个 web 项目:个人简历

注: 本文不涉及云服务器介绍、Linux 指令介绍、项目部署到服务器等相关内容,还不知道这些的请看我写的云服务器第一篇文章:先导篇*跟老表学云服务器-拥有一台服务器后,我竟然这么酷?

二、基础准备

如果想将本项目部署到服务器,必须先看:先导篇*跟老表学云服务器-拥有一台服务器后,我竟然这么酷?。

项目部署须知服务器环境介绍:

  • 基本环境:Python 3.6 及以上都可以

  • 第三方库:

    pipenv:虚拟环境管理库

  • pywebio:web 项目框架

三、开始动手动脑

3.0 项目展示



3.1 项目思路



这次只有一个页面,就是:个人简历展示页面,本质上我们可以理解为一篇博客、静态文件等,和第一篇文章中一样,我们还是采用 md 来写,为什么我这么喜欢 markdown:

  • 更快的自定义内容格式

  • 语法简单,写多了你会觉得他们就是一体的

  • 移植性更强,只要在支持 markdown 的地方,你把你的内容复制过去,格式永远不会变(除非自己设置了 css 样式)



pywebio 模块提供了渲染 markdown 语句的函数put_markdown,但是并没有提供直接渲染 markdown 文件的功能,一个个人简历 md 模板的内容就有 72 行了,要是直接作为参数传入函数,看代码的人得爆炸~(太乱了!)



所以我采用的方式是读取本地 md 文件成为字符串后传入put_markdown中进行渲染,这样代码看起来就会更可以维护、美观。

后端框架利用 pywebio 的好处,我们只用写好后端代码,该框架会帮我们渲染好前端显示页面,让编写者能快速搭建 web 项目,简直不要太 nice~

3.2 找一个 Markdown 简历模板

这个其实很简单,直接浏览器搜索即可,你会发现第一个就是一个 GitHub 项目。



点开后,发现很符合我的期望,那么,我们就开始吧~



文末加餐: Git 相关操作。

3.3 代码详解

整个项目只有 10 行,我们就能渲染出一个很不错的个人简历页面,太香了。

1)导入相关包 2 行代码,其实只用到了 pywebio 这一个包,因为这个项目只涉及输出,所以只用导入 pywebio.output 中相关函数即可,另外导入了 session(修改渲染相关设置)和 start_server(启动服务)。

from pywebio import session, start_serverfrom pywebio.output import put_markdown
复制代码

2)主页面函数 6 行代码,定义了一个 my_resume 函数:

  • 第 1 行代码:声明定义函数 my_resume,pywebio 中只用定义个函数就相当于创建了一个页面;

  • 第 2 行代码:调用 session.set_env 自定义了页面 title 和取消输出过渡动画;

  • 第 3-4 行代码:读取 md 内容,存储到 md_txt 变量内;

  • 第 5-6 行代码:调用 put_markdown 渲染 md 内容。

def my_resume():    session.set_env(title='老表的简历', output_animation=False)    with open('resumeblog/Resume.md') as md:        md_txt = md.read()    put_markdown(md_txt)    put_markdown('<br>祝你求职成功,记得和老表一起学习云服务器!')  
复制代码

3)启动服务 2 行代码,作为程序主入口,启动服务。

  • 第 1 行代码:判断是否是主程序入口(从这个 py 文件开始执行的),如果是,就执行 if 内容,不是的话就不会执行。这样的好处是多个文件中相互调用测试时,不会重复执行代码;

  • 第 2 行代码:调用 start_server 函数启动服务,传递了三个参数,第一个是页面函数名称;第二个是服务器启动在哪个端口;第三个是是否在程序运行后,自动打开浏览器访问页面。

if __name__ == '__main__':    start_server(my_resume, port=8081, auto_open_webbrowser=True)
复制代码

3.4 加餐:Git 相关操作

直接浏览器访问:https://github.com/new 进入 github 项目新建页面,输入项目名称和其他相关信息,点击Create repository即可。



创建成功后,获取项目的克隆地址,有很多模式,一般选 https 或者 ssh 都行,后面本地项目上传要用到。



在进行下面操作前,你需要确保你已经安装了 git,没有安装 git 的,可以直接官网下载安装。

在本地项目目录下,打开终端,确保是在项目目录下了,比如截图中我在项目目录resumeblog下,在终端输入git init,初始化一下项目,这样系统就能识别这是一个 git 仓库了。



然后输入git add .将文件内所有文件添加到缓存区,然后利用git commit进行提交,还有一步git push就大功告成啦。



但是在 git push 前需要告诉 git 将项目 push 到哪个仓库,执行git remote add origin即可。

git remote add origin git@github.com:你的用户名称/仓库名称.git
复制代码

最后执行git push操作即可完成。

git push -u origin master
复制代码



如果报类似下面的错误,直接强制提交就行git push origin +master



回到 github,刷新项目页面就会发现文件都上传好啦~



四、下期预告

如果你还完全不了解服务器和 Linux 相关知识,推荐你看这篇文章

后面就正式开始系统的云服务器学习教程更新啦(应该也不系统,就是我想到哪里、觉得哪里有必要、可以讲讲,我就分享出来,等整个系列更新完成应该就可以很系统了)


这个过程也希望大家多多支持,多多反馈,互相鞭策~


本文所有相关源码,大家可以直接前往 github 下载,本项目源码地址:https://github.com/XksA-me/ResumeBlog


下期见,我是爱猫爱技术的老表,如果觉得本文对你学习有所帮助,欢迎点赞、评论、关注我!

发布于: 2021 年 11 月 15 日阅读数: 16
用户头像

老表

关注

公众号|简说Python 2018.09.23 加入

【公众号:简说Python】爱猫爱技术,Python终身学习者、数据分析爱好者、Go语言内卷机。

评论

发布
暂无评论
10行代码,撸一个在线个人简历页面!