第一步，首先就是将springboot框架先配好---就是连接mybatis和支持jsp
关于让spirngboot怎么支持jsp（http://mp.blog.csdn.net/postedit/79111391）可以在我以前的博客看到，这里就不细说了
1.首先，创建springboot项目：
1.1 首先new一个module，然后 选择sdk，我这里是1.8版本的
1.2 下一步：
1.3： 下一步，选择 Web和Mysql（数据库）还有就是JDBC和Mybatis（到时候会自动把你的依赖引进去）
1.4 ：完成即可：
1.5：然后 会自动在pom.xml自动生成下面这些：
----------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2.然后，在看你的项目里面的java文件夹，会自动生成一个什么springbootApplication文件，
这个文件，点击三角形运行就可以直接开始项目，不需要将本项目再放入tomcat中
3.然后，先上一张我项目的整体图，便于理解：
4.首先，我先将项目中要用的一些依赖先全部导入：
下面就是我的pom.xml文件的全部内容：
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.desert</groupId> <artifactId>g160828_springboot</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>g160828_springboot</name> <description>Demo project for Spring Boot</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.9.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <!-- servlet 依赖. --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> </dependency> <!--SpringBoot默认不支持JSP，需要在项目中添加相关的依赖--> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> </dependency> <dependency> <groupId>org.eclipse.jdt.core.compiler</groupId> <artifactId>ecj</artifactId> <version>4.6.1</version> <scope>provided</scope> </dependency> <!-- json数据 使springMVC可以返回json值 ,视情况添加--> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.30</version> </dependency> </dependencies> <build>
<!--让springboot支持jsp的一些操作-->
<resources>
<!-- 打包时将jsp文件拷贝到META-INF目录下-->
<resource>
<!-- 指定处理哪个目录下的资源文件 -->
<directory>src/main/webapp</directory>
<!--注意此次必须要放在此目录下才能被访问到-->
<targetPath>META-INF/resources</targetPath>
<includes>
<include>**/**</include>
</includes>
</resource>
</resources>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
----------------------------------------------------------------------------------------------------------
5.然后，在application,yml中输入我的一些配置信息，
<!--连接数据库-->
spring: datasource: username: root password: root url: jdbc:mysql://localhost:3306/test driver-class-name: com.mysql.jdbc.Driver
<!--使springboot支持jsp的一些操作--> mvc: view: prefix: /WEB-INF/ suffix: .jsp
<!--加载mapping里面全部的xml文件--> mybatis: mapper-locations: mapping/*.xml
--------------------------------------------------------
6.然后，再看java文件夹下面的类
首先，我的实体类 Person:
然后，再是我的IPersonDao接口的里面一些方法：
public interface IPersonDao { public void add(Person person); public List<Person> getall(); public void delperson(int pid); public void updateperson(Person person); }再者，就是我mapping文件夹下面的一些xml信息：
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.desert.g160828_springboot.dao.IPersonDao"> <insert id="add" parameterType="com.desert.g160828_springboot.entity.Person"> INSERT INTO person(pname,page) values(#{pname},#{page}) </insert> <select id="getall" resultType="com.desert.g160828_springboot.entity.Person"> SELECT * from person </select> <delete id="delperson" parameterType="int"> delete from person where pid=#{pid} </delete> <update id="updateperson" parameterType="com.desert.g160828_springboot.entity.Person"> update person set pname =#{pname}, page =#{page} where pid=#{pid} </update> </mapper>---------------------------------------------------------------------------------------- 7.最后，就是我的controller类：
@Controller public class PersonController { @Autowired private IPersonDao iPersonDao; @RequestMapping("hello") public String hello(){ System.out.println("你好"); return "second"; } @ResponseBody @RequestMapping("getall") public Map<String, Object> getall() { System.out.println("来拿数据了"); Map<String,Object> map=new HashMap<String, Object>(); map.put("source",iPersonDao.getall()); map.put("size",iPersonDao.getall().size()); return map; } @ResponseBody @RequestMapping("delperson") public String delperson(HttpServletRequest request){ //得到传过来的参数： int pid= Integer.parseInt(request.getParameter("pid")); System.out.println("id是："+pid); //删除： iPersonDao.delperson(pid); return "1"; } @ResponseBody @RequestMapping("updateperson") public String updateperson(HttpServletRequest request){ //得到传过来的字符串： String str=request.getParameter("str"); System.out.println("拿到的东西是："+str); //将字符串转为对象： Person person=JSON.parseObject(str,Person.class); //修改： iPersonDao.updateperson(person); return "success"; } @ResponseBody @RequestMapping("addperson") public String add(HttpServletRequest request){ //得到传过来的字符串： String str=request.getParameter("str"); System.out.println("拿到的东西是："+str); //将字符串转为对象： Person person=JSON.parseObject(str,Person.class); //修改： iPersonDao.add(person); return "success"; } }------------------------------------------------------------------------------------------
8.之后就是我的前台代码，用vue.js实现CRUD
至于vue.js中就不多说了，都是一些代码操作，只要会js的都能看得懂的
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2018/1/20 0020 Time: 12:09 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!-- 引入bootstrap样式 --> <link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet"> <html> <head> <title>Title</title> <style> .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); display: table; transition: opacity .3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-Container { width: 500px; margin: 0 auto; height:400px; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .33); transition: all .3s ease; font-family: Helvetica, Arial, sans-serif; } .modal-body { padding: 20px 0; height:100px; } .model-footer { padding-top: 120px; } .modal-default-button { text-align: center; } .modal-enter { opacity: 0; } .modal-leave-active { opacity: 0; } .modal-enter .modal-container, .modal-leave-active .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); } label { width:50px; } #pname,#pid,#page { width:300px; } .modal-footer { border:0; } </style> </head> <body> <div id="app"> <div><span>搜索</span><input type="text" v-model="search.key"></div> <div> <span>添加</span> <button class="btn btn-primary" @click="add">新增</button> </div> <table class="table table-bordered table-hover"> <thead> <tr> <td>姓名</td> <td>年纪</td> <td>ID</td> <td>操作</td> </tr> </thead> <tbody> <tr v-for="(person,index) in people"> <td>{{person.pname}}</td> <td :style="person.age>30?'color:red':''">{{person.page}}</td> <td>{{person.pid}}</td> <td> <button class="btn btn-danger" @click="del(index,person.pid)">删除</button> <button class="btn btn-primary" @click="openTagModalCheck(person)">查看</button> <button class="btn btn-primary" @click="openTagModalUpdate(person, index)">编辑</button> </td> </tr> </tbody> </table> <modal-check v-if="showModalCheck" @close="showModalCheck = false" :my-tag-check-l="selectTagCheck"></modal-check> <modal-update v-if="showModalUpdate" @close="showModalUpdate = false" @update="update()" :my-tag-update-r="selectTagUpdate"></modal-update> <modal-add v-if="showModalAdd" @close="showModalAdd = false" @addperson="addperson()" :my-tag-add-l="selectTagAdd"></modal-add> </div> <!--model的body的部分---------查看-------> <script type="text/x-template" id="modal-template-check"> <transition name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header"> 信息查看 </slot> </div> <div class="modal-body"> <slot name="body"> <div class="form-group"> <label class="col-sm-3 control-label">姓名</label> <div class="col-sm-8"> <input type="text" name="pname" class="form-control" v-model="myTagCheckL.pname" disabled> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">年纪</label> <div class="col-sm-8"> <input type="text" name="page" class="form-control" v-model="myTagCheckL.page" disabled> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">id</label> <div class="col-sm-8"> <input type="text" name="pid" class="form-control" v-model="myTagCheckL.pid" disabled> </div> </div> </slot> </div> <div class="modal-footer"> <button class="modal-default-button btn btn-primary" @click="$emit('close')"> 关闭 </button> </div> </div> </div> </div> </transition> </script> <!--model的body的部分---------编辑-------> <script type="text/x-template" id="modal-template-update"> <transition name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header"> 信息修改 </slot> </div> <div class="modal-body"> <slot name="body"> <div class="form-group"> <label class="col-sm-3 control-label">姓名</label> <div class="col-sm-8"> <input type="text" name="pname" class="form-control" v-model="myTagUpdateR.pname"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">年纪</label> <div class="col-sm-8"> <input type="text" name="page" class="form-control" v-model="myTagUpdateR.page"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">id</label> <div class="col-sm-8"> <input type="text" name="pid" class="form-control" v-model="myTagUpdateR.pid"> </div> </div> </slot> </div> <div class="modal-footer"> <button class=" btn btn-primary" @click="$emit('update')" :msg = 'myTagUpdateR'>提交 </button> <button class="modal-default-button btn btn-primary" @click="$emit('close')">放弃</button> </div> </div> </div> </div> </transition> </script> <!--model的body的部分---------添加-------> <script type="text/x-template" id="modal-template-add"> <transition name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header"> 信息添加 </slot> </div> <div class="modal-body"> <slot name="body"> <div class="form-group"> <label class="col-sm-3 control-label">姓名</label> <div class="col-sm-8"> <input type="text" name="pname" class="form-control" id="addpname" > </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">年纪</label> <div class="col-sm-8"> <input type="text" name="page" class="form-control" id="addpage"> </div> </div> </slot> </div> <div class="modal-footer"> <button class=" btn btn-primary" @click="$emit('addperson')" >提交 </button> <button class="modal-default-button btn btn-primary" @click="$emit('close')">放弃</button> </div> </div> </div> </div> </transition> </script> <script type="text/javascript" src="../plugs/jquery/jquery.min.js" ></script> <script type="text/javascript" src="../plugs/bootstrap/js/bootstrap.min.js" ></script> <script type="text/javascript" src="../plugs/js/vue.min.js" ></script> <script> var vm = new Vue({ el:'#app', data:{ showModalUpdate: false, showModalCheck: false, selectTagCheck:null, selectTagUpdate:null, showModalAdd:false, selectTagAdd:null, people:null, search:{ key:'' }, newPerson:{ name:'阿三', sex:'男', age:50 }, query_data:function(){ var _this=this; $.ajax({ type:"post", dataType:'json', url:"/getall.action", data:_this.param, success:function(data){ _this.people=data.source; } }); }, cache:{ index:null, person:{}, }, }, methods:{ //新增 add:function(){ //打开模态框的要求 this.showModalAdd= true; this.selectTagAdd = null; //避免重复添加,重置新的默认对象 // this.newPerson = {name:'阿三',sex:'男',age:50}; }, //删除 del:function(index,pid){ var isok; //接收到pid，然后删除： $.ajax({ type:"post", dataType:'json', url:"/delperson.action?pid="+pid, success:function(data){ } }); this.people.splice(index,1); //console.info(this.people) //为数组 }, //查看--打开model openTagModalCheck:function(tag){ //console.info(tag) //打开模态框的要求 this.showModalCheck = true; this.selectTagCheck = tag; }, //编辑--打开model openTagModalUpdate:function(tag,index){ //console.info(tag) //打开模态框的要求 this.showModalUpdate = true; var cache = Object.assign({},tag); this.$set(this.cache,'person',cache); this.$set(this.cache,'index',index); this.selectTagUpdate = cache; }, //编辑model---提交 update:function(){ var boolean=false; console.info(111) var index = this.cache.index; var person = this.cache.person; //将修改后的对象转为字符串，传如后台： var str=JSON.stringify(person); console.info(str); $.ajax({ type:"POST" , url:"/updateperson.action", data:"str="+str, success:function(msg){ console.info(msg); } }); this.$set(this.people, index, person); this.showModalUpdate = false; }, //添加model---提交 addperson:function(){ console.info(222) var addpname=$('#addpname').val(); var addpage=$('#addpage').val(); //实例化一个对象： var person={"pname":addpname,"page":addpage}; //将修改后的对象转为字符串，传如后台： var str=JSON.stringify(person); console.info(str); $.ajax({ type:"POST" , url:"/addperson.action", data:"str="+str, success:function(msg){ console.info(msg); } }); this.people.push(person); this.showModalAdd = false; } }, components:{ 'modal-check':{ props: ['myTagCheckL'], template: '#modal-template-check' }, 'modal-add':{ props: ['myTagAddL'], template: '#modal-template-add' }, 'modal-update':{ props: ['myTagUpdateR'], template: '#modal-template-update' } } }) vm.query_data(); </script> </body> </html>
-----------------------------------------------------------------------------------------------
最后，注意一点，在springbootApplication里面
这一个：@MapperScan("com.desert.g160828_springboot.dao")一定要写，意思就是扫描你项目中的dao方法，如果不写，那么你就访问不了数据层
@SpringBootApplication @MapperScan("com.desert.g160828_springboot.dao") public class G160828SpringbootApplication { public static void main(String[] args) { SpringApplication.run(G160828SpringbootApplication.class, args); } }
扫一扫
6225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
