軟件準(zhǔn)備準(zhǔn)備!!!
jdk 1.8?JDK 1.8
IDEA ?idea 破解
MAVEN?maven
TOMCAT?tomcat 下載
1、項(xiàng)目結(jié)構(gòu)
項(xiàng)目結(jié)構(gòu)
2、配置介紹
maven配置：pom.xml
spring mvc 配置：spring.xml/springm-vc.xml
mybatis配置：spring-mybatis.xml
web容器：web.xml
mapper：數(shù)據(jù)庫對(duì)應(yīng)的語句擅羞。
3鲸伴、代碼
項(xiàng)目代碼：com.yihu.mybatis（entity、dao旭咽、service杉编、controller）
controller 層代碼
public class ProjectNameController {
? ? @Autowired
? ? private ProjectNameService projectNameService;
? ? @RequestMapping(value = "/project", method = RequestMethod.GET)
? ? public String project() {
? ? ? ? return "project";
? ? }
? ? @RequestMapping(value = "/project", method = RequestMethod.POST)
? ? public String checkProject(int projectid,Model model) {
? ? ? ? System.out.print(projectid);
? ? ? ? ProjectName projectName = projectNameService.getProjectNameById(projectid);
? ? ? ? if (null != projectName) {
? ? ? ? ? ? System.out.print(projectName.getProjectname());
? ? ? ? ? ? model.addAttribute("projectName",projectName.getProjectname());
? ? ? ? ? ? return "success";
? ? ? ? } else {
? ? ? ? ? ? return "project";
? ? ? ? }
? ? }
? ? @RequestMapping(value = "/projectAll", method = RequestMethod.GET)
? ? public String checkProject() {
? ? ? ? return "projectAll";
? ? }
? ? @RequestMapping(value = "/projectAll/query", method = RequestMethod.GET)
? ? public @ResponseBody String checkProjectAll() {
? ? ? ? List<ProjectName> projectNameAll = projectNameService.getProjectAll();
? ? ? ? System.out.print(JSON.toJSON(projectNameAll));
? ? ? ? return JSON.toJSONString(projectNameAll);
? ? }
}
測試代碼：test
4咆霜、前端代碼
使用vue.js 發(fā)送異步請(qǐng)求邓馒，渲染到前端
varpanelVw= newVue({
el:'#autoDetailInfoPanel',
data:{
detailPanelInfo:{},
apiUrl:'/projectAll/query'
},
ready: function(){
this.initPanelInfoData();
this.getPanelInfoData();
},
methods:{
initPanelInfoData: function(){
this.detailPanelInfo={
}
},
getPanelInfoData: function(){
this.$http.get(this.apiUrl).then(function(response){
this.$set('detailPanelInfo',response.data);
}).catch(function(response){
console.log(response);
})
}
}
});
js
id 與vue中的el 對(duì)應(yīng) ，在通過v-for 將vue返回的響應(yīng)信息循環(huán)讀取出來
5蛾坯、發(fā)布 （tomcat）
demo 下載完后 可以在本地配置下數(shù)據(jù)庫光酣，建下project_name 的表，該表三個(gè)字段 projectid脉课、projectname救军、date
spring MVC Mybatis Maven vue bootstrap 的框架已經(jīng)打架完成，請(qǐng)大家多多指教
