(云服务器+JQuery+JS+BootStrap+Navicat+AJAX+JavaScript)第一个前端小项目【面试】

122 篇文章 11 订阅
5 篇文章 0 订阅

目录

第一步:登录云服务器

        查看根目录​

        运行jar包

        端口被占用

        ps -ef:查看使用的端口号

        kill -9 端口号:杀掉该进程,取消端口占用

1、配置数据库

2、启动jar包

3、测试swagger接口

        配置数据库navicat

        小黄鸭:连接云服务器的可视化工具

 Swagger部署

        拿到token密钥

        token验证连接数据库: ​

 项目页面制作初步分析

前端组件库bootstrap的使用

 FontAwesome图标库的使用

代码实现 


第一步:登录云服务器

查看根目录

运行jar包

端口被占用

 

ps -ef:查看使用的端口号

kill -9 端口号:杀掉该进程,取消端口占用

 

1、配置数据库

  1)创建本地localhost数据库
  2)在数据库连接中新建数据库
      数据库名称:info(后台给的数据库名字就是什么名字,不能随意起名)
      字符编码:utf8 -- UTF-8 Unicode
  3)为新建info数据库导入sql文件
  4)刷新数据库
  5)新建用户后台给的数据库连接的用户名和密码)
      用户名:briup
      密码: briup
      主机号: %
  6)将该用户授权给新建的info数据库
    选中briup用户 -> 单击添加权限 -> 勾选briup -> 将右边所有权限都勾选 -> 单击确定 -> 单击右下角保存按钮


2、启动jar包

1)在文件夹中找到cms.....jar文件,在当前文件夹的目录中输入cmd,在终端中打开当前目录
  2)java -jar cms-0.0.1-SNAPSHOT.jar & 


3、测试swagger接口

  1)打开浏览器输入 localhost:7788/swagger-ui.html
  2)找到登录相关接口 -> /user/login -> 输入框中输入用户名密码 
    {
      "password": "123321",
      "username": "admin1"
    }
  3)点击 try it out ,后台返回200状态码,拿到data中的token
  4)复制拿到的token秘钥,找到页面最上面的 Authorize -> 单击,把拿到的token复制进去
  5)测试其他非登录接口

配置数据库navicat

 

 

 

小黄鸭:连接云服务器的可视化工具

 Swagger部署

拿到token密钥

token验证连接数据库: 

 

 

 项目页面制作初步分析

 

 

前端组件库bootstrap的使用

 

 FontAwesome图标库的使用

 

 

 

 

 

 

 

效果展示

分类代码实现 

<div class="category">
  <!-- 栏目管理 -->
  <!-- 看点资讯 阅读app的后台管理系统 - 栏目(文章)栏目下是一个个的文章 -->

  <!-- 按钮区域 -->
  <div class="btns">
    <button type="button" class="btn btn-outline-info toAdd">新增</button>
  </div>
  <!-- /按钮区域 -->
  <!-- 表格区 -->
  <div class="tables">
    <table class="table">
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>排序号</th>
          <th>描述</th>
          <th>父栏目</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <!-- /表格区 -->
  <!-- 分页 -->
  <div class="page"></div>
  <!-- /分页 -->
  <!-- 模态框 -->
  <div
    class="modal fade"
    id="exampleModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">新增栏目</h5>
          <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button> -->
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group1">
              <label for="recipient-name" class="col-form-label"
                >栏目名称:</label
              >
              <input
                type="text"
                class="form-control"
                id="recipient-name"
                name="categoryName"
              />
            </div>
            <div class="form-group2">
              <label for="recipient-name" class="col-form-label">排序号:</label>
              <input
                type="text"
                class="form-control"
                id="recipient-name"
                name="categoryNo"
              />
            </div>
            <div class="form-group3">
              <label for="message-text" class="col-form-label">栏目描述:</label>
              <textarea
                class="form-control"
                id="message-text"
                name="categoryDes"
              ></textarea>
            </div>
            <div class="form-group4">
              <label for="recipient-name" class="col-form-label">父栏目:</label>
              <input
                type="text"
                class="form-control"
                id="recipient-name"
                name="categoryParentId"
              />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            取消
          </button>
          <button type="button" class="btn btn-primary submit">提交</button>
        </div>
      </div>
    </div>
  </div>
  <!-- /模态框 -->
