node.js搭建个人博客系统
node.js+腾讯云搭建个人博客系统
最好要有的预备知识:
前端开发知识
- html
- css
- JavaScript,尤其重要
nodejs相关知识: - 异步编程
- 回调函数
- *阻塞&非阻塞
一、开发环境的配置以及开发工具
配置node环境:
http://www.runoob.com/nodejs/nodejs-install-setup.html
可以参考菜鸟教程的文档。
开发工具
这里用webstorm进行开发,安装过程请自行百度。
建议用sublime和webstorm一起使用会更好。两个工具编辑代码的时候各有各的优点。
二、web工程的建立
打开webstorm,File目录下new->project,选择Node.js Express App
点击新建之后,这里添加node所在位置,根据自己的电脑进行配置。
也可以在项目建立成功后点击右上角的
进行修改
目录
点击运行即可运行程序。
三、程序运行与调试
①打开浏览器,输入‘localhost:3000’,回车,webstorm默认的端口的是3000,也可以在www的文件里面进行修改,
特别的,当端口为80时,即可通过‘localhost’进行访问。
这时就可以在浏览器里面看到express了,表明node运行成功。
四、安装ejs,放置前端代码
到这里学习前端的同学可能比较好奇自己的html代码放在什么地方?
我们来看一下node工程的目录。
①bin目录里面www文件是整个程序的入口,这比较像用codeblocks的同学可能知道.cbp文件
当我们双击这个文件的时候打开的是一个工程,这个工程的所有.h文件都能按照之前组织好的顺序打开,我们的www文件就是充当了这样的角色。
②node_modules文件,这个文件用来存放从远端拉取的各个模块,一会用ejs举一个栗子。
③module文件是我们自己写的模块。大家如果感兴趣可以找一些资料来学习一下。
④view目录用来放置前端的页面的。
但是webstorm默认的不是ejs文件,我们为什么要用ejs?
这里我的经验是便于前后端代码结合,不破坏代码的结构而将后端的数据在前端进行渲染。
接下来安装ejs模块
打开cmd,切换之工程的根目录下,输入
npm install ejs
安装之后在app.js文件里面进行配置
在view目录下新建error.ejs用于出错是的跳转,再新建其他的文件将自己的html代码放进去。
其中前端的css js文件则放在public文件目录下
这样放置不需要对html的路径进行修改,css js文件就可直接外联。
最后打开routers文件的inde.js写上路由就可以在浏览器进行访问了。
这里引入express模块。并建立router。
这段意思是当浏览器得到‘user/login’请求时,返回login页面,当然,前提是你已经建立了login.ejs。
这时就可以在浏览器里面访问‘localhost:3000/user/login’,进行访问login页面了。
至此开发环境算是搭建完成,祝你成功!
接下来就是开发与发布,我们将项目发布在腾讯云上。
云服务器的购买以及域名的解析,在之前的文章“在腾讯云上搭建个人静态博客”里面有提到,对于学生实名认证后会有很大优惠。
与在本地的电脑上一样,先配置nodejs环境。这里一个小技巧,可以利用git来托管我们的代码,这样在电脑本地进行开发,在服务器上直接拉取代码就可以运行了。
在电脑以及云服务器上都安装git bash
需要注意,git bash也可以运行nodejs的命令。
关于git的使用可以百度教程,很多优秀的博文讲的都很详细。
注:
在云服务器上不需要安装编译软件,配置node环境后,打开命令行,切换至项目的根目录下,输入
npm start
或者
node ./bin/www
将项目跑起来。
使用git运行npm也是一样,在项目的根目录下右键->git bash here,输入以上命令也可运行工程。
node.js搭建个人博客系统相关推荐
- 用node.js 搭建的博客程序心得(node.js实战读书笔记1)
学习node已经有一段时间了,之前把了不起的node.js看完了,基本算了解了一些node的基本的用法还有一些概念了,然后就开始看第二本node.js实战,第一章就是搭建一个博客程序.但是不得不吐槽一 ...
- 【Microsoft Azure 的1024种玩法】七十一.基于Azure Virtual Machines快速上手搭建Typecho博客系统
[简介] Typecho 是基于 PHP5 构建的开源跨平台博客系统,Typecho开源跨平台博客系统相较于wordpress .hexo有一定的性能优势,是我们记录文章内容的最佳首选博客,那么本篇文 ...
- java 搭建个人博客_Spring boot 搭建个人博客系统(一)——整体思路
Spring boot 搭建个人博客系统(一)--整体思路 一直想用Spring boot 搭建一个属于自己的博客系统,刚好前段时间学习了叶神的牛客项目课受益匪浅,乘热打铁也主要是学习,好让自己熟悉这 ...
- 使用 Gatsby.js 搭建静态博客 2 实现分页
原文地址:https://ssshooter.com/2018-12... 使用 Gatsby.js 搭建静态博客 1 关键文件 <- 本文将会介绍如何为初始项目添加分页功能. 理解页面创建原理 ...
- Spring MVC + Hibernate JPA + Bootstrap 搭建的博客系统
Spring MVC + Hibernate JPA + Bootstrap 搭建的博客系统 Demo 相关阅读: 1.Spring MVC+Hibernate JPA+ Bootstrap 搭建的博 ...
- 手把手带你搭建个人博客系统(一)
⭐️前言⭐️ 该web开发系统涉及到的知识: Java基础 MySQL数据库 JDBC技术 前端三件套(HTML+CSS+JavaScript) Servlet 使用到的开发工具: idea vsco ...
- 【FastAPI 03】FastAPI快速搭建一个博客系统
标题:FastAPI快速搭建一个博客系统 大家好,我是Kuls. 这是<小白学FastAPI>系列的第三篇文章. 今天我们主要讲的是FastAPI快速搭建一个博客系统. 这里可能有些小伙伴 ...
- Spring boot 搭建个人博客系统(二)——登录注册功能
Spring boot 搭建个人博客系统(二)--登录注册功能 一直想用Spring boot 搭建一个属于自己的博客系统,刚好前段时间学习了叶神的牛客项目课受益匪浅,乘热打铁也主要是学习,好让自己熟 ...
- Node项目实战开发-博客系统
Nodejs项目实战开发-博客系统(已完结) 个人博客系统 欢迎访问我的博客~ MaXiaoYu's Bolg 前言: 开发技术 技术 版本 Node ^14.3.0 ejs ^3.1.3 expre ...
最新文章
- ftp 425 问题
- 掌握 需求过程阅读笔记06
- spring aop 中@annotation()和自定义注解的使用
- hive 修改cluster by算法_Hive基础之导出数据
- lightoj1027(期望dp)
- (转)正则表达式在ORACLE中的使用
- 咏南WEB APP开发框架
- SAP Client Copy
- CSDN博客喜遇中兴老同事
- windows驱动开发技术详解 VC6与DDK搭配使用的设置
- 神经网络预测地震加速度反应谱曲线,pytorch实现
- 隐马尔可夫模型(HMM)
- 电力电子技术课程设计matlab,电力电子技术课程设计-基于matlab的单相交流调压电路的设计与仿真.doc...
- Elasticsearch之近义词/同义词的使用
- 电脑如何控制点击android手机,安卓手机怎么控制电脑?红米手机远程控制操作电脑方法...
- 什么是USBHOST、USB Slave和USB OTG?它们之间有什么区别 USB、MiniUSB、MicroUSB
- Star Way To Heaven
- MPLS TE Forwarding-adjacency
- An Efficient Joint Training Framework for Robust Small-Footprint Keyword Spotting(2020)
- 广州你让我泪流满面1
热门文章
- Photoshop经常崩溃解决技巧,防止ps软件崩溃的四个解决方法
- MYSQL中对时间的处理函数(DATE_FORMAT(),DATE_ADD() / DATE_SUB(),DATEDIFF(),NIX_TIMESTAMP(),FROM_UNIXTIME())用法详解
- matlab画动态聚类图,聚类热图,你用什么软件画?
- 旗舰对飙、高端死磕,2019下半年手机圈好看了
- Android 键盘键名和键值列表
- 解决找不到或无法加载主类的问题
- 货拉拉技术副总监陈永庭:基于公共云的技术稳定性保障实践
- Python 量化投资实战教程(2) —MACD策略(+26.9%)
- Flutter混合开发框架安装流程(亲测能用)
- 全功TYPEC拓展坞方案设计AG9321|TYPEC转HDMI多功能拓展坞设计电路AG9321|扩展坞设计方案AG9321