文章目录

新建项目
- 搭建数据库
- 配置Maven环境
- 在eclipse新建项目
CRUD的基本操作（例子）
- 基于数据字典的自动生成功能
- 列表表单区域制作
- - 页面制作
  - 建立实体类，新建pojo文件夹，建立Student类
  - 创建Mapper接口，继承BaseMapper

新建项目

学习Artery6之前，你需要了解Vue+SpringBoot+SpringCloud

搭建数据库

在导航栏上点击Artery6，然后点击下载SQL
编辑mysql的install.bat文件
更改set MySQL='你自己的mysql中的bin目录/mysql' 和-u，-p改为你自己的用户名和密码
打开cmd切换到当前目录，并执行install.bat

配置Maven环境

将本地库地址设置为公司的本地库

在eclipse新建项目

将当前的视图切换为Artery6
New Artery6=》Artery project
选择组件Artery-Organ（组织机构），Artery-Login（登录），Artery-Code（数据字典），SQL选择MySQL
观察配置文件是否正确
启动项目，浏览器访问localhost:8080，用户名admin，密码为空

CRUD的基本操作（例子）

基于数据字典的自动生成功能

右键项目，选择数据字典文件夹
右键dic，New Artery6，数据字典和sql
选择smd文件（excel表格），更改数据库为mysql
生成的sql文件为建表语句，在数据库中创建
右键table中的表，选择Artery一键生成
第一个页面选择每一列是否可用，next勾选生成表单和生成Service层，next不显示id，以name和age过滤，以age排序，next不显示id。
最后如果项目中已经有同名文件选择完全覆盖会把之前的文件删除
启动项目测试，访问localhost:8080/aty/student/studentList

列表表单区域制作

页面制作

在templates中新建Folder，叫student
右键student，选择Artery Html Form，创建一个表单studentList
右键app创建表格，并修改属性ref=table_student，为分页中的:pageable-data绑定一个变量叫tabledata
通过相关表添加列
跳转到js在return中声明tabledata为空数组

data:function(){return{tabledata:[]}
}

为表单添加事件，以便于给tabledata赋值；左键双击表格，选择load-data，方法名为loadPageData
编辑loadPageData为

loadPageData: function(queryInfo){var _this = this;//Artery.loadPageData(url,params,queryInfo);    params这里不需要Artery.loadPageData("student/studentList/getTableData",queryInfo).then(function(result){_this.tabledata = result;}).catch(function(error){       //发生异常，将异常输出console.error(error.message);});
}

