nodejs制作part1

新建文件夹
安装express ejs
新建静态资源目录static
ejs模板目录views
新建views/indexejs
app.js
在app.js 引入express模板 配置路由
设置ejs引擎模板

新建路由文件router/router.js

在app.js引入router.js
在router.js写模块暴露
引入bootstrap模板
static/css/bootstrap.min.css
在index.ejs 中引入bootstrap模板 link 删除container-fluid 的槽宽
新建index.css并引入
在index.ejs写主页面 的title
list-inline-item(li) list-inline(ul) 去点class
文字垂直居中
删除固有样式margin bottom
新建views/header.js
在把 index.ejs复制到header.ejs
在index.ejs绑定header.ejs的数据

安装mysql
在mysql里新建blog数据库
新建文件mysql/setting.js

mysql/connextion.js数据库连接引入settings文件
在mysql中新建导航表


在connection.js中拿表中数据

新建sql.js

在routrt.js中 对nodejs获取的mysql数据进行转换

在header.ejs 循环绑定title数据

不同的字有不同的class

搜索框
行级元素 vertical-align：middle
search>input search>span
添加jquery库放入static在index.ejs引入jquery link
新建static/js/index.js 在index.ejs连接index.js


搜索框的显示与隐藏jquery

搜索框下的布局

新建mysql个人信息表

填一组数据
在router.js中添加渲染数据
把title的拿数据做一下调整
在“/”路由下加载其他数据

在index.ejs进行第二组数据的绑定

图片的设置
text-align center
line-height 3rem
四个图标的点击

线条的变化

线条的显示隐藏


index.js

不同选项卡的不同界面