小工具      在线工具  汉语词典  css  js  c++  java

用最基本的步骤实现java后端管理系统

技术栈:
后端:

  1. java基础知识
  2. Servlet相关知识
  3. jsp相关知识
  4. jdbc和mybatis框架相关知识
  5. Maven项目管理和junit单元测试的相关知识
  6. 数据库、sql语句

前端:

  1. html+css+js
  2. 阿贾克斯
  3. Vue 基础知识
  4. 元素用户界面的使用

项目展示:
在这里插入图片描述

在这里插入图片描述

前端布局并静态填充

只需通过cdn导入element ui的相关依赖,并复制element官网的container容器的实例即可:

<script src="../js/vue.js"></script>

在这里插入图片描述
对上面的内容做修改改为自己需要的界面,包括css样式。
在这里插入图片描述
将此页面作为主界面,vue的组件原理spa特性导航只需要加载相应的组件即可。注意编写界面后是没有导航的我们需要引入vue组件解析和路由的依赖:

<!--单文件vue组件解析器-->
    <script src="https://unpkg.com/http-vue-loader"></script>
    <!--vue路由-->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

导入该依赖后就能识别vue组件,加载组件路由导航了,当然还需要node环境,注意安装node包管理在你的目录中要有下图上这个就可以了:
在这里插入图片描述
编写vue组件实现导航(每个组件的结构是相同的内容填充element的组件即可)以其中一个组件为例:

<template>
  <div>      <!--script部分会自动绑定div不用设id绑定,只能有一个顶级div-->
    <!--表单-->
    <el-row>
      <el-col :span="20">
        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="种类">
              <el-select v-model="formInline.type" placeholder="请选择种类">
                <el-option label="办公家具" value="办公家具"></el-option>
                <el-option label="客厅家具" value="客厅家具"></el-option>
                <el-option label="卧室家具" value="卧室家具"></el-option>
                <el-option label="书房家具" value="书房家具"></el-option>
                <el-option label="餐厅家具" value="餐厅家具"></el-option>
                <el-option label="卫浴家具" value="卫浴家具"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="材质">
              <el-select v-model="formInline.materials" placeholder="请选择材质">
                <el-option label="红椿" value="红椿"></el-option>
                <el-option label="柚木" value="柚木"></el-option>
                <el-option label="榉木" value="榉木"></el-option>
                <el-option label="枫木" value="枫木"></el-option>
                <el-option label="橡木" value="橡木"></el-option>
                <el-option label="水曲柳" value="水曲柳"></el-option>
                <el-option label="榆木" value="榆木"></el-option>
                <el-option label="杨木" value="杨木"></el-option>
                <el-option label="松木" value="松木"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="空间">
              <el-select v-model="formInline.space" placeholder="请选择空间">
                <el-option label="客厅" value="客厅"></el-option>
                <el-option label="卧室" value="卧室"></el-option>
                <el-option label="厨房" value="厨房"></el-option>
                <el-option label="餐厅" value="餐厅"></el-option>
                <el-option label="过道" value="过道"></el-option>
                <el-option label="书房" value="书房"></el-option>
                <el-option label="卫生间" value="卫生间"></el-option>
                <el-option label="门厅" value="门厅"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-on:click="searchFunction">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <!--添加按钮-->
      <el-col :span="4">
        <div>
          <el-button type="primary" plain   style="float: right" v-on:click="dialogVisible = true">添加</el-button>
        </div>
      </el-col>
      <!--添加表单-->
      <el-dialog
          title="添加产品"
          :visible.sync="dialogVisible"
          width="30%">
        <el-form :model="form" label-width="80px">
          <el-form-item label="图片">
            <el-input v-model="form.picture"></el-input>
          </el-form-item>
          <el-form-item label="型号">
            <el-input v-model="form.model"></el-input>
          </el-form-item>
          <el-form-item label="种类">
            <el-select v-model="form.type" placeholder="请选择种类">
              <el-option label="办公家具" value="办公家具"></el-option>
              <el-option label="客厅家具" value="客厅家具"></el-option>
              <el-option label="卧室家具" value="卧室家具"></el-option>
              <el-option label="书房家具" value="书房家具"></el-option>
              <el-option label="餐厅家具" value="餐厅家具"></el-option>
              <el-option label="卫浴家具" value="卫浴家具"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="材质"><!--榉木、柚木、枫木、橡木、红椿、水曲柳、榆木、杨木、松木-->
            <el-select v-model="form.materials" placeholder="请选择材质">
              <el-option label="红椿" value="红椿"></el-option>
              <el-option label="柚木" value="柚木"></el-option>
              <el-option label="榉木" value="榉木"></el-option>
              <el-option label="枫木" value="枫木"></el-option>
              <el-option label="橡木" value="橡木"></el-option>
              <el-option label="水曲柳" value="水曲柳"></el-option>
              <el-option label="榆木" value="榆木"></el-option>
              <el-option label="杨木" value="杨木"></el-option>
              <el-option label="松木" value="松木"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="规格">
            <el-input v-model="form.size"></el-input>
          </el-form-item>
          <el-form-item label="空间">
            <el-select v-model="form.space" placeholder="请选择空间">
              <el-option label="客厅" value="客厅"></el-option>
              <el-option label="卧室" value="卧室"></el-option>
              <el-option label="厨房" value="厨房"></el-option>
              <el-option label="餐厅" value="餐厅"></el-option>
              <el-option label="过道" value="过道"></el-option>
              <el-option label="书房" value="书房"></el-option>
              <el-option label="卫生间" value="卫生间"></el-option>
              <el-option label="门厅" value="门厅"></el-option>
            </el-select>
          </el-form-item>




        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addProduct">提 交</el-button>
            </span>
      </el-dialog>
    </el-row>



    <!--表格传入的是一个json,prop是json的key-->
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="picture"
          label="图片"
          width="180">
      </el-table-column>


      <el-table-column
          prop="model"
          label="型号"
          width="280">
      </el-table-column>
      <el-table-column
          prop="type"
          label="种类"
          width="180">
      </el-table-column>
      <el-table-column
          prop="materials"
          label="材料">
      </el-table-column>
      <el-table-column
          prop="size"
          label="规格">
      </el-table-column>
      <el-table-column
          prop="space"
          label="空间">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
        <el-button type="primary" v-on:click="updateProduct(scope.row)">修改</el-button>
        <el-button type="danger" v-on:click="deleteById(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--修改的表单需要获取默认值value:是input中预先放置的文字,当鼠标点击之后依然存在,是值的一部分。