</div>
<style>
  .category > .tables {
    margin: 1em 0.5em;
  }
  .category > .tables .fa-pencil {
    color: #2cb5ac;
    margin-right: 1em;
  }
  .category > .tables .fa-trash {
    color: red;
  }
</style>
<script>
  //fidAll栏目数据
  $(function () {
    var user = null;
    //加载all
    function load() {
      myAjax.get(
        "/category/findAll",
        (res) => {
          //成功查到数据之后先清空表单,防止数据重复追加
          $(".tables tbody").empty();
          console.log("查询栏目数据成功", res.data);
          //遍历rea.data数组追加到tbody中
          res.data.forEach((item, index) => {
            //动态追加节点,循环几次追加几次
            //?????????  描述
            var newTr = $(`
            <tr>
              <td>${index + 1}</td>
              <td>${item.name}</td>
              <td>${item.no}</td>
              <td>${item.description}</td>
              <td>${item.parentId}</td>
              <td>
                <i class="fa fa-pencil" data-item='${JSON.stringify(item)}'></i>
                <i class="fa fa-trash" data-id=${item.id}></i>
              </td>
            </tr>`);
            //追加节点
            $(".tables tbody").append(newTr);
          });
        },
        (err) => {
          console.log("失败", err);
        }
      );
    }
    load();

    //新增 点击弹出模态框-用户输入新增数据-取消:关闭模态框 确定:提交数据
    $(".toAdd").click(function () {
      $('input[name="categoryName"]').val("");
      $('input[name="categoryNo"]').val("");
      $('textarea[name="categoryDes"]').val("");
      $('input[name="categoryParentId"]').val("");
      $("#exampleModal").modal("show");
    });

    //点击模态框提交 对接新增接口  saveOrUpdate
    //新增/修改  有id 修改/无id 新增
    $(".submit").click(function () {
      //给后台传输的数据
      var obj = {
        id: user ? user.id : null,
        name: $(".modal-body .form-group1 input").val(),
        no: $(".modal-body .form-group2 input").val(),
        description: $(".modal-body .form-group3 textarea").val(),
        parentId: $(".modal-body .form-group4 input").val(),
      };
      console.log(obj, "栏目新增/修改给后台传的obj");
      //对接口
      myAjax.postForm(
        "/category/saveOrUpdate",
        obj,
        (res) => {
          console.log("栏目新增/修改成功", res);
          //模态框关闭
          $("#exampleModal").modal("hide");

          //刷新界面数据
          load();
        },
        (err) => {
          console.log("栏目新增/修改失败", err);
        }
      );
    });

    //单个删除  事件代理
    $(".tables tbody").on("click", ".fa-trash", function () {
      var id = $(this).attr("data-id");
      // console.log(id);
      if (confirm("是否确认删除?")) {
        myAjax.delete(
          "/category/deleteById",
          id,
          (res) => {
            console.log("删除成功", res);
            load();
          },
          (err) => {
            console.log("删除失败", err);
          }
        );
      } else {
        alert("取消操作!");
      }
    });

    //单个编辑
    $(".tables tbody").on("click", ".fa-pencil", function () {
      // console.log(this);
      user = $(this).attr("data-item"); //这儿拿到当前行数据
      user = JSON.parse(user);
      console.log("编辑-栏目的当前行数据", user);
      //先将当前行数据user  给到模态框对应字段里
      //模态框的栏目名称框以及栏目描述框  设置值-val里给东西
      $('input[name="categoryName"]').val(user.name);
      $('input[name="categoryNo"]').val(user.no);
      $('textarea[name="categoryDes"]').val(user.description);
      $('input[name="categoryParentId"]').val(user.parentId);
      //让模态框显示
      $("#exampleModal").modal("show");
    });
  });
</script>

用户分页代码实现