loadPageData: function(queryInfo){Artery.loadPageData("student/studentList/getTableData",queryInfo).then((result) => {this.tabledata = result;}).catch(function(error){     //发生异常，将异常输出console.error(error.message);});
}

建立实体类，新建pojo文件夹，建立Student类

@Table(name="t_student")
public class Student{@Size(max=32)@Column(name="c_id")@Idprivate String id;@NotNull@Size(max=50)@Column(name="c_name")private String name;@Column(name="c_age")private Integer age;@Column(name="d_birthday")private Date birthday;@Size(max=500)@Column(name="c_desc")private String desc;生成get，set方法在get方法上面有@JSONField(name="属性名（id）")
}

创建Mapper接口，继承BaseMapper<t,k>,第一个泛型是指返回的实体类型，第二个是组件类型

@Mapper
public interface StudentMapper extends BaseMapper<Student,String>{
}

写service层，创建接口IStudentService

public interface IStudentService{List<Student> selectAll();Student selectByPrimaryKey(String id);void updateByPrimaryKey(Student student);void save(Student student);void deleteByPrimaryKey(String id);
}

实现类在impl中写，StudentService实现IStudentService

@Service
public class StudentService implements IStudentService{@Autowirdprivate StudentMapper mapper;selectAll=>mapper.selectAll();selectByPrimaryKey=>mapper.selectByPrimaryKey(id);updateByPrimaryKey=>mapper.updateByPrimaryKey(student);save=>mapper.save(student);deleteByPrimaryKey=>mapper.deleteByPrimaryKey(studnet);
}

Controller

@Controller
@RequestMapping("student/studentList")
public class StudentListController{@Autowiredprivate IStudentService studentService;/*** html模板入口* @return 'resources/templates'下的html模板*/@GetMapping()public String index(HttpServletRequest request){return "student/studentList";}/*** 列表区域查询所有数据*/@ExceptionTips("查询表格数据异常")@DataTranslate  //能将列表中的代码维护1，2转为中文描述@ResponseBody@RequestMapping("/getTableData")public Object getTableData(IQueryInfo qb){return QueryManager.queryPageDataForMybatis(qb,Student.class,studentService::selectAll);}
}

Create

页面制作

创建一个新的表单studentEdit
右键app，创建表单，将所有列拖入其中
左键点击表单，将：data的值写为student，将ref设置为form_student
链接到js文件声明这个变量

data:function(){return{student:student //这个student的值是从后台获取的}
}

链接到html中

<script th:inline="javascript">var student = Artery.resolveObj(/*[[${student}]]*/);//接收后台request中的属性student = student?student:{};</script>

新建一个增加按钮，text属性为增加
左键双击按钮，添加点击事件addStudent

methods：{/*** 添加*/addstudent: function(){//按Alt+5快捷键，选择提交表单this.$refs['form_student'].submit('student/studentList/add').then(function(result){parent.vm.$refs.table_student.reloadData();//$refs.table_student中的table_student是父页面的表格区域的ref属性parent.Artery.close();}).catch(function(error){//此错误有一下几种情况//1.url参数未指定，可用在submit传递或者form中指定url属性//2.表单参数格式校验未通过//3.axios发送请求失败的errorArtery.message.error("发送请求出错，错误信息是："+JSON.stringify(error));});}
}

Controller

@ResponseBody
@ExceptionTips("保存数据异常")
@RequestMapping("/add")
public String add(@RequestBody Student student){studentService.save(student);return "ok";
}

在列表表单中添加新增按钮

左键双击添加事件，addStudent

addStudent:fucntion(){Artery.open({targetType:"_window",url:"student/studentEdit/"footerHide:true,title:"编辑窗口",height:400,width:600})
}

service.impl.StudentService

@Override
public void save(Student student){if(StringUtils.isEmpty(student.getId()){student.setId(UUIDHelper.getuuid());mapper.insert(student);} else{mapper.updateByPrimaryKey(student);}
}

Update

修改列表表单区域

在表格中添加表格列，将label改为操作
在操作中添加template，更改属性slot-scope=props
在template添加编辑按钮
左键双击添加事件editStudent
转到html页面将编辑按钮的@click改为editStudent（props.row.id）
抽取方法，改写添加的js方法

goTOPage:function(url){Artery.open({targetType:"_window",url: url,footerHide:true,title:"编辑窗口",height:400,width:600})
}
addStudent:fucntion(){this.goTOPage("student/studentEdit/");
}
editStudent:function(id){this.goTOPage("student/studentEdit/toEdit" + id);
}

改写StudentEditController

@GetMapping("/toEdit/{id}")
public String toEdit(HttpServletRequest request,@PathVariable String id){request.setAttribute("student",studentService.selectByPrimaryKey(id));return "student/studentEdit/";
}

Read

列表页面更改

在template下新增，详情按钮，添加事件lookDetail

lookDetail:function(id){this.goToPage('student/studentDetail/' + id);
}

添加id参数

<aty-button text="详情" @click="lookDetail(props.row.id)></aty-button>

制作详情表单studentDetail

将所有组件改为aty-detail-item,给表单绑定数据：data属性 = student,声明student属性

<aty-form :data="student"><aty-detail-item aty:dict="dbatystudent.t_student.c_name"></aty-detail-item><aty-detail-item aty:dict="dbatystudent.t_student.n_age"></aty-detail-item><aty-detail-item aty:dict="dbatystudent.t_student.d_birthday"></aty-detail-item><aty-detail-item aty:dict="dbatystudent.t_student.c_desc"></aty-detail-item>
</aty-form>
<script th:inline="javascript">var studnet = Artery.resolveObj(/*[[${student}]]*/);</script>

转到js声明变量

data：function(){return{studnet : studnet}
}

controller

@GetMapping("/toDetail/{id}")
public String toDetail(HttpServletRequest request,@PathVariable String id){request.setAttribute("student",studentService.selectByPrimaryKey(id));return "student/studentDetail/";
}

Delete

列表页面更改

在template下新增，删除按钮，添加事件delStudent

delStudent：function(id){this.$Modal.confirm({title:"确定窗口",content:'确定要删除么？',onOk:function(){//Alt+5,选择提交post请求Artery.ajax.post('student/studentDel/del' + id,{}).then((result) => {Artery.message.info('删除成功');this.$refs.table_studnet.reloadData();});}});
}

添加id参数

<aty-button text="详情" @click="lookDetail(props.row.id)></aty-button>

增加模态块，加iframe，高度400

controller

@ResponseBody
@ExceptionTips("删除数据异常')
@RequestMapping("/del/{id}")
public String del(@PathVariable String id){studentService.deleteByPrimaryKey(id);return "ok';
}

制作表单模板

和创建表单相同，但是文件类型选择表单模板
在表单页面右键添加模板，其余操作和其他组件相同

Artery6基本操作流程相关推荐

SEO的操作流程梗概
SEO的操作流程梗概影响网站排名的重要SEO因素: 1.关键词位置,特别是关键词是否在标题,这个非常重要 .关键词页面密度,只是在标题上有关键词是不够的,还需要内容中包含适量关键词 3.内容原创性. ...
树莓派小车python操作流程--龙邱科技
▌第一部分环境解决 1.1 软件版本发货前已经配置好软件环境: Linux raspberrypi 5.4.51 Python 3.7 OpenCV-python 3.4.6.27 1.2 TF卡 ...
计算机主机组装的过程,电脑主机组装需要怎样的操作流程简单至极？
原标题:电脑主机组装需要怎样的操作流程简单至极? 当今网络时代的天下,很多人都想自力更生.想靠自己动手来完成一台电脑的组装.对于一些刚入门的装机用户来说,可能觉得装机还是一件复杂的技术活,例如CPU. ...
Android提示版本号更新操作流程
Android提示版本号更新操作流程 2014年5月8日: andorid的app应用中都会有版本号更新的操作,今天空暇的时候就花了点心思弄了一下.主要技术方面用到了AsyncTask异步载入.htt ...
网站建设特定操作流程了解一下不吃亏
建设一栋楼房可能只要一年的时间,但是建设一个网站可能要一生的时间,只要你有耐心,你就可以一直将网站建设下去.正所谓,学无止境,只要能够掌握好基础网站建设知识才能制作出更高质量的网站.况且网站建设还有特 ...
python编写程序的一般步骤-Python编写win程序的操作流程
今天给大家讲的是Python怎样编写win程序的方法,对Python编写win程序的操作流程感兴趣的同学们就一起学习下具体方法吧! Python编写win程序的操作流程 1.在app.py同一目录下建 ...
Git客户端图文详解如何安装配置GitHub操作流程攻略
Git客户端图文详解如何安装配置GitHub操作流程攻略软件应用爱分享 3个月前 (08-15) 8896浏览 0评论 Git介绍分布式 : Git版本控制系统是一个分布式的系统, 是用来 ...
轴等比缩放_CAD教程：自由缩放命令的操作流程
在使用浩辰CAD制图软件绘制图纸的过程中,设计师为了绘图方便经常需要对图形进行放大或者是缩小,这个时候就要用到自由缩放命令.那么今天就给刚入门学习浩辰CAD软件的小伙伴们分享一下CAD教程之自由缩放命 ...
Hyperledger Fabric 私有数据（2）操作流程
1. 私有数据资产转移的案例 collections_config.json文件定义了3个私有数据集合定义:assetCollection.Org1MSPPrivateCollection和Org2M ...

Artery6基本操作流程

文章目录

新建项目

搭建数据库

配置Maven环境

在eclipse新建项目

CRUD的基本操作（例子）

基于数据字典的自动生成功能

列表表单区域制作

页面制作

建立实体类，新建pojo文件夹，建立Student类

创建Mapper接口，继承BaseMapper<t,k>,第一个泛型是指返回的实体类型，第二个是组件类型

写service层，创建接口IStudentService

实现类在impl中写，StudentService实现IStudentService

Controller

Create

页面制作

Controller

在列表表单中添加新增按钮

service.impl.StudentService

Update

修改列表表单区域

改写StudentEditController

Read

列表页面更改

制作详情表单studentDetail

controller

Delete

列表页面更改

controller

制作表单模板

Artery6基本操作流程相关推荐

最新文章

热门文章