node系列--【node、express、Mysql结合使用案例】

1、express生成器安装依赖及创建文件

express生成器安装

第一次使用需要全局安装：

安装： npm i express-generator -g

安装完成后： express -h 查看常用命令

创建步骤：

1）express --view=ejs sa02

--view=ejs 将ejs指定为默认的模板引擎

sa02 指新创建的项目文件夹，不能是中文或关键词

2）cd sa02 进入当前项目

3） npm i 安装package.json配置中的依赖，全部安装所有包

4）拷贝nodemon.json 到当前的项目下面

{
  "restartable": "rs",
  "ignore": [".git", ".svn", "node_modules /**/ node_modules"],
  "verbose": true,
  "execMap": {"js": "node --harmony"},
  "watch": [],
  "env": {"NODE_ENV": "development"
  },
  "ext": "js json"
}

5）修改 package.json, 添加一行代码：

"scripts": {
    "start": "node ./bin/www",
    "dev":"nodemon ./bin/www"
  },

以后启动项目，执行 npm run dev 即可

6）找到 ./bin/www 文件，28行添加回调函数：

2、安装mysql包

npm i mysql

3.把静态资源文件放在public文件夹内

4.在views文件夹下设置ejs模板（如下是index.ejs）

views文件下有多个ejs文件，可把文件头部，导航部分单独设置为ejs文件，并在index.ejs文件下用 <%- include("header.ejs") %>嵌入

<title>Hello world!</title>
  <link rel="stylesheet" href="css/main.css">
  <!-- zui -->
  <link href="dist/css/zui.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <%- include('header.ejs') %>
      <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
          <%- include('left_menu')%>
        </div>
        <div class="col-xs-6 col-sm-8 col-md-9 col-lg-9">
          <ol class="breadcrumb">
            <li><a href="index.html"><i class="icon icon-home"></i>首页</a></li>
            <li><a href="#">录入信息</a></li>
            <li class="active">课程录入</li>
          </ol>
          <hr>
          <p>欢迎进入xxx管理系统</p>
        </div>
      </div>
  </div>

  <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
  <script src="dist/js/jquery.min.js"></script>
  <!-- ZUI Javascript组件 -->
  <script src="dist/js/zui.min.js"></script>
</body>

</html>
<script>
  // 手动通过点击模拟高亮菜单项
  $('#treeMenu').on('click', 'a', function () {
    $('#treeMenu li.active').removeClass('active');
    $(this).closest('li').addClass('active');
  });
</script>

5.在入口文件设置路由如下：

var express = require('express');
var router = express.Router();
let Chy=require('../tools/Chy.js');
let mysql=require('mysql');

router.get('/', function(req, res, next) {
  res.render('index.ejs')
});

6、如要实现对数据库的增删改查，需要引入封装的数据类（一般放在tools文件夹下的xxx_congif.js和xxx.js文件中，xxx意为个人姓名）可查看上篇博客

入口文件下：node对数据库的增删改查，并通过ejs模板渲染到页面

//查询所有班级信息及实现分页

//实现路由 /list 响应请求,分别获取页码数、总记录数、然后根据页码和每页条数执行sql语句，获取分页的记录数；最后拼一个完整的json，渲染页面

router.get('/list',async(req,res)=>{

// let a=await chy.query("SELECT * FROM `班级`",[])

let page = req.query.page || 1; //页码数
let pageSize = 5;//每页显示记录数
let pageNum = (page-1)*pageSize;//

// 利用统计函数获取总记录数

let a = await chy.query("SELECT COUNT(*) AS allnum FROM `班级`",[]);

let [{allnum}]=a;

console.log(allnum);

let sql = `SELECT * FROM 班级 LIMIT ${pageNum},${pagesize}`;

// console.log(sql);

// 数据库中读取所有班级数据

let result = await chy.query( sql,[]);

console.log(result);

let data={

pagesize,

page,

allnum,

result

}

res.render('banji_list.ejs',data)

})

ejs模板：

<link rel="stylesheet" href="css/main.css">    <!-- zui -->  
<link href="dist/css/zui.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container" >
        <%-include('header.ejs')%>
        <div class="row">
          <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
            <%-include('left_menu.ejs')%>
          </div>
          <div class="col-xs-6 col-sm-8 col-md-9 col-lg-9">
            <ol class="breadcrumb">
              <li><a href="index.html"><i class="icon icon-home"></i>首页</a></li>
              <li><a href="#">修改信息</a></li>
              <li class="active">班级列表</li>
            </ol>
            <hr>
            <table class="table table-bordered">
              <tr>
                <td>序号</td>
                <td>班号</td>
                <td>班长</td>
                <td>班主任</td>
                <td>教室</td>                
                <td>修改</td>
              </tr>

             <% for(let item of result){ %>
              <tr>
                <td><%= item.id %></td>
                <td><%= item.班号 %></td>
                <td><%= item.班长 %></td>
                <td><%= item.班主任 %></td>
                <td><%= item.教室 %></td>
                <td><a href="/delbanji?id=<%= item.id %>" class="btn btn-sm btn-danger">删除</a></td>
              </tr>
              <% } %> 
            </table>
　　　　　　　　//需要不同类型的分页器可打开 http://www.openzui.com/#javascript/pagerjs自行查找，复制代码到此处
            <ul id="myPager" class="pager" data-ride="pager" data-page="<%= page %>" data-rec-total="<%= allnum %>" data-rec-per-page="<%= pagesize %>"></ul>

          </div>
        </div>
    </div>
    <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="dist/js/jquery.min.js"></script>
    <!-- ZUI Javascript组件 -->
    <script src="dist/js/zui.min.js"></script>
  </body>
</html>
<script>
  // 手动通过点击模拟高亮菜单项
$('#treeMenu').on('click', 'a', function() {
    $('#treeMenu li.active').removeClass('active');
    $(this).closest('li').addClass('active');
});

//实现页码的监听
//根据传递的json数据，初始化分页器。
//data-page、data-rec-total、data-rec-per-page 来分别指定初始状态时当前页数、总记录数和每页记录数

$('#myPager').on('onPageChange', function(e, state, oldState) {
    if (state.page !== oldState.page) {
        console.log('页码从', oldState.page, '变更为', state.page);
        window.location.href = "/list?page="+state.page
    }
});
</script>