2021-06-08 软工实训

实训第二天

把自己的个人日报提交到小组的gitee中。(git的使用)
通过阅读论文，假如我是用户，希望该肉类溯源系统有什么功能

使用Axure进行原型设计
故事板设计：就相当于一个流程，根据这个流程设计故事板的内容
用故事->模块化，可以得到一个图表（层次方框图）
接下来要画的，很重要的是：核心业务流程图
围绕着核心业务，画用例业务流程图（明天任务）
然后进行数据描述（明天任务）

Vue
m v vm模型
三部分：可见模型、数据、业务逻辑代码
Vue的方法注解和方法：

<div id="div1">
			<input v-model="num" />
			<button @click="add1">+</button>
			<button @click="sub1">-</button>
		</div>

<script>
	let vm = new Vue({
		el:"#div1",
		data() {
			return {
				num:1,
			}
		},
		watch:{
			num:function(val){
				if(val<1){
					this.num = 1;
				}
				if(val>2){
					this.num = 2;
				}
			}
		},
		methods:{
			add1(){
				this.num++;
			},
			sub1(){
				this.num--;
			}
		}
	})
</script>

Vue自定义组件：

<div id="div1">
			<myhome :mycount="x"></myhome>
		</div>

<script>
	//自定义组件
	const home = {
		props:['mycount'],
		template:`
			<div>
				<button v-on:click="mycount++">You click me {{mycount}} times.</button>
			</div>
		
		`,
		data:function(){
			return{
				count:0
			}
		},
	}
	
	//自定义组件注册，全局注册
	Vue.component('myhome', home);
	
	let vm = new Vue({
		el:"#div1",
		data() {
			return {
				x:1000
			}
		},
	});
</script>

less的使用（对于css）：

//less
@bkc:#123456;

body{
	background-color: @bkc;
}

input{
	background-color: @bkc;
}
//还可嵌套

端午放假前：四项:用例图 需求描述 流程 数据描述