express主页实现搜索功能

需要form的active&&method位置和请求方法

• input需要个name属性，不然会不知道传的名字是啥

  <div class="main">
       <div class="select">
         <form action="/like" method="get">
           <select>
             <option value="111">111</option>
             <option value="222">222</option>
             <option value="333">333</option>
             <option value="444">444</option>
           </select>
           <div class="search">
             <input type="text" name="like">
             <button class="search-btn">
               <img src="/images/home_black.png" alt="">
             </button>
           </div>
         </form>
         <button id="addBtn" class="add-btn">添加</button>
       </div>

在app.js里配置

• var like = require(‘./routes/like’)
• app.use(‘/like’, like)
• 在routes下建like.js文件

搜索框功能

• 按结果分页
• 根据input的name值查询数据库

  var express = require('express')
  var router = express.Router()
  var db = require('../sql.js')
  /* GET home page. */
  router.get('/', function (req, res, next) {
    // 拿到的搜索数据
    var like = req.query.like
    var pageNum = req.query.page
    db.query(
      `select * from background where name like '%${like}%'`,
      function (err, data) {
        var pager = {}
        // 当前页码
        pager.pageCurrent = pageNum || 1
        // 总的记录数
        pager.maxNum = data.length
        // 每页显示多少条记录
        pager.pageSize = 5
        // 一共多少页
        pager.pageCount = parseInt(Math.ceil(pager.maxNum / pager.pageSize))
        // [0,5],[5,10]....
        var dataList = data.slice(
          (pager.pageCurrent - 1) * pager.pageSize,
          (pager.pageCurrent - 1) * pager.pageSize + pager.pageSize
        )
        if (err) {
          throw err
        } else {
          res.render('backgroundList', {
            backgroundList: dataList,
            pager: pager
          })
        }
      }
    )
  })
  module.exports = router

其他部分

• style部分

  .select{
          display: flex;
          padding: 20px 30px;
          background-color: grey;
          justify-content: space-between;
          border-radius: 24px;
        }
        .select form{
          display: flex;
        }
        .select form > div{
          margin: 0;
        }
        .select select{
          padding: 0 20px;
          width: 560px;
          height: 40px;
          color: #fff;
          background-color: gainsboro;
          border-radius: 12px;
          border: 0;
          outline: none;
        }
        .select .search{
          display: flex;
          width:560px;
          height: 40px;
          margin-left: 15px;
          border-radius: 12px;
          overflow: hidden;
        }
        .select .search input{
          flex: 1;
          padding: 0 10px;
        }
        .select .search .search-btn{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 45px;
          height: 40px;
          background-color: gainsboro;
        }
        .select .search .search-btn img{
          width: 25px;
          height: 25px;
          /* background-color: gainsboro; */
        }
        .select button.add-btn {
          width:170px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          background-color: gainsboro;
          border-radius: 12px;
        }

  以上是我的学习笔记~