placeholder:是input中输入位置的默认显示的文字,鼠标点击后仍旧显示,但不属于值,类似于背景。-->
    <el-dialog
        title="编辑产品"
        :visible.sync="dialogVisibleone"
        width="30%">
      <el-form :model="formone" label-width="80px">
        <el-form-item label="图片">
          <el-input v-model="formone.picture" :value=formone.picture></el-input>
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="formone.model"  :value=formone.model></el-input>
        </el-form-item>
        <el-form-item label="种类">
          <el-select v-model="formone.type" :value=formone.type>
            <el-option label="办公家具" value="办公家具"></el-option>
            <el-option label="客厅家具" value="客厅家具"></el-option>
            <el-option label="卧室家具" value="卧室家具"></el-option>
            <el-option label="书房家具" value="书房家具"></el-option>
            <el-option label="餐厅家具" value="餐厅家具"></el-option>
            <el-option label="卫浴家具" value="卫浴家具"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="材质"><!--榉木、柚木、枫木、橡木、红椿、水曲柳、榆木、杨木、松木-->
          <el-select v-model="formone.materials" :value=formone.materials>
            <el-option label="红椿" value="红椿" ></el-option>
            <el-option label="柚木" value="柚木"></el-option>
            <el-option label="榉木" value="榉木"></el-option>
            <el-option label="枫木" value="枫木"></el-option>
            <el-option label="橡木" value="橡木"></el-option>
            <el-option label="水曲柳" value="水曲柳"></el-option>
            <el-option label="榆木" value="榆木"></el-option>
            <el-option label="杨木" value="杨木"></el-option>
            <el-option label="松木" value="松木"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="formone.size" :value=formone.size></el-input>
        </el-form-item>
        <el-form-item label="空间">
          <el-select v-model="formone.space" :value=formone.space>
            <el-option label="客厅" value="客厅"></el-option>
            <el-option label="卧室" value="卧室"></el-option>
            <el-option label="厨房" value="厨房"></el-option>
            <el-option label="餐厅" value="餐厅"></el-option>
            <el-option label="过道" value="过道"></el-option>
            <el-option label="书房" value="书房"></el-option>
            <el-option label="卫生间" value="卫生间"></el-option>
            <el-option label="门厅" value="门厅"></el-option>
          </el-select>
        </el-form-item>




      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleone = false">取 消</el-button>
                <el-button type="primary" v-on:click="updateProductCommit">提 交</el-button>
            </span>
    </el-dialog>



    <!--分页-->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="pageCount.page"
        @current-change="handleCurrentChange"
        :current-page="currentPage4">
    </el-pagination>
  </div>
