uni-app之联合SpringCloud的电商项目后台系统(前端)
由于前面项目文件太多,我上传到了GitHub上面,请自取:https://github.com/HB-java/j341-shop-admin.git
这个里面的项目是完成了一个查询所有轮播图分页且增删改查的功能,分页是rotationImg.html中的这一部分
对应的后端项目,没有搭建的可以参考:https://blog.csdn.net/qq_43222167/article/details/106729208
或者也可以在上面GitHub上面拉取下来
shop-dao项目
ImagesManageDao
package com.jbit.dao;
import com.jbit.entity.Images;
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface ImagesManageDao {
/**
* 根据类型查询出数量
* @param type
* @return
*/
public int selectCount(int type);
/**
* 查询指定行数据
*
* @param offset 查询起始位置
* @param limit 查询条数
* @param type 查询类型
* @return 对象列表
*/
List<Images> queryAllByLimit(@Param("offset") int offset, @Param("limit") int limit,@Param("type") int type);
}
ImagesManageDao.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jbit.dao.ImagesManageDao">
<!--根据type类型查询总数量-->
<select id="selectCount" resultType="Integer">
select count(id) from images where type=#{
type}
</select>
<!--查询指定行数据-->
<select id="queryAllByLimit" resultMap="ImagesMap">
select
id, src, background, type, url
from project.images
where type=#{
type}
limit #{
offset}, #{
limit}
</select>
<resultMap type="com.jbit.entity.Images" id="ImagesMap">
<result property="id" column="id" jdbcType="INTEGER"/>
<result property="src" column="src" jdbcType="VARCHAR"/>
<result property="background" column="background" jdbcType="VARCHAR"/>
<result property="type" column="type" jdbcType="INTEGER"/>
<result property="url" column="url" jdbcType="VARCHAR"/>
</resultMap>
</mapper>
shop-service项目
ImagesManageService
package com.jbit.service;
import com.jbit.dao.ImagesDao;
import com.jbit.entity.Images;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Service;
import java.util.List;
public interface ImagesManageService {
/**
* 根据类型查询出数量
* @param type
* @return
*/
public int selectCount(int type);
/**
* 查询指定行数据
*
* @param offset 查询起始位置
* @param limit 查询条数
* @return 对象列表
*/
List<Images> queryAllByLimit( int offset,int limit, int type);
}
ImagesManageServiceImpl
package com.jbit.service.impl;
import com.jbit.dao.ImagesManageDao;
import com.jbit.entity.Images;
import com.jbit.service.ImagesManageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service("imagesManageServiceImpl")
public class ImagesManageServiceImpl implements ImagesManageService {
@Autowired
private ImagesManageDao imagesManageDao;
@Override
public int selectCount(int type) {
return imagesManageDao.selectCount(type);
}
@Override
public List<Images> queryAllByLimit(int offset, int limit,int type) {
return imagesManageDao.queryAllByLimit(offset,limit,type);
}
}
shop-entity项目
增加一个count属性并生成get set方法
Dto
package com.jbit.entity;
/**
* 数据传输对象（后端输出对象）
* @param
* Created by hanlu on 2017/5/7.
*/
public class Dto<T> {
private String success; //判断系统是否出错做出相应的true或者false的返回，与业务无关，出现的各种异常
private int code;//该错误码为自定义，一般0表示无错
private String msg;//对应的提示信息
private T data;//具体返回数据内容(pojo、自定义VO、其他)
//分页的值的总数
private int count;
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
public String getSuccess() {
return success;
}
public void setSuccess(String success) {
this.success = success;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
shop-utils项目
增加一个returnPage方法
DtoUtil
package com.jbit.dto;
import com.jbit.entity.Dto;
/**
* 用于返回Dto的工具类
* Created by XX on 17-5-8.
*/
public class DtoUtil {
public static String success="true";
public static String fail="false";
public static int errorCode=0;
public static Dto returnPage(Object data,int count){
Dto dto=new Dto();
dto.setSuccess(success);
dto.setCode(errorCode);
dto.setData(data);
dto.setCount(count);
return dto;
}
/***
* 统一返回成功的DTO
*/
public static Dto returnSuccess(){
Dto dto=new Dto();
dto.setSuccess(success);
return dto;
}
/***
* 统一返回成功的DTO 带数据
*/
public static Dto returnSuccess(String message,Object data){
Dto dto=new Dto();
dto.setSuccess(success);
dto.setMsg(message);
dto.setCode(errorCode);
dto.setData(data);
return dto;
}
/***
* 统一返回成功的DTO 不带数据
*/
public static Dto returnSuccess(String message){
Dto dto=new Dto();
dto.setSuccess(success);
dto.setMsg(message);
dto.setCode(errorCode);
return dto;
}
/***
* 统一返回成功的DTO 带数据 没有消息
*/
public static Dto returnDataSuccess(Object data){
Dto dto=new Dto();
dto.setSuccess(success);
dto.setCode(errorCode);
dto.setData(data);
return dto;
}
public static Dto returnFail(String message,int errorCode){
Dto dto=new Dto();
dto.setSuccess(fail);
dto.setMsg(message);
dto.setCode(errorCode);
return dto;
}
}
shop-manage项目
ImagesManageController
package com.jbit.controller;
import com.jbit.dto.DtoUtil;
import com.jbit.entity.Dto;
import com.jbit.entity.Images;
import com.jbit.service.ImagesManageService;
import com.jbit.service.ImagesService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.awt.*;
import java.util.List;
@RestController
@RequestMapping("imagesManage")
@CrossOrigin(value = {
"*"})
public class ImagesManageController {
@Autowired
private ImagesManageService imagesManageService;
/**
* 查询所有的轮播图并进行分页
* @param type
* @param page
* @param limit
* @return
*/
@RequestMapping("list")
public Dto<Images> list(int type,int page,int limit){
return DtoUtil.returnPage(imagesManageService.queryAllByLimit((page-1)*limit,limit,0),
imagesManageService.selectCount(0));
}
}
启动项目后并且访问
添加轮播图功能(这里暂时先不做真实的图片上传,只是先写出一个将数据添加到数据库的处理),新建一个页面rotationImg-add.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
<link rel="stylesheet" href="../css/public.css" media="all">
<style>
body {
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="layui-form layuimini-form">
<div class="layui-form-item">
<label class="layui-form-label required">路径</label>
<div class="layui-input-block">
<input type="text" name="src" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入用户名" value="" class="layui-input">
<tip>图片路径</tip>
</div>
<label class="layui-form-label required">图片</label>
<div class="layui-input-block">
<input type="text" name="background" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入用户名" value="" class="layui-input">
<tip>图片</tip>
</div>
<label class="layui-form-label required">图片路径</label>
<div class="layui-input-block">
<input type="text" name="url" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入用户名" value="" class="layui-input">
<tip>图片路径</tip>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</div>
</div>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
layui.use(['form'], function () {
var form = layui.form,
layer = layui.layer,
$ = layui.$;
//监听提交
form.on('submit(saveBtn)', function (data) {
var index = layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
}, function () {
//ajax(添加的操作发送到后台)
$.post("http://localhost:8085/imagesManage/insertImages",data.field,(res)=>{
// 关闭弹出层
layer.close(index);
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
})
});
return false;
});
});
</script>
</body>
</html>
后端
ImagesManageDao
/**
* 增加图片
* @param images
* @return
*/
public int insertImages(Images images);
ImagesManageDao.xml
<!--增加图片-->
<insert id="insertImages">
insert into images(src,background,type,url)values(#{
src},#{
background},#{
type},#{
url})
</insert>
ImagesManageService
/**
* 增加图片
* @param images
* @return
*/
public int insertImages(Images images);
ImagesManageServiceImpl
@Override
public int insertImages(Images images) {
return imagesManageDao.insertImages(images);
}
ImagesManageController
@RequestMapping("insertImages")
public int insertImages(Images images){
//因为是添加轮播图,所以就直接设置类型为0
images.setType(0);
return imagesManageService.insertImages(images);
}
启动项目且测试
修改轮播图操作:
将rotationImg.html修改
table.on('tool(currentTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
var index = layer.open({
title: '编辑用户',
type: 2,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: ['100%', '100%'],
content: 'rotationImg-edit.html',
success:function(layero,index){
//获取打的页面中的对象
var input=layer.getChildFrame('input',index);
//设置打开页面中对象的值
input[0].value=obj.data.id;
},
end:function(){
//end:回调函数(如果没有写它的话添加轮播图后不会显示出新增加的)
table.reload('currentTableId');
}
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
} else if (obj.event === 'delete') {
layer.confirm('真的删除行么', function (index) {
console.log(obj.data.id);
$.get("http://localhost:8085/imagesManage/deleteImages?id="+obj.data.id,
(res)=>{
if(res.data==1){
alert("删除成功");
}else{
alert("删除失败");
}
})
obj.del();
layer.close(index);
});
}
});
增加一个新页面rotationImg-edit.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
<link rel="stylesheet" href="../css/public.css" media="all">
<style>
body {
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="layui-form layuimini-form">
<div class="layui-form-item">
<div class="layui-input-block" hidden="hidden">
<input type="text" hidden="hidden" name="id" readonly lay-verify="required" value="" class="layui-input">
</div>
<label class="layui-form-label required">src</label>
<div class="layui-input-block">
<input type="text" name="src" lay-verify="required" lay-reqtext="src不能为空" placeholder="请输入src" value="" class="layui-input">
</div>
<label class="layui-form-label required">background</label>
<div class="layui-input-block">
<input type="text" name="background" lay-verify="required" lay-reqtext="background不能为空" placeholder="请输入background" value="" class="layui-input">
</div>
<label class="layui-form-label required">是否轮播图</label>
<div class="layui-input-block">
<input type="radio" name="type" lay-verify="required" value="0" checked="checked" class="layui-input">是
<input type="radio" name="type" lay-verify="required" value="1" class="layui-input">否
</div>
<div class="layui-input-block">
<input type="text" name="url" lay-verify="required" lay-reqtext="url不能为空" placeholder="请输入url" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</div>
</div>
</div>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
layui.use(['form'], function () {
var form = layui.form,
layer = layui.layer,
$ = layui.$;
//监听提交
form.on('submit(saveBtn)', function (data) {
var index = layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
}, function () {
//ajax(修改数据发送到后台)
$.post("http://localhost:8085/imagesManage/updateImages",data.field,(res)=>{
// 关闭弹出层
layer.close(index);
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
})
});
return false;
});
});
</script>
</body>
</html>
后端
ImagesManageDao
/**
* 修改轮播图
* @param id
* @return
*/
public int updateImages(Images id);
ImagesManageDao.xml
<!--修改轮播图-->
<update id="updateImages">
update project.images
<set>
<if test="src != null and src != ''">
src = #{
src},
</if>
<if test="background != null and background != ''">
background = #{
background},
</if>
<if test="type != null">
type = #{
type},
</if>
<if test="url != null and url != ''">
url = #{
url},
</if>
</set>
where id = #{
id}
</update>
ImagesManageService
/**
* 修改轮播图
* @param id
* @return
*/
public int updateImages(Images id);
ImagesManageServiceImpl
@Override
public int updateImages(Images id) {
return imagesManageDao.updateImages(id);
}
ImagesManageController
@RequestMapping("updateImages")
public Dto<Integer> updateImages(Images id) {
return DtoUtil.returnDataSuccess(imagesManageService.updateImages(id));
}
测试
删除操作
在rotationImg.html已经写出来了
后端
ImagesManageDao
/**
* 删除轮播图
* @param id
* @return
*/
public int deleteImages(int id);
ImagesManageDao.xml
<!--删除轮播图-->
<delete id="deleteImages">
delete from images where id=#{
id}
</delete>
ImagesManageService
/**
* 删除轮播图
* @param id
* @return
*/
public int deleteImages(int id);
ImagesManageServiceImpl
@Override
public int deleteImages(int id) {
return imagesManageDao.deleteImages(id);
}
ImagesManageController
@RequestMapping("deleteImages")
public Dto<Integer> deleteImages(int id) {
return DtoUtil.returnDataSuccess(imagesManageService.deleteImages(id));
}
测试
