2021-06-07-软工实训_软工实训系统csdn-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45841848/article/details/117650956

软件工程课设——第一天

**
每个同学必须编写2000行以上代码
以后每天100行

面试笔试四科：1、linux操作系统（15分） 2、数据库三张以上表的级联查询（25分） 3、数据结构二叉树的遍历（25分）4、C语言或者Java，根据面试方向出题

下午
前端：使用Vue访问或者处理Json格式文件
后端：Java代码根据数据库生成Json文件交给前端

Vue:构建用户界面的渐进式框架
组件->视图->应用
两大特点：数据绑定、组件开发
小技巧:div#div1+TAB键，可自动生成id为div1的div
vue操作：
有一个div

<body>
		<!-- div#div1 tab-->
		<div id="div1">
			<!-- 插值表达式，大胡子语法 tab-->
			{{msg}}
		</div>
	</body>

需要定义一个vm对象

<script>
	//定义第一个vm对象
	let vm = new Vue({
		<!-- 挂载-->
		el:"#div1",
		data() {
			return {
				msg:"燕山大学",
				name:"TTC",
			}
		},
	});
</script>

v-if和v-show，其中v-if是动态的，所以v-show加载更快一些

<body>
		<div id="div1">
			<p v-if="seen">v-if！</p>
			<p v-show="shseen">v-show！</p>
		</div>
	</body>

<script>
	let vm = new Vue({
		el:"#div1",
		data() {
			return {
				seen:false,
				shseen:true
			}
		},
	})
</script>

v-for的使用

<div id="div1">
			<table>
				<thead>
					<tr><th>sdsd</th><td>sds</td></tr>
				</thead>
				<tbody>
					<tr v-for="(book,index) in this.books" :key="index">
						<td>{{book.isbn}}</td>
						<td>{{book.title}}</td>
						<td></td>
					</tr>
				</tbody>
				<tfoot>
					
				</tfoot>
			</table>
		</div>

<script>
	let vm = new Vue({
		el:div1,
		data() {
			return {
				books:[
					{
						isbn:343434,
						title: "java"
					},
					{
						isbn:2323,
						title: "java"
					},
					{
						isbn:898989,
						title: "java"
					},
				]
			}
		},
	})
</script>

v-bind的使用,v-bind是单向绑定，改变代码去改变页面的值

<div id="div1">
			<img v-bind:src="imgaddr" alt="" :title="title" />
			<!-- 如何使用Vue对象控制标签属性值-->
			<input name="logid" v-bind:value="logid"/>
			<button type="button">按钮</button>
		</div>

<script>
	let vm = new Vue({
		el:"#div1",
		data() {
			return {
				logid:"neuedu",
				imgaddr:"https://cn.vuejs.org/images/components.png",
				title:"哇哈哈"
			}
		},
	})
</script>

v-model的使用，v-model是双向绑定的，代码改变页面的值，当页面的值修改时，代码中的值也修改（但并不会改变本来的代码，只会改变页面的代码的值）

<div id="div1">
			<input type="text" id="" v-model="logid" />
			<input type="password" v-model="logpwd" />
			Gender:
			<input type="radio" value="男" name="gender" v-model="gender" />男
			<input type="radio" value="女" name="gender" v-model="gender" />女
			<br />
			擅长技术：
			<input type="checkbox" name="tech" v-model="tech" value="Java"/>Java <br />
			<input type="checkbox" name="tech" v-model="tech" value="Vue"/>Vue <br />
			<input type="checkbox" name="tech" v-model="tech" value="Mysql"/>Mysql <br />
			<input type="checkbox" name="tech" v-model="tech" value="页面设计"/>页面设计 <br />
			学历：
			<select name="edu" v-model="edu">
				<option value="本科">---本科---</option>
				<option value="硕士">---硕士---</option>
				<option value="博士">---博士---</option>
			</select>
			<textarea rows="" cols="">
				<!---请自己补充--->
			</textarea>
		</div>

<script>
	let vm = new Vue({
		el:"#div1",
		data() {
			return {
				logid:"shadb",
				logpwd:"123456",
				gender:"男",
				tech:["Java","Mysql"],
				edu:"博士",
			}
		},
	})
</script>