</template>

<script>
module.exports={
    

  data:function (){
    
    return{
    
      prop:{
    },
      //搜索
      formInline: {
    
        type: '',
        materials: '',
        space:''
      },
      //设置添加表单不可见
      dialogVisible: false,
      dialogVisibleone: false,
      //添加表单的数据
      form: {
    
        picture: '',
        model:'',
        type:'',
        materials:'',
        size:'',
        space:''

      },
      //更新表单
      formone: {
    
        id:'',
        picture: '',
        model:'',
        type:'',
        materials:'',
        size:'',
        space:''

      },
      //表格数据
      tableData: {
    
        id:'',
        picture:'',
        model:'',
        type:'',
        materials:'',
        size:'',
        space:''

      },
      pageCount:{
    
        page:''
      },
      currentPage4: 1

    }

  }

}
</script>

<style scoped>

.el-table .warning-row {
    
  background: oldlace;
}

.el-table .success-row {
    
  background: #f0f9eb;
}

</style>

使用的是node环境,所以使用的是module.exports,而不是export default。里面的数据是先静态填充的。例子中删除了,自己填写,相关功能后面实现。写完vue组件后,会回到主页面注册组件并编写路由。如下

<script>
    //注册路由
    const  Display=httpVueLoader("../components/first.vue");
    const routes = [
        {
    
            path: '/',
            component: Display
        },
    ]

    const router = new VueRouter({
    
        routes
    })

    new Vue({
    
        el:'#app',
        router,

        data:{
    
            menu:'欢迎!',
        },
        //监听路由变化
        watch:{
    
            $route(to){
    
                //console.log(to.path);
                if (to.path ==='/'){
    
                    this.menu='首页'
                }
            }
        }

    });

在主页面的脚本中写入上述代码,然后显示,并在导航中添加router-link标签:

//关联路由
<router-link to="/"><el-menu-item index="2" >
      <i class="el-icon-menu"></i><span slot="title" style="width:60px">首页</span>
</el-menu-item></router-link>

//组件显示
<el-main>
   <!--main-->
    <router-view></router-view>  //这里会动态变化加载不同的组件
</el-main>

其他导航和组件都同理,当所有的组件都编写完后前端就写好了。当然,你也可以使用jsp来代替vue。您还可以使用标签来连接每个页面。

后端接口编写

Maven项目管理构建后端web框架,在pom.xml导入相关的依赖,看之前的文章,后端采用mvc架构。
在这里插入图片描述
conyroller中是各种数据处理色servlet,factory是工具包,mapper是映射类,model是ORM模型。这些之前的文章都有,不懂可以去看。

Factory是mybatis连接数据库的工具类,进行了封装避免每次都要写重复步骤。
package factory;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class SqlsessionFactory {
    
    private static SqlSessionFactory sqlSessionFactory;
    static {
    
        //mybatis框架都在xml配置文件中加载配置文件
        //从 XML 文件中构建 SqlSessionFactory 的实例
        String resource = "mybatis-config.xml";
        InputStream inputStream = null;

        try {
    
            inputStream = Resources.getResourceAsStream(resource);
        } catch (IOException e) {
    
            e.printStackTrace();
        }

         sqlSessionFactory= new SqlSessionFactoryBuilder().build(inputStream);
    }

    public SqlSessionFactory SqlsessionFactory(){
    

        return sqlSessionFactory;
    }

}

