如何用Node.js写后台

由于毕业项目需要前后端都有,前端做了个大概,思路设计的基本清晰,所以后台开始准备着手做了~

前期工作

    刚开始自己打算把后台文件直接放到前端项目文件中,考虑到后台配置问题、前后端分离,所以把后台放到一个独立的项目文件中,这样方便管理和修改~

步骤:

提前安装好nodejs

  1. 首先选择创建项目的地址,如果在某个文件夹中创建,则在其文件夹中cmd,然后输入express -t ejs 项目名称 。创建好项目后,结构就会是这样
    然后再npm install
  2. routes文件夹中文件中就是咱们要写的接口,这两个文件用来写接口远远不够的,所以以users.js中的内容来新建js文件(每个js文件负责不同模块的接口,这样便于区分修改)
    route文件夹中文件
    users.js文件内容如下:
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

router的get/post方法就是咱们写的一个个接口,测试过程直接省略…
我直接拿node.js连接mysql数据库举例

  1. 数据库已经建好,我用SQLyog应用来给大家展示新建的数据库,如图
    "campus-social"数据库
    users.js文件修改后的代码
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var connection = mysql.createConnection({     
  host     : 'localhost',       
  user     : 'root',              
  password : '19980605',       
  port: '3306',                   
  database: 'campus-social' 
}); 
 
connection.connect();

var param="bbbbbbb"; 

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.json({
    status:"0",
    msg:param
  });
  res.send('respond with a resource');
});

//查询学校列表
router.get('/school', function(req, res, next) {
  connection.query("select * from school",function (err, result) {
    if(err){
      // res.send(err.message);
      res.json({
        status:"1",
        msg:err.message
      });
      return;
    }else{
      // res.send(result);
      res.json({
        status:"0",
        msg:result
      });
    }
  });
  // connection.end();
  // res.send('respond with a resource');
});

module.exports = router;

输入node ./www/bin
咱们去http://localhost:3000测试一下,这是主页面
在这里插入图片描述
那如何去想要测试的接口测试呢?
正常情况下地址是这样的:http://localhost:3000/js文件名/接口名,
要想修改或新建js接口文件,请去app.js文件中修改或新增,修改位置如下:
我要测试users.js中的school接口(查询学校列表接口),结果显示为在这里插入图片描述
测试成功!

  1. 接下来我们就要与前端联调,打开我们的前端项目,目录大致为这样,在这里插入图片描述
    根目录下有一个config文件夹,文件夹中有一个index.js,代码proxyTable中添加后台中上方所提到的app.use中起的名字,例:
    在这里插入图片描述
  2. 在vue文件中用axios来调用接口在这里插入图片描述
    注意,前后端联调时,运行前端项目时,别忘了运行后台,node ./www/bin,才能访问到接口;还有正常后台向前端传报文时,报文一般格式是:{status:状态码,msg:内容},这样方便快速定位错误。
    在公司实习期间,遇到状态码为500时,好像是服务器后台的问题,但是前端出现问题也可能造成500报错,所以,在和其他人配合时,先确定是否自己前端这边的问题。
    看一下前端接口数据显示,如图
    在这里插入图片描述
    界面上用到该接口的地方,如图
    在这里插入图片描述
    写接口时,有可能会遇到问题,请见上一篇
  • 8
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

仙人掌上的刺猬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值