主頁 > 前端設計 > 物資資訊管理系統（springboot+bootstrap+jquery+ajax適合才學完springboot的童鞋，基本的增刪改查）

物資資訊管理系統（springboot+bootstrap+jquery+ajax適合才學完springboot的童鞋，基本的增刪改查）

2021-12-29 08:25:12 前端設計

1.概述

本系統是基于Java設計的網頁式開發專案，是一款用于物資管理人員對物資管理，其中包括對物資資訊，出庫物資資訊，入庫物資資訊，物資資訊余額等相關內容的管理，具有物資管理、用戶管理、出庫物資管理、入庫物資管理、等相關功能的小型資料庫管理應用系統，

2.開發環境

資料庫：MySQL

代碼撰寫工具：IntelliJ IDEA 2019

相關編譯技術及工具：Jdk1.8 Springboot2.7 Spring SpringMVC Mybatis Thymeleaf Bootstrap3.6 Jquery Ajax HTML CSS JavaScript

3.E-R模型圖

4.資料庫表

5. 功能演示

6.源代碼

package cn.edu.ncst.controller;

import cn.edu.ncst.entity.Balance;
import cn.edu.ncst.service.BalanceService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import javax.annotation.Resource;
import java.util.ArrayList;

@Controller
@RequestMapping("/balance")
public class BalanceController {
    @Resource
    private BalanceService balanceService;

    @ResponseBody
    @GetMapping("/queryall")
    public ModelAndView queryAll(){
        ModelAndView mv = new ModelAndView();
        ArrayList<Balance> list = balanceService.queryAll();
        mv.addObject("lists",list);
        mv.setViewName("balance_table");
        return mv;
    }
    @ResponseBody
    @GetMapping("/selectbyid")
    public Balance querybyid(Integer id){
        ArrayList<Balance> list = balanceService.queryAll();
        for(Balance balance :list){
            if (balance.getId() == id){
                return balance;
            }
        }
        return null;
    }
}
package cn.edu.ncst.controller;

import cn.edu.ncst.entity.InResource;
import cn.edu.ncst.service.InResourceService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import javax.annotation.Resource;
import java.util.ArrayList;
@Controller
@RequestMapping("/inresource")
public class InResourceController {
    @Resource
    private InResourceService inResourceService;
    @GetMapping("/queryall")
    public ModelAndView queryAll(){
        ModelAndView mv = new ModelAndView();
        ArrayList<InResource> list;
        list = inResourceService.queyrAll();
        System.out.println(list);
        mv.addObject("inres",list);
        mv.setViewName("inresource_table");
        return mv;
    }

    @PostMapping("/add")
    @ResponseBody
    public String addUser(InResource resource){
        String info;
        int i= inResourceService.add(resource);
        if (i!=0){
            info="添加成功！";
        }
        else {
            info = "添加失敗！";
        }
        return info;
    }
    @GetMapping("/delete")
    public String addUser(String id){
        inResourceService.delete(Integer.parseInt(id));
        return "redirect:/inresource/queryall";
    }
    @GetMapping("/select")
    @ResponseBody
    public InResource selectById(String id){
        InResource resource= inResourceService.select(Integer.valueOf(id));
        return resource;
    }
    @PostMapping("/modify")
    @ResponseBody
    public String modify(InResource resource){
        String info;
        int i= inResourceService.modify(resource);
        if (i!=0){
            info="修改成功！";
        }
        else {
            info = "修改失敗！";
        }
        return info;
    }
}
package cn.edu.ncst.controller;

import cn.edu.ncst.entity.OutResource;
import cn.edu.ncst.service.OutResourceService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import javax.annotation.Resource;
import java.util.ArrayList;

@Controller
@RequestMapping("/outresource")
public class OutResourceController {
    @Resource
    private OutResourceService outResourceService;
    @GetMapping("/queryall")
    public ModelAndView queryAll(){
        ModelAndView mv = new ModelAndView();
        ArrayList<OutResource> list;
        list = outResourceService.queryAll();
        System.out.println(list);
        mv.addObject("inres",list);
        mv.setViewName("outresource_table");
        return mv;
    }

    @PostMapping("/add")
    @ResponseBody
    public String addUser(OutResource resource){
        String info;
        int i= outResourceService.add(resource);
        if (i!=0){
            info="添加成功！";
        }
        else {
            info = "添加失敗！";
        }
        return info;
    }
    @GetMapping("/delete")
    public String addUser(String id){
        outResourceService.delete(Integer.parseInt(id));
        return "redirect:/outresource/queryall";
    }
    @GetMapping("/select")
    @ResponseBody
    public OutResource selectById(String id){
        OutResource resource= outResourceService.select(Integer.valueOf(id));
        return resource;
    }
    @PostMapping("/modify")
    @ResponseBody
    public String modify(OutResource resource){
        String info;
        int i= outResourceService.modify(resource);
        if (i!=0){
            info="修改成功！";
        }
        else {
            info = "修改失敗！";
        }
        return info;
    }
}
package cn.edu.ncst.controller;

import cn.edu.ncst.entity.Resource;
import cn.edu.ncst.service.ResourceService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;

@Controller
@RequestMapping("/resource")
public class ResouceController {
    @javax.annotation.Resource
    private ResourceService resourceService;
    @GetMapping("/queryall")
    public ModelAndView queryAll(){
        ModelAndView mv = new ModelAndView();
        ArrayList<Resource> list;
        list = resourceService.queyrAll();
        mv.addObject("res",list);
        mv.setViewName("resource_table");
        return mv;
    }

    @PostMapping("/add")
    @ResponseBody
    public String addUser(Resource resource){
        String info;
        System.out.println(resource);
        System.out.println(resource);
        int i= resourceService.addResource(resource);
        if (i!=0){
            info="添加成功！";
        }
        else {
            info = "添加失敗！";
        }
        return info;
    }
    @GetMapping("/delete")
    public String addUser(String id){
        resourceService.delete(Integer.parseInt(id));
        return "redirect:/resource/queryall";
    }
    @GetMapping("/select")
    @ResponseBody
    public Resource selectById(String id){
        Resource resource= resourceService.select(Integer.valueOf(id));
        return resource;
    }
    @PostMapping("/modify")
    @ResponseBody
    public String modify(Resource resource){
        String info;
        int i= resourceService.modify(resource);
        if (i!=0){
            info="修改成功！";
        }
        else {
            info = "修改失敗！";
        }
        return info;
    }
}
package cn.edu.ncst.controller;

import cn.edu.ncst.entity.User;
import cn.edu.ncst.service.UserService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import javax.annotation.Resource;
import java.util.ArrayList;