model是java bean的ORM模型。对于mapper代理映射,请参见上一篇文章。每个Mapper对应一个数据库表来实现单独的操作。上一篇文章已经讲了如何进行数据库操作。这里我们主要关注前后端交互的细节。

在每个vue组件中重写methods对象,使用axios发送请求,axios的cdn导入只在主界面导入就可以了。
之前已经写好了vue组件没有写方法,接下来看写好了方法后的组件:

<template>
  <div>      <!--script部分会自动绑定div不用设id绑定,只能有一个顶级div-->
    <!--表单-->
    <el-row>
      <el-col :span="20">
        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="种类">
              <el-select v-model="formInline.type" placeholder="请选择种类">
                <el-option label="办公家具" value="办公家具"></el-option>
                <el-option label="客厅家具" value="客厅家具"></el-option>
                <el-option label="卧室家具" value="卧室家具"></el-option>
                <el-option label="书房家具" value="书房家具"></el-option>
                <el-option label="餐厅家具" value="餐厅家具"></el-option>
                <el-option label="卫浴家具" value="卫浴家具"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="材质">
              <el-select v-model="formInline.materials" placeholder="请选择材质">
                <el-option label="红椿" value="红椿"></el-option>
                <el-option label="柚木" value="柚木"></el-option>
                <el-option label="榉木" value="榉木"></el-option>
                <el-option label="枫木" value="枫木"></el-option>
                <el-option label="橡木" value="橡木"></el-option>
                <el-option label="水曲柳" value="水曲柳"></el-option>
                <el-option label="榆木" value="榆木"></el-option>
                <el-option label="杨木" value="杨木"></el-option>
                <el-option label="松木" value="松木"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="空间">
              <el-select v-model="formInline.space" placeholder="请选择空间">
                <el-option label="客厅" value="客厅"></el-option>
                <el-option label="卧室" value="卧室"></el-option>
                <el-option label="厨房" value="厨房"></el-option>
                <el-option label="餐厅" value="餐厅"></el-option>
                <el-option label="过道" value="过道"></el-option>
                <el-option label="书房" value="书房"></el-option>
                <el-option label="卫生间" value="卫生间"></el-option>
                <el-option label="门厅" value="门厅"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-on:click="searchFunction">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <!--添加按钮-->
      <el-col :span="4">
        <div>
          <el-button type="primary" plain   style="float: right" v-on:click="dialogVisible = true">添加</el-button>
        </div>
      </el-col>
      <!--添加表单-->
      <el-dialog
          title="添加产品"
          :visible.sync="dialogVisible"
          width="30%">
        <el-form :model="form" label-width="80px">
          <el-form-item label="图片">
            <el-input v-model="form.picture"></el-input>
          </el-form-item>
          <el-form-item label="型号">
            <el-input v-model="form.model"></el-input>
          </el-form-item>
          <el-form-item label="种类">
            <el-select v-model="form.type" placeholder="请选择种类">
              <el-option label="办公家具" value="办公家具"></el-option>
              <el-option label="客厅家具" value="客厅家具"></el-option>
              <el-option label="卧室家具" value="卧室家具"></el-option>
              <el-option label="书房家具" value="书房家具"></el-option>
              <el-option label="餐厅家具" value="餐厅家具"></el-option>
              <el-option label="卫浴家具" value="卫浴家具"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="材质"><!--榉木、柚木、枫木、橡木、红椿、水曲柳、榆木、杨木、松木-->
            <el-select v-model="form.materials" placeholder="请选择材质">
              <el-option label="红椿" value="红椿"></el-option>
              <el-option label="柚木" value="柚木"></el-option>
              <el-option label="榉木" value="榉木"></el-option>
              <el-option label="枫木" value="枫木"></el-option>
              <el-option label="橡木" value="橡木"></el-option>
              <el-option label="水曲柳" value="水曲柳"></el-option>
              <el-option label="榆木" value="榆木"></el-option>
              <el-option label="杨木" value="杨木"></el-option>
              <el-option label="松木" value="松木"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="规格">
            <el-input v-model="form.size"></el-input>
          </el-form-item>
          <el-form-item label="空间">
            <el-select v-model="form.space" placeholder="请选择空间">
              <el-option label="客厅" value="客厅"></el-option>
              <el-option label="卧室" value="卧室"></el-option>
              <el-option label="厨房" value="厨房"></el-option>
              <el-option label="餐厅" value="餐厅"></el-option>
              <el-option label="过道" value="过道"></el-option>
              <el-option label="书房" value="书房"></el-option>
              <el-option label="卫生间" value="卫生间"></el-option>
              <el-option label="门厅" value="门厅"></el-option>
            </el-select>
          </el-form-item>




        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addProduct">提 交</el-button>
            </span>
      </el-dialog>
    </el-row>



    <!--表格传入的是一个json,prop是json的key-->
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="picture"
          label="图片"
          width="180">
      </el-table-column>


      <el-table-column
          prop="model"
          label="型号"
          width="280">
      </el-table-column>
      <el-table-column
          prop="type"
          label="种类"
          width="180">
      </el-table-column>
      <el-table-column
          prop="materials"
          label="材料">
      </el-table-column>
      <el-table-column
          prop="size"
          label="规格">
      </el-table-column>
      <el-table-column
          prop="space"
          label="空间">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
        <el-button type="primary" v-on:click="updateProduct(scope.row)">修改</el-button>
        <el-button type="danger" v-on:click="deleteById(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--修改的表单需要获取默认值value:是input中预先放置的文字,当鼠标点击之后依然存在,是值的一部分。
