1、创建项目
1.1 创建一个mycms项目
生成pageage.json文件，我们用 npm init -y
nodejs写项目，如果你纯粹 只写接口，不用写页面，你把 接口文档和接口地址给前端开发人员 即可。接着，就是前端开发人员，阅读你的接口文档，调取数据显示在视图层。
我们现在写得这个mycms项目项目，有前台数据的调取，也后台数据的调取。
1.2 创建项目目录
common 公共js模块目录（分页，文件上传）
config 文件配置目录
db.js （nodejs连接数据）
images 图像资源目录
public 公共资源目录
admin后台资源目录
images
css
js
fonts
home前台资源目录
images
css
js
fonts
routers路由配置文件
home.js
admin.js
admin后台路由配置文件
因为后台有很多功能模块，每个功能模块对应一个js文件
例如:后台管理功能模块 admin.js的路由配置文件
upload文件上传目录
后台操作上传图片等资源的是，存放的目录
images 公共图像目录
views前台和后台模板文件目录
home 前台模板文件目录
admin 后台模板文件目录
admin 后台管理员功能模块对应的模板文件目录
add.html 添加管理员页面
edit.html 编辑管理员页面
index.html 管理员列表页面
app.js 项目入口文件
1.3 项目入口文件配置，启动项目
app.js 项目入口文件
我们这个nodejs项目，使用express框架。
express框架的中文官网地址：Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网
这个框架提供的 对应的所有api接口，都可以到这个官网上去查。
操作步骤：
-
引入express框架，首先要下载它
使用npm下载，安装
npm install express --save2. app.js 简单路由配置
// 导入express框架
let express = require('express');
// 初始化express
let app = express();
app.get('/',function(req,res){
res.send('hi nidejs');
})
// 监听服务器
let port = 3000;
app.listen(port,()=>{
console.log('node服务器已经启动，端口是:'+port);
})3.安装node自动重启工具
nodemon是一种工具，可在检测到目录中的文件更改时通过自动重新启动节点应用程序来帮助开发基于 node.js 的应用程序。
作用：自动重启node服务器
在命令窗口输入
npm install nodemon --save注意：本地安装需要在 package.json 文件的 script 脚本中指定要需要执行的命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server":"nodemon ./server.js"
},启动nodejs服务器，在终端里启动命令：
npm run server在命令窗口，可以看到nodemon 就开始启动工作了：
4.配置前台模块路由，和后台模块路由
routers---home.js
// 导入express框架
let express = require('express');
// 实例化路由对象
let router = express.Router();
// 前台首页页面路由
router.get('/', function(req,res,next){
res.send('我要访问前台首页页面')
})
module.exports = router;routers---admin.js
// 导入express框架
let express = require('express');
// 实例化路由对象
let router = express.Router();
// 后台登录页面路由
router.get('/login', function(req,res,next){
res.send('我要访问登录页面')
})
module.exports = router;接着，我们去app.js文件文件中设置，我们要能访问读取到 上面这两个路由模块文件。
// 导入前台路由和后台路由
let adminRouter = require('./routers/admin.js');
let homeRouter = require('./routers/home.js');
// 使用前台路由
// 参数1：匹配路由规则
// 参数2：请求路由规则
app.use('/',homeRouter);
app.use('/admin',adminRouter);完整代码：
// 导入express框架
let express = require('express');
// 初始化express
let app = express();
app.get('/',function(req,res){
res.send('hi nidejs!!!!!');
})
// 导入前台路由和后台路由
let adminRouter = require('./routers/admin.js');
let homeRouter = require('./routers/home.js');
// 使用前台路由
// 参数1：匹配路由规则
// 参数2：请求路由规则
app.use('/',homeRouter);
app.use('/admin',adminRouter);
// 监听服务器
let port = 3000;
app.listen(port,()=>{
console.log('node服务器已经启动，端口是:'+port);
})测试：
5.项目中涉及到的目录，我们在app中进行配置
设置静态资源访问目录
// 设置静态资源的访问
app.use('/public', express.static(__dirname+'/public'));
app.use('/upload', express.static(__dirname+'/upload'));
app.use('/images', express.static(__dirname+'/images'));测试：
在public目录下放置一个1.png。 在upload目录下放置一个1.png。 在images目录下放置一个3.jpg。
我们在浏览器的地址中，访问：
预览：
6.载入模板文件，配置模板引擎
下载，安装ejs
npm install ejs --save在app.js入口文件中，配置如下所示：
// 设置模板的存放目录
// 第一个参数：固定的
// 第二个参数：模板存在的目录
app.set('views','./views');
// 定义使用的模板引擎
// 第一个参数：模板引擎的名称，模板引擎的后缀
// 第二个参数：使用模板引擎的方法
app.engine('html',ejs.__express)特别注意： './views' 要 写上 .点 ,不写 这个 .点。模板文件访问不到。
接着，到routers---home.js中，找到前台首页页面路由，载入页面
// 前台首页页面路由
router.get('/home', function(req,res,next){
// res.send('我要访问前台首页页面')
// 载入页面
res.render('home/index.html')
})测试：
1.4 载入前台和后台的页面
1.4.1 载入前台页面
操作步骤：
（1）打开你事先准备好的模板文件。把模板文件中的源码复制到 views--home-index.html中。
（2）接着 调整css、js、图像的路径即可。
把模板文件中的前台资源文件，如下所示：
复制到 public---home 目录中即可。
（3）在views--home-index.html 这个文件中，调整路径，操作如下所示：
其他前台页面 操作同上。
1.4.2 载入后台页面
操作步骤：
（1）打开你事先准备好的模板文件。把模板文件中的源码复制到 views--admin-login.html中。
（2）接着 调整css、js、图像的路径即可。
把模板文件中的前台资源文件，如下所示：
复制到 public---home 目录中即可。
（3）在views--home-index.html 这个文件中，调整路径，操作如下所示：
2、 后台管理员功能开发
在views---admin---index.html文件左侧区域，设置菜单项：
<h2><span class="icon-pencil-square-o"></span>管理员管理</h2>
<ul style="display:block">
<li><a href="" target="right"><span class="icon-caret-right"></span>管理员列表</a></li>
<li><a href="" target="right"><span class="icon-caret-right"></span>添加管理员</a></li>
<li><a href="" target="right"><span class="icon-caret-right"></span>编辑管理员</a></li>
</ul>接着配置这三个功能所对应的路由 及页面。
2.1 nodejs连接数据库
操作步骤：
（1）下载mysql数据库模块
npm install mysql --save（2）配置连接
config---db.js：
//下载mysql数据库模块--npm install mysql
// 导入数据库
const mysql=require('mysql');
//设置数据库连接属性
let connect=mysql.createConnection({
host:'localhost',
user:'root',
password:'root',
database:'mycms'
})
//开始连接数据库
connect.connect()
//抛出
module.exports=connect;2.2 管理员列表
到后台管理员模块文件 routers---admin---admin.js中，设置：
router.get('/list',function(req,res,next){
// res.send('访问登录页面')
//执行sql语句
let sql='select * from admin';
//从数据库中查询数据
mysql.query(sql,function(err,data){
if(err){
return false;
}else{
data.forEach(function(item){
item.addtime=moment(item.addtime).format("YYYY-MM-DD HH:mm:ss")
console.log(data);
})
//载入页面
res.render('admin/admin/list.html',{data:data})
}
})
})打印数据输出：
对从数据库中 取的时间，进行格式化处理，我们需要使用 moment模块，
下载，安装moment
npm install moment --save拿一个时间戳，在线测试：
1659167151445 将这个时间戳 添加到数据库的字段里。
设置：
data.forEach(item=>{
item.addtime = moment(item.addtime).format("YYYY-MM-DD HH:mm:ss");
});接着，在对应的模板文件中，渲染输出数据：
<!-- ejs模板引擎 -->
<% data.forEach((item)=>{ %>
<tr>
<td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
<%= item.id %>
</td>
<td><%= item.name %> </td>
<td><%= item.addtime %> </td>
<td><div class="button-group">
<a class="button border-main" href="add.html">
<span class="icon-edit"></span> 修改</a>
<a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)">
<span class="icon-trash-o"></span> 删除</a>
</div>
</td>
</tr>
<% }) %>预览：
2.3 添加管理员
下载layui，其中日期 需要使用laydate.js
http://layui.winxapp.cn/doc/modules/laydate.html
http://layui.winxapp.cn/laydate/index.html
添加时间，这里使用laydate, 参见官网 进行设置
设置如下所示：
把这块代码从官网上复制
laydate.render({
elem: '#addtime'
,type: 'datetime'
});复制到 我们的模板add.html文件中 使用：
预览：
我们到app.js入口文件中，下载安装body-parser，
npm install body-parser --save并配置：
// 处理post请求
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended:false}));这个配置好后，我们的post提交的数据，才能被接口 接收数据。
预览：
数据库表添加时间戳：
页面管理员列表：