@Controller
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserService userService;

    @GetMapping("/login")
    public String login(User user){
        boolean flag = userService.queryByuserNameAndPassword(user);
        String info;
        if (flag){
            return "homePage";
        }
           info="用戶名或密碼錯誤";
        return "login_error";
    }

    @PostMapping("/add")
    @ResponseBody
    public String addUser(User user){
      String info;
      int i= userService.addUSer(user);
      if (i!=0){
          info="添加成功！";
      }
      else {
          info = "添加失敗！";
      }
      return info;
    }

    @GetMapping("/queryall")
    public ModelAndView queryAll(){
        ModelAndView mv = new ModelAndView();
        ArrayList<User> list;
        list = userService.queyrAll();
        mv.addObject("users",list);
        mv.setViewName("user_table");
        return mv;
    }
    @GetMapping("/delete")
    public String addUser(String userId){
        userService.deletUserById(Integer.parseInt(userId));
        return "redirect:/user/queryall";
    }
    @GetMapping("/select")
    @ResponseBody
    public User selectById(String userId){
        User user= userService.selectById(Integer.parseInt(userId));
        return user;
    }

    @PostMapping("/modify")
    @ResponseBody
    public String modify(User user){
        String info;
        int i= userService.modyfy(user);
        if (i!=0){
            info="修改成功！";
        }
        else {
            info = "修改失敗！";
        }
        return info;
    }
}
package cn.edu.ncst.dao;

import cn.edu.ncst.entity.InResource;
import org.apache.ibatis.annotations.Mapper;

