express主页右边路由渲染页面and向数据库添加数据

点击左边目录，路由渲染到右边

frameset和frame标签中的name属性

用于target=”name的值”切换的路由，由渲染在左边，改为name的位置，如右边

//在left.ejs里
<li class="menu">
  <img class="img" src="/images/home_black.png" alt="">
  <a href="/backgroundList" target="right">background图</a>
</li>

引入bootstrap样式

官网下载，只要bootstrap.min.css其他可以删掉

直接加上类名class=”table”

<body>
  <div class="container">
    <div class="main">
      <div class="select">
        <select name="" id="">
          <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">
          <div>
            <img src="/images/home_black.png" alt="">
          </div>
        </div>
        <button id="addBtn">添加</button>
      </div>
      <div class="content">
        <table class="table">
         <thead>
          <tr>
            <th>ID</th>
            <th>图片名称</th>
            <th>图片路径</th>
            <th>操作</th>
          </tr>
         </thead>
         <tbody>
          <% backgroundList.forEach(function(item){ %>
            <tr>
              <td> <%= item.id %></td>
              <td> <%= item.name %></td>
              <td> <%= item.imgUrl %></td>
            <td>
              <img src="/images/home_black.png" class="edit">
              <img src="/images/home_black.png" alt="del">
            </td>
            </tr>
            <%  }) %>        
      </tbody>
     </table>

点击添加按钮出现框

一个空的，方便区分

取消用span防止默认添加事件

<div class="dialog isDialog"></div>
  <div class="dialog-wrap isDialog">
    <h3>添加图片</h3>
    <div class="close" id="close">
      <img src="/images/home_black.png"  alt="">
    </div>
    <form action="/addBackground" enctype="multipart/form-data" method="post">
      <div>
        <p>图片标签</p>
        <p>
          <input type="text" class="form-control" name="imgName" />
        </p>
      </div>
      <div>
        <p>图片路径</p>
        <p>
          <input type="file" name="pic" class="upload-input" id="uploadInput" />
        </p>
      </div>
      <div class="dialog-footer">
        <span class="cancel" id="cancel">取消</span>
        <button class="determine">确定</button>
      </div>
    </form>
  </div>

用jquery写展示，取消关框事件

<style>
 <!-- 隐藏添加框 -->
 .isDialog{
  display:none;
 }
</style>

<script src="/javascripts/jquery.js"></script>
 <script>
   $(function(){
     $('#addBtn').click(function(){
       $('.isDialog').show();
     })
     $('#close,#cancel').click(function(){
       $('.isDialog').hide();
     })
   })
 </script>

数据库添加数据

form action=”/addBackground” enctype=”multipart/form-data” method=”post”></form别写错
multipart需要安装引入
enctype就是encodetype就是编码类型的意思。
multipart/form-data是指表单数据有多部分构成，既有文本数据，又有文件等二进制数据的意思。
默认情况下，enctype的值是application/x-www-form-urlencoded，不能用于文件上传，只有使用了multipart/form-data，才能完整的传递文件数据。
application/x-www-form-urlencoded不是不能上传文件，是只能上传文本格式的文件，multipart/form-data是将文件以二进制的形式上传，这样可以实现多种类型的文件上传。
action=”/addBackground”上传的地方js文件
在routes目录下建addBackground.js
在app.js里var addBackground = require(‘./routes/addBackground’)&&app.use(‘/addBackground’, addBackground)
不用建addBackground.ejs，不需要页面

multiparty上传图片

安装npm install multiparty –save
在addBackground.js里引入
需要一个放图片的目录，在public下创一个文件夹可名upload

代码

var express = require('express')
var router = express.Router()
var db = require('../sql.js')
var multiparty = require('multiparty')
/* GET home page. */
router.post('/', function (req, res, next) {
  var form = new multiparty.Form()
  // 上传图片，需要一个目录
  form.uploadDir = './public/upload'
  form.parse(req, function (err, fields, files) {
    var imgName = fields.imgName[0]
    console.log(files)
    // 上传图片路径
    var pic = files.pic[0].path
    db.query(
      'insert into background value (?,?,?)',
      [0, imgName, pic],
      function (err, data) {
        if (err) {
          throw err
        } else {
          db.query('select * from background ', function (err, data) {
            if (err) {
              throw err
            } else {
              res.render('backgroundList', { backgroundList: data })
            }
          })
        }
      }
    )
  })
})
module.exports = router

这时就可以添加了，且入数据库

其他部分

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <style>
      .container{
        width: 100vw;
        height: 100vh;
        background-color: gainsboro;
        overflow: hidden;
      }
      .main{
        padding: 20px 30px;
        overflow: hidden;
      }
      .select{
        display: flex;
        padding: 20px 30px;
        background-color: grey;
        justify-content: space-between;
        border-radius: 24px;
      }
      .select select{
        padding: 0 20px;
        width: 40%;
        height: 40px;
        color: #fff;
        background-color: gainsboro;
        border-radius: 12px;
        border: 0;
        outline: none;
      }
      .select .search{
        display: flex;
        width: 45%;
        height: 40px;
        border-radius: 12px;
        overflow: hidden;
      }
      .select .search input{
        flex: 1;
        padding: 0 10px;
      }
      .select .search div{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 40px;
        background-color: gainsboro;
      }
      .select .search div img{
        width: 25px;
        height: 25px;
        /* background-color: gainsboro; */
      }
      .select button{
        width: 10%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background-color: gainsboro;
        border-radius: 12px;
      }
      .content{
        margin-top: 30px;
        background-color: grey;
        border-radius: 24px;
      }
      .table{
        width: 100%;
        color:#fff;
        text-align: center;
      }
      .table thead tr{
        height: 64px;
      }
      .table th{
        text-align: center;
      }
      .table tbody tr td{
        line-height: 48px;
      }
      .table tbody tr td img{
        width: 25px;
        height: 25px;
        /* background-color: gainsboro; */
      }
      .dialog{
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: #000;
        opacity: .5;
      }
      .dialog-wrap{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 999;
        padding: 20px;
        width: 460px;
        margin-left: -120px;
        background: #fff;
        border-radius: 24px;
      }
      .dialog-wrap img{
        width: 25px;
        height: 25px;
        margin-top: -73px;
      }
      .dialog-header{
        position: relative;
      }
      .dialog-header div{
        position: absolute;
        right: 0;
        top: 0;
      }
      form > div{
        margin: 20px 0;
      }
      .dialog-footer{
        text-align: right;
      }
      .dialog-footer button, .dialog-footer span{
        /* outline: none; */
        display: inline-block;
        cursor: pointer;
        padding: 6px 10px;
        color: #fff;
        background-color: gray;
      }
      .isDialog{
        display: none;
      }
    </style>
  </head>

/stylesheets/style.css

*{margin: 0;padding: 0;}
body {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
ul{
	list-style: none;
}
a {
  color: #00B7FF;
	text-decoration: none;
}
input{
	border:0px;
	background-color: none;
	outline:none;
}