专栏首页Thinks带你零基础入门express
原创

带你零基础入门express

导语:作为一篇新手入门,这篇文章没有太多的技巧和花式,只是从零开始带你学习和掌握express的开发应用,比较适合于完全没有使用过express的新手,以及其他非前端同学。

文章分为几个部分

1.express

2.Hello World

3.页面和接口都是路由

4.数据库

5.前端

一.express

相当一部分前端同学,很少会去做一些服务端的事情,平时正常的工作流程,就是做拿到数据接口之后的事情。那么如果突然有一天,比如就现在,一个从服务端到前端全部都需要你来完成的任务交给你,当然,对于大牛来说无论是用一门后端语言或是用node来完成可能都是很简单的事情,但是如果你不懂后端语言,node写的也不咋地(就像我),你将如何完成这个任务?

这篇文章就是写给暂时不知道怎么完成的同学,我们一起来完成!

express就是我们完成这个任务要使用的一个基于node的前端框架,他的特点是简洁,灵活,可以让你快速创建一个从后到前功能完整的网站,可以设置中间件来响应http请求,可以自定义路由来执行不同的http请求动作,可以向模板传递参数来动态渲染html页面…等等,说到这里可能有些新手同学已经不太清楚是什么了,没关系,后面我都会用这个人任务来给你讲解清楚。

但是在创建这个网站之前,你至少需要会使用以及已经安装好了node和npm。

那么第一步,我们安装express!

在你的硬盘里找个地方新建一个我们学习和测试用的文件夹吧,比如我,新建一个叫 lianxiaoxi 的文件夹。

进入到这个文件夹,执行

npm init

这个命令为你的应用创建一个 package.json 文件至于package.json是什么,在这里我们不再细说,大部分同学肯定都知道,不清楚的可以自行搜索一下相关知识点。

执行完命令以后会要你输入一些信息,比如应用的名称,版本等等,这些你都可以随意瞎填,爱写啥写啥,反正是个测试任务。我比较懒,就一路回车默认或者为空。到了entry point 这一项,是给你创建一个入口文件,其他教程应该都是改成了app.js,我就不!我这里入口文件的名字是test.js。

yes之后,我们开始安装express,执行命令 npm install express

这里上次遇到一个哥们问我,其他教程安装都会带着 —save 参数,你怎么不带?

这是个好问题,建议和我一样的新手同学自行查一下 —save 的意义和使用方法,也是需要学习的知识点。查完以后你就能明白,加和不加到底有什么不同,不过我依然选择不加,就是这么傲娇。

这一步就安装完毕了,非常成功,至于那两个warn,看字面意思就知道是刚才我们偷懒的缘故,不需要去管他。但是上次那哥们还是问我,别的教程都会一起安装几个重要的模块,比如cookie-parser 那些,你怎么没装?

这里既然我们是零基础入门,就先不去打包安装那些东西,我们需要一个安装一个,讓自己安装的每一个模块都清楚是做什么的!

二 . Hello World

安装完之后我们就开始学习使用这个框架,自然是先跑一个Hello World出来。

现在在项目目录下新建一个 test.js 文件,我们逐行写这个代码。

//先require
var express = require('express'); 
var app = express();

//处理文件路径的模块
var path = require('path');

/* view处理,还记得我们开头的时候说,express可以向模板传递参数来动态渲染html页面,
那么在这里我选择 ejs 来当模板,用ejs来渲染出第一个Hello World页面。,在运行这个test程序之前,
回到命令行那里,运行 npm install ejs,就可以成功安装,然后进行如下设置。*/

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');


/*静态文件处理,定义并创建一个目录,存放你的静态文件,比如css,图片,前端js代码等等。我这里定义为 src 目录*/

app.use(express.static('src'));

/*页面路由处理,这里路由我没有按照官方教程那样直接使用get或者post示例,
而是用了use中间件的方式,这样可以直接让你的项目目录建立起来,而且足够清晰。
在测试项目里新建 routers 文件夹,里面用来放路由文件,我分为两个子目录,
一个用来存放page路由,一个用来存放api路由.
这段处理代码表示,路由为/ 也就是首页的时候执行index*/

var routers = require('./routers/page/index');
app.use('/', routers);

