结对作业7
| PSP0（Personal Software Process Stages ） | 所需时间（TIME） |
| Planning(计划) | 写了写后端的jpa |
| estimate[估计这个任务需要多少时间 ] | 2h |
| Development (开发 ) | |
| · Design [具体设计 ] | 1 |
| · Coding [具体编码 ] | 2 |
| · Test [测试（自我测试，修改代码，提交修改）] | 2 |
| Reporting(报告 ) | |
| · Postmortem & Process Improvement Plan [事后总结, 并提出过程改进计划 ] | 1h |
| 合计 | 8h |
//感觉要累死了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
文章分类: </span><input type=<span style="color: #800000;">"</span><span style="color: #800000;">text</span><span style="color: #800000;">"</span> v-model=<span style="color: #800000;">"</span><span style="color: #800000;">searchConditions.category</span><span style="color: #800000;">"</span>><span style="color: #000000;">
发布状态: </span><input type=<span style="color: #800000;">"</span><span style="color: #800000;">text</span><span style="color: #800000;">"</span> v-model=<span style="color: #800000;">"</span><span style="color: #800000;">searchConditions.state</span><span style="color: #800000;">"</span>>
<button v-on:click=<span style="color: #800000;">"</span><span style="color: #800000;">search</span><span style="color: #800000;">"</span>>搜索</button>
<br />
<br />
<table border=<span style="color: #800000;">"</span><span style="color: #800000;">1 solid</span><span style="color: #800000;">"</span> colspa=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> cellspacing=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span>>
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr v-<span style="color: #0000ff;">for</span>=<span style="color: #800000;">"</span><span style="color: #800000;">(article,index) in articleList</span><span style="color: #800000;">"</span>>
<td>{{article.title}}</td>
<td>{{article.category}}</td>
<td>{{article.time}}</td>
<td>{{article.state}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<!-- <tr>
<td>标题2</td>
<td>分类2</td>
<td><span style="color: #800080;">2000</span>-<span style="color: #800080;">01</span>-<span style="color: #800080;">01</span></td>
<td>已发布</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>标题3</td>
<td>分类3</td>
<td><span style="color: #800080;">2000</span>-<span style="color: #800080;">01</span>-<span style="color: #800080;">01</span></td>
<td>已发布</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr> -->
</table>
</div>
<!--导入axios的js文件-->
<script src=<span style="color: #800000;">"</span><span style="color: #800000;">https://unpkg.com/axios/dist/axios.min.js</span><span style="color: #800000;">"</span>></script>
<script type=<span style="color: #800000;">"</span><span style="color: #800000;">module</span><span style="color: #800000;">"</span>>
<span style="color: #008000;">//</span><span style="color: #008000;">导入vue模块</span>
import {createApp} <span style="color: #0000ff;">from</span> <span style="color: #800000;">'</span><span style="color: #800000;">https://unpkg.com/vue@3/dist/vue.esm-browser.js</span><span style="color: #800000;">'</span><span style="color: #000000;">;
</span><span style="color: #008000;">//</span><span style="color: #008000;">创建vue应用实例</span>
createApp({
data(){
return {
articleList:[],
searchConditions:{
category:'',
state:''
}
}
},
methods:{
search:function(){
axios.get('http://localhost:8080/article/search?category='+this.searchConditions.category+'&state='+this.searchConditions.state)
.then(result=>{
this.articleList=result.data
}).catch(err=>{
console.log(err);
});
}
},
//钩子函数mounted中，获取所有文章数据
mounted:function(){
//发送异步请求 axios
axios.get('http://localhost:8080/article/getAll').then(result=>{
//成功回调
//console.log(result.data);
this.articleList=result.data;
}).catch(err=>{
//失败回调
console.log(err);
});
}
}).mount('#app');//控制html元素
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
2023-04-18 2023.4.18