placeholder:是input中输入位置的默认显示的文字,鼠标点击后仍旧显示,但不属于值,类似于背景。-->
    <el-dialog
        title="编辑产品"
        :visible.sync="dialogVisibleone"
        width="30%">
      <el-form :model="formone" label-width="80px">
        <el-form-item label="图片">
          <el-input v-model="formone.picture" :value=formone.picture></el-input>
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="formone.model"  :value=formone.model></el-input>
        </el-form-item>
        <el-form-item label="种类">
          <el-select v-model="formone.type" :value=formone.type>
            <el-option label="办公家具" value="办公家具"></el-option>
            <el-option label="客厅家具" value="客厅家具"></el-option>
            <el-option label="卧室家具" value="卧室家具"></el-option>
            <el-option label="书房家具" value="书房家具"></el-option>
            <el-option label="餐厅家具" value="餐厅家具"></el-option>
            <el-option label="卫浴家具" value="卫浴家具"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="材质"><!--榉木、柚木、枫木、橡木、红椿、水曲柳、榆木、杨木、松木-->
          <el-select v-model="formone.materials" :value=formone.materials>
            <el-option label="红椿" value="红椿" ></el-option>
            <el-option label="柚木" value="柚木"></el-option>
            <el-option label="榉木" value="榉木"></el-option>
            <el-option label="枫木" value="枫木"></el-option>
            <el-option label="橡木" value="橡木"></el-option>
            <el-option label="水曲柳" value="水曲柳"></el-option>
            <el-option label="榆木" value="榆木"></el-option>
            <el-option label="杨木" value="杨木"></el-option>
            <el-option label="松木" value="松木"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="formone.size" :value=formone.size></el-input>
        </el-form-item>
        <el-form-item label="空间">
          <el-select v-model="formone.space" :value=formone.space>
            <el-option label="客厅" value="客厅"></el-option>
            <el-option label="卧室" value="卧室"></el-option>
            <el-option label="厨房" value="厨房"></el-option>
            <el-option label="餐厅" value="餐厅"></el-option>
            <el-option label="过道" value="过道"></el-option>
            <el-option label="书房" value="书房"></el-option>
            <el-option label="卫生间" value="卫生间"></el-option>
            <el-option label="门厅" value="门厅"></el-option>
          </el-select>
        </el-form-item>




      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleone = false">取 消</el-button>
                <el-button type="primary" v-on:click="updateProductCommit">提 交</el-button>
            </span>
    </el-dialog>



    <!--分页-->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="pageCount.page"
        @current-change="handleCurrentChange"
        :current-page="currentPage4">
    </el-pagination>
  </div>