//运行 127.0.0.1:9527
var server = app.listen(9527, function () { 
    var host = server.address().address 
    var port = server.address().port 
    console.log(“启动成功") 
})

到这里这个test程序就写完了,但是肯定还跑不起来,因为我们还没有写自己设置的路由中间件.

现在打开routers/page 目录下的 index.js 文件,开始写这个首页的路由中间件:

//require
var express = require('express');
var router = express.Router();

//设置首页路由get请求,后面会详细介绍
router.get('/', function(req, res, next){

    /* 模板与注入数据,现在在项目目录下新建一个 view 目录,用于存放我们的页面模板,
    目录里创建一个test.ejs文件,这个语句里test是我们的模板页面,后面的对象是我们手
    动创建用来注入的数据,下面会在模板里调用.*/

    res.render('test', {title: 'Hello World'});

})

module.exports = router;

到这里我们首页理由就处理完了,现在我们打开新建的 views/test.ejs 文件,关于ejs的语法大家可以查看一下官方文档,非常简单,我们这里就先写一个纯html的页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <!-- 你的样式表,指向的是你设置的静态文件目录,src -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
Hello World
</body>
</html>

Title 的这个引用方式是ejs语法,这个title就是我们在路由文件里注入的数据.

到这里,整个Hello World页面的路由,模板,全部都已经完成了,现在我们对一下文件目录,如图:

Node_modules是我们依赖的所有模块,routers是我们的路由文件,src里放前端css和js代码,views是我们的模板文件。

然后回到shell面板,执行 node test.js 命令

这时候我们在浏览器里打开 127.0.0.1:9527

可以看到title就是我们注入到模板的数据对象,我们的hello world 也就正式跑通了。

三. 页面和接口都是路由

我们的任务是做一个从后到前功能完整的站点,现在只是成功启动了服务,完成了页面的路由,下一步,我们开始写第一个接口给”前端”。

既然express是个前端框架,那么我们写接口的时候还是用js的方法,前面我们说了,路由决定由谁去响应客户端的请求,我们就可以利用路由来给客户端写接口。

路由的定义由如下结构组成:app.METHOD(PATH, HANDLER)。其中,app 是一个 express 实例;METHOD 是某个 HTTP请求方式中的一个;PATH 是服务器端的路径;HANDLER 是当路由匹配到时需要执行的函数。

例如:

app.get('/', function (req, res) {
  console.log("主页 GET 请求");
});

app.post('/', function (req, res) {
  console.log("主页 post 请求");
});

app.put(‘/put_test', function (req, res) {
  console.log("put_test put 请求");
});

app.delete(‘/delete_test', function (req, res) {
  console.log("delete_test delete 请求");
});

我们就用一个 post 实例来完成这个接口任务,这个接口要实现的功能,是把一个自定义的 mod 模块存到数据库。在routers/api下面新建一个addMod.js文件,用来做第一个接口文件。

四.数据库

既然是存到数据库,那么我们这里就需要加载相应数据库的 Node.js 驱动,这个实例里我们使用MySQL

首先安装 $ npm install mysql

接下来在项目里建立一个config目录,用于存放一些配置文件,在目录里建立一个config.json文件,这个文件写数据库配置:

{
  "host" : “你的数据库host",
  "port": “端口",
  "user": “用户",
  "password" : "密码",
  "database" : “数据库"
}

然后我们逐行写这个addMod.js接口的代码:

//require
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var config = require('../../config/config.json');

//post 接口
router.post('/', function(req, res, next){

    //链接数据库
    var connection = mysql.createConnection(config);
    connection.connect();

   
//获取传进来的参数

var modName = req.body.modName || '';
var modCode = req.body.modCode || '';
var modTpl = req.body.modTpl || '';


//构建添加语句,Id属性为auto_increment

var sql = "insert into  mods values ("
    + "'','"
    + modName
    + "','"
    + modTpl
    + "','"
    + modCode
    + "')";


    // 执行添加
    connection.query(sql,function(err,rows,fields){
        if(err){
            res.send({
                status:false,
                data:[],
                massage:err.massage
            })
        }

        //返回数据
        res.send({
            status:true,
            data:rows,
            massage:"处理成功"
        })
    });

    connection.end();

})

module.exports = router;

这样通过路由来实现post一个mod对象到数据库的接口就写好了,但是这里有个问题,就是获取传进来的参数这一步实际上是会报错的,因为req.body没有被解析,那我们就需要安装一个中间件 body-parser 来解析

执行 npm install body-parser

并且在 我们的入口文件 test.js里添加代码:

//require
var bodyParser = require('body-parser’);

//数据处理
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended : false}));

//接口路由处理
//添加模块
var addMod = require('./routers/api/addMod');
app.use('/addMod', addMod);

然后你就可以给自己写出第一个接口文档:

url: /addMod
type: post
argument: {modId:'',modName:str,modTpl:str,modCode:str}
callback:func

五. 前端

到这里,一个后端服务,以及一个post请求接口都已经写好了,我们的hello world 首页也跑了起来,下面要做的就是大家轻车熟路,在前端用自己写的接口给数据库写入一行。

function addModEvent(){

    $('.mod-btn').on('click',function(){
        var modData = {};
        modData.modName = $modName;
        modData.modTpl = $modTpl;
        modData.modCode = $modCode;

        $.post(‘/addMod', modData, function(data){
            alert('添加成功,模块id是' + data.data.insertId)
        })
    })

}

执行完这个函数以后,你新建的一个 modData 就成功地保存到了数据库里,然后你可以自己写一个新的 get 请求接口,来读取这个数据,并在页面上渲染出来啦。

后记

