前后端项目整体思路

# 拉勾网管理信息系统
## 架构：前后端分离
# 前端
- Webpack 开发环境搭建
1.entry：字符串，数组，对象
1、字符串：单个入口
// 2、数组：多个入口，一个出口
// 3、对象：多个入口(chunk), 多个出口
2.output: filename, path
3.插件：
html-webpack-plugin
copy-webpack-plugin
yarn add html-webpack-plugin --dev
4.webserver
webpack-dev-server: 默认热更新，且将生成的静态文件放到内存里
5.loader
sass-loader, css-loader, style-loader, bebal-loader, string-loader, url-loader, file-loader
6.copy文件
copy-webpack-plugin

- 前端UI框架
# 基于bootstrap的AdminLTE

app 注册路由 


1.路由导航切换：<a href='/#/home'>可以依据路由的跳转实现页面切换，正统的做法自定义标签to='/home',
　　

   let $lis =  $('#sidebar-menu li[to]')
    $lis.on('click',function(){
        let to = $(this).attr('to')
        router.go(to)
    })

<全局定义sme的实例router>

2.导航高亮，路由发生改变，则改变高亮（使用sme的中间件监听路由改变）

  router.use((req) => {
        _activeLink(req.route)
    })

express中间件
　　1.

• 应用程序级中间件：

  var app = express()
  app.use(function (req, res, next) {
    console.log('Time:', Date.now())
  })

• 路由器级中间件　　

  var app = express()
  var router = express.Router()

• 错误处理中间件
• 内置中间件 　app.use(express.static(path.join(__dirname, 'public')));
• 第三方中间件  app.use(bodyParser.urlencoded({ extended: false }))

2.

{
　　"ret":
　　<%- ret %>,
　　"data":
　　<%- data %>
}// = 是做了编译
res.render时将数据和模板结合