结对作业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>
