node 路由模块化、连接数据库(使得数据分页功能),以及配合前端element-ui分页组件,上传文件

index.js 主要的

var express = require('express');
// 使用express框架
var app = express()

// 跨域
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", '3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

// 引入模块
const list = require('./router/list')
//将路由对象与请求地址匹配
app.use("/list",list)


// 启动服务器监听端口
var server = app.listen(8080,'127.0.0.1',function(){
    var host = server.address().address
    var port = server.address().port
    console.log('端口为：http://%s:%s',host,port);
})

连接数据库 单独拿个文件出来

// 创建连接mysql数据库
var sql = require('mysql');
var con = sql.createConnection({
    host: 'localhost', // 主机
    user: 'root', //用户名
    password: '123456', //密码
    database: 'list', //数据库名
    port: '3306', //端口
    multipleStatements: true, // 可以同时执行多条语句
})
// 连接打开数据库
con.connect()
module.exports = con

单独的模块js 对应的是上面的list.js

var con = require('../mysql/index')
//user.js
const express = require("express")
//创建一个路由对象
const user = express.Router()

//创建二级路由
user.get("/list",(req,res)=>{
    if (req.method == "POST") {
        param = req.body;
    } else {
        param = req.query || req.params;
    }
    // 一页多少条数据 - 默认为10条
    const pageSize = param.pageSize || 10;
    const start = (param.page - 1) * pageSize;
    // 查询有多少条数据
    // 查出第几页
    // 这里在配置数据库的时候需要加 multipleStatements: true 从而可以做到查询多条语句
    const sql = `SELECT COUNT(*) FROM beautiful ORDER BY id DESC; SELECT * FROM beautiful limit ${pageSize} OFFSET ${start};`
    // 执行一条sql语句：查询表
    con.query(sql,async function(err,results){
        // 计算总页数
        var allCount = results[0][0]['COUNT(*)'];
        console.log(allCount);
        // 查出有多少页
        var allPage = parseInt(allCount) / 10;
        var pageStr = allPage.toString();
        // // 不能被整除
        if (pageStr.indexOf('.') > 0) {
          allPage = parseInt(pageStr.split('.')[0]) + 1;
        }
        var list = results[1];
        res.end(JSON.stringify(
            { 
                msg: '查询成功', 
                code: 200, 
                pages: allPage, 
                page: parseInt(param.page), 
                count: allCount, 
                data: list
            }
        ));
    })
})

module.exports = user

接下来是前端

<template>
  <div class="pa_co">
    <el-table
      :data="tableData"
      style="width: 100%;">
        <el-table-column
            prop="id"
            label="Id"
            show-overflow-tooltip
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            show-overflow-tooltip
            label="名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="img"
            label="图片"
            show-overflow-tooltip
            >
        </el-table-column>
    </el-table>
    <el-pagination
      @current-change="ModelPage"
      :current-page="queryPames.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryPames.count"
    >
    </el-pagination>
  </div>
</template>

<script>
// 自己封装的axios方法，请求接口的
import { allList } from '../api/List/list'
export default {
    data(){
        return{
            queryPames: {
                page: 1,
                count: 0
            },
            tableData: []
        }
    },
    created(){
        this.Model()
    },
    methods: {
        Model(){
            console.log(this.queryPames);
            allList(this.queryPames).then((res) => {
                console.log(res);
                if(res.code === 200){
                    this.tableData = res.data
                    this.queryPames.count = res.count
                }
            })
        },
        // 分页的点击事件
        ModelPage(value){
            this.queryPames.page = value
            this.Model()
        }
    }
}
</script>

<style>

</style>

上传文件并进行预览

upload.js

var express = require('express')
var router = express.Router()
var multer = require('multer')
const paths = require('path')
const fs = require('fs');

router.post('/image',multer({
    dest: 'upload' // 文件夹路径名字，如果不存在会自动创建 
    // single('file') 对应的是form中type="file" 中的name的名字 name="file"
}).single('file'),function(req, res, next){
    console.log(req.file.path);
    // 将路径拼接起来
    const newname= req.file.path + paths.parse(req.file.originalname).ext
    console.log(newname);
    fs.rename(req.file.path,newname,function(err){
        if(err){
            res.send('上传失败')
        }else{
            res.send({
                file : req.file,
                newname
            })
        }
    })
})

module.exports = router

页面

// http://localhost:8080/upload/image 是接口路径
<form action="http://localhost:8080/upload/image" method="POST" encType="multipart/form-data">
      <input type="file" name="file"/>
      <input type="submit" />
    </form>