spirngboot+mysql+vue.js实现CRUD

第一步，首先就是将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.0modelVersion>

   <groupId>com.desertgroupId>
   <artifactId>g160828_springbootartifactId>
   <version>0.0.1-SNAPSHOTversion>
   <packaging>jarpackaging>

   <name>g160828_springbootname>
   <description>Demo project for Spring Bootdescription>

   <parent>
      <groupId>org.springframework.bootgroupId>
      <artifactId>spring-boot-starter-parentartifactId>
      <version>1.5.9.RELEASEversion>
      <relativePath/> 
   parent>

   <properties>
      <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
      <project.reporting.outputEncoding>UTF-8project.reporting.outputEncoding>
      <java.version>1.8java.version>
   properties>

   <dependencies>
      <dependency>
         <groupId>org.springframework.bootgroupId>
         <artifactId>spring-boot-starter-jdbcartifactId>
      dependency>
      <dependency>
         <groupId>org.mybatis.spring.bootgroupId>
         <artifactId>mybatis-spring-boot-starterartifactId>
         <version>1.3.1version>
      dependency>
      <dependency>
         <groupId>org.springframework.bootgroupId>
         <artifactId>spring-boot-starter-webartifactId>
      dependency>

      <dependency>
         <groupId>mysqlgroupId>
         <artifactId>mysql-connector-javaartifactId>
         <scope>runtimescope>
      dependency>
      <dependency>
         <groupId>org.springframework.bootgroupId>
         <artifactId>spring-boot-starter-testartifactId>
         <scope>testscope>
      dependency>


      
      <dependency>
         <groupId>javax.servletgroupId>
         <artifactId>javax.servlet-apiartifactId>
         <scope>providedscope>
      dependency>

      <dependency>
         <groupId>javax.servletgroupId>
         <artifactId>jstlartifactId>
      dependency>

      
      <dependency>
         <groupId>org.apache.tomcat.embedgroupId>
         <artifactId>tomcat-embed-jasperartifactId>
      dependency>

      <dependency>
         <groupId>org.eclipse.jdt.core.compilergroupId>
         <artifactId>ecjartifactId>
         <version>4.6.1version>
         <scope>providedscope>
      dependency>

      
      <dependency>
         <groupId>com.alibabagroupId>
         <artifactId>fastjsonartifactId>
         <version>1.2.30version>
      dependency>

   dependencies>

   <build>

      
      <resources>
         
         <resource>
            
            <directory>src/main/webappdirectory>
            
            <targetPath>META-INF/resourcestargetPath>
            <includes>
               <include>**/**include>
            includes>
         resource>

      resources>

      <plugins>
         <plugin>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-maven-pluginartifactId>
         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

  mvc:
    view:
      prefix: /WEB-INF/
      suffix: .jsp

mybatis:
  mapper-locations: mapping/*.xml

--------------------------------------------------------

6.然后，再看java文件夹下面的类

首先，我的实体类 Person:

然后，再是我的IPersonDao接口的里面一些方法：

public interface IPersonDao {

    public void add(Person person);

    public List getall();

    public void delperson(int pid);

    public void updateperson(Person person);

}

再者，就是我mapping文件夹下面的一些xml信息：

xml version="1.0" encoding="UTF-8" ?>
 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 getall() {

        System.out.println("来拿数据了");

        Map map=new HashMap();
        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" %>


<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet">
<html>
<head>

    <title>Titletitle>
<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>IDtd>
            <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>




<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">idlabel>
                                <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>


<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">idlabel>
                                <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>




<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);
   }
}