专栏首页小康的自留地五、express实战-英雄管理系统

五、express实战-英雄管理系统

后端路由

简单来说,注册路由就是写接口

登录接口

登录接口实现很简单,只需要接收post传来的参数,然后进行验证即可。

const express = require("express");
const bodyParser = require("body-parser");

app.use(bodyParser.urlencoded({ extended: false }));
// 登录接口
app.post("/login", (req, res) => {
  // 接收用户传递过来的用户名和密码
  let { username, password } = req.body;
  if (username == "admin" && password == "123") {
    res.send({
      code: 200,
      msg: "登陆成功",
    });
  } else {
    res.send({
      code: 400,
      msg: "登陆失败",
    });
  }
});
app.listen(3000, () => {
  console.log("开启成功");
});

获取所有英雄接口

获取所有英雄接口需要调用工具的方法。

const path = require("path");
// 导入自己写的模块(需要拼接绝对路径)
const db = require(path.join(__dirname, "utils", "db.js"));
// 获取所有英雄接口
app.get("/getAllHero", (req, res) => {
  // 调用自己写的db.js模块中的方法,获取所有英雄
  let list = db.getHeros();
  res.send({
    code: 200,
    data: list,
  });
});

根据ID获取英雄

app.get("/getHeroById", (req, res) => {
    let { id } = req.query;
    let result = db.getHeroById(id);
    if (result != false) {
        res.send({
            code: 200,
            msg: "获取成功",
            data: result,
        });
    } else {
        res.send({
            code: 400,
            msg: "获取失败",
        });
    }
});

前端页面–登录

登录页面使用Ajax向后端发送请求即可。

$(function () {
    $('.login').on('click', function (e) {
        e.preventDefault()
        let username = $('#username').val().trim()
        let password = $('#password').val().trim()
        $.ajax({
            type: 'post',
            url: 'http://127.0.0.1:3000/login',
            data: {
                username,
                password
            },
            success: function (backData) {
                if (backData.code == 200) {
                    alert('登录成功')
                    window.location.href = 'index.html'
                } else {
                    alert(backData.msg)
                }
            }
        })
    })
}
 )

前端页面–显示数据

当页面一加载,首先应自动发送请求获取全部的英雄数据。然后通过模板引擎渲染。

$(function () {
    $.ajax({
        type: 'get',
        url: 'http://127.0.0.1:3000/getAllHero',
        success: function (res) {
            console.log(res)
            // var temp = template('cq', res);
            // $('tbody').html(temp)
            if (res.code == 200) {
                // 通过模板引擎渲染
                var resHtml = template('cq', res)
                console.log(resHtml)
                $('tbody').html(resHtml)
            }
        }
    })
})
// 模板引擎
<script type="text/html" id="cq">
  {{each data v}}
  <tr>
    <td><img src="{{v.icon}}"></td>
    <td>{{v.name}}</td>
    <td>{{v.skill}}</td>
    <td>
      <button onclick="location.href='./edit.html?id={{v.id}}'" class="btn btn-primary">编辑</button>
      <button  data-id='{{v.id}}' class="btn btn-danger delete">删除</button>
    </td>
    </tr>
  {{/each}}
</script>

由于我们的上传目录(uploads)没有暴露,因此外部不可以访问到,需要将此目录暴露出去,这样就能解决图片无法加载的问题。

删除数据

$('tbody').on('click', '.delete', function () {
    var that = this;
    // console.log(this)
    var id = $(this).attr('data-id').trim();
    if (confirm('你要删除吗??')) {
        $.ajax({
            type: 'get',
            url: 'http://127.0.0.1:3000/delete',
            data: {
                id: id
            },
            success: function (res) {
                // console.log(res)
                if (res.code == 200) {
                    $(that).parent().parent().remove();
                }
            }
        })
    }
})

修改数据

$(function () {
  var id = window.location.search.split('=')[1];
  console.log(id)
  $.ajax({
    type: 'get',
    url: 'http://127.0.0.1:3000/getHeroById',
    data: {
      id: id
    },
    success: function (res) {
      // console.log(res)
      if (res.code == 200) {
        $('#heroName').val(res.data.name)

        $('#skillName').val(res.data.skill);
        $('.preview').attr('src', res.data.icon);
        $('#id').val(id)
      }
    }
  })

  $('#heroIcon').on('change', function () {
    // console.log()
    var fileName = URL.createObjectURL(this.files[0]);
    $('.preview').attr('src', fileName)
  })

  //保存数据
  $('.btn-save').on('click', function (e) {
    e.preventDefault();
    var formData = new FormData($('form')[0]);
    $.ajax({
      type: 'post',
      url: 'http://127.0.0.1:3000/edit',
      data: formData,
      contentType: false,
      processData: false,
      success: function (res) {
        //   console.log(res)

        if (res.code == 200) {
          alert(res.msg);
          window.location.href = './index.html';

        } else {
          alert(res.msg)
        }
      }
    })
  })
})

服务器重定向

// 如果找不到页面
app.use((req, res) => {
  // 服务器重定向:主动修改地址栏
  res.writeHead(302, {
    Location: "http://www.baidu.com",
  });
  res.end();
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTTP各种特性总览

    将其中的*设置为某个域名,那么则标识只允许某个域名可以访问。但是只能一个域名,如果需要多个域名需要增加服务器逻辑进行判断。

    Dreamy.TZK
  • 九、英雄管理(cqmanager)系统

    由于多个页面都是需要判断用户是否登陆,因此需要单独写一个接口,用于判断用户有没有登陆。

    Dreamy.TZK
  • Hexo博客推荐安装的插件

    地址:https://github.com/huiwang/hexo-baidu-url-submit

    Dreamy.TZK
  • Express4.x API (三):Response (译)

    Express4.x API 译文 系列文章 技术库更迭较快,很难使译文和官方的API保持同步,更何况更多的大神看英文和中文一样的流畅,不会花时间去翻译--,所...

    okaychen
  • nodejs的hello world的详解

    前面几篇介绍过nodejs的第一个项目!这篇系统的介绍一下第一个nodejs项目

    十月梦想
  • 数据结构之动态规划问题

    数据结构中动态规划应该算得上是你避不开的一道槛了吧!其重要性不言而喻,今天就整理下学习笔记分享出来。希望对读者朋友也能有帮助,文章基本框架如下:

    小小詹同学
  • 小程序体验版 新用户登录不了

    console.log(wx.getStorageSync("userInfo").id )

    用户6663311
  • python数据类型强制转换实例详解

    砸漏
  • Array - 54. Spiral Matrix

    Given a matrix of m x n elements (m rows, n columns), return all elements of the...

    用户5705150
  • 算法-leetcode007-整数反转

    当所计算数字大于2^30 次方或等于2^31 次方但余下的数大于7或小于-2^30 次方或等于-2^31 次方但余下的数小于-8时,只要再计算一次就溢出。

    潇洒

扫码关注云+社区

领取腾讯云代金券