9.19 上午课堂提交

Vue/Vue001/src/App.vue

@@ -1,41 +1,302 @@
+<!-- 
 <script setup>
-import { ref,onMounted } from 'vue';
+import { ref } from 'vue';
-import axios from 'axios;  '
+const msg = ref('hello world!!!')
-onMounted(()=>{
+const num = ref(10)
-	axios({
+function myclick(){
-		method:'get',
+	// alert('点击')
-		url:'http://127.0.0.1:8080/getsudents'
+	if(mycolor.value=='red'){
-	}).then( res =>{
+		mycolor.value='blue'
-		console.log(res.data)
+	}else{
-		personList.value = red.data.data
+		mycolor.value='red'
-	}).catch( err =>{
+	}
-		console.log(err)
+}	
-	})
+const username = ref('')
-	
+const password = ref('')
-})
+function login(){
+	if(username.value == 'admin' && password.value == '123456'){
+		alert('登录成功')
+	}else{
+		alert('登陆失败')
+	}
+}
+const isshow = ref(true)
+const mycolor = ref('red')
 
+const personList = ref([
+	{
+		id:1,
+		age:20,
+		name:"test111"
+	},{
+		id:2,
+		age:21,
+		name:"test222"
+	},{
+		id:3,
+		age:22,
+		name:"test333"
+	}
+])
 </script>
 
 <template>
-	<el-input style="width:200px;margin:5px type="text" v-model=
+	<ul>
-	<el-input style="width:200px;margin:5px type="text"  
+		<li v-for="person in personList">
-	<table border='1'>
+			{{person.id}}  {{person.age}}  {{person.name}}
-		<tr>
+		</li>
-			<td>id</td>
+	</ul>
-			<td>年龄</td>
+	
-			<td>姓名</td>
+	
-			<td>班级</td>
+  <div>{{msg.toLocaleUpperCase()}}</div>
-		</tr>
+  <div>{{num*4}}</div>
-		<tr v-for="person in personList">
+  <button @click="myclick">点击11</button>
-			<td>{{person.id}}</td>
+  <div :class="mycolor">test</div>
-			<td>{{person.age}}</td>
+  //<div v-if='isshow':class="mycolor">test1</div>
-			<td>{{person.age}}</td>
+  //v-model=     @
-			<td>{{person.classname}}</td>
+  <div>{{username}}</div>
-			</tr>
+  <div>{{password}}</div>
-	</table>
+  <input type="text" v-model="username" /><br/>
-  
+  <input type="text" v-model="password" /><br/>
-</template>
+  <button @click="login">登录</button>
+</template> 
+
+
 
 <style>
 
+.red{
+	  width: 100px;
+	  height: 100px;
+	  background-color: red;
+  }
+.blue{
+	  width: 200px;
+	  height: 100px;
+	  background-color: blue;
+  }
 </style>
