前言

自己学了前端好久了，但是一直也没有是实战过项目，于是我从b站上面找到了一个up主的视频前端用的是vue+element+vchar,后端是用的node+mysql+express，所以我就想尝试一下，跟着视频，看着源码写一下这个项目，也算是给自己的前端撒花了！ 好了，我说了一堆废话，以上部分可以忽略了

Day1

1.新建文件夹Node_server,初始化一个package.json文件

npm init

2.安装一些需要用到的包

package.json

  "devDependencies": {
    "body-parser": "^1.20.0",
    "cookie-parser": "^1.4.6",
    "debug": "^4.3.4",
    "express": "^4.17.3",
    "express-session": "^1.17.2",
    "formidable": "^2.0.1",
    "http-errors": "^2.0.0",
    "jsonwebtoken": "^8.5.1",
    "morgan": "^1.10.0",
    "multer": "^1.4.4",
    "mysql": "^2.18.1",
    "node-xlsx": "^0.21.0",
    "nodemailer": "^6.7.3",
    "pug": "^3.0.2",
    "redis": "^4.0.6",
    "serve-favicon": "^2.5.0",
    "socket.io": "^4.4.1",
    "svg-captcha": "^1.4.0",
    "weapp.socket.io": "^3.0.0"
  },
  "dependencies": {
    "nodemon": "^2.0.15"
  }
}

如果有需要的话，可以安装一个热更新,不用每次手动更新了 npm i nodemon

3.测试接口

在app.js主路由中引入一级路由./routes/user.js 然后启动node服务 npm start

这里要注意，npm start不是空穴来风，需要你在package.json里面的scripts里面配置 package.json

{
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon ./bin/www "
  },

./bin/www是在项目的根目录下创建一个bin文件夹 ./bin/www.js 里面的代码可以参考这个


/**
 * Module dependencies.
 */

var app = require("../app");
var debug = require("debug")("node-blog:server");
var http = require("http");

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || "3000");
app.set("port", port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on("error", onError);
server.on("listening", onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== "listen") {
    throw error;
  }

  var bind = typeof port === "string" ? "Pipe " + port : "Port " + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case "EACCES":
      console.error(bind + " requires elevated privileges");
      process.exit(1);
      break;
    case "EADDRINUSE":
      console.error(bind + " is already in use");
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

var fs = require("fs");
function getPackageJson() {
  // console.log('----------------------1.开始读取package.json')
  var _packageJson = fs.readFileSync("./package.json");
  // console.log('----------------------读取package.json文件完毕')
  return JSON.parse(_packageJson);
}
function onListening() {
  var addr = server.address();
  var bind = typeof addr === "string" ? "pipe " + addr : "port " + addr.port;
  console.log(`
 #    _____                     .___
 #  _/ ____\\  ____    ____    __| _/  ____
 #  \\   __\\  /    \\  /  _ \\  / __ | _/ __ \\
 #   |  |   |   |  \\(  <_> )/ /_/ | \\  ___/
 #   |__|   |___|  / \\____/ \\____ |  \\___  >
 #               \\/              \\/      \\/
 =============================================
 fnode :: (v0.0.1RELEASE)
         `);
  console.log(`[SYSTERM]${getPackageJson().name}应用启动中...`);
  console.log(`[SYSTERM]应用部署在${bind}`);
}

最后在地址栏中测试/user这个接口 http://localhost:3000/user 可以访问到数据,说明接口启动成功！

4.新建两个文件夹 ./dao 和 ./model

./model 对于数据库的操作新建 model.js,连接数据库操作，同时对数据库做最基本的查询还有数据格式的转化 model.js

//连接数据库
//从数据库往外面写
const mysql = require("mysql");
const pool = mysql.createPool({
  host: "localhost",
  user: "Guo",
  password: "123456",
  port: "3036",
  database: "vue_store",
});
/**
 * 封装一个数据库模型基类
 */
module.exports = class Model {
  /**
   * 通用的查询方法
   * sql要执行的语句
   * params给sql语句的占位符进行赋值的参数数组
   */
  static query(sql, params) {
    return new Promise(function (resolve, reject) {
      //连接
      pool.getConnection(function (err, connection) {
        if (err) {
          console.error(err);
          //连接释放
          connection.release();
        } else {
          //连接成成功，但是也有可能error,不是说连接成功就可以获取到数据
          //query执行sql语句
          connection.query(sql, params, (err, result) => {
            if (err) {
              console.error(err);
              reject(err);
            } else {
              resolve(result);
            }
            //结束会话，释放连接
            connection.release();
          });
        }
      });
    });
  }
  static formatParams() {
    let array = [];
    for (let i = 0; i < arguments.length; i++) {
      array.push(arguments[i]);
    }
    return array;
  }
};

users_mod.js从数据库中取出登录存在的用户信息 username password type

module.exports = class users_mod extends require('./model') {
  static LoginUser(username, password, type) {
    type = Number(type);
    return new Promise((resolve, reject) => {
      //用字符串拼接的方式，拼接处sql语句
      //从数据库中拿数据
      let sql = 'select * from users where username' + username + 'and password' + password + "and type" + type;
      console.log(sql);
      this.query(sql).then(res => {
        resolve(res);
      }).catch(err => {
        reject('登录失败');
      })
    })
  }
}

./dao 对于数据的操作模型

总结

今天就学到这里了，今天主要是写的后端的内容，主要是接口调用还有对数据库数据的操作，很多内容就是copy UP主的,感觉对于node 调接口那里，理解的还可以，后面对数据库的操作，学起来就很吃力了，我也没怎么接触过后端，但这不是我退缩的理由，还是要继续加油啊！

Suggestion (2).gif

补充

昨天有人问到我为什么在终端中执行的是npm start 而不是npm run start?

npm run命令都是定义在package.json文件的scripts节点里面的

对于命令npm run ***，如果***是start字样，就可以省略run字样。这个是目前为止，唯一可以省略run字样的命令,可能有其他的，如果有的话请留言哦所以说下面这两句话是等同的，都可以执行 npm start

npm run start

今天也要努力搬砖.gif

有问题请继续留言哦，小白要不断改进和努力的!

校园系统Day1

前言