对于今天老师留的作业小张与小红对话：
----------问这次小红的作业能不能写完？能不能不被老师挨批？而且功能一样不差？
CREATE TABLE `rikao_t_goods` (
`noid` int(11) NOT NULL AUTO_INCREMENT,
`goods_name` varchar(32) NOT NULL COMMENT '商品名称',
`price` decimal(10,2) DEFAULT NULL COMMENT '价格',
`weight` int(11) NOT NULL DEFAULT '0' COMMENT '重量',
`buy_date` datetime DEFAULT NULL COMMENT '购买时间',
PRIMARY KEY (`noid`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8mb4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="axios.min.js"></script>
<script src="vuejs-2.5.16.js"></script>
</head>
<body>
<h1>新增商品</h1>
<div id="app">
<p>
<el-input placeholder="请输入商品名称" v-model="gdzc.goods_name" clearable :style="{width:'400px'}"></el-input>
</p>
<p>
<el-input placeholder="请输入商品名称金额" v-model="gdzc.price" clearable :style="{width:'400px'}"></el-input>
</p>
<p>
<el-input placeholder="请输入商品重量" v-model="gdzc.weight" clearable :style="{width:'400px'}"></el-input>
</p>
<p>
<!-- <el-date-picker v-model="gdzc.buy_date" align="right" type="Date" placeholder="选择日期" :picker-options="{pickerOptions}"></el-date-picker> </el-date-picker> -->
<el-date-picker
:style="{width:'400px'}"
v-model="gdzc.buy_date"
type="datetime"
format="yyyy-MM-dd hh:mm"
value-format="yyyy-MM-dd hh:mm"
placeholder="请选择日期时间">
</el-date-picker>
</p>
<p>
<el-row>
<el-button type="primary" @click="tianjia()" plain>添加</el-button>
<el-button type="info" @click="liebiao()" plain>返回列表</el-button>
</el-row>
</p>
</el-input>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
gdzc:{},
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
};
},
methods:{
//添加
tianjia:function(){
let url = "http://localhost:8080/rikao13_goods/addGDZCPost.do";
let data1 = this.gdzc;
let option = {Headers:{'Content-type':'application/json'}}
axios.post(url,data1,option).then((rel)=>{
if(rel.data.code==0){
this.tishi=rel.data.msg;
location.href="listGDZC.html";
};
});
},
//返回列表
liebiao:function(){
location.href="listGDZC.html"
}
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="axios.min.js"></script>
<script src="vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<el-row style="height:400px;">
<template>
<el-button type="primary" @click="tianjia()" plain>返回添加</el-button>
<el-input placeholder="商品名称" v-model="goods_name" clearable :style="{width:'200px'}"></el-input>
<el-button type="primary" icon="el-icon-search" @click="listGDZC1()">搜索</el-button>
<!-- 列表 -->
<el-table :data="listGDZC1Show":class="{ 'alt': listGDZC.index%2==1}" style="width: 99%">
<el-table-column type="index" label="序号" width="180"></el-table-column>
<el-table-column prop="goods_name" label="商品名称" width="180"></el-table-column>
<el-table-column prop="price" label="商品金额"></el-table-column>
<el-table-column prop="weight" label="重量"></el-table-column>
<el-table-column prop="buy_date" label="购买时间"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<!-- 修改按钮 -->
<el-button type="text" @click="dialogFormVisible = true">
<el-button type="primary" icon="el-icon-edit" circle @click="selectNoid(scope.row)"></el-button>
</el-button>
<el-dialog title="编辑商品" :visible.sync="dialogFormVisible">
<el-form :model="form">
<p>
编辑商品名称
<input type="hidden" v-model="gdzc.noid">
<el-input placeholder="请输入商品名称" v-model="gdzc.goods_name" clearable :style="{width:'400px'}"></el-input>
</p>
<p>
编辑商品金额
<el-input placeholder="请输入商品金额" v-model="gdzc.price" clearable :style="{width:'400px'}"></el-input>
</p>
<p>
编辑商品重量
<el-input placeholder="请输入重量" v-model="gdzc.weight" clearable :style="{width:'400px'}"></el-input>
</p>
<p>
编辑商品时间
<el-date-picker
v-model="gdzc.buy_date"
:style="{width:'400px'}"
type="datetime"
format="yyyy-MM-dd hh:mm"
value-format="yyyy-MM-dd hh:mm"
placeholder="请选择日期时间">
</el-date-picker>
</p>
</el-form-item></el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false"><a @click="xiugai()">确 定</a></el-button>
</div>
</el-dialog>
<!-- 删除按钮 -->
<el-button @click="deleteGDZD(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-row>
<!-- 分页 -->
<el-row>
<el-button-group>
<a href="#" @click="prePageFirst">
<el-button type="warning">首页</el-button>
</a>
<a href="#" @click="prePage">
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
</a>
<span v-for="(item, index) in pageNum">
<a href="#" @click="toPage(index)" :class="{active: currentPage==index}">
<el-button type="primary" > {{ index+1 }}</el-button>
</a>
</span>
<a href="#" @click="nextPage">
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</a>
<a href="#" @click="prePageLast">
<el-button type="warning">末页</el-button>
</a>
</el-button-group>
</el-row>
<p style="margin-right: 30px;">
第<span>{{yeshu}}</span>/{{pageNum}}页
总条数：<span>{{zongtioashu}}</span>条记录
</p>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
QueryString = {
data: {},
initial: function () {
var aPairs, aTmp;
var queryString = new String(window.location.search);
queryString = queryString.substr(1, queryString.length); //remove "?"
aPairs = queryString.split("&");
for (var i = 0; i < aPairs.length; i++) {
aTmp = aPairs[i].split("=");
this.data[aTmp[0]] = aTmp[1];
}
},
getValue: function (key) {
return this.data[key];
}
}
QueryString.initial();
let aVal= QueryString.getValue('noid');
new Vue({
el: '#app',
data() {
return{
goods_name:null,
gdzc:{},
listGDZC:[],
pageSize:3,
currentPage:0,
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
}
},
computed:{
listGDZC1Show: function(){
let start = this.currentPage*this.pageSize;
let end = Math.min((this.currentPage+1)*this.pageSize, this.listGDZC.length)
return this.listGDZC.slice(start, end)
},
pageNum: function(){
return Math.ceil(this.listGDZC.length / this.pageSize) || 1 ;
},
zongtioashu:function(){
return this.listGDZC.length
},
yeshu:function(){
return this.currentPage+1
},
},
mounted(){
this.listGDZC1();
},
methods:{
//列表
listGDZC1:function (){
let url = "http://localhost:8080/rikao13_goods/listGDZCPost.do";
// let data1 = {};
let data1={"goods_name":this.goods_name};
let option = {headers: {'Content-Type':'application/json'}};
axios.post(url,data1,option).then((rel)=>{
this.listGDZC = rel.data.data;
console.log(this.listGDZC)
});
},
//分页
nextPage: function(){//下一页
var vm = this;
if (vm.currentPage == vm.pageNum - 1) return;
vm.currentPage++;
},
prePage: function(){//上一页
var vm = this;
if (vm.currentPage == 0)
return;
vm.currentPage--;
},
prePageFirst:function(){//首页
var vm = this;
vm.currentPage=0;
},
prePageLast:function(){//末页
var vm = this;
vm.currentPage=vm.pageNum-1;
},
toPage: function(page){
var vm = this;
vm.currentPage = page
},
tianjia:function(){
location.href="addGdzc.html"
},
//删除
deleteGDZD(noid){
if(confirm("确定要删除")){
let url = "http://localhost:8080/rikao13_goods/deleteGDZCPost.do";
let data1 = noid;
let option = {Headers:{'Content-type':'application/json'}};
axios.post(url,data1,option).then((rel)=>{
for(let i = 0;i<this.listGDZC.length;i++){
if(this.listGDZC[i].noid==noid){
this.listGDZC.splice(i,1);
};
};
this.listGDZC1();
});
}
},
//修改
selectNoid(noid){
let url = "http://localhost:8080/rikao13_goods/selectGDZCNoidPost.do";
let data1 = {"noid":noid.noid};
let option = {Headers:{'Content-type':'application/json'}};
axios.post(url,data1,option).then((rel)=>{
this.gdzc=rel.data.data;
})
},
xiugai:function(){
let url = "http://localhost:8080/rikao13_goods/alterGDZCPost.do";
let data1 = this.gdzc;
console.log(this.gdzc)
let option = {Headers:{'Content-type':'application/json'}}
axios.post(url,data1,option).then((rel)=>{
this.listGDZC1();
})
}
}
})
</script>
</html>
package com.wanshi.spring.entity;
import lombok.Data;
@Data
public class GDZC {
private String noid;
private String goods_name;
private String price;
private String weight;
private String buy_date;
}
package com.wanshi.spring.entity;
import lombok.Data;
@Data
public class JsonResut {
private Integer code;
private String msg;
private Object data;
}
package com.wanshi.spring.mapper;
import com.wanshi.spring.entity.GDZC;
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface GDZCMapper {
Integer addGDZC(GDZC gdzc);
List<GDZC> listGDZC();
Integer deleteGDZC(String noid);
GDZC seletByNoid(String noid);
Integer alterGDZC(GDZC gdzc);
List<GDZC> selectGDZC (@Param("goods_name") String goods_name);
}
package com.wanshi.spring.service;
import com.wanshi.spring.entity.GDZC;
import com.wanshi.spring.entity.JsonResut;
public interface GDZCService {
JsonResut addGDZC(GDZC gdzc);
JsonResut listGDZC();
JsonResut delteGDZC(String noid);
JsonResut seletByNoid(String noid);
JsonResut alterGDZC(GDZC gdzc);
JsonResut selectGDZC(String goods_name);
}
package com.wanshi.spring.service.impl;
import com.wanshi.spring.entity.GDZC;
import com.wanshi.spring.entity.JsonResut;
import com.wanshi.spring.mapper.GDZCMapper;
import com.wanshi.spring.service.GDZCService;
import lombok.Data;
import org.apache.ibatis.annotations.Select;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class GDZCServiceImpl implements GDZCService {
@Autowired
private GDZCMapper gdzcMapper;
@Override
public JsonResut addGDZC(GDZC gdzc) {
JsonResut json = new JsonResut();
gdzcMapper.addGDZC(gdzc);
json.setMsg("添加成功");
json.setCode(0);
return json;
}
@Override
public JsonResut listGDZC() {
JsonResut json = new JsonResut();
List<GDZC> listGDZC = gdzcMapper.listGDZC();
json.setData(listGDZC);
return json;
}
@Override
public JsonResut delteGDZC(String noid) {
JsonResut json = new JsonResut();
gdzcMapper.deleteGDZC(noid);
json.setCode(2);
return json;
}
@Override
public JsonResut seletByNoid(String noid) {
JsonResut json = new JsonResut();
GDZC selectGDZCNoid = gdzcMapper.seletByNoid(noid);
json.setData(selectGDZCNoid);
return json;
}
@Override
public JsonResut alterGDZC(GDZC gdzc) {
JsonResut json = new JsonResut();
gdzcMapper.alterGDZC(gdzc);
json.setCode(3);
json.setMsg("修改成功");
return json;
}
@Override
public JsonResut selectGDZC(String goods_name) {
JsonResut json = new JsonResut();
List<GDZC> selectGDZC = gdzcMapper.selectGDZC(goods_name);
json.setData(selectGDZC);
return json;
}
}
package com.wanshi.controller;
import com.wanshi.spring.entity.GDZC;
import com.wanshi.spring.entity.JsonResut;
import com.wanshi.spring.service.GDZCService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
@CrossOrigin
public class AjaxController {
@Autowired
private GDZCService gdzcService;
@RequestMapping("/addGDZCPost.do")
@ResponseBody
public JsonResut addGDZCPost(@RequestBody GDZC gdzc){
System.out.println("col"+gdzc.toString());
return gdzcService.addGDZC(gdzc);
}
@RequestMapping("/listGDZCPost.do")
@ResponseBody
public JsonResut listGDZCPost(@RequestBody GDZC gdzc){
return gdzcService.selectGDZC(gdzc.getGoods_name());
}
@RequestMapping("/deleteGDZCPost.do")
@ResponseBody
public JsonResut deleteGDZCPost(@RequestBody GDZC gdzc){
return gdzcService.delteGDZC(gdzc.getNoid());
}
@RequestMapping("/selectGDZCNoidPost.do")
@ResponseBody
public JsonResut selectGDZCNoidPost(@RequestBody GDZC gdzc){
return gdzcService.seletByNoid(gdzc.getNoid());
}
@RequestMapping("/alterGDZCPost.do")
@ResponseBody
public JsonResut alterGDZCPost(@RequestBody GDZC gdzc){
return gdzcService.alterGDZC(gdzc);
}
}
<?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.wanshi.spring.mapper.GDZCMapper">
<insert id="addGDZC" parameterType="com.wanshi.spring.entity.GDZC">
insert into rikao_t_goods (goods_name,price,weight,buy_date)
values (#{goods_name},#{price},#{weight},#{buy_date})
</insert>
<select id="listGDZC" resultType="com.wanshi.spring.entity.GDZC">
select * from rikao_t_goods
</select>
<delete id="deleteGDZC" parameterType="String">
delete from rikao_t_goods
<where>
noid = #{noid}
</where>
</delete>
<select id="seletByNoid" parameterType="String" resultType="com.wanshi.spring.entity.GDZC">
select * from rikao_t_goods
<where>
noid = #{noid}
</where>
</select>
<update id="alterGDZC" parameterType="com.wanshi.spring.entity.GDZC">
update rikao_t_goods
<set>
goods_name = #{goods_name},
price = #{price},
weight = #{weight},
buy_date = #{buy_date}
</set>
<where>
noid = #{noid}
</where>
</update>
<select id="selectGDZC" parameterType="String" resultType="com.wanshi.spring.entity.GDZC">
select * from rikao_t_goods
<where>
<if test="goods_name != null and goods_name != ''">
goods_name like concat('%',#{goods_name},'%')
</if>
</where>
</select>
</mapper>