+
+-->
+
+
+<!-- <script setup>
+import { ref,onMounted } from 'vue'
+import axios from 'axios';
+onMounted(()=>{
+	axios({
+		method:'get',
+		url:'http://127.0.0.1:8080/getstudents'
+		
+	}).then( res =>{
+		console.log(res.data)
+		personList.value = res.data.data
+	} ).catch( err =>{
+		console.log(err)
+	} )
+})
+const personList = ref(null)
+
+const username = ref('')
+const password = ref('')
+function login(){
+	axios({
+		method:'post',
+		url:'http://127.0.0.1:8080/login1',
+		params:{
+			username:username.value,
+			password:password.value
+		}
+		
+	}).then( res =>{
+		console.log(res.data)
+		if(res.data.code==0){
+			alert("登陆成功")
+		}else{
+			alert("登陆失败")
+		}
+	} ).catch( err =>{
+		console.log(err)
+	} )
+	
+	const imgurl = ref('')
+	const handlesuccess = (res,file,files)=>{
+		console.log(res.data)
+		imgurl.value = res.data
+	}
+}
+</script>
+
+
+
+
+<template>
+	<img style="width: 100px;height: 100px" :src="imgurl">
+	  <el-upload
+	    class="upload-demo"
+	    drag
+	    action="http://127.0.0.1:8080/uploadcommit1"
+		:on-success="handlesuccess"
+	    multiple
+	  >
+	    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+	    <div class="el-upload__text">
+	      把文件拖拽上传 <em>或点击按钮上传</em>
+	    </div>
+	    <template #tip>
+	      <div class="el-upload__tip">
+	        jpg/png files with a size less than 500kb
+	      </div>
+	    </template>
+	  </el-upload>
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	<input style="width: 200px;margin: 5px;" type="text" v-model="username" /><br/>
+	<input style="width: 200px;margin: 5px;" type="text" v-model="password" /><br/>
+	 
+	<el-button @click="login">登录</el-button>
+	
+	 
+	
+		<el-table :data="personList" style="width: 100%">
+		    <el-table-column prop="id" label="id" width="180" />
+		    <el-table-column prop="age" label="年龄" width="180" />
+		    <el-table-column prop="name" label="姓名" width="180"/>
+			<el-table-column prop="classname" label="班级" width="180"/>
+		</el-table>
+	
+</template>
+
+
+<style>
+
+</style> 
+-->
+
+<script setup>
+	import {
+		ref,
+		reactive,
+		onMounted
+	} from 'vue'
+	import axios from 'axios';
+	onMounted(() => {
+		loadData()
+	});
+	const personList = ref(null);
+
+	function loadData() {
+		axios({
+			method: 'get',
+			url: 'http://127.0.0.1:8080/getstudents'
+		}).then(res => {
+			console.log(res.data);
+			personList.value = res.data.data;
+		}).catch(err => {
+			console.log(err);
+		});
+	}
+
+	function deleteRow(row) {
+		console.log(row)
+		axios({
+			method: 'get',
+			url: 'http://127.0.0.1:8080/deletestudentbyid/' + row.id
+
+		}).then(res => {
+			loadData();
+		}).catch(err => {
+			console.log(err);
+		});
+	}
+	const dialogVisible = ref(false);
+	const form = reactive({
+		id: null,
+		name: '',
+		age: '',
+		classname:''
+	});
+
+	function updateRow(row) {
+		dialogVisible.value = true;
+		Object.assign(form,row);
+	}
+	function saveData(){
+		axios({
+			method: 'post',
+			url: 'http://127.0.0.1:8080/saveData',
+			params:form
+		
+		}).then(res => {
+			loadData();
+			dialogVisible.value = false;
+			Object.assign(form,{
+				id: null,
+				name: '',
+				age: '',
+				classname: ''
+			});
+		}).catch(err => {
+			console.log(err);
+		});
+	}
+	function addperson(){
+		dialogVisible.value = true;
+	}
+</script>
+
+
+
+<template>
+	<el-button type="primary" @click="addperson">新增</el-button>
+	<el-dialog v-model="dialogVisible" title="编辑信息" width="500">
+		<el-form :model="form" label-width="auto" style="max-width: 600px">
+			<el-form-item label="id">
+				<el-input v-model="form.id" />
+			</el-form-item>
+			<el-form-item label="姓名">
+				<el-input v-model="form.name" />
+			</el-form-item>
+			<el-form-item label="年龄">
+				<el-input v-model="form.age" />
+			</el-form-item>
+			<el-form-item label="班级">
+				<el-input v-model="form.classname" />
+			</el-form-item>
+		</el-form>
+
+
+
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="dialogVisible = false">取消</el-button>
+				<el-button type="primary" @click="saveData">保存</el-button>
+			</div>
+		</template>
+	</el-dialog>
+
+	<el-table :data="personList" style="width: 100%">
+		<el-table-column prop="id" label="id" width="180" />
+		<el-table-column prop="age" label="年龄" width="180" />
+		<el-table-column prop="name" label="姓名" width="180" />
+		<el-table-column prop="classname" label="班级" width="180" />
+		<el-table-column fixed="right" label="操作" width="120">
+			<template #default="{ row }">
+				<el-button type="primary" size="small" @click="updateRow(row)">更新</el-button>
+				<el-button type="danger" size="small" @click="deleteRow(row)">删除</el-button>
+			</template>
+		</el-table-column>
+	</el-table>
+</template>
+
+
+<style>
+
+</style>

springboot/src/main/java/com/zhangzihao/springboot/springboot/Controllor/JsaonControllor.java

@@ -1,20 +1,68 @@
 package com.zhangzihao.springboot.springboot.Controllor;
 
+import com.zhangzihao.springboot.springboot.model.Student;
 import com.zhangzihao.springboot.springboot.model.User;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.multipart.MultipartFile;
+
+import javax.xml.transform.Result;
+import java.io.File;
+import java.io.IOException;
+import java.util.UUID;
 
 @Controller
-public class JsaonControllor {
+public class JsonController {
-    //返回Json数据,App/小程序 前端分离
+    //    @RequestMapping("getUser")
+//    //@RequestMapping("getUser") 表明这个方法处理 getUser 的请求
+//    @ResponseBody
+//    public User getUser(){
+//        User user = new User();
+//        user.setUsername("Lala");
+//        user.setClassname("医信1班");
+//        return user;
+//    }
+    @Autowired
+    IStudentService studentService;
+    @RequestMapping("getstudents")
+    public Result getstudents(){
+        return Result.ok(studentService.list());
+    }
+
+    @RequestMapping("login1")
+    public Result login1(String username,String password){
+        if(username.equals("admin")&& password.equals("123456"))
+            return Result.ok("登录成功");
+        return Result.error("登录失败");
+    }
+
     @RequestMapping("getuser")
-    @ResponseBody
+    public User getuser(){
-    public User getUser()
-    {
         User user = new User();
-        user.setUsername("张三");
+        user.setUsername("Lala");
-        user.setClassname("21医信");
+        user.setClassname("医信1班");
         return user;
     }
-}
+
+    @RequestMapping("uploadcommit1")
+    public Result uploadSuccess(MultipartFile file) throws IOException
+    {
+        File file1 = new File("D:\\data");
+        String fileName = UUID.randomUUID().toString()+file.getOriginalFilename();
+        file.transferTo(new File(file1,fileName));
+        return Result.ok().put("data","http://127.0.0.1:8080/"+fileName);
+    }
+    @RequestMapping("/deletestudentbyid/{id}")
+    public Result deleteStudentById(@PathVariable Integer id)
+    {
+        return Result.ok(studentService.removeById(id));
+    }
+    @RequestMapping("")
+    public Result saveDate(Student student)
+    {
+        return Result.ok(studentService.saveOrUpdate(student));
+    }
+}