目录
第一步：登录云服务器
查看根目录
运行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">×</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">×</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>
289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
