全栈宝宝级教学—小程序前端+Express后端+MySQL数据库(中)

  紧接上一节,这一篇我们主要讲Express搭建,这篇内容会比较多,大家需要细心一点
  全栈宝宝级教学—小程序前端+Express后端+MySQL数据库(上)
  全栈宝宝级教学—小程序前端+Express后端+MySQL数据库(下)

四、Express搭建

 现在我们开始Express的安装
 输入以下命令(后面带个-g 指全局安装):

sudo npm install express -g
sudo npm install express-generator -g
#查看express版本
express --version
#4.16.1
安装express后

然后进入当前用户文件夹下,并创建我们的项目“myProject”,命令如下

#进入到当前用户目录下
cd ~
#创建我们的express项目
express myProject
#查看当前目录下的所有文件
ls
查看项目结构

已经安装好了,但是还需要安装一些依赖,然后测试一下

#打开我们的项目文件夹,cd 然后打个m,按Tab键会自动补全
cd myProject/
#安装依赖
npm install 
#启动服务
npm start

然后我们在浏览器中,输入你服务器的IP:3000(如127.0.0.1:3000),就可以看到如下画面啦


启动服务器
浏览器界面

接下来就要写Model层啦,当然写法也有很多种,简单的写法是不封装直接在函数里面写SQL语句,但是这样后期维护非常麻烦,所以为了我们的代码整洁,且逻辑清晰,这里都对各个部分进行了简单封装。
先放一个最后的目录结构图,其中表示我们需要手动创建的文件,表示框架生成但是我们需要进行修改的文件。

项目结构

首先创建一个conf文件夹用来放一些配置信息

mkdir conf

之后创建一个dao文件夹(Data Access Object)用来放跟数据库操作相关文件

mkdir dao

在myProject目录下进入conf文件夹

cd conf

然后创建一个database.js文件用来配置我们的数据库信息,创建新文件可以直接用vim/nano 文件名.文件类型
关于这两个编辑器你喜欢哪个,个人建议初学者可以先使用nano,因为有提示,等你写的多了就自然会用vim了

vim database.js

然后你将看到如下界面:

database.js

考虑到该篇为宝宝级教学,在这里就讲几个最最基础的操作(了解更多请点这里),为了用最简单的方式完成任务,你只需要知道以下4个按键/命令

用途 按键/命令
进入命令模式 按 esc
进入编辑模式 按 i
保存退出 :wq
强制退出 :q!

我们一用vim打开某个文件时,就进入的是命令模式,这时候按 i 键就进入了编辑模式,然后就可以愉快的写代码啦,当你敲完以下代码后(其中的password替换成你自己的数据库密码):

编辑模式

当你写完后请按 Esc 键,这样我们又进入了命令模式,然后请输入:wq,我们就保存文件并退出了,因为我们用的MySQL所以还需要在package.json文件里面配置一下

返回上一级目录

cd ..

编辑package.json文件

vim package.json

在"dependencies"里面加入下面这行代码,如果报错,看看是不是少逗号

"mysql": "latest"

最后文件内容大概如下:

{
  "name": "myproject",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1",
    "mysql": "latest"
  },
  "devDependencies": {
    "body-parser": "^1.19.0"
  }
}

按Esc,保存退出

:wq

好了现在我们进入dao文件夹,先创建一个basicConnection.js用来连接数据库

cd dao

创建一个basicConnection.js文件

vim basicConnection.js

将以下代码输入进去,第一个function是做返回响应的,第二个function是与数据库建立链接并执行操作

var mysql = require('mysql');
var dbConfig = require('../conf/database');

var pool = mysql.createPool(dbConfig.mysql);

function responseDoReturn(res, result,resultJSON) {
    if(typeof result === 'undefined') {
        res.json({
            code:'201',
            msg: 'failed to do'
        });
    } else {
        res.json(result);
    }
};

function queryArgs(sql,args, callback) {
    console.log('Doing basicConnect.queryArgs');
    pool.getConnection(function (err, connection) {
        connection.query(sql, args,function (err, rows) {
            callback(err, rows);
            connection.release();
        });
    });
}

module.exports = {
    queryArgs: queryArgs,
    doReturn: responseDoReturn
}

最后同样按Esc,保存退出

:wq

然后我们要在dao文件夹里再创建一个products文件夹,这个文件夹中的products_sql.js用来向外部提供所用到的SQL语句,而products_dao.js用来向外部提供对该表操作的接口(比如增删改查,这里为了测试就只写了增,剩下的大家改写一下就ok)记得每个文件写完后保存退出

mkdir products

进入products文件夹里

cd products

创建products_sql.js

vim products_sql.js

输入以下代码,这个里面就是SQL语句了,包含了增删改查基本操作

var product_sql = {
    addProduct: "INSERT INTO products(name,price) VALUES(?,?);",
    deleteProduct: "DELETE FROM products WHERE id = ?;",
    updateProduct: "UPDATE products SET name = ?, price = ? WHERE id = ?;",
    queryProduct: "SELECT * FROM product WHERE id = ?;",
}

module.exports = {
    product_sql: product_sql
}

然后现在创建products_dao.js文件

vim products_dao.js

输入以下代码

var db = require('../basicConnection');
var sqlCommands = require('./products_sql');

function addProduct(req, res, next){
    console.log("Doing addProduct, req =  " + JSON.stringify(req));
    var param = req;
    console.log('sqlCommands = ' + sqlCommands.product_sql.addProduct);
    db.queryArgs(sqlCommands.product_sql.addProduct,
        [param.name, param.price],
        function(err, result){
            if(!err){
                result = {
                    code: 200,
                    msg: 'successful'
                }
            }
            db.doReturn(res, result);
        }
    )
}
module.exports = {
    addProduct: addProduct
}

  现在我们需要返回到myProject目录下(cd ../../),再安装一个body-parser,这是一个HTTP请求体解析的中间件,使用这个模块可以解析各种格式的请求体(我们等会前端用POST请求时要用到)
  返回到myProject目录下后请输入以下指令

npm install body-parser

  安装完成后,我们需要在app.js文件里面加几行代码,已经用标示出来,大家照着打就行,不想打就分别复制下面的代码,最后保存退出:

#编辑app.js文件
vim app.js
#所添代码
var productsRouter = require('./routes/products');
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use('/products', productsRouter);
app.js

然后我们再重新输入以下代码,重新安装一下依赖

npm install

现在我们可以进入routes文件夹了,准备新建一个products.js路由文件,基本就快接近胜利了
进入routes文件夹

cd routes

创建一个products.js文件

vim products.js

输入以下代码

var express = require('express');
var router = express.Router();
var productDAO = require('../dao/products/products_dao')

router.post('/addProducts', function(req, res, next){
    console.log('Router start ')
    console.log('Red.body = ' + JSON.stringify(req.body));
    productDAO.addProduct(req.body, res, next)
});
module.exports = router;

至此我们的Express搭建可以告一段落,下一篇我们将结合前端进行测试

你可能感兴趣的:(全栈宝宝级教学—小程序前端+Express后端+MySQL数据库(中))