NodeJS Express博客项目实战之轮播图管理

最新推荐文章于 2024-07-26 14:20:58 发布

weixin_30569033

最新推荐文章于 2024-07-26 14:20:58 发布

阅读量720

点赞数

文章标签：数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/jiguiyan/p/11423267.html

版权

轮播图管理添加功能

后台轮播图管理的位置：

因此需在此处加一个路由的跳转：

在视图views中后台的index.html

<h2><span class="icon-user"></span>系统管理</h2>
  <ul >
    <li><a href="/admin/slider" target="right"><span class="icon-caret-right"></span>轮播图管理</a></li>
    
    <li><a href="/admin/system" target="right"><span class="icon-caret-right"></span>系统设置</a></li>
  </ul>

在后台路由中新建一个slider.js

在整个后台中进行对轮播图路由的注册：

//轮播图管理
let sliderRouter=require('./admin/slider');

router.use('/slider',sliderRouter);

在后台的视图views中新建文件夹slider,并加入：

需要实现轮播图的添加功能，在slider.js中写入添加的页面，以及处理添加的功能，看是否获取到数据：

slider.js:

let express = require("express");

let router = new express.Router();

const path = require('path');

//设置文件上传
const multer=require("multer");




//设置上传的图片的临时存储位置


const upload = multer({dest:"tmp/"});
console.log(upload);


//导入fs模块
const fs=require("fs");

// 导入mysql模块

const mysql = require("../../config/db.js");




//添加页
router.get("/add",function(req,res,next){
    res.render("admin/slider/add.html");
    
    
});

//处理添加的功能,看是否获取到了数据
router.post("/add",upload.single("img"),function(req,res,next){
    //获取表单数据
    //console.log(req.body);
    //获取文件的相关数据
    console.log(req.file);
    
    let {name,url,sort}=req.body;
//接收文件相关的数据
let imgRes=req.file;
     console.log(req.file);
     //可以获取文件的临时目录
     let tmpPath=imgRes.path;
     //文件上传的执行目录
     
      //获取图片后缀名
       let ext=path.extname(imgRes.originalname);
       
       console.log(ext);
     //获取时间撮（随机数+时间撮）
     let newName=""+(new Date().getTime())+Math.round(Math.random()*10000);
     let newPath="/upload/slider"+newName;
     console.log(tmpPath);
     console.log(newPath);
     
     //进行文件的拷贝
     let fileData=fs.readFileSync(tmpPath);
     
     fs.writeFileSync(__dirname+"/../../"+newPath,fileData);
     
     // 将数据插入到数据库中
    mysql.query("insert into banner(name,url,sort,img) value(?,?,?,?)",[name,url,sort,newPath],function(err,data){
        if (err) {
            return "";
        }else{
            if (data.affectedRows==1) {
                
                //添加成功需要跳转到显示页面
                res.send("<script>alert('添加成功');location.href='/admin/slider'</script>");

            }else{
                res.send("<script>alert('添加失败');history.go(-1)</script>");
            }

        }
    })


     

})

module.exports=router;

add.html

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 7 <meta name="renderer" content="webkit">
 8 <title></title>
 9 <link rel="stylesheet"   href="../../../public/admin/css/pintuer.css">
10 <link rel="stylesheet" href="../../../public/admin/css/admin.css">
11 <script src="../../../public/admin/js/jquery.js"></script>
12 <script src="../../../public/admin/js/pintuer.js"></script>
13 </head>
14 <body>
15 <div class="panel admin-panel">
16   <div class="panel-head"><strong><span class="icon-key"></span> 添加轮播图</strong></div>
17   <div class="body-content">
18     <form method="post" enctype="multipart/form-data" class="form-x"  action="">
19     
20       <div class="form-group">
21         <div class="label">
22           <label for="sitename">轮播图名称：</label>
23         </div>
24         <div class="field">
25           <input type="text" class="input " id="mpass" name="name" size="50" placeholder="请输入轮播图名称" data-validate="required:请输入轮播图名" />       
26         </div>
27       </div>      
28       <div class="form-group">
29         <div class="label">
30           <label for="sitename">轮播图跳转地址：</label>
31         </div>
32         <div class="field">
33           <input type="text" class="input " name="url"  placeholder="请输入轮播图跳转地址" data-validate="required:请输入轮播图跳转地址" />         
34         </div>
35       </div>
36        <div class="form-group">
37         <div class="label">
38           <label for="sitename">轮播图排序：</label>
39         </div>
40         <div class="field">
41           <input type="number" class="number " name="sort" size="50

最低0.47元/天解锁文章

weixin_30569033

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
NodeJS Express博客项目实战之轮播图管理

轮播图管理添加功能后台轮播图管理的位置：因此需在此处加一个路由的跳转：在视图views中后台的index.html<h2><span class="icon-user"></span>系统管理</h2> <ul > <li><a href="/admin/slid...
复制链接

扫一扫