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:[]
	}
}
  1. 为表单添加事件,以便于给tabledata赋值;左键双击表格,选择load-data,方法名为loadPageData
  2. 编辑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的值是从后台获取的
	}
}
  1. 链接到html中
<script th:inline="javascript">
	var student = Artery.resolveObj(/*[[${student}]]*/);//接收后台request中的属性
	student = student?student:{};
</script>
  1. 新建一个增加按钮,text属性为增加
  2. 左键双击按钮,添加点击事件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);
}
  1. 添加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();
			});
		}
	});
}
  1. 添加id参数
<aty-button text="详情" @click="lookDetail(props.row.id)></aty-button>
  1. 增加模态块,加iframe,高度400

controller

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

制作表单模板

  1. 和创建表单相同,但是文件类型选择表单模板
  2. 在表单页面右键添加模板,其余操作和其他组件相同
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值