</template>

<script>
module.exports={
    

  data:function (){
    
    return{
    
      prop:{
    },
      //搜索
      formInline: {
    
        type: '',
        materials: '',
        space:''
      },
      //设置添加表单不可见
      dialogVisible: false,
      dialogVisibleone: false,
      //添加表单的数据
      form: {
    
        picture: '',
        model:'',
        type:'',
        materials:'',
        size:'',
        space:''

      },
      //更新表单
      formone: {
    
        id:'',
        picture: '',
        model:'',
        type:'',
        materials:'',
        size:'',
        space:''

      },
      //表格数据
      tableData: {
    
        id:'',
        picture:'',
        model:'',
        type:'',
        materials:'',
        size:'',
        space:''

      },
      pageCount:{
    
        page:''
      },
      currentPage4: 1

    }

  },
  methods:{
    
    //添加成功的信息提示
    addsecess() {
    
      this.$message({
    
        showClose: true,
        message: '恭喜你,添加成功!',
        type: 'success'
      });
    },
    //删除成功提示
    deleteSuccess() {
    
      this.$message({
    
        showClose: true,
        message: '恭喜你,删除成功!',
        type: 'success'
      });
    },
    //更新成功提示
    updateSuccess() {
    
      this.$message({
    
        showClose: true,
        message: '恭喜你,更新成功!',
        type: 'success'
      });
    },
    //删除产品有提示
    deleteById(row){
    
        var this_=this;
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
    
          axios({
    
            method:"post",
            url:"http://localhost/senyuanyijia_war_exploded/DeleteProductServlet",
            data:{
    id:row.id}
          }).then(function (response){
      //参数对应servlet的httpservletresponse
            if(response.data =="success"){
    
              this_.deleteSuccess();

            }else {
    
              alert("ERROR");
            }
          })

        }).catch(() => {
    
          this.$message({
    
            type: 'info',
            message: '已取消删除'
          });
        });
    },

    //添加产品
    addProduct(){
    
      var this_=this;
      //alert("添加数据!");
      axios({
    
        method:"post",
        url:"http://localhost/senyuanyijia_war_exploded/AddProductServlet",
        data:this_.form
      }).then(function (response){
      //参数对应servlet的httpservletresponse
        if(response.data =="SUCCESS"){
    
          this_.dialogVisible = false;
          this_.addsecess();
        }else {
    
          alert("ERROR");
          this_.dialogVisible = false;
        }
      })
    },

    //编辑产品后回显数据
    updateProduct(row){
    
      var this_=this;
      axios({
    
        method:"post",
        url:"http://localhost/senyuanyijia_war_exploded/UpdateProductServlet",
        data:{
    id:row.id}
      }).then(function (response){
    
        this_.formone=response.data;
        this_.dialogVisibleone=true;
      })
    },

    //对回显的数据修改后在更新产品
    updateProductCommit(){
    

      //alert("nihao");

      var this_=this;
      axios({
    
        method:"post",
        url:"http://localhost/senyuanyijia_war_exploded/UpdateProductedServlet",
        data:this_.formone
      }).then(function (response){
    
        if(response.data == "success"){
    
          this_.dialogVisibleone=false;
          this_.updateSuccess();
        }
      })

    },

    //搜索栏
    searchFunction(){
    
      var this_=this;
      var obj=this.formInline;
      //console.log(this.formInline);
      /* {__ob__: Observer} materials: "" space: "" type: "餐厅家具 */
      //去除对象的空属性
      let _newPar = {
    };
		  	for (var key in obj) {
    
		    // 如果对象属性的值不为空,就保存该属性(如果属性的值为0,保存该属性。如果属性的值全部是空格,属于为空。)
		    	if ((obj[key] === 0 || obj[key]) && obj[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== '') {
    
		      // 保存属性
		      		_newPar[key] = obj[key];
		    	}
		  	}
      //console.log(_newPar);


      axios({
    
        method:"post",
        url:"http://localhost/senyuanyijia_war_exploded/SearchProductServlet",
        data:_newPar
      }).then(function (response){
    
        this_.tableData=response.data;
      })
    },
    //获取当前页码
    handleCurrentChange(val) {
    
      //console.log(`当前页: ${val}`);
      //console.log(val);
      var this_=this;
      axios({
    
        method:"get",
        url:"http://localhost/senyuanyijia_war_exploded/ProductPageServlet?index="+val,
      }).then(function (response){
    
        this_.tableData=response.data;
      })


    }


  },

  //钩子函数要在data外
  mounted(){
    
    //console.log('123');
    //alert('123')

    var this_=this;
    //界面加载完后自动执行
    axios({
    
      method:"get",
      url:"http://localhost/senyuanyijia_war_exploded/ProductServlet"
    }).then(function (response){
    
      this_.tableData=response.data;
    }) //then响应,servlet将数据用输出流写道servlet中,axios从servlet获取

    axios({
    
      method:"post",
      url:"http://localhost/senyuanyijia_war_exploded/ProductPageCountServlet"
    }).then(function (response){
    
      this_.pageCount=response.data;
    })


  },
}
</script>

