Artery6基本操作流程

新建项目

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

搭建数据库

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

配置Maven环境

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

在eclipse新建项目

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

CRUD的基本操作（例子）

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

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

列表表单区域制作

页面制作

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

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

6. 为表单添加事件，以便于给tabledata赋值；左键双击表格，选择load-data，方法名为loadPageData
7. 编辑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")
	@Id
	private 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{
	@Autowird
	private 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{

	@Autowired
	private 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

页面制作

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

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

5. 链接到html中

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

6. 新建一个增加按钮，text属性为增加
7. 左键双击按钮，添加点击事件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发送请求失败的error
			Artery.message.error("发送请求出错，错误信息是："+JSON.stringify(error));
		});
	}
}

Controller

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

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

1. 左键双击添加事件，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

修改列表表单区域

1. 在表格中添加表格列，将label改为操作
2. 在操作中添加template，更改属性slot-scope=props
3. 在template添加编辑按钮
4. 左键双击添加事件editStudent
5. 转到html页面将编辑按钮的@click改为editStudent（props.row.id）
6. 抽取方法，改写添加的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

列表页面更改

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

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

2. 添加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

列表页面更改

1. 在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();
			});
		}
	});
}

2. 添加id参数

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

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

controller

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

制作表单模板

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