guns框架 代码架构 guns框架教程

我使用的是guns框架5.1版本。下载地址：https://gitee.com/stylefeng/guns/repository/archive/v5.1 (点击即可下载)

下载完成之后在IDE里面打开，（记得要配置好环境哦）,如果你的maven环境配置好的话，会自动导包的。等待导入完成配置好你的数据库就可以启动了。

在数据库中新建一张表，专门用于存储图片。

（大概就是这样的）

我们的思路是用代码生成自动创建mvc，我们在里面写代码。

在这里左边我们选中刚刚创建好的表，右边全选。点击生成。显示生成成功。我们到java文件夹会看见一个sql文件，里面的语句是想菜单管理表中添加数据。

INSERT INTO `guns`.`sys_menu` (`id`, `code`, `pcode`, `pcodes`, `name`, `icon`, `url`, `num`, `levels`, `ismenu`, `tips`, `status`, `isopen`) VALUES ('1339041638883094530', 'filema', 'system', '[0],[system],', '', '', '/filema', '99', '2', '1', NULL, '1', '0');
INSERT INTO `guns`.`sys_menu` (`id`, `code`, `pcode`, `pcodes`, `name`, `icon`, `url`, `num`, `levels`, `ismenu`, `tips`, `status`, `isopen`) VALUES ('1339041638883094531', 'filema_list', 'filema', '[0],[system],[filema],', '列表', '', '/filema/list', '99', '3', '0', NULL, '1', '0');
INSERT INTO `guns`.`sys_menu` (`id`, `code`, `pcode`, `pcodes`, `name`, `icon`, `url`, `num`, `levels`, `ismenu`, `tips`, `status`, `isopen`) VALUES ('1339041638883094532', 'filema_add', 'filema', '[0],[system],[filema],', '添加', '', '/filema/add', '99', '3', '0', NULL, '1', '0');
INSERT INTO `guns`.`sys_menu` (`id`, `code`, `pcode`, `pcodes`, `name`, `icon`, `url`, `num`, `levels`, `ismenu`, `tips`, `status`, `isopen`) VALUES ('1339041638883094533', 'filema_update', 'filema', '[0],[system],[filema],', '更新', '', '/filema/update', '99', '3', '0', NULL, '1', '0');
INSERT INTO `guns`.`sys_menu` (`id`, `code`, `pcode`, `pcodes`, `name`, `icon`, `url`, `num`, `levels`, `ismenu`, `tips`, `status`, `isopen`) VALUES ('1339041638883094534', 'filema_delete', 'filema', '[0],[system],[filema],', '删除', '', '/filema/delete', '99', '3', '0', NULL, '1', '0');
INSERT INTO `guns`.`sys_menu` (`id`, `code`, `pcode`, `pcodes`, `name`, `icon`, `url`, `num`, `levels`, `ismenu`, `tips`, `status`, `isopen`) VALUES ('1339041638883094535', 'filema_detail', 'filema', '[0],[system],[filema],', '详情', '', '/filema/detail', '99', '3', '0', NULL, '1', '0');

执行这个sql文件，在系统管理中的菜单管理中，找到的菜单，按照你的需求配置出来。然后重启guns，重新进入页面。把添加删除都要选择上。

就能看到你刚刚添加的菜单了。

这里是存放前端web页面的地方

在这个目录中有你刚刚生成的js文件。

在这个文件夹中有刚刚生成的html文件。有一个后缀为_add.html的文件。比如我的是filema_add.html。在这里添加如下代码。

<div class="col-sm-12">
                <div class="row">
                    <label class="control-label">内容</label>
                </div>
                <div class="row">
                    <div id="editor" style="width: 100%;height: 300px">
                    </div>
                </div>
            </div>
    <script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script>

在filema_info.js中添加如下代码

$(function() {
    //图片上传,初始化web上传组件
    var pic = new $WebUpload("picUrl");
    pic.init();
    //初始化编辑器
    var E = window.wangEditor;
    //创建富文本编辑器
    var editor = new E('#editor');
    //隐藏插入网络图片的功能
    editor.customConfig.showLinkImg = false;
    //自定义 fileName
    editor.customConfig.uploadFileName = 'file';
    //配置服务端接口,换成你自己的接口
    editor.customConfig.uploadImgServer =Feng.ctxPath + '/filema/fuloadfile/3';
    //回调函数
    editor.customConfig.uploadImgHooks = {
    //把图片插入富文本框中
        customInsert: function (insertImg, result, editor) {
            var url =result;
            console.log(url);
            insertImg('http://localhost:8080/kaptcha/'+url);
        }
    };
    //创建文本框
    editor.create();
    editor.txt.html($("#content").html());
    FilemaInfoDlg.editor = editor;
});

这里用了一个富文本框的组建，链接在这里：http://www.wangeditor.com/ 然后在controller中编写代码

@RestController
@RequestMapping("/api")
@Api(tags = "后台系统接口")
public class picurl extends BaseController {

    @Autowired
    private GunsProperties gunsProperties;
    @Autowired
    private IFilemaService filemaService;

    @ApiOperation(value="广告图片上传接口",notes="广告图片上传接口")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "file",value = "照片文件",dataTypeClass = MultipartFile.class,required = true),
            @ApiImplicitParam(name = "infoActivityId",value = "图片关联id",dataTypeClass = Integer.class,required = true)
    })
    @Transactional
    @RequestMapping(value = "/sign/uploadpic/{dataid}",method = RequestMethod.POST)
    public Object uploadpic(
            @RequestParam("file") MultipartFile picture,@PathVariable Integer dataid
    ) throws Exception {

        String fileSavePath = gunsProperties.getFileUploadPath();
        Date datetemp=new Date();
        String dateStr= DateUtil.formatStringTime(datetemp,"yyyy-MM-dd");
        File filedir=new File(fileSavePath);
        if(!filedir.exists()){
            filedir.mkdir();
        }
        String pictureName=UUID.randomUUID().toString() + "." + ToolUtil.getFileSuffix(picture.getOriginalFilename());
        String pictureNametrmp = File.separator +dateStr+File.separator +pictureName;
        try {
            String DataID = String.valueOf(dataid);
            picture.transferTo(new File(fileSavePath+ pictureNametrmp));
            Filema filema=new Filema();
            filema.setCreateTime(datetemp);
            filema.setDataId(DataID);
            filema.setUuid(pictureName);
            filema.setFiledir(dateStr);
            filema.setName(picture.getOriginalFilename());
//3首页固定图片
            filemaService.insert(filema);
        } catch (Exception e) {
            throw new ServiceException(BizExceptionEnum.UPLOAD_ERROR);
        }
        return pictureName;

    }

查看图片接口

@ApiOperation(value="图片下载接口",notes="图片下载接口")
    @Transactional
    @RequestMapping(value = "/sign/down",method = RequestMethod.POST)
    public Object picdown(){
        List<Filema> filemas = filemaService.selectList(null);
        if(ToolUtil.isNotEmpty(filemas)){
            return new ResponseData(true,200,"获取成功!",filemas);
        }else{
            return new ResponseData(false,400,"获取失败!",null);
        }
    }

到这就可以了。