1、
express生成器安装
第一次使用需要全局安装：
安装： npm i express-generator -g
创建步骤：
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行添加回调函数：
安装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> //需要不同类型的分页器可 <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>