Express+Vue+mysql实践

个人尝试的1个小的增删改查功能,请大家多多支持!

具体项目请参考 https://github.com/kaiqiangren/VueExpress

注:mysql版本为5.7

一、前言

Express是nodejs环境下的web后端框架,其优点如下:

1、非侵入式设计:不会对原生nodejs的模块进行破坏,原生nodejs能用的都可以在express中使用。

2、灵活、小巧

3、基于单线程事件回调机制,I/O无阻塞。

二、正文

1、项目搭建(所需npm包如下图)

Express+Vue+mysql实践_第1张图片

npm install express    //用于web后端服务器搭建及处理请求

npm install mysql     //用于操作mysql数据库

npm install body-parser   //用于解析前端的post请求

2、书写简单的服务

前提:需要在本地安装mysql数据库,具体安装方式可参考:百度经验

创建数据库连接池

Express+Vue+mysql实践_第2张图片

路由服务代码:

const express = require("express");
//定义路由级中间件
const router = express.Router();
//引入数据库连接池,防止数据库超过最大连接数
const query=require("./db/db");

/*
 * 增删改查服务路由
 * */
/*新增*/
router.use('/test/add', function (req, res) {
  let sql  ="INSERT INTO user_info (name,country,date,score) VALUES(?,?,?,?);";
  let sqlParams = [
    req.body.name,
    req.body.country,
    req.body.date,
    req.body.score
  ];
  query(sql,sqlParams,function (err,result) {
    if(err){
      res.json({
        ok:false,
        message:'创建失败!'
      })
    }else{
      res.json({
        ok:true,
        id:result.insertId,
        message:'创建成功!'
      })
    }
    res.end();
  })

});
/*删除*/
router.use('/test/delete', function (req, res) {
  let delSql = 'DELETE FROM user_info where id='+req.body.id;
  query(delSql,null, function(err, rows, fields) {
    if(err){
      res.json({
        ok:false,
        message:'删除失败!',
        error:err
      })
    }else{
      res.json({
        ok:true,
        message:'删除成功!'
      })
    }
    res.end();
  })
});
/*编辑*/
router.use('/test/edit', function (req, res) {
  let editSql = 'UPDATE user_info SET name=?,country=?,date=?,score=? WHERE id ='+req.body.id;
  let editSqlParams = [
    req.body.name,
    req.body.country,
    req.body.date,
    req.body.score
  ];
  query(editSql,editSqlParams,function (err,result) {
    if(err){
      res.json({
        ok:false,
        message:'修改失败!'
      })
    }else{
      res.json({
        ok:true,
        message:'修改成功!'
      })
    }
    res.end();
  })
});
/*查询*/
router.use('/test/query', function (req, res) {
  let pageNumber = req.body.pageNumber;
  let pageSize = req.body.pageSize;
  let start = (pageNumber-1)*pageSize;
  let end = pageNumber*pageSize;
  let sql = "SELECT * FROM user_info ORDER BY score DESC LIMIT "+start+","+end;
  let countSql = "SELECT COUNT(id) FROM user_info";
  const promise = new Promise(function(resolve, reject) {
    query(countSql,null,function (err, rows, fields) {
      resolve(rows);
    })
  }).then((count)=>{
    query(sql, function(err, rows, fields) {
      if(err){
        res.json({
          ok:false,
          message:'查询失败!',
          info:null
        })
      }else{
        res.json({
          ok:true,
          message:'查询成功!',
          info:rows,
          total:count[0]["COUNT(id)"]
        })
      }
      res.end();
    });
  })



});


/*将路由模块输出*/
module.exports = router;

关键步骤!将服务路由模块对外输出!,这与JAVA的public功能相似。

 

3、搭建nodejs服务器

Express+Vue+mysql实践_第3张图片

4、前端代码部分

跨域代理

Express+Vue+mysql实践_第4张图片

AJAX请求路径

Express+Vue+mysql实践_第5张图片

5、启动全栈调试

【1】确保本地mysq启动了

【2】cmd 命令进入项目 node app.js启动服务

【3】cmd命令进入项目 npm run dev 启动前端项目

【4】打开localhsot:8080访问前端项目

Express+Vue+mysql实践_第6张图片

你可能感兴趣的:(nodejs)