<style scoped>

.el-table .warning-row {
    
  background: oldlace;
}

.el-table .success-row {
    
  background: #f0f9eb;
}

</style>

前端发送请求(Ajax):

//POST
axios({
    
        method:"post",
        url:"http://localhost/senyuanyijia_war_exploded/UpdateProductedServlet",
        data:this_.formone
      }).then(function (response){
    
        if(response.data == "success"){
    
          this_.dialogVisibleone=false;
          this_.updateSuccess();
        }
      })
//GET
axios({
    
        method:"get",
        url:"http://localhost/senyuanyijia_war_exploded/ProductPageServlet?index="+val,
      }).then(function (response){
    
        this_.tableData=response.data;
      })      

axios的核心,j通过Ajax将数据发送到对应的servlet,进行数据处理并操作数据库,和增删查改分不开。这里使用了vue框架,MVVM模型不需要写循环,判断等,如果使用jsp的数据自行考虑。将数据发送到对应的servlet
UpdateProductedServlet:

package controller;

import com.alibaba.fastjson.JSON;
import factory.SqlsessionFactory;
import mapper.ProductMapper;
import model.Product;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import javax.servlet.*;
import javax.servlet.annotation.*;
import javax.servlet.http.*;
import java.io.BufferedReader;
import java.io.IOException;

@WebServlet(name = "UpdateProductedServlet", value = "/UpdateProductedServlet")
public class UpdateProductedServlet extends HttpServlet {
    
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    

        request.setCharacterEncoding("UTF-8");
        BufferedReader reader=request.getReader();  //???
        String params=reader.readLine();

        Product product = JSON.parseObject(params,Product.class);

        SqlSessionFactory sqlSessionFactory=new SqlsessionFactory().SqlsessionFactory();
        SqlSession session=sqlSessionFactory.openSession();

        ProductMapper productMapper=session.getMapper(ProductMapper.class);

        productMapper.updateOneColumn(product);

        response.getWriter().write("success");

        session.commit();
        session.close();



    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
        this.doGet(request, response);
    }
}

产品页面Servlet:

package controller;

import com.alibaba.fastjson.JSON;
import factory.SqlsessionFactory;
import mapper.ProductMapper;
import model.Product;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import javax.servlet.*;
import javax.servlet.annotation.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.util.List;

@WebServlet("/ProductPageServlet")
public class ProductPageServlet extends HttpServlet {
    
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
        request.setCharacterEncoding("utf-8");
        int page=Integer.parseInt(request.getParameter("index"));
        //计算页面变化
        int newPage=(page-1)*10;
        SqlSessionFactory sqlSessionFactory=new SqlsessionFactory().SqlsessionFactory();
        SqlSession session=sqlSessionFactory.openSession();
        ProductMapper productMapper=session.getMapper(ProductMapper.class);

        List<Product> products =productMapper.selectTen(newPage);
        session.close();
        String stringjson= JSON.toJSONString(products);
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(stringjson);



    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
        this.doGet(request, response);
    }
}