到这一步,一个从服务,到接口,到前端的完整站点就全部完成了,但是如果我要把这套代码部署到服务器或者其他机器上,需要将全部文件打包上传,包括mudules,有没有更简单地方法,只要npm install一下就可以自动加载那些包的方法哪?有的,还记得一开始让大家去了解的 —save 吗?

作者博客 https://www.chengrang.com/

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python 零基础入门

    Python 是一种易于学习又功能强大的编程语言。它提供了高效的高级数据结构,还有简单有效的面向对象编程。Python 优雅的语法和动态类型,以及解释型语言的本...

    iOSDevLog
  • PHP零基础入门

    ucfirst函数,将句子首字母转换为大写,ucwords函数将每个单词的首字母转换为大写。

    达达前端
  • LaTex零基础入门

    最近有一份课程作业要求使用latex排版,用latex对文档进行管理。说到latex,本科搞比赛时也用过,不过现在回想起来,当时是真的没有入门(虽然它很好入门)...

    啤酒单恋小龙虾
  • Python 零基础入门

    Python 是一门优雅且健壮的面向对象解释型计算机程序编程语言,具有面向对象、可升级、可扩展、可移植 语法简洁清晰易学、易读写、易维护、健壮性、通用性、跨平台...

    测试开发社区
  • Flask零基础--入门篇

    工作项目中想在自己机器搭建一个服务器,使用到了flask,因为之前没接触过后台和服务器等知识,所以从使用角度进行下整理和总结。 Flask是一个用Python...

    languageX
  • 零基础入门 16: UGUI RawImage

    今天的内容会很简单,也会很短,分享一下UGUI的RawImage,那什么是RawImage呢?

    韩东吉
  • 零基础入门 17: UGUI Toggle

    很久没更,最近公司的手游准备二测,加上蛮牛上教程的同步更新,所以一直到现在才开始恢复公众号的内容更新。之后会在游戏蛮牛和公众号上同步更新。

    韩东吉
  • 零基础入门 18: UGUI Slider

    现在教程的思路是按照UGUI的组件进行逐一的讲解,先是在Unity里的操作设置,以及代码段的操作控制。上一篇Toggle讲解之后,这篇就是UGUI里的Slide...

    韩东吉
  • 零基础入门 19: UGUI ScrollBar

    通常在实际项目中,对ScrollBar的应用非常简单,主要用于配合TableView或者ScrollView来进行使用,下一节我们将说明一下Unity里的Scr...

    韩东吉
  • 零基础入门 20: UGUI DropDown

    (题外话,因为这期分享中段制作之后,微信平台抽疯,Gif图无法使用,导致我不得不尝试用其他的方式来让文章看起来没那么死板,在后面的部分展示中,我插入了视频文件而...

    韩东吉
  • 零基础入门 21: UGUI Inputfield

    因为一些外部原因,以后文章的发布只会在公众号内推送,取消了在蛮牛专栏的文章更新,望蛮牛小伙伴周知,关注微信公众号,可以第一时间收到新分享的推送通知。

    韩东吉
  • 零基础入门 22: UGUI Panel

    今天要给大家分享的。。。可谓是,非常的简单啊,我甚至都在考虑要不要单独抽出一次当做分享内容 (・-・*),也有可能是我所有分享里文字数目最少的

    韩东吉
  • 零基础入门 23: UGUI ScrollView

    今天要分享的内容,是近期内关于UGUI的最后一篇,UGUI里的滚动视图ScrollView,后期的内容会根据项目实用的功能组件进行分享。

    韩东吉
  • 零基础入门 13: UGUI Text

    前几篇介绍了UGUI里的Image,今天来说下UGUI 的Text,显示文本的组件。因为有了之前代码创建Image的铺垫,所以对Text的使用就都在这篇介绍了。

    韩东吉
  • 零基础入门 15: UGUI Button

    按钮对于一个应用或者游戏来说。必不可少,今天这篇分享,来说下UGUI里的按钮,Button组件。

    韩东吉
  • ROS2零基础快速入门

    ROS1和2官网入门教程已经趋于一致,不要通过学习ROS1掌握ROS2,如果之前没有接触过ROS,可以直接了解一下ROS2,有需要再学习,“ROS不是万能的”。

    zhangrelay
  • 零基础GO入门笔记

    1. GoLand是一个比较好用的IDE,但只免费试用30天,也可用免费的vscode,简单代码可直接使用notepad+,甚至vim;

    一见
  • 零基础学Python,推荐本入门书籍帮你打基础!

    Python现在非常火,语法简单而且功能强大,很多同学都想学Python!所以小的给各位看官们准备了高价值Python学习视频教程及相关电子版书籍,欢迎前来领取...

    python学习教程
  • 零基础学日语?这个小程序,带你轻松入门「五十音」

    日语五十音图又称五十音,是将日语的假名(平假名、片假名)以元音、子音为分类依据所排列出来的一个图表。

    知晓君

扫码关注云+社区

领取腾讯云代金券