创建NodeJS + Express + art-template 项目步骤

nodeJs 项目创建步骤

[TOC]

## 1. 创建NodeJS + Express + art-template 项目步骤

+ **第一步：**使用 `npm init -y` 初始化nodejs项目，创建package.json文件
***

+ **第二步：**在项目根目录下创建一个app.js文件，安装Express时需要，app.js和package.json是平级的
***

+ **第三步：**使用 `npm install express --save` 安装express包
***

+ **第四步：**使用 `npm install art-template --save` 安装视图模板art-template包，使用 `npm install express-art-template --save` 安装兼容express框架的视图模板包express-art-template
***

+ **第五步：**使用 `npm install mysqljs/mysql` 安装mysql数据库访问包mysqljs
***

+ **第六步：**配置package.json文件，将`"main"`配置为app.js，这样就可以使用<mark>node .</mark>来启动项目，配置`"scripts"`参数为`"test": "node app.js"`，`"scripts"`可以配置多个，配置完成后就可以使用<mark>npm run test</mark>来启动项目
***

+ **第七步：**创建目录结构，以下四个文件夹均与app.js文件同一目录

+ 添加public文件夹存放静态资源文件，js、css、图片等

+ 添加views文件夹存放视图模板文件，这里存放的就是art后缀的视图文件

+ 添加route文件夹存放路由模块文件，在此文件夹目录下创建路由文件`route.js`

+ 添加services文件夹存业务逻辑处理文件
***

+ **第八步：**初始化app.js文件

+ 设置视图的模板引擎
```JS
const express = require("express")
const app = express();
const atrEngine = require("express-art-template")
const path = require("path")
//设置模板路径,art模板文件存储的目录，这里模板文件存放在views文件夹下
app.set("views", path.join(__dirname, "views"))
//设置模板引擎（设置模板文件后缀），"view engine"是固定写法，art是模板文件的后缀
app.set("view engine", "art")
//让express框架可以兼容art-template，第一个参数需要和"view engine"一致
app.engine("art", atrEngine)
```

+ 引用模块化的路由文件
```JS
//引入模块化的路由规则文件
const appRoute = require("./route/route.js")
//使用路由规则
app.use(appRoute)
```

+ 添加启动端口监听
```JS
app.listen("3000", "localhost", () => {
    console.log("启动成功")
})
```
***

+ **第九步：**编辑路由模块，路由规则

+ 初始化一个站点首页，在views文件夹下创建一个登录页面`login.art`作为站点首页

+ 编辑路由规则
```JS
const express = require("express")
//获取路由模块，路由模块是express中的模块
const route = express.Router()
//设置了站点首页，首页为login.art视图页面
route.get('/', (req, res) => {
    res.render("login")
})
//将路由规则公开到外部
module.exports = route
```
***

+ **第十步：**抽离路由的业务代码，独立成一个业务区域，将业务文件放在services文件夹下

+ 在services下创建一个`login.js`文件，用来编辑登录相关的业务逻辑，路由抽离出来的方法也可以放在这里

+ 将路由抽离的方法写入到`login.js`文件
**a. 修改`route.js`路由文件**
```JS
const express = require("express")
const route = express.Router()
// 引入业务处理文件
const loginService = require("../services/login.js")
// 使用业务文件中的方法
route.get('/',loginService.login)
module.exports = route
```
**b. 新增业务处理文件`login.js`**
```JS
//处理路由login路由的后续业务
exports.login = (req, res) => {
    res.render("login")
}
```
***

+ **第十一步：**使用Express中间件static挂在静态文件

+ 在public/plugins目录下添加jquery.js文件

+ 在public/js目录下添加login.js文件，用来存放前端页面脚本

+ 在public/css目录下添加css样式文件login.css

+ 在public/img目录下添加logo.jpg图片

+ 在app.js文件中通过static中间件挂载静态文件
```JS
//挂载静态文件，这里使用了别名（虚拟目录），静态文件引用时需要注意以/v0为根目录开始
//例如public/css/login.css文件，引用时需要使用/v0/css/login.css路径
app.use("/v0", express.static("public"))
```
> 这里挂载静态文件包括了css，js，各类格式的图片，ico后缀的图标也包括了，不需要去安装serve-favicon包，另外挂载favicon中间件了

***

+ **第十二步：**使用art模板编写视图页面，以login.art登录页面为例
```HTML
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">

    <link rel="stylesheet" href="/v0/css/login.css">
</hred>
<div id="app">
<div class="logo"></div>
    <div>登录</div>
</div>
</html>
```
***

+ **第十三步：**使用`node .`命令启动服务，看到提示成功后，然后在浏览器中打开 http://localhost:3000/ 地址，完成的示例代码可以点击[这里](/blog/info-md.html/5B78A8F1BB3BFD5A?type=39)查看
***

+ **第十四步：**解析前端页面请求数据，挂载 body-parser 中间件

+ 解析前端数据需要使用到中间件 body-parser，本步骤使用的是 express 4.18.2，这个版本已经自带了 body-parser 中间件，express版本比较低需要自行安装 body-parser 包

+ 改造app.js文件，在文件中挂载body-parser
```JS
// 引入body-parser中间件
const bodyParser = require("body-parser")
// 挂载body-parser中间件
var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.use(urlencodedParser)
```

> app.js 修改后重启服务

***

+ **第十五步：**使用mysqljs访问MySQL数据库

+ 在services目录下添加db文件夹，在db文件夹中添加sqlhelper.js文件，这个文件是访问MySQL的公共代码，代码内容如下
```JS
const mysql = require('mysql');
const connection = () => {
    return mysql.createConnection({
        host: 'localhost',
        user: '***',         //MySQL用户账户
        password: '***',     //MySQL用户账户密码
        database: '***'      //MySQL要连接的数据库
    });
}
// 判断是否存在
exports.query = (sql, data, callback) => {
    const connerct = connection();
    connerct.connect();
    connerct.query(sql, data, function (error, results, fields) {
        if (error) {
            throw error;
        }
        callback(results) //执行回调函数，处理访问完数据库的后续操作
    });
    connerct.end();
}
```

+ 修改services文件夹下的业务处理文件，例如 services/login.js，在文件中加入sqlhelper.js的引用，并调用其中的方法
```JS
const db = require("./db/sqlhelper.js")
//验证登录
exports.subLogin = (req, res) => {
    var data = req.body;
    var sql_where = [data.username, data.password];
    var sql = "select 1 from my_student where name = ? and password = ? ";
    db.query(sql, sql_where, (results) => {
        console.log(results)
        if(results[0]){
            console.log("ok")
        }else{
            console.log("noOk")
        }
    })
    res.redirect("/")
}
```