上面演示了servlet在post和get发送数据后的处理。发布的是 request.getReader();获取的是 request.getParameter("index");另一个核心是JSON部分,是阿里巴巴的fastjson转换的数据类型,可以将不同类型的数据转换为json或者将json转换为其他数据类型;只需在 pom 文件中导入 fastjson 即可。最后是response.getWriter().write()方法,该方法将后端数据发送到前端(显示ProductPageServlet返回的数据):

在这里插入图片描述
后端将这些数据发送给前端,看前端如何接收的:

axios({
    
        method:"get",
        url:"http://localhost/senyuanyijia_war_exploded/ProductPageServlet?index="+val,
      }).then(function (response){
    
        this_.tableData=response.data;
      })    
// An highlighted block
var foo = 'bar';

在get方法中,将请求发送到对应的url地址。注意,get是从子地址栏传入的数据。 then方法处理返回的数据。 response.data是返回的数据。只需将其分配给vue的tableData即可。最主要的是对于数据类型转换,Vue的table默认是数组类型,不能返回其他类型。自己识别不同的类型。在 post 方法中,数据在数据元素中传递。注意数据类型。有时数据类型会出现错误,导致失败。

. . .

相关推荐

额外说明

SpringCloud集成演示

先上架构图: 上述所有微服务应用都放在两个项目里:spring-cloud-common,bank-all: spring-cloud-common 存放和业务无关的微服务,比如配置中心,服务注册中心,网关路由,链路数据中心等; bank-all 存放和

额外说明

在python中运行其他python

import os os.system("python D:\hello1.py") os.system("python D:\hello2.py") os.system("python D:\hello3.py") (python D:\hello1.

额外说明

Java 线程

Java 实例 - 查看线程是否存活 以下实例演示了如何通过继承 Thread 类并使用 isAlive() 方法来检测一个线程是否存活: public class TwoThreadAlive extends Thread { public v

额外说明

【题解】两数相加

题目描述 给你两个 非空 的链表,表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的,并且每个节点只能存储 一位 数字。 请你将两个数相加,并以相同形式返回一个表示和的链表。你可以假设除了数字 0 之外,这两个数都不会以 0 开头。 输入:l1

额外说明

云原生微服务治理:服务发现、负载均衡与熔断策略

文章目录 什么是云原生微服务治理? 服务发现 客户端发现 服务器端发现 负载均衡 Ribbon - 基于客户端的负载均衡 Nginx - 基于服务器的负载均衡 熔断策略 Hystrix - 熔断器模式 结论 -欢迎来到云计算技术应用专栏~云原生微服务治理

额外说明

java中数值类型计算时是多地址,变量值会变换

最近又在回头复习java基础,在运算符优先级中发现了自己理解的不足。 主要还是在自增和自减中有迷惑,今天的复习才发现,java中数值类型计算是多地址的,同一个变量的值可能在同一时刻并不相等 我们直接上代码看吧 package practice7; pub

额外说明

利用SciTE的导出功能保持代码语法着色效果

利用SciTE的导出功能保持代码语法着色效果   有些集成开发环境的代码,比如Eclipse和Visual Studio的代码拷贝到有道云笔记里,就失去了语法着色效果。(Intellij里的代码拷贝有道云笔记能保持语法着色效果,这一点蛮好的。)    

额外说明

前端(二十三)——轮询和长轮询

-博主:小猫娃来啦 -文章核心:实现客户端与服务器实时通信的技术手段 文章目录 前言 轮询技术 轮询的概念 轮询的实现原理 轮询的优缺点 轮询的使用场景 长轮询技术 长轮询的概念 长轮询的实现原理 长轮询的优缺点 长轮询的使用场景 轮询与长轮询的比较 示

额外说明

解决Windows出现找不到MSVP9DEC.dll文件的情况

其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或者损坏了,这时你只需下载这个MSVP9DEC.dll文件进行安装(前提是找到适合的版本),

额外说明

基于RPC协议的接口自动化测试可以用Python语言实现

文章来源:可以用Python语言实现基于RPC协议的接口自动化测试 基于RPC协议的接口自动化测试可以用Python语言实现。以下是实施步骤: 1.安装依赖库,如protobuf、grpc等。 2、编写.proto文件,定义接口参数和返回值。 3. 使用

ads via 小工具