import java.util.ArrayList;
@Mapper
public interface InResourceDao {
    ArrayList<InResource> queryAll();
    int add(InResource inResource);
    int delete(Integer id);
    InResource select(Integer id);
    int modify(InResource resource);
}
<?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="cn.edu.ncst.dao.InResourceDao">
    <select id="queryAll" resultType="cn.edu.ncst.entity.InResource">
         select * from t_insource
    </select>
    <insert id="add">
         insert into t_insource (name,size,category,unit,number,price,money,putTime,opperson,keeper,remark,warehouse)
          values (#{name},#{size},#{category},#{unit},#{number},#{price},#{money},#{putTime},#{opperson},#{keeper},#{remark},#{warehouse})
    </insert>
    <delete id="delete">
        delete from t_insource where id=#{id}
    </delete>
    <select id="select" resultType="cn.edu.ncst.entity.InResource">
        select * from t_insource where id=#{id}
    </select>
    <update id="modify">
        update t_insource set name=#{name},size=#{size},category=#{category},unit=#{unit},
        number=#{number},price=#{price},money=#{money},putTime=#{putTime},opperson=#{opperson},keeper=#{keeper},remark=#{remark},warehouse=#{warehouse}
         where id=#{id}
    </update>
</mapper>
package cn.edu.ncst.dao;

import cn.edu.ncst.entity.OutResource;
import org.apache.ibatis.annotations.Mapper;

import java.util.ArrayList;

@Mapper
public interface OutResourceDao {
    ArrayList<OutResource> queryAll();
    int add(OutResource resource);
    int delete(Integer id);
    OutResource select(Integer id);
    int modify(OutResource resource);
}
<?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="cn.edu.ncst.dao.OutResourceDao">
    <select id="queryAll" resultType="cn.edu.ncst.entity.OutResource">
         select * from t_outsource
    </select>
    <insert id="add">
         insert into t_outsource (name,size,category,unit,number,price,money,reTime,opperson,reperson,remark,warehouse)
          values (#{name},#{size},#{category},#{unit},#{number},#{price},#{money},#{reTime},#{opperson},#{reperson},#{remark},#{warehouse})
    </insert>
    <delete id="delete">
        delete from t_outsource where id=#{id}
    </delete>
    <select id="select" resultType="cn.edu.ncst.entity.OutResource">
        select * from t_outsource where id=#{id}
    </select>
    <update id="modify">
        update t_outsource set name=#{name},size=#{size},category=#{category},unit=#{unit},
        number=#{number},price=#{price},money=#{money},reTime=#{reTime},opperson=#{opperson},reperson=#{reperson},remark=#{remark},warehouse=#{warehouse}
         where id=#{id}
    </update>
</mapper>
package cn.edu.ncst.dao;

import cn.edu.ncst.entity.Resource;
import org.apache.ibatis.annotations.Mapper;

import java.util.ArrayList;
@Mapper
public interface ResourceDao {
    ArrayList<Resource> queryAll();
    int add(Resource resource);
    int delete(Integer id);
    Resource select(Integer id);
    int modify(Resource resource);
}
<?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="cn.edu.ncst.dao.ResourceDao">
    <select id="queryAll" resultType="cn.edu.ncst.entity.Resource">
        select * from t_resource
    </select>
    <insert id="add">
        insert into t_resource (name,size,category,unit) values (#{name},#{size},#{category},#{unit})
    </insert>
    <delete id="delete">
        delete from t_resource where id=#{id}
    </delete>
    <select id="select" resultType="cn.edu.ncst.entity.Resource">
        select * from t_resource where id=#{id}
    </select>
    <update id="modify">
        update t_resource set name=#{name},size=#{size},category=#{category},unit=#{unit} where id=#{id}
    </update>
</mapper>
package cn.edu.ncst.dao;

import cn.edu.ncst.entity.User;
import org.apache.ibatis.annotations.Mapper;

import java.util.ArrayList;

@Mapper
public interface UserDao {
     int queryByuserNameAndPassword(String userName,String password);
     int addUser(String userName,String password);
     ArrayList<User> queryAll();
     int deleteUser(int userId);
     User selectById(int userId);
     int modify(User user);
}
<?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="cn.edu.ncst.dao.UserDao">
    <select id="queryByuserNameAndPassword" resultType="int">
         select count(userId) from t_user where userName=#{userName} and password=#{password}
    </select>
    <insert id="addUser">
        insert into t_user (userName,password) values(#{userName},#{password})
    </insert>
    <select id="queryAll" resultType="cn.edu.ncst.entity.User">
        select * from t_user
    </select>
    <delete id="deleteUser">
        delete from t_user where userId=#{userId}
    </delete>
    <select id="selectById" resultType="cn.edu.ncst.entity.User">
        select * from t_user where userId=#{userId}
    </select>
    <update id="modify">
        update t_user set userName=#{userName},password=#{password} where userId=#{userId}
    </update>
</mapper>
package cn.edu.ncst.entity;

public class Balance {
    private int id;
    private String name;
    private String size;
    private String category;
    private String unit;
    private String number;
    private String money;
    private String warehouse;

    public Balance() {
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSize() {
        return size;
    }

    public void setSize(String size) {
        this.size = size;
    }

    public String getCategory() {
        return category;
    }

    public void setCategory(String category) {
        this.category = category;
    }

    public String getUnit() {
        return unit;
    }

    public void setUnit(String unit) {
        this.unit = unit;
    }

    public String getNumber() {
        return number;
    }

    public void setNumber(String number) {
        this.number = number;
    }

    public String getMoney() {
        return money;
    }

    public void setMoney(String money) {
        this.money = money;
    }

    public String getWarehouse() {
        return warehouse;
    }

    public void setWarehouse(String warehouse) {
        this.warehouse = warehouse;
    }

    public Balance(int id, String name, String size, String category, String unit, String number, String money, String warehouse) {
        this.id = id;
        this.name = name;
        this.size = size;
        this.category = category;
        this.unit = unit;
        this.number = number;
        this.money = money;
        this.warehouse = warehouse;
    }
}
package cn.edu.ncst.entity;

public class InResource {
    private String name;
    private String size;
    private Integer id;
    private String category;
    private String unit;
    private String number;
    private String price;
    private String money;
    private String putTime;
    private String opperson;
    private String keeper;
    private String remark;
    private String warehouse;

    public InResource() {
    }

    public InResource(String name, String size, int id, String category, String unit, String number, String price, String money, String putTime, String opperson, String keeper, String remark, String warehouse) {
        this.name = name;
        this.size = size;
        this.id = id;
        this.category = category;
        this.unit = unit;
        this.number = number;
        this.price = price;
        this.money = money;
        this.putTime = putTime;
        this.opperson = opperson;
        this.keeper = keeper;
        this.remark = remark;
        this.warehouse = warehouse;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSize() {
        return size;
    }

    public void setSize(String size) {
        this.size = size;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getCategory() {
        return category;
    }

    public void setCategory(String category) {
        this.category = category;
    }

    public String getUnit() {
        return unit;
    }

    public void setUnit(String unit) {
        this.unit = unit;
    }

    public String getNumber() {
        return number;
    }

    public void setNumber(String number) {
        this.number = number;
    }

    public String getPrice() {
        return price;
    }

    public void setPrice(String price) {
        this.price = price;
    }

    public String getMoney() {
        return money;
    }

    public void setMoney(String money) {
        this.money = money;
    }

    public String getPutTime() {
        return putTime;
    }

    public void setPutTime(String putTime) {
        this.putTime = putTime;
    }

    public String getOpperson() {
        return opperson;
    }

    public void setOpperson(String opperson) {
        this.opperson = opperson;
    }

    public String getKeeper() {
        return keeper;
    }

    public void setKeeper(String keeper) {
        this.keeper = keeper;
    }

    public String getRemark() {
        return remark;
    }

    public void setRemark(String remark) {
        this.remark = remark;
    }

    public String getWarehouse() {
        return warehouse;
    }

    public void setWarehouse(String warehouse) {
        this.warehouse = warehouse;
    }
}
package cn.edu.ncst.entity;

public class OutResource {
    private String name;
    private String size;
    private int id;
    private String category;
    private String unit;
    private String number;
    private String price;
    private String money;
    private String reTime;
    private String opperson;
    private String reperson;
    private String remark;
    private String warehouse;

    public OutResource(String name, String size, int id, String category, String unit, String number, String price, String money, String reTime, String opperson, String reperson, String remark, String warehouse) {
        this.name = name;
        this.size = size;
        this.id = id;
        this.category = category;
        this.unit = unit;
        this.number = number;
        this.price = price;
        this.money = money;
        this.reTime = reTime;
        this.opperson = opperson;
        this.reperson = reperson;
        this.remark = remark;
        this.warehouse = warehouse;
    }

    public OutResource() {
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSize() {
        return size;
    }

    public void setSize(String size) {
        this.size = size;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getCategory() {
        return category;
    }

    public void setCategory(String category) {
        this.category = category;
    }

    public String getUnit() {
        return unit;
    }

    public void setUnit(String unit) {
        this.unit = unit;
    }

    public String getNumber() {
        return number;
    }

    public void setNumber(String number) {
        this.number = number;
    }

    public String getPrice() {
        return price;
    }

    public void setPrice(String price) {
        this.price = price;
    }

    public String getMoney() {
        return money;
    }

    public void setMoney(String money) {
        this.money = money;
    }

    public String getReTime() {
        return reTime;
    }

    public void setReTime(String reTime) {
        this.reTime = reTime;
    }

    public String getOpperson() {
        return opperson;
    }

    public void setOpperson(String opperson) {
        this.opperson = opperson;
    }

    public String getReperson() {
        return reperson;
    }

    public void setReperson(String reperson) {
        this.reperson = reperson;
    }

    public String getRemark() {
        return remark;
    }

    public void setRemark(String remark) {
        this.remark = remark;
    }

    public String getWarehouse() {
        return warehouse;
    }

    public void setWarehouse(String warehouse) {
        this.warehouse = warehouse;
    }
}
package cn.edu.ncst.entity;

public class Resource {
    private Integer id;
    private String name;
    private String size;
    private String category;
    private String unit;

    public Resource(Integer id, String name, String size, String category, String unit) {
        this.id = id;
        this.name = name;
        this.size = size;
        this.category = category;
        this.unit = unit;
    }

    public Resource() {
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSize() {
        return size;
    }

    public void setSize(String size) {
        this.size = size;
    }

    public String getCategory() {
        return category;
    }

    public void setCategory(String category) {
        this.category = category;
    }

    public String getUnit() {
        return unit;
    }

    public void setUnit(String unit) {
        this.unit = unit;
    }

    @Override
    public String toString() {
        return "Resource{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", size='" + size + '\'' +
                ", category='" + category + '\'' +
                ", unit='" + unit + '\'' +
                '}';
    }
}
package cn.edu.ncst.entity;

public class User {
    private int userId;
    private String userName;
    private String password;

    public User() {
    }

    public User(int userId, String userName, String password) {
        this.userId = userId;
        this.userName = userName;
        this.password = password;
    }

    public int getUserId() {
        return userId;
    }

    public void setUserId(int userId) {
        this.userId = userId;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "userId=" + userId +
                ", userName=" + userName +
                ", password=" + password +
                '}';
    }
}
package cn.edu.ncst;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class MimsApplication {

    public static void main(String[] args) {
        SpringApplication.run(MimsApplication.class, args);
    }

}
package cn.edu.ncst.service;

import cn.edu.ncst.entity.Balance;

import java.util.ArrayList;
import java.util.List;

public interface BalanceService {
     ArrayList<Balance> queryAll();
}
package cn.edu.ncst.service;

import cn.edu.ncst.entity.InResource;

import java.util.ArrayList;

public interface InResourceService {
    ArrayList<InResource> queyrAll();
    int add(InResource inResource);
    int delete(Integer id);
    InResource select(Integer id);
    int modify(InResource resource);
}
package cn.edu.ncst.service;

import cn.edu.ncst.entity.OutResource;

import java.util.ArrayList;

public interface OutResourceService {
    ArrayList<OutResource> queryAll();
    int add(OutResource resource);
    int delete(Integer id);
    OutResource select(Integer id);
    int modify(OutResource resource);
}
package cn.edu.ncst.service;

import cn.edu.ncst.entity.Resource;

import java.util.ArrayList;

public interface ResourceService {
    ArrayList<Resource> queyrAll();
    int addResource(Resource resource);
    int delete(Integer id);
    Resource select(Integer id);
    int modify(Resource resource);
}
package cn.edu.ncst.service;

import cn.edu.ncst.entity.User;

import java.util.ArrayList;

public interface UserService {
    boolean queryByuserNameAndPassword(User user);
    int addUSer(User user);
    ArrayList<User> queyrAll();
    int deletUserById(int userId);
    User selectById(int userId);
    int modyfy(User user);
}
#配置資料庫
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/mims?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2b8
spring.datasource.username=root
spring.datasource.password=123456
#配置日志檔案
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#配置thymeleaf
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
    <script src="js/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div class="container">
    <form action="/user/login" class="form-horizontal" id="userForm" role="form">
        <h2 align="center">用戶登錄</h2>
        <div class="form-group row">
            <label for="userName" class="control-label col-md-2 col-md-offset-2">用戶名</label>
            <div class="col-md-5">
                <input type="text" id="userName" name="userName"  class="form-control " placeholder="請輸入用戶名" />
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="control-label col-md-2 col-md-offset-2">密碼</label>
            <div class="col-md-5">
                <input type="password" id="password" name="password" class="form-control" placeholder="請輸入密碼" />
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-2 col-md-offset-5"><input id="submit" class="btn btn-primary" type="submit" value="登錄"  /></div>
            <div class="col-md-2"><input type="reset" class="btn btn-primary" value="清空" /></div>
        </div>
    </form>
</div>
</body>
<script type="text/javascript">
</script>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>物資余額瀏覽</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <script th:src="@{/bootstrap/js/jquery.min.js}" type="text/javascript" charset="UTF-8"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<h2 align="center">物資余額瀏覽</h2>
<br><br>
<div class="container>">
<table class="table table-striped table-bordered table-hover tablel" style="table-layout: fixed" >
    <thead>
    <tr>
        <th>
            <input type="text" id="edit" name="password" class="form-control" placeholder="查詢物資編號" />
        </th>
        <th>
            <button class="btn btn-primary" id="querybtn">查詢</button>
        </th>
    </tr>
    <tr>
        <th>物資編號</th>
        <th>物資名稱</th>
        <th>規格型號</th>
        <th>類別</th>
        <th>計量單位</th>
        <th>數量</th>
        <th>金額</th>
        <th>倉庫</th>
    </tr>
    </thead>
    <tbody>
    <tr class="active" th:each="list:${lists}">
        <td th:text="${list.getId()}"></td>
        <td th:text="${list.getName()}"></td>
        <td th:text="${list.getSize()}"></td>
        <td th:text="${list.getCategory()}"></td>
        <td th:text="${list.getUnit()}"></td>
        <td th:text="${list.getNumber()}"></td>
        <td th:text="${list.getMoney()}"></td>
        <td th:text="${list.getWarehouse()}"></td>
    </tr>
    </tbody>
</table>
</div>


<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title"  align="center">物資余額資訊</h4>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="id" name="id"/>
                    <div class="form-group">
                        <label>物資名稱</label>
                        <input type="text" class="form-control" id="t1" name="name">
                    </div>
                    <div class="form-group">
                        <label>規格型號</label>
                        <input type="text" class="form-control" id="t2" name="size">
                    </div>
                    <div class="form-group">
                        <label>類別</label>
                        <input type="text" class="form-control" id="t3" name="category">
                    </div>
                    <div class="form-group">
                        <label>計量單位</label>
                        <input type="text" class="form-control" id="t4" name="unit">
                    </div>
                    <div class="form-group">
                        <label>數量</label>
                        <input type="text" class="form-control" id="t5" name="number">
                    </div>
                    <div class="form-group">
                        <label>金額</label>
                        <input type="text" class="form-control" id="t6" name="money">
                    </div>
                    <div class="form-group">
                        <label>倉庫</label>
                        <input type="text" class="form-control" id="t7" name="warehouse">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

</body>
<script type="text/javascript">
     $("#querybtn").click(function () {
         if ($("#edit").val()==''||$("#edit").val().length == 0){
             alert("請輸入物資編號")
         }
         else{
             $.ajax({
                 url:"/balance/selectbyid",
                 dataType:"json",
                 data:{id:$("#edit").val()},
                 error:function(){
                     alert("所選目標不存在")
                 },
                 success:function (ret) {
                     $("#editModal").modal('show')
                     $("#id").val(ret.id)
                     $("#t1").val(ret.name);
                     $("#t2").val(ret.size);
                     $("#t3").val(ret.category);
                     $("#t4").val(ret.unit);
                     $("#t5").val(ret.number);
                     $("#t6").val(ret.money);
                     $("#t7").val(ret.warehouse);
                 }
             })
         }
     })

</script>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>導航面板</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <script th:src="@{/bootstrap/js/jquery.min.js}" type="text/javascript" charset="UTF-8"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title" align="center">物資管理系統</h3>
    </div>
    <div class="panel-body">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切換導航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">功能導航</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                用戶管理 <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <button type="button" class="btn btn-default btn-lg btn-block" id="adduserbtn">
                                        增加用戶資訊
                                    </button>
                                </li>
                                <li>
                                    <button type="button" class="btn btn-default btn-lg btn-block" id="queryall">查詢用戶資訊</button>
                                </li>
                                <li>
                                    <a th:href="@{/user/queryall}" class="btn btn-default btn-lg btn-block">洗掉用戶資訊</a>
                                </li>
                                <li>
                                    <a th:href="@{/user/queryall}" class="btn btn-default btn-lg btn-block">修改用戶資訊</a>
                                </li>
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                物資管理 <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a th:href="@{/resource/queryall}" class="btn btn-default btn-lg btn-block">物資資訊輸入</a>

                                </li>
                                <li>
                                    <a th:href="@{/resource/queryall}" class="btn btn-default btn-lg btn-block">物資資訊查詢</a>

                                </li>
                                <li>
                                    <a th:href="@{/resource/queryall}" class="btn btn-default btn-lg btn-block">物資資訊修改</a>

                                </li>
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                入庫物資管理 <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a th:href="@{/inresource/queryall}" class="btn btn-default btn-lg btn-block">物資資訊輸入</a>

                                </li>
                                <li>
                                    <a th:href="@{/inresource/queryall}" class="btn btn-default btn-lg btn-block">物資資訊查詢</a>

                                </li>
                                <li>
                                    <a th:href="@{/inresource/queryall}" class="btn btn-default btn-lg btn-block">物資資訊修改</a>

                                </li>
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                出庫物資管理 <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a th:href="@{/outresource/queryall}" class="btn btn-default btn-lg btn-block">物資資訊輸入</a>

                                </li>
                                <li>
                                    <a th:href="@{/outresource/queryall}" class="btn btn-default btn-lg btn-block">物資資訊查詢</a>

                                </li>
                                <li>
                                    <a th:href="@{/outresource/queryall}" class="btn btn-default btn-lg btn-block">物資資訊修改</a>

                                </li>
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                物資余額管理 <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a th:href="@{/balance/queryall}" class="btn btn-default btn-lg btn-block">物資資訊查詢</a>

                                </li>
                                <li>
                                    <a th:href="@{/balance/queryall}" class="btn btn-default btn-lg btn-block">物資資訊瀏覽</a>

                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="jumbotron">
                <h1>歡迎登陸本系統！</h1>
            </div>
        </div>
    </div>

    <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        增加用戶
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div>
                            <label for="userName" class="col-md-offset-3 col-md-2">用戶名</label>
                            <input type="text" id="userName" name="userName" placeholder="請輸入用戶名"/>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div>
                            <label for="password" class="col-md-offset-3 col-md-2">密碼 </label>
                            <input type="text" id="password" name="password" placeholder="請輸入密碼"/>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">關閉
                        </button>
                        <button type="button" id="um1" class="btn btn-primary">
                            添加
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $("#adduserbtn").click(function () {
        $("#userModal").modal("show")
    })

    $("#um1").click(function () {
        $("#userModal").modal('hide')
        $.ajax({
            url:"/user/add",
            type:"post",
            dataTpye:'json',
            data:{
                userName:$("#userName").val(),
                password:$("#password").val()
            },
            success:function (ret) {
                alert(ret)
            }
        })
    })
    
    $("#queryall").click(function () {
        window.location.replace("/user/queryall")
    })
</script>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>入庫物資管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <script th:src="@{/bootstrap/js/jquery.min.js}" type="text/javascript" charset="UTF-8"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<h2 align="center">入庫物資管理頁面</h2>
<br><br>
<div class="container>">
<table class="table table-striped table-bordered table-hover tablel" >
    <thead>

    <tr>
        <th>操作</th>
        <th>物資編號</th>
        <th>物資名稱</th>
        <th>規格型號</th>
        <th>類別</th>
        <th>數量</th>
        <th>單價</th>
        <th>金額</th>
        <th>入庫時間</th>
        <th>經辦人</th>
        <th>保管人</th>
        <th>倉庫</th>
        <th>備注</th>
    </tr>
    </thead>
    <tbody>
    <tr class="active" th:each="inre:${inres}">
        <td>
            <a th:href="@{/resource/delete(id=${inre.getId()})}" class="btn btn-primary">洗掉</a>
        </td>
        <td th:text="${inre.getId()}"></td>
        <td th:text="${inre.getName()}"></td>
        <td th:text="${inre.getSize()}"></td>
        <td th:text="${inre.getCategory()}"></td>
        <td th:text="${inre.getNumber()}"></td>
        <td th:text="${inre.getPrice()}"></td>
        <td th:text="${inre.getMoney()}"></td>
        <td th:text="${inre.getPutTime()}"></td>
        <td th:text="${inre.getOpperson()}"></td>
        <td th:text="${inre.getKeeper()}"></td>
        <td th:text="${inre.getWarehouse()}"></td>
        <td th:text="${inre.getRemark()}"></td>
    </tr>
    </tbody>
    <tfoot>

       <tr>
           <th>
               <button class="btn btn-primary" id="addbtn">添加</button>
               <button class="btn btn-primary" id="modify">修改</button>
           </th>
           <th>
               <input type="text" id="edit" name="password" class="form-control" placeholder="請輸入修改的物資編號" />
           </th>


       </tr>
    </tfoot>
</table>
</div>

<div class="modal fade" id="reModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel" align="center"></h4>
            </div>
            <div class="modal-body">
                <form id="userForm">
                    <div class="form-group">
                        <label>物資名稱</label>
                        <input type="text" class="form-control"  name="name">
                    </div>
                    <div class="form-group">
                        <label>規格型號</label>
                        <input type="text" class="form-control"  name="size">
                    </div>
                    <div class="form-group">
                        <label>類別</label>
                        <input type="text" class="form-control"  name="category">
                    </div>
                    <div class="form-group">
                        <label>計量單位</label>
                        <input type="text" class="form-control"  name="unit">
                    </div>
                    <div class="form-group">
                        <label>數量</label>
                        <input type="text" class="form-control"  name="number">
                    </div>
                    <div class="form-group">
                        <label>單價</label>
                        <input type="text" class="form-control"  name="price">
                    </div>
                    <div class="form-group">
                        <label>金額</label>
                        <input type="text" class="form-control"  name="money">
                    </div>
                    <div class="form-group">
                        <label>入庫時間</label>
                        <input type="text" class="form-control"  name="putTime">
                    </div>
                    <div class="form-group">
                        <label>經辦人</label>
                        <input type="text" class="form-control"  name="opperson">
                    </div>
                    <div class="form-group">
                        <label>保管人</label>
                        <input type="text" class="form-control"  name="keeper">
                    </div>
                    <div class="form-group">
                        <label>倉庫</label>
                        <input type="text" class="form-control"  name="warehouse">
                    </div>
                    <div class="form-group">
                        <label>備注</label>
                        <input type="text" class="form-control"  name="remark">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary" id="saveConfirmBtn">確定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title"  align="center">編輯物資資訊</h4>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="id" name="id"/>
                    <div class="form-group">
                        <label>物資名稱</label>
                        <input type="text" class="form-control" id="t1" name="name">
                    </div>
                    <div class="form-group">
                        <label>規格型號</label>
                        <input type="text" class="form-control" id="t2" name="size">
                    </div>
                    <div class="form-group">
                        <label>類別</label>
                        <input type="text" class="form-control" id="t3" name="category">
                    </div>
                    <div class="form-group">
                        <label>計量單位</label>
                        <input type="text" class="form-control" id="t4" name="unit">
                    </div>
                    <div class="form-group">
                        <label>數量</label>
                        <input type="text" class="form-control" id="t5" name="number">
                    </div>
                    <div class="form-group">
                        <label>單價</label>
                        <input type="text" class="form-control" id="t6" name="price">
                    </div>
                    <div class="form-group">
                        <label>金額</label>
                        <input type="text" class="form-control" id="t7" name="money">
                    </div>
                    <div class="form-group">
                        <label>入庫時間</label>
                        <input type="text" class="form-control" id="t8" name="putTime">
                    </div>
                    <div class="form-group">
                        <label>經辦人</label>
                        <input type="text" class="form-control" id="t9" name="opperson">
                    </div>
                    <div class="form-group">
                        <label>保管人</label>
                        <input type="text" class="form-control" id="t10" name="keeper">
                    </div>
                    <div class="form-group">
                        <label>倉庫</label>
                        <input type="text" class="form-control" id="t11" name="warehouse">
                    </div>
                    <div class="form-group">
                        <label>備注</label>
                        <input type="text" class="form-control" id="t12" name="remark">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary" id="editConfirmBtn">確定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

</body>
<script type="text/javascript">
    $("#addbtn").click(function () {
        $("#reModal").modal("show")
        $("#myModalLabel").html("添加物資資訊")
    })

    $("#saveConfirmBtn").click(function () {
        $("#reModal").modal('hide')
        $.ajax({
            url:"/inresource/add",
            type:"post",
            dataTpye:'json',
            data:$("#userForm").serialize(),
            success:function (ret) {
                alert(ret)
                window.location.replace("/inresource/queryall")
            }
        })
    })
     $("#modify").click(function () {
         if ($("#edit").val()==''||$("#edit").val().length == 0){
             alert("請輸入物資編號")
         }
         else{
             $.ajax({
                 url:"/inresource/select",
                 dataType:"json",
                 data:{id:$("#edit").val()},
                 error:function(){
                     alert("所選目標不存在")
                 },
                 success:function (ret) {
                     $("#editModal").modal('show')
                     $("#id").val(ret.id)
                     $("#t1").val(ret.name);
                     $("#t2").val(ret.size);
                     $("#t3").val(ret.category);
                     $("#t4").val(ret.unit);
                     $("#t5").val(ret.number);
                     $("#t6").val(ret.price);
                     $("#t7").val(ret.money);
                     $("#t8").val(ret.putTime);
                     $("#t9").val(ret.opperson);
                     $("#t10").val(ret.keeper);
                     $("#t11").val(ret.warehouse);
                     $("#t12").val(ret.remark);
                 }
             })
         }
     })

     $("#editConfirmBtn").click(function () {
         $("#editModal").modal('hide')
         $.ajax({
             url:"/inresource/modify",
             type:"post",
             dataTpye:'json',
             data:$("#editForm").serialize(),
             success:function (ret) {
                 alert(ret)
                 window.location.replace("/inresource/queryall")
             }
         })
     })
</script>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
</head>
<body>

<div class="container">
    <form action="/user/login" class="form-horizontal" id="userForm" role="form">
        <h2 align="center" style="color: #c12e2a">用戶名或密碼錯誤</h2>
        <div class="form-group row">
            <label for="userName" class="control-label col-md-2 col-md-offset-2">用戶名</label>
            <div class="col-md-5">
                <input type="text" id="userName" name="userName"  class="form-control " placeholder="請輸入用戶名" />
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="control-label col-md-2 col-md-offset-2">密碼</label>
            <div class="col-md-5">
                <input type="password" id="password" name="password" class="form-control" placeholder="請輸入密碼" />
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-2 col-md-offset-5"><input id="submit" type="submit" class="btn btn-primary" value="登錄"  /></div>
            <div class="col-md-2"><input type="reset" class="btn btn-primary" value="清空" /></div>
        </div>
    </form>
</div>
</body>
<script type="text/javascript">
</script>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>出庫物資管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <script th:src="@{/bootstrap/js/jquery.min.js}" type="text/javascript" charset="UTF-8"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<h2 align="center">出庫物資管理頁面</h2>
<br><br>
<div class="container>">
<table class="table table-striped table-bordered table-hover tablel" >
    <thead>
    <tr>
        <th>操作</th>
        <th>物資編號</th>
        <th>物資名稱</th>
        <th>規格型號</th>
        <th>類別</th>
        <th>數量</th>
        <th>單價</th>
        <th>金額</th>
        <th>入庫時間</th>
        <th>經辦人</th>
        <th>保管人</th>
        <th>倉庫</th>
        <th>備注</th>
    </tr>
    </thead>
    <tbody>
    <tr class="active" th:each="inre:${inres}">
        <td>
            <a th:href="@{/outresource/delete(id=${inre.getId()})}" class="btn btn-primary">洗掉</a>
        </td>
        <td th:text="${inre.getId()}"></td>
        <td th:text="${inre.getName()}"></td>
        <td th:text="${inre.getSize()}"></td>
        <td th:text="${inre.getCategory()}"></td>
        <td th:text="${inre.getNumber()}"></td>
        <td th:text="${inre.getPrice()}"></td>
        <td th:text="${inre.getMoney()}"></td>
        <td th:text="${inre.getReTime()}"></td>
        <td th:text="${inre.getOpperson()}"></td>
        <td th:text="${inre.getReperson()}"></td>
        <td th:text="${inre.getWarehouse()}"></td>
        <td th:text="${inre.getRemark()}"></td>
    </tr>
    </tbody>
    <tfoot>
       <tr>
           <th>
               <button class="btn btn-primary" id="addbtn">添加</button>
               <button class="btn btn-primary" id="modify">修改</button>
           </th>
           <th>
               <input type="text" id="edit" name="password" class="form-control" placeholder="請輸入修改的物資編號" />
           </th>
           <th>

           </th>
       </tr>
    </tfoot>
</table>
</div>

<div class="modal fade" id="reModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel" align="center"></h4>
            </div>
            <div class="modal-body">
                <form id="userForm">
                    <div class="form-group">
                        <label>物資名稱</label>
                        <input type="text" class="form-control"  name="name">
                    </div>
                    <div class="form-group">
                        <label>規格型號</label>
                        <input type="text" class="form-control"  name="size">
                    </div>
                    <div class="form-group">
                        <label>類別</label>
                        <input type="text" class="form-control"  name="category">
                    </div>
                    <div class="form-group">
                        <label>計量單位</label>
                        <input type="text" class="form-control"  name="unit">
                    </div>
                    <div class="form-group">
                        <label>數量</label>
                        <input type="text" class="form-control"  name="number">
                    </div>
                    <div class="form-group">
                        <label>單價</label>
                        <input type="text" class="form-control"  name="price">
                    </div>
                    <div class="form-group">
                        <label>金額</label>
                        <input type="text" class="form-control"  name="money">
                    </div>
                    <div class="form-group">
                        <label>入庫時間</label>
                        <input type="text" class="form-control"  name="reTime">
                    </div>
                    <div class="form-group">
                        <label>經辦人</label>
                        <input type="text" class="form-control"  name="opperson">
                    </div>
                    <div class="form-group">
                        <label>保管人</label>
                        <input type="text" class="form-control"  name="reperson">
                    </div>
                    <div class="form-group">
                        <label>倉庫</label>
                        <input type="text" class="form-control"  name="warehouse">
                    </div>
                    <div class="form-group">
                        <label>備注</label>
                        <input type="text" class="form-control"  name="remark">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary" id="saveConfirmBtn">確定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title"  align="center">編輯物資資訊</h4>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="id" name="id"/>
                    <div class="form-group">
                        <label>物資名稱</label>
                        <input type="text" class="form-control" id="t1" name="name">
                    </div>
                    <div class="form-group">
                        <label>規格型號</label>
                        <input type="text" class="form-control" id="t2" name="size">
                    </div>
                    <div class="form-group">
                        <label>類別</label>
                        <input type="text" class="form-control" id="t3" name="category">
                    </div>
                    <div class="form-group">
                        <label>計量單位</label>
                        <input type="text" class="form-control" id="t4" name="unit">
                    </div>
                    <div class="form-group">
                        <label>數量</label>
                        <input type="text" class="form-control" id="t5" name="number">
                    </div>
                    <div class="form-group">
                        <label>單價</label>
                        <input type="text" class="form-control" id="t6" name="price">
                    </div>
                    <div class="form-group">
                        <label>金額</label>
                        <input type="text" class="form-control" id="t7" name="money">
                    </div>
                    <div class="form-group">
                        <label>領用時間</label>
                        <input type="text" class="form-control" id="t8" name="reTime">
                    </div>
                    <div class="form-group">
                        <label>經辦人</label>
                        <input type="text" class="form-control" id="t9" name="opperson">
                    </div>
                    <div class="form-group">
                        <label>領用人</label>
                        <input type="text" class="form-control" id="t10" name="reperson">
                    </div>
                    <div class="form-group">
                        <label>倉庫</label>
                        <input type="text" class="form-control" id="t11" name="warehouse">
                    </div>
                    <div class="form-group">
                        <label>備注</label>
                        <input type="text" class="form-control" id="t12" name="remark">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary" id="editConfirmBtn">確定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

</body>
<script type="text/javascript">
    $("#addbtn").click(function () {
        $("#reModal").modal("show")
        $("#myModalLabel").html("添加物資資訊")
    })

    $("#saveConfirmBtn").click(function () {
        $("#reModal").modal('hide')
        $.ajax({
            url:"/outresource/add",
            type:"post",
            dataTpye:'json',
            data:$("#userForm").serialize(),
            success:function (ret) {
                alert(ret)
                window.location.replace("/outresource/queryall")
            }
        })
    })
     $("#modify").click(function () {
         if ($("#edit").val()==''||$("#edit").val().length == 0){
             alert("請輸入物資編號")
         }
         else{
             $.ajax({
                 url:"/outresource/select",
                 dataType:"json",
                 data:{id:$("#edit").val()},
                 error:function(){
                     alert("所選目標不存在")
                 },
                 success:function (ret) {
                     $("#editModal").modal('show')
                     $("#id").val(ret.id)
                     $("#t1").val(ret.name);
                     $("#t2").val(ret.size);
                     $("#t3").val(ret.category);
                     $("#t4").val(ret.unit);
                     $("#t5").val(ret.number);
                     $("#t6").val(ret.price);
                     $("#t7").val(ret.money);
                     $("#t8").val(ret.reTime);
                     $("#t9").val(ret.opperson);
                     $("#t10").val(ret.reperson);
                     $("#t11").val(ret.warehouse);
                     $("#t12").val(ret.remark);
                 }
             })
         }
     })

     $("#editConfirmBtn").click(function () {
         $("#editModal").modal('hide')
         $.ajax({
             url:"/outresource/modify",
             type:"post",
             dataTpye:'json',
             data:$("#editForm").serialize(),
             success:function (ret) {
                 alert(ret)
                 window.location.replace("/outresource/queryall")
             }
         })
     })
</script>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>物資管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <script th:src="@{/bootstrap/js/jquery.min.js}" type="text/javascript" charset="UTF-8"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<h2 align="center">物資管理頁面</h2>
<br><br>
<div class="container>">
<table class="table table-striped table-bordered table-hover tablel" style="table-layout: fixed">
    <thead>
    <tr>
        <th>操作</th>
        <th>物資編號</th>
        <th>物資名稱</th>
        <th>規格型號</th>
        <th>類別</th>
        <th>計量單位</th>
    </tr>
    </thead>
    <tbody>
    <tr class="active" th:each="re:${res}">
        <td>
            <a th:href="@{/resource/delete(id=${re.getId()})}" class="btn btn-primary">洗掉</a>
        </td>
        <td th:text="${re.getId()}"></td>
        <td th:text="${re.getName()}"></td>
        <td th:text="${re.getSize()}"></td>
        <td th:text="${re.getCategory()}"></td>
        <td th:text="${re.getUnit()}"></td>
    </tr>
    </tbody>
    <tfoot>
       <tr>
           <th>
               <button class="btn btn-primary" id="addbtn">添加</button>
               <button class="btn btn-primary" id="modify">修改</button>
           </th>
           <th>
               <input type="text" id="edit" name="password" class="form-control" placeholder="請輸入修改的物資編號" />
           </th>
           <th>

           </th>
       </tr>
    </tfoot>
</table>
</div>

<div class="modal fade" id="reModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel" align="center"></h4>
            </div>
            <div class="modal-body">
                <form id="userForm">
                    <input type="hidden"  name="id"/>
                    <div class="form-group">
                        <label>物資名稱</label>
                        <input type="text" class="form-control"  name="name">
                    </div>
                    <div class="form-group">
                        <label>規格型號</label>
                        <input type="text" class="form-control"  name="size">
                    </div>
                    <div class="form-group">
                        <label>類別</label>
                        <input type="text" class="form-control"  name="category">
                    </div>
                    <div class="form-group">
                        <label>計量單位</label>
                        <input type="text" class="form-control"  name="unit">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary" id="saveConfirmBtn">確定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title"  align="center">編輯物資資訊</h4>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="id" name="id"/>
                    <div class="form-group">
                        <label>物資名稱</label>
                        <input type="text" class="form-control" id="t1" name="name">
                    </div>
                    <div class="form-group">
                        <label>規格型號</label>
                        <input type="text" class="form-control" id="t2" name="size">
                    </div>
                    <div class="form-group">
                        <label>類別</label>
                        <input type="text" class="form-control" id="t3" name="category">
                    </div>
                    <div class="form-group">
                        <label>計量單位</label>
                        <input type="text" class="form-control" id="t4" name="unit">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary" id="editConfirmBtn">確定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

</body>
<script type="text/javascript">
    $("#addbtn").click(function () {
        $("#reModal").modal("show")
        $("#myModalLabel").html("添加物資資訊")
    })

    $("#saveConfirmBtn").click(function () {
        $("#reModal").modal('hide')
        $.ajax({
            url:"/resource/add",
            type:"post",
            dataTpye:'json',
            data:$("#userForm").serialize(),
            success:function (ret) {
                alert(ret)
                window.location.replace("/resource/queryall")
            }
        })
    })
     $("#modify").click(function () {
         if ($("#edit").val()==''||$("#edit").val().length == 0){
             alert("請輸入物資編號")
         }
         else{
             $.ajax({
                 url:"/resource/select",
                 dataType:"json",
                 data:{id:$("#edit").val()},
                 error:function(){
                     alert("所選目標不存在")
                 },
                 success:function (ret) {
                     $("#editModal").modal('show')
                     $("#id").val(ret.id)
                     $("#t1").val(ret.name);
                     $("#t2").val(ret.size);
                     $("#t3").val(ret.category);
                     $("#t4").val(ret.unit);
                 }
             })
         }
     })

     $("#editConfirmBtn").click(function () {
         $("#editModal").modal('hide')
         $.ajax({
             url:"/resource/modify",
             type:"post",
             dataTpye:'json',
             data:$("#editForm").serialize(),
             success:function (ret) {
                 alert(ret)
                 window.location.replace("/resource/queryall")
             }
         })
     })
</script>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用戶管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <script th:src="@{/bootstrap/js/jquery.min.js}" type="text/javascript" charset="UTF-8"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<h2 align="center">用戶管理頁面</h2>
<br><br>
<div class="container>">
<table class="table table-striped table-bordered table-hover" style="table-layout: fixed">
    <thead>
    <tr>
        <th>用戶id</th>
        <th>用戶名</th>
        <th>用戶密碼</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr class="active" th:each="user:${users}">
        <td th:text="${user.getUserId()}"></td>
        <td th:text="${user.getUserName()}"></td>
        <td th:text="${user.getPassword()}"></td>
        <td>
                <a th:href="@{/user/delete(userId=${user.getUserId})}" class="btn btn-primary">洗掉</a>
        </td>
    </tr>
    </tbody>
    <tfoot>
       <tr>
           <th></th>
           <th></th>
           <th>
               <input type="text" id="edit" name="password" class="form-control"  placeholder="請輸入用戶id" />
           </th>
           <th>
               <button class="btn btn-primary" id="modify">修改</button>
           </th>
       </tr>
    </tfoot>
</table>
</div>

<div class="modal fade" id="userModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">編輯用戶資訊</h4>
            </div>
            <div class="modal-body">
                <form id="userForm">
                    <input type="hidden" id="id" name="userId"/>
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" class="form-control" id="userName" name="userName">
                    </div>
                    <div class="form-group">
                        <label>密碼</label>
                        <input type="text" class="form-control" id="password" name="password">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary" id="saveConfirmBtn">確定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
<script type="text/javascript">
     $("#modify").click(function () {
         if ($("#edit").val()==''||$("#edit").val().length == 0){
             alert("請輸入用戶id")
         }
         else{
             $.ajax({
                 url:"/user/select",
                 dataType:"json",
                 data:{userId:$("#edit").val()},
                 error:function(){
                     alert("所選目標不存在")
                 },
                 success:function (ret) {
                     $("#userModal").modal('show')
                     $("#id").val(ret.userId);
                     $("#userName").val(ret.userName);
                     $("#password").val(ret.password);
                 }
             })
         }

     })

     $("#saveConfirmBtn").click(function () {
         $("#userModal").modal('hide')
         $.ajax({
             url:"/user/modify",
             type:"post",
             dataTpye:'json',
             data:{
                 userId:$("#id").val(),
                 userName:$("#userName").val(),
                 password:$("#password").val()
             },
             success:function (ret) {
                 alert(ret)
                 window.location.replace("/user/queryall")
             }
         })
     })
</script>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/396224.html

標籤：其他

上一篇：web學習資料匯總

下一篇：仿小米商城html網頁原始碼

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low，請各位大佬留情，一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁，頂部多層導航

    一個個人用的瀏覽器首頁，可以把一下常用的網站放在這里，平常打開會比較方便。 第一步，HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式，需要用到$(window).height(); 由于手寫demo的時候，過于自信，其實對前端方面的認識也不夠體系，用文本檔案直接敲出來的html代碼，第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前，必須要做好網站資料的備份，這個問題良家佐言是遇見過的；在剛開始接觸WordPress博客程式的時候，因為升級問題和博客網站的修改的一些嘗試，良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名，每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統，受到英文博客愛好者和中文博客愛好者的追捧，并逐步演化成一款內容管理系統軟體；它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新，就會牽動無數WordPress愛好者的心， ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果，首字改變樣式或者首行改變樣式，效果如下圖。 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽？ <a> 標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。 a標簽的語法格式：<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中，鏈接的默認外觀如下： 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址： 鏈接：https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼：4aks swiper.min.css地址 鏈接：https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片（全屏顯示，且不拉伸）

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解（上）

    HTML詳解 初識HTML Hyper Text Markup Language（超文本標記語言） 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽，描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年，面對生產環境，盡管都是小心翼翼，慎之又慎，還是難免捅出簍子。輕則滿頭大汗，面紅耳赤。重則系統停擺，損失資金。每一個生產事故的背后，都是寶貴的經驗和教訓，都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故，特開此專題，長期更新和記錄大大小小的各類事故。有些是親身經歷，有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 打開游戲界面，看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上，有一個白色的矩形框，里面不斷下落著各種單詞，而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配，那么我就可以獲得得分；如果我輸入的單詞錯誤或者時間過長，那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前，了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子，引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板（滑鼠和觸摸）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作，和在桌面端做法基本一致。 首先，使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流，并將其傳遞給 <video> 標簽進行渲染。 接著，使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 短視頻已經無數不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲，一圖頂百辯，且看下圖： 網址鏈接（需在微信或者手Q中瀏覽） 從上圖可以看到，我們主要實作的功能也是本文要講解的有： ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網（www）誕生，HTTP（HyperText Transfer Protocol）經歷了眾多版本迭代，WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more

Copyright © 2010-2020 有解無憂