<div class="user">
  <!-- 用户管理 -->

  <!-- 按钮区域 -->
  <div class="btns">
    <button type="button" class="btn btn-outline-info toAdd">新增用户</button>
  </div>
  <!-- /按钮区域 -->
  <!-- 表格 -->
  <div class="tables">
    <table class="table">
      <thead>
        <tr>
          <th>序号</th>
          <th>用户名</th>
          <th>真实名</th>
          <th>性别</th>
          <th>手机号</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>序号</td>
          <td>用户名</td> 
          <td>真实名</td>
          <td>性别</td>
          <td>手机号</td>
          <td>状态</td>
        </tr> -->
      </tbody>
    </table>
  </div>
  <!--/ 表格 -->
  <!-- 分页 -->
  <div class="page">
    <nav aria-label="Page navigation example">
      <ul class="pagination"></ul>
    </nav>
  </div>
  <!-- /分页 -->

  <!-- 模态框 -->
  <div
    class="modal fade"
    id="exampleModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">新增栏目</h5>
          <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button> -->
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group1">
              <label for="recipient-name" class="col-form-label"
                >用户名称:</label
              >
              <input
                type="text"
                class="form-control"
                id="recipient-name"
                name="categoryName"
              />
            </div>
            <div class="form-group2">
              <label for="recipient-name" class="col-form-label">真实名:</label>
              <input
                type="text"
                class="form-control"
                id="recipient-name"
                name="categoryRealName"
              />
            </div>
            <div class="form-group3">
              <label for="recipient-name" class="col-form-label">性别:</label>
              <input
                type="text"
                class="form-control"
                id="recipient-name"
                name="categoryGender"
              />
            </div>
            <div class="form-group4">
              <label for="recipient-name" class="col-form-label">手机号:</label>
              <input
                type="text"
                class="form-control"
                id="recipient-name"
                name="categoryTelePhone"
              />
            </div>
            <div class="form-group5">
              <label for="recipient-name" class="col-form-label">状态:</label>
              <input
                type="text"
                class="form-control"
                id="recipient-name"
                name="categoryStatus"
              />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            取消
          </button>
          <button type="button" class="btn btn-primary submit">提交</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 模态框 -->
</div>
<style>
  .user > .tables {
    margin: 1em 0.5em;
  }
  .page {
    float: right;
    margin-right: 3em;
  }
  .user > .tables .fa-pencil {
    color: #2cb5ac;
    margin-right: 1em;
  }
  .user > .tables .fa-trash {
    color: red;
  }
</style>
<script>
  //用户管理栏目数据
  $(function () {
    //分页查询数据
    //可以查询任意自己想要的条数90k,  灵活查询  不同于findAll-所有数据
    //1.分页接口传递的参数
    var params = {
      page: 1, //第几页
      pageSize: 10, //一页几条
    };
    //5.对接分页需要的数据进行全局封装
    var pages = {
      length: null, //页码从1开始,所以有三页,length就是3
      total: null,
    };
    //2.对分页接口
    //形式参数与实际参数一一对应,所以这边load必须给形参
    function load(payload) {
      myAjax.getData(
        "/baseUser/pageQuery",
        payload,
        (res) => {
          console.log("分页查询成功", res.data);
          //4.处理返回数据:当前页码1、每页条数10、数据总长度40、拿到10(page*pageSize)条数据
          //计算:
          //需要数据 :page pageSize total
          //多少页 = 总条数total/每页要传递的长度
          //length = total/params.pageSize  数据总数
          pages.total = res.data.total;
          //向上取整 4.1->5  几页
          pages.length = Math.ceil(pages.total / params.pageSize);

          //分页组件的渲染,传递实际参数pages
          setPage(pages);
          $(".tables tbody").empty();

          //5.表格数据遍历
          res.data.list.forEach((item, index) => {
            $(`<tr>
            <td>${index + 1}</td>
            <td>${item.username}</td>
            <td>${item.realname}</td>
            <td>${item.gender}</td>
            <td>${item.telephone}</td>
            <td>${item.status}</td>
            <td>
              <i class="fa fa-pencil" data-item='${JSON.stringify(item)}'></i>
              <i class="fa fa-trash" data-id=${item.id}></i>
            </td>
          </tr>`).appendTo(".tables tbody");
          });
        },
        (err) => {
          console.log("分页查询失败", err);
        }
      );
    }

    //点击分页,加载页面变化,以及数据对应加载
    //根据返回数据判断分页组件的显示形式,如果说只有一页的话,不追加分页节点,否则,追加分页
    function setPage(payload) {
      //1.判断只有一页的时候,不显示分页组件
      if (payload.length === 1) {
        $("ul.pagination").addClass("display", "none");
      } else {
        // 先让这个分页节点消失,再分情况给追加
        $("ul.pagination").empty(); //清空
        //追加分页组件
        //1. 追加前一页 <
        $("ul.pagination").append(
          `<li class="page-item"><a class="page-link" href="#">上一页</a></li>`
        );
        //2. 追加中间页码  几页pages.length
        for (var i = 1; i <= payload.length; i++) {
          $("ul.pagination").append(
            `<li class="page-item"><a class="page-link" href="#">${i}</a></li>`
          );
        }
        //3. 追加最后一页 >
        $("ul.pagination").append(
          `<li class="page-item"><a class="page-link" href="#">下一页</a></li>`
        );
      }
    }

    $(function () {
      //3.执行分页查询
      load(params);

      //进行页面监听事件
      //绑定页码点击事件,监听点击
      $(".page ul.pagination").on("click", "li", function () {
        console.log(this);
        // 分情况判断,看点击的li里面的文字是前一页还是后一页还是中间页码

        if ($(this).text() === "上一页") {
          /** 点击前一页
          排除page是1的情况 如果不是1  params.page = (params.page -1)
          如果是1  保持当前页码不动 **/
          params.page = params.page !== 1 ? params.page - 1 : 1;
          //page变化了,刷新页面
          load(params);
        } else if ($(this).text() === "下一页") {
          /**点击下一页
           排除page是最后一页的情,pages.length,除此之外,page+1
           **/
          params.page =
            params.page !== pages.length ? params.page + 1 : pages.length;
          load(params);
        } else {
          //点击中间页码,点击几跳到几页
          params.page = Number($(this).text());
          load(params);
        }
      });
    });

    //新增 点击弹出模态框-用户输入新增数据-取消:关闭模态框 确定:提交数据
    $(".toAdd").click(function () {
      $('input[name="categoryName"]').val("");
      $('input[name="categoryRealName"]').val("");
      $('input[name="categoryGender"]').val("");
      $('input[name="categoryTelePhone"]').val("");
      $('input[name="categoryStatus"]').val("");
      $("#exampleModal").modal("show");
    });

    //点击模态框提交 对接新增接口  saveOrUpdate
    //新增/修改  有id 修改/无id 新增
    $(".submit").click(function () {
      //给后台传输的数据
      var obj = {
        // id: user ? user.id : null,
        username: $(".modal-body .form-group1 input").val(),
        realname: $(".modal-body .form-group2 input").val(),
        gender: $(".modal-body .form-group3 input").val(),
        telephone: $(".modal-body .form-group4 input").val(),
        status: $(".modal-body .form-group5 input").val(),
      };
      console.log(obj, "栏目新增/修改给后台传的obj");
      //对接口
      myAjax.postForm(
        "/baseUser/saveOrUpdate",
        obj,
        (res) => {
          console.log("栏目新增/修改成功", res);
          //模态框关闭
          $("#exampleModal").modal("hide");

          //刷新界面数据
          load(params);
        },
        (err) => {
          console.log("栏目新增/修改失败", err);
        }
      );
    });

    //单个删除  事件代理
    $(".tables tbody").on("click", ".fa-trash", function () {
      var id = $(this).attr("data-id");
      // console.log(id);
      if (confirm("是否确认删除?")) {
        myAjax.delete(
          "/baseUser/deleteById",
          id,
          (res) => {
            console.log("删除成功", res);
            load(params);
          },
          (err) => {
            console.log("删除失败", err);
          }
        );
      } else {
        alert("取消操作!");
      }
    });

    //单个编辑
    $(".tables tbody").on("click", ".fa-pencil", function () {
      // console.log(this);
      user = $(this).attr("data-item"); //这儿拿到当前行数据
      user = JSON.parse(user);
      console.log("编辑-栏目的当前行数据", user);
      //先将当前行数据user  给到模态框对应字段里
      //模态框的栏目名称框以及栏目描述框  设置值-val里给东西
      $('input[name="categoryName"]').val(user.username);
      $('input[name="categoryRealName"]').val(user.realname);
      $('input[name="categoryGender"]').val(user.gender);
      $('input[name="categoryPhone"]').val(user.telephone);
      $('input[name="categoryStatus"]').val(user.status);
      //让模态框显示
      $("#exampleModal").modal("show");
    });
  });
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值