主頁 > 前端設計 > 完整的SpringBoot+Vue增刪改查(學生管理)

完整的SpringBoot+Vue增刪改查(學生管理)

2021-10-29 10:10:08 前端設計

md檔案可在點擊下方小卡片獲取!

1.搭建環境

1.1 創建專案

  • 創建專案：exam-student-vue

image-20201011215954386

1.2 添加坐標

image-20201011220145791

<!-- 父工程 -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <!-- jar包版本 -->
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <mybatis.starter.version>1.3.2</mybatis.starter.version>
        <mapper.starter.version>2.0.2</mapper.starter.version>
        <mysql.version>5.1.32</mysql.version>
        <pageHelper.starter.version>1.2.5</pageHelper.starter.version>
        <durid.starter.version>1.1.10</durid.starter.version>
    </properties>

    <!-- 匯入需要依賴（坐標/jar包）   -->
    <dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!-- mybatis啟動器 -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>${mybatis.starter.version}</version>
        </dependency>
        <!-- 通用Mapper啟動器 -->
        <dependency>
            <groupId>tk.mybatis</groupId>
            <artifactId>mapper-spring-boot-starter</artifactId>
            <version>${mapper.starter.version}</version>
        </dependency>
        <!-- 分頁助手啟動器 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>${pageHelper.starter.version}</version>
        </dependency>
        <!-- mysql驅動 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql.version}</version>
        </dependency>
        <!-- Druid連接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>${durid.starter.version}</version>
        </dependency>
        <!--swagger2-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.7.0</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.7.0</version>
        </dependency>

    </dependencies>

1.3 拷貝properties檔案

image-20201011220301597

#埠號
server.port=8080

#資料庫基本配置
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/db3?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=1234

#druid 連接池配置
#驅動
#spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#初始化連接池大小
spring.datasource.druid.initial-size=1
#最小連接數
spring.datasource.druid.min-idle=1
#最大連接數
spring.datasource.druid.max-active=20
#獲取連接時候驗證，會影響性能
spring.datasource.druid.test-on-borrow=true

# mybatis
# mybatis.type-aliases-package=com.czxy.domain.base
# mybatis.mapper-locations=classpath:mappers/*.xml
#mapper
mapper.not-empty=false
mapper.identity=MYSQL
#開啟駝峰映射
mybatis.configuration.map-underscore-to-camel-case=true
mybatis.mapper-locations=classpath*:mapper/*.xml
#開啟log4j列印SQL陳述句
logging.level.com.czxy.dao=debug

1.4 撰寫啟動類

image-20201011220408281

package com.czxy;

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

/**
 * @author manor
 *  
 */
@SpringBootApplication
public class StudentVueApplication {
    public static void main(String[] args) {
        SpringApplication.run(StudentVueApplication.class, args);
    }
}

1.5 拷貝封裝類

image-20201011220511266

1.6 拷貝配置類

image-20201011220551252

2. 基本結構

2.1 初始化資料庫

2.1.1 創建 資料庫

create database db1010;
use db1010;

image-20201011220751401

2.1.2 建表陳述句

-- 班級表
create table tb_class(
  `c_id` varchar(32) primary key comment '班級ID',
  `c_name` varchar(50) comment '班級名稱',
  `desc` varchar(200) comment '班級描述'
);
insert into tb_class(`c_id`,`c_name`,`desc`) values('c001','Java12班','，，，，');
insert into tb_class(`c_id`,`c_name`,`desc`) values('c002','Java34班','，，，，');

# 學生表
create table tb_student(
  s_id varchar(32) primary key comment '學生ID',
  sname varchar(50) comment '姓名',
  age int comment '年齡',
  birthday datetime comment '生日',
  gender char(1) comment '性別',
  c_id varchar(32)
);
alter table tb_student add constraint foreign key (c_id) references tb_class (c_id);

insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s001','趙三',19,'2001-01-17','1','c001');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s002','錢四',19,'2001-05-16','1','c001');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s003','孫五',18,'2002-03-15','1','c001');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s004','李三',19,'2001-04-14','0','c002');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s005','周四',19,'2001-02-13','0','c002');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s006','王五',18,'2002-06-12','1','c002');

2.2 后端實作：domain、Mapper

image-20201011221402062

2.2.1 班級相關

  • JavaBean

    package com.czxy.domain;

import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;

/**
 * @author manor
 *  
 */
@Table(name="tb_class")
public class Classes {
    @Id
    @Column(name="c_id")
    private String cid;

    @Column(name="c_name")
    private String cname;

    @Column(name="`desc`")
    private String desc;

    public String getCid() {
        return cid;
    }

    public void setCid(String cid) {
        this.cid = cid;
    }

    public String getCname() {
        return cname;
    }

    public void setCname(String cname) {
        this.cname = cname;
    }

    public String getDesc() {
        return desc;
    }

    public void setDesc(String desc) {
        this.desc = desc;
    }

    @Override
    public String toString() {
        return "Classes{" +
                "cid='" + cid + '\'' +
                ", cname='" + cname + '\'' +
                ", desc='" + desc + '\'' +
                '}';
    }
}

  • Mapper

    package com.czxy.mapper;

import com.czxy.domain.Classes;
import tk.mybatis.mapper.common.Mapper;

/**
 * @author manor
 *  
 */
@org.apache.ibatis.annotations.Mapper
public interface ClassesMapper extends Mapper<Classes> {
}

2.2.2 學生相關

  • JavaBean

    package com.czxy.domain;

import com.fasterxml.jackson.annotation.JsonFormat;

import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;
import java.util.Date;

/**
 * @author manor
 *  
 */
@Table(name="tb_student")
public class Student {

    @Id
    @Column(name="s_id")
    private String sid;         //學生ID

    @Column(name="sname")
    private String sname;         //姓名

    @Column(name="age")
    private Integer age;         //年齡

    @Column(name="birthday")
    @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
    private Date birthday;         //生日

    @Column(name="gender")
    private String gender;      //性別

    @Column(name="c_id")
    private String cid;         //班級外鍵

    private Classes classes;    //班級物件

    public String getSid() {
        return sid;
    }

    public void setSid(String sid) {
        this.sid = sid;
    }

    public String getSname() {
        return sname;
    }

    public void setSname(String sname) {
        this.sname = sname;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public String getCid() {
        return cid;
    }

    public void setCid(String cid) {
        this.cid = cid;
    }

    public Classes getClasses() {
        return classes;
    }

    public void setClasses(Classes classes) {
        this.classes = classes;
    }

    @Override
    public String toString() {
        return "Student{" +
                "sid='" + sid + '\'' +
                ", sname='" + sname + '\'' +
                ", age=" + age +
                ", birthday=" + birthday +
                ", gender='" + gender + '\'' +
                ", cid='" + cid + '\'' +
                ", classes=" + classes +
                '}';
    }
}

  • Mapper

    package com.czxy.mapper;

import com.czxy.domain.Student;
import tk.mybatis.mapper.common.Mapper;

/**
 * @author manor
 *  
 */
@org.apache.ibatis.annotations.Mapper
public interface StudentMapper extends Mapper<Student> {

}

3.后端實作

3.1 班級后端

image-20201011221949252

3.1.1 查詢所有班級

  • service

    package com.czxy.service;

import com.czxy.domain.Classes;
import com.czxy.domain.Student;
import com.czxy.mapper.ClassesMapper;
import com.czxy.mapper.StudentMapper;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;

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

/**
 * @author manor
 *  
 */
@Service
@Transactional
public class ClassesService {

    @Resource
    private ClassesMapper classesMapper;
    @Resource
    private StudentMapper studentMapper;

    /**
     * 查詢所有
     * @return
     */
    public List<Classes> findAll() {
        List<Classes> list = classesMapper.selectAll();
        return list;
    }
}

  • controller

package com.czxy.controller;

import com.czxy.domain.Classes;
import com.czxy.service.ClassesService;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.*;

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

/**

  • @author manor

*/
@RestController
@RequestMapping("/classes")
public class ClassesController {

  @Resource
  private ClassesService classesService;

  /**
   * 查詢所有
   * @return
   */
  @GetMapping
  public BaseResult findAll(){
      // 查詢
      List<Classes> list = classesService.findAll();
      // 回傳
      return BaseResult.ok("查詢成功", list );
  }

}




### 3.1.2 添加班級

* service

~~~java
    /**
     * 添加班級
     * @param classes
     * @return
     */
    public boolean save(Classes classes) {
        // 校驗
        Classes find = classesMapper.selectByPrimaryKey(classes.getCid());
        if(find != null){
            throw new RuntimeException("ID已存在");
        }
        // 添加
        int count = classesMapper.insert(classes);
        return count == 1;
    }

  • controller

    /**
     * 添加班級
     * @param classes
     * @return
     */
    @PostMapping
    public BaseResult save(@RequestBody Classes classes){
        try {
            // 添加
            boolean result = classesService.save(classes);
            // 回傳
            if(result){
                return BaseResult.ok("添加成功");
            } else {
                return BaseResult.error("添加失敗");
            }
        } catch (Exception e) {
            return BaseResult.error(e.getMessage());
        }
    }

3.1.3 查詢班級詳情

  • service

        /**
     * 查詢詳情
     * @param classId
     * @return
     */
    public Classes findById(String classId){
        Classes classes = classesMapper.selectByPrimaryKey(classId);
        return classes;
    }

  • controller

    	/**
     * 查詢詳情
     * @param classId
     * @return
     */
    @GetMapping("/{id}")
    public BaseResult findById(@PathVariable("id") String classId ){
        // 查詢
        Classes classes = classesService.findById(classId);

        if(classes != null) {
            // 回傳
            return BaseResult.ok("查詢成功", classes);
        } else {
            return BaseResult.error("查詢失敗");
        }
    }

3.1.4 更新班級

  • service

        /**
     * 更新操作
     * @param classes
     * @return
     */
    public boolean update(Classes classes){
        // 校驗
        Classes find = classesMapper.selectByPrimaryKey(classes.getCid());
        if(find == null){
            throw new RuntimeException("ID不存在");
        }
        // 更新非空項
        int count = classesMapper.updateByPrimaryKeySelective(classes);
        return count == 1;
    }

  • controller

        /**
     * 更新操作
     * @param classes
     * @return
     */
    @PutMapping
    public BaseResult update(@RequestBody Classes classes){
        try {
            // 添加
            boolean result = classesService.update(classes);
            // 回傳
            if(result){
                return BaseResult.ok("更新成功");
            } else {
                return BaseResult.error("更新失敗");
            }
        } catch (Exception e) {
            return BaseResult.error(e.getMessage());
        }
    }

3.1.5 洗掉班級

  • service

        /**
     * 通過id洗掉詳情
     * @param classId
     * @return
     */
    public boolean deleteById(String classId) {
        // 查詢指定班級id的學生數
        Example example = new Example(Student.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("cid", classId);
        int studentCount = studentMapper.selectCountByExample(example);
        if(studentCount > 0) {
            throw new RuntimeException("班級已關聯學生，不能洗掉");
        }

        int count = classesMapper.deleteByPrimaryKey(classId);
        return count == 1;
    }

  • controller

        /**
     * 查詢詳情
     * @param classId
     * @return
     */
    @DeleteMapping("/{id}")
    public BaseResult deleteById(@PathVariable("id") String classId ){
        try {
            // 查詢
            boolean result = classesService.deleteById(classId);
            // 回傳
            if(result){
                return BaseResult.ok("洗掉成功");
            } else {
                return BaseResult.error("洗掉失敗");
            }
        } catch (Exception e) {
            return BaseResult.error(e.getMessage());
        }
    }

3.2 學生后端

image-20201011224721578

3.1.1 查詢所有學生

  • StudentVo

    package com.czxy.vo;

/**
 * @author manor
 *  
 */
public class StudentVo {
    private String cid;     //班級
    private String sname;       //姓名
    private String startAge;    //開始年齡
    private String endAge;      //結束年齡

    public String getCid() {
        return cid;
    }

    public void setCid(String cid) {
        this.cid = cid;
    }

    public String getSname() {
        return sname;
    }

    public void setSname(String sname) {
        this.sname = sname;
    }

    public String getStartAge() {
        return startAge;
    }

    public void setStartAge(String startAge) {
        this.startAge = startAge;
    }

    public String getEndAge() {
        return endAge;
    }

    public void setEndAge(String endAge) {
        this.endAge = endAge;
    }

    @Override
    public String toString() {
        return "StudentVo{" +
                "cid='" + cid + '\'' +
                ", sname='" + sname + '\'' +
                ", startAge='" + startAge + '\'' +
                ", endAge='" + endAge + '\'' +
                '}';
    }
}

  • service

    package com.czxy.service;

import com.czxy.domain.Classes;
import com.czxy.domain.Student;
import com.czxy.mapper.ClassesMapper;
import com.czxy.mapper.StudentMapper;
import com.czxy.vo.StudentVo;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;

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

/**
 * @author manor
 *  
 */
@Service
@Transactional
public class StudentService {

    @Resource
    private StudentMapper studentMapper;

    @Resource
    private ClassesMapper classesMapper;


    /**
     * 查詢所有 + 分頁
     * @return
     */
    public PageInfo<Student> findAllByCondition(StudentVo studentVo, Integer pageSize, Integer pageNum){
        // 拼湊條件
        Example example = new Example(Student.class);
        Example.Criteria criteria = example.createCriteria();
        if(studentVo != null){
            //等值查詢
            if(studentVo.getCid() != null && !"".equals(studentVo.getCid())) {
                criteria.andEqualTo("cid",studentVo.getCid());
            }
            // 模糊查詢
            if(studentVo.getSname() != null && !"".equals(studentVo.getSname())) {
                criteria.andLike("sname","%"+studentVo.getSname()+"%");
            }
            // 區間查詢
            if(studentVo.getStartAge() != null && !"".equals(studentVo.getStartAge())){
                criteria.andGreaterThanOrEqualTo("age",studentVo.getStartAge());
            }
            if(studentVo.getEndAge() != null && !"".equals(studentVo.getEndAge())) {
                criteria.andLessThanOrEqualTo("age",studentVo.getEndAge());
            }
        }

        // 分頁
        PageHelper.startPage(pageNum,pageSize);

        // 條件查詢
        List<Student> list = studentMapper.selectByExample(example);

        // 關聯查詢
        for(Student student : list){
            // 查詢班級外鍵對應的物件
            Classes classes = classesMapper.selectByPrimaryKey(student.getCid());
            student.setClasses(classes);
        }

        // 分頁封裝
        PageInfo pageInfo = new PageInfo(list);
        return pageInfo;
    }
}

  • controller

    package com.czxy.controller;

import com.czxy.domain.Student;
import com.czxy.service.StudentService;
import com.czxy.vo.BaseResult;
import com.czxy.vo.StudentVo;
import com.github.pagehelper.PageInfo;
import org.springframework.web.bind.annotation.*;

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

/**
 * @author manor
 *  
 */
@RestController
@RequestMapping("/student")
public class StudentController {

    @Resource
    private StudentService studentService;

    /**
     * 條件查詢
     * @param studentVo
     * @return
     */
    @PostMapping("/condition/{pagesize}/{pagenum}")
    public BaseResult conditioin(@RequestBody StudentVo studentVo, @PathVariable("pagesize") Integer pagesize , @PathVariable("pagenum") Integer pagenum){
        // 添加
        PageInfo<Student> pageInfo = studentService.findAllByCondition(studentVo,pagesize,pagenum);
        // 回傳
        return BaseResult.ok("查詢成功", pageInfo);
    }
}

3.1.2 添加學生

  • service

        /**
     * 添加學生
     * @param student
     * @return
     */
    public boolean save(Student student){
        // 校驗
        Student find = studentMapper.selectByPrimaryKey(student.getSid());
        if(find != null) {
            throw new RuntimeException("ID已存在");
        }
        // 添加
        int count = studentMapper.insert(student);
        return count == 1;
    }

  • controller

        /**
     * 添加學生
     * @param student
     * @return
     */
    @PostMapping
    public BaseResult save(@RequestBody Student student){
        try {
            // 添加
            boolean result = studentService.save(student);
            // 回傳
            if(result){
                return BaseResult.ok("添加成功");
            } else {
                return BaseResult.error("添加失敗");
            }
        } catch (Exception e) {
            return BaseResult.error(e.getMessage());
        }
    }

3.1.3 查詢學生詳情

  • service

        /**
     * 查詢詳情
     * @param studentId
     * @return
     */
    public Student findById(String studentId){
        Student student = studentMapper.selectByPrimaryKey(studentId);
        return student;
    }

  • controller

        /**
     * 查詢詳情
     * @param studentId
     * @return
     */
    @GetMapping("/{id}")
    public BaseResult findById(@PathVariable("id") String studentId ){
        // 查詢
        Student student = studentService.findById(studentId);
        if(student != null){
            // 回傳
            return BaseResult.ok("查詢成功", student);
        } else {
            return BaseResult.error("查詢失敗");
        }
    }

3.1.4 更新學生

  • service

        /**
     * 更新操作
     * @param student
     * @return
     */
    public boolean update(Student student){
        // 校驗
        Student find = studentMapper.selectByPrimaryKey(student.getSid());
        if(find == null) {
            throw new RuntimeException("ID不存在");
        }
        // 更新非空項
        int count = studentMapper.updateByPrimaryKeySelective(student);
        return count == 1;
    }

  • controller

        /**
     * 更新操作
     * @param student
     * @return
     */
    @PutMapping
    public BaseResult update(@RequestBody Student student){
        try {
            // 添加
            boolean result = studentService.update(student);
            // 回傳
            if(result){
                return BaseResult.ok("更新成功");
            } else {
                return BaseResult.error("更新失敗");
            }
        } catch (Exception e) {
            return BaseResult.error(e.getMessage());
        }
    }

3.1.5 洗掉學生

  • service

         /**
     * 通過id洗掉詳情
     * @param studentId
     * @return
     */
    public boolean deleteById(String studentId) {
        int count = studentMapper.deleteByPrimaryKey(studentId);
        return count == 1;
    }

  • controller

        /**
     * 通過id洗掉
     * @param studentId
     * @return
     */
    @DeleteMapping("/{id}")
    public BaseResult deleteById(@PathVariable("id") String studentId ){
        // 查詢
        boolean result = studentService.deleteById(studentId);
        // 回傳
        if(result){
            return BaseResult.ok("洗掉成功");
        } else {
            return BaseResult.error("洗掉失敗");
        }
    }

4. 前端實作：Vue版

  • 專案前端目錄結構

image-20201011225452832

  • 使用Visual Studio Code 開發前端頁面

image-20201011225915306

4.1 班級前端

4.1.1 查詢所有

image-20201011232833227

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班級串列</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

</head>
<body>
    <div id="app">
        <a href="index.html">回傳首頁</a>
        <a href="classes_add.html">添加班級</a> <br/>
    
        <table id="tid" border="1" width="800">
            <tr>
                <td>班級ID</td>
                <td>班級名稱</td>
                <td>班級描述</td>
                <td>操作</td>
            </tr>
            <tr v-for="(classes,index) in classesList" :key="index">
                <td>{{classes.cid}}</td>
                <td>{{classes.cname}}</td>
                <td>{{classes.desc}}</td>
                <td>
                    <a href="">修改</a>
                    <a href="">洗掉</a>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
<script>
        new Vue({
            el: '#app',
            data: {
                classesList: [],       //班級資料
            },
            mounted() {
                // 查詢所有
                this.findAll()
            },
            methods: {
                findAll() {
                    var url = `/classes`;
                    axios.get(url)
                    .then( response => {
                        if(response.data.code == 1){
                            this.classesList = response.data.data
                        } else {
                            alert(response.data.message)
                        }
                    })
                    .catch(error => {
                        alert(error)
                    })
                }
            },
        })
    </script>

4.1.2 添加

image-20201011233350107

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班級串列</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

<body>
</head>
    <div id="app">
        <a href="classes_list.html">回傳串列頁</a>
    
        <table id="tid" border="1">
            <tr>
                <td>班級ID</td>
                <td><input v-model="classes.cid" /> </td>
            </tr>
            <tr>
                <td>班級名稱</td>
                <td><input  v-model="classes.cname" /> </td>
            </tr>
            <tr>
                <td>班級描述</td>
                <td>
                    <textarea cols="20" rows="5" v-model="classes.desc" ></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="添加" @click="addClasses" /></td>
            </tr>
    
        </table>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            classes: {},       //學生表單資料
        },
        mounted() {
            
        },
        methods: {
            addClasses() {
                var url = `/classes`;
                axios.post(url, this.classes)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 跳轉
                        location.href = "classes_list.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            }
        },
    })
</script>

4.1.3 修改

image-20201011234314193

  • 跳轉頁面

image-20201011234924215

<a :href="'classes_edit.html?id=' + classes.cid">修改</a>

  • 回顯

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班級串列</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

<body>
</head>
    <div id="app">
        <a href="classes_list.html">回傳串列頁</a>
    
        <table id="tid" border="1">
            <tr>
                <td>班級名稱</td>
                <td>
                    <input v-model="classes.cname" />
                </td>
            </tr>
            <tr>
                <td>班級描述</td>
                <td>
                    <textarea cols="20" rows="5" v-model="classes.desc" ></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="更新" /></td>
            </tr>
    
        </table>
    </div>

</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            classes: {},       //學生表單資料
        },
        mounted() {
            // 通過id查詢詳情
            this.findById()
        },
        methods: {
            findById() {
                // 獲得id
                var arr = location.href.split("?id=")
                var id = arr[1]
                // 路徑
                var url = `/classes/${id}`;

                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classes = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            }
        },
    })
</script>

  • 提交

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班級串列</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

<body>
</head>
    <div id="app">
        <a href="classes_list.html">回傳串列頁</a>
    
        <table id="tid" border="1">
            <tr>
                <td>班級名稱</td>
                <td>
                    <input v-model="classes.cname" />
                </td>
            </tr>
            <tr>
                <td>班級描述</td>
                <td>
                    <textarea cols="20" rows="5" v-model="classes.desc" ></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="更新" @click="editClasses" /></td>
            </tr>
    
        </table>
    </div>

</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            classes: {},       //學生表單資料
        },
        mounted() {
            // 通過id查詢詳情
            this.findById()
        },
        methods: {
            findById() {
                // 獲得id
                var arr = location.href.split("?id=")
                var id = arr[1]
                // 路徑
                var url = `/classes/${id}`;

                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classes = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            editClasses() {
                var url = `/classes`;
                axios.put(url, this.classes)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 跳轉
                        location.href = "classes_list.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            }
        },
    })
</script>

4.1.4 洗掉

  • 修改 classes_list.html 頁面，填寫修改功能

    image-20201013183258786

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班級串列</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

</head>
<body>
    <div id="app">
        <a href="index.html">回傳首頁</a>
        <a href="classes_add.html">添加班級</a> <br/>
    
        <table id="tid" border="1" width="800">
            <tr>
                <td>班級ID</td>
                <td>班級名稱</td>
                <td>班級描述</td>
                <td>操作</td>
            </tr>
            <tr v-for="(classes,index) in classesList" :key="index">
                <td>{{classes.cid}}</td>
                <td>{{classes.cname}}</td>
                <td>{{classes.desc}}</td>
                <td>
                    <a :href="'classes_edit.html?id=' + classes.cid">修改</a>
                    <a href="#" @click="deleteClasses(classes.cid)">洗掉</a>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            classesList: [],       //班級資料
        },
        mounted() {
            // 查詢所有
            this.findAll()
        },
        methods: {
            findAll() {
                var url = `/classes`;
                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classesList = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            deleteClasses(id) {
                if(! confirm("您確定要洗掉么？")){
                    return 
                }
                // 洗掉
                var url = `/classes/${id}`;
                axios.delete(url)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 跳轉
                        location.href = "classes_list.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            }
        },
    })
</script>

4.2 學生前端

4.2.1 查詢所有

1）查詢 + 條件 + 分頁

image-20201011235404520

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班級串列</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

</head>
<body>
    <div id="app">
        <a href="index.html">回傳首頁</a>
        <a href="student_add.html">添加學生</a> <br/>
        <!-- 查詢條件 -->
        <table>
            <tr>
                <td>班級</td>
                <td>
                    <select v-model="student.cid">
                        <option value="">--選擇班級--</option>
                        <option value="c001">--Java12--</option>
                        <option value="c002">--Java34--</option>
                    </select>
                </td>
                <td>姓名：</td>
                <td>
                    <input type="text" placeholder="請輸入姓名" v-model="student.sname"size="10">
                </td>
                <td>年齡：</td>
                <td>
                    <input type="text" placeholder="請輸入開始年齡" v-model="student.startAge" size="10">
                    --
                    <input type="text" placeholder="請輸入結束年齡" v-model="student.endAge" size="10">
                </td>
                <td><input type="button" value="查詢" @click="condition(1)"></td>
            </tr>
        </table>
        
        <!-- 查詢串列 -->
        <table id="tid" border="1" width="800">
            <tr>
    
                <td>學生ID</td>
                <td>班級ID</td>
                <td>學生姓名</td>
                <td>年齡</td>
                <td>生日</td>
                <td>性別</td>
                <td>操作</td>
            </tr>
           <tr v-for="(student,index) in pageInfo.list" :key="index">
                <td>{{student.sid}}</td>
                <td>{{student.classes.cname}}</td>
                <td>{{student.sname}}</td>
                <td>{{student.age}}</td>
                <td>{{student.birthday}}</td>
                <td>{{student.gender == 1 ? "男" : "女"}}</td>
                <td>
                    <a href="">修改</a>
                    <a href="">洗掉</a>
                </td>
            </tr>
        </table>
    
        <!-- 分頁條 -->
        <div id="pageId">
            <a href="#" v-for="index in pageInfo.pages" :key="index" @click.prevent="condition(index)" >{{index}}</a> 
        </div>

    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            pageSize: 2,        //每頁多少條
            student: {          //表單物件

            },
            pageInfo: {},       //分頁物件
        },
        mounted() {
            // 查詢所有
            this.condition(1)
        },
        methods: {
            condition(pageNum) {
                var url = `/student/condition/${this.pageSize}/${pageNum}`;
                axios.post(url, this.student)
                .then( response => {
                    if(response.data.code == 1){
                        this.pageInfo = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                })
            }
        },
    })
</script>

2）查詢條件，下拉串列

image-20201011235800412

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班級串列</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

</head>
<body>
    <div id="app">
        <a href="index.html">回傳首頁</a>
        <a href="student_add.html">添加學生</a> <br/>
        <!-- 查詢條件 -->
        <table>
            <tr>
                <td>班級</td>
                <td>
                    <select v-model="student.cid">
                        <option value="">--選擇班級--</option>
                        <option v-for="(classes,index) in classesList" :key="index" :value="classes.cid">{{classes.cname}}</option>
                    </select>
                </td>
                <td>姓名：</td>
                <td>
                    <input type="text" placeholder="請輸入姓名" v-model="student.sname"size="10">
                </td>
                <td>年齡：</td>
                <td>
                    <input type="text" placeholder="請輸入開始年齡" v-model="student.startAge" size="10">
                    --
                    <input type="text" placeholder="請輸入結束年齡" v-model="student.endAge" size="10">
                </td>
                <td><input type="button" value="查詢" @click="condition(1)"></td>
            </tr>
        </table>

        <!-- 查詢串列 -->
        <table id="tid" border="1" width="800">
            <tr>
    
                <td>學生ID</td>
                <td>班級ID</td>
                <td>學生姓名</td>
                <td>年齡</td>
                <td>生日</td>
                <td>性別</td>
                <td>操作</td>
            </tr>
           <tr v-for="(student,index) in pageInfo.list" :key="index">
                <td>{{student.sid}}</td>
                <td>{{student.classes.cname}}</td>
                <td>{{student.sname}}</td>
                <td>{{student.age}}</td>
                <td>{{student.birthday}}</td>
                <td>{{student.gender == 1 ? "男" : "女"}}</td>
                <td>
                    <a href="">修改</a>
                    <a href="">洗掉</a>
                </td>
            </tr>
        </table>
    
        <!-- 分頁條 -->
        <div id="pageId">
            <a href="#" v-for="index in pageInfo.pages" :key="index" @click.prevent="condition(index)" >{{index}}</a> 
        </div>

    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            pageSize: 2,        //每頁多少條
            student: {          //表單物件
                cid: ''
            },
            pageInfo: {},       //分頁物件
            classesList: []     //班級串列
        },
        mounted() {
            // 查詢所有
            this.condition(1)
            // 查詢所有班級
            this.findAllClasses()
        },
        methods: {
            condition(pageNum) {
                var url = `/student/condition/${this.pageSize}/${pageNum}`;
                axios.post(url, this.student)
                .then( response => {
                    if(response.data.code == 1){
                        this.pageInfo = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                })
            },
            findAllClasses() {
                var url = `/classes`;
                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classesList = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            }
        },
    })
</script>

3）跳轉

image-20201012000557783

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班級串列</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

</head>
<body>
    <div id="app">
        <a href="index.html">回傳首頁</a>
        <a href="student_add.html">添加學生</a> <br/>
        <!-- 查詢條件 -->
        <table>
            <tr>
                <td>班級</td>
                <td>
                    <select v-model="student.cid">
                        <option value="">--選擇班級--</option>
                        <option v-for="(classes,index) in classesList" :key="index" :value="classes.cid">{{classes.cname}}</option>
                    </select>
                </td>
                <td>姓名：</td>
                <td>
                    <input type="text" placeholder="請輸入姓名" v-model="student.sname"size="10">
                </td>
                <td>年齡：</td>
                <td>
                    <input type="text" placeholder="請輸入開始年齡" v-model="student.startAge" size="10">
                    --
                    <input type="text" placeholder="請輸入結束年齡" v-model="student.endAge" size="10">
                </td>
                <td><input type="button" value="查詢" @click="condition(1)"></td>
            </tr>
        </table>

        <!-- 查詢串列 -->
        <table id="tid" border="1" width="800">
            <tr>
    
                <td>學生ID</td>
                <td>班級ID</td>
                <td>學生姓名</td>
                <td>年齡</td>
                <td>生日</td>
                <td>性別</td>
                <td>操作</td>
            </tr>
           <tr v-for="(student,index) in pageInfo.list" :key="index">
                <td>{{student.sid}}</td>
                <td>{{student.classes.cname}}</td>
                <td>{{student.sname}}</td>
                <td>{{student.age}}</td>
                <td>{{student.birthday}}</td>
                <td>{{student.gender == 1 ? "男" : "女"}}</td>
                <td>
                    <a href="">修改</a>
                    <a href="">洗掉</a>
                </td>
            </tr>
        </table>
    
        <!-- 分頁條 -->
        <div id="pageId">
            <a href="#" v-for="index in pageInfo.pages" :key="index" @click.prevent="condition(index)" >{{index}}</a> 
            跳轉到第 <input type="text" v-model="pageNum" size="5" @keydown.enter="go" />頁
        </div>

    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            pageSize: 2,        //每頁多少條
            pageNum: 1,         //第幾頁
            student: {          //表單物件
                cid: ''
            },
            pageInfo: {},       //分頁物件
            classesList: []     //班級串列
        },
        mounted() {
            // 查詢所有
            this.condition(1)
            // 查詢所有班級
            this.findAllClasses()
        },
        methods: {
            condition(pageNum) {
                var url = `/student/condition/${this.pageSize}/${pageNum}`;
                axios.post(url, this.student)
                .then( response => {
                    if(response.data.code == 1){
                        this.pageInfo = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                })
            },
            findAllClasses() {
                var url = `/classes`;
                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classesList = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            go() {
                if(parseInt(this.pageNum) == this.pageNum) {
                    this.condition(this.pageNum)
                }
            }
        },
    })
</script>

4）改變分頁pageSize

image-20201012000955704

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班級串列</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

</head>
<body>
    <div id="app">
        <a href="index.html">回傳首頁</a>
        <a href="student_add.html">添加學生</a> <br/>
        <!-- 查詢條件 -->
        <table>
            <tr>
                <td>班級</td>
                <td>
                    <select v-model="student.cid">
                        <option value="">--選擇班級--</option>
                        <option v-for="(classes,index) in classesList" :key="index" :value="classes.cid">{{classes.cname}}</option>
                    </select>
                </td>
                <td>姓名：</td>
                <td>
                    <input type="text" placeholder="請輸入姓名" v-model="student.sname"size="10">
                </td>
                <td>年齡：</td>
                <td>
                    <input type="text" placeholder="請輸入開始年齡" v-model="student.startAge" size="10">
                    --
                    <input type="text" placeholder="請輸入結束年齡" v-model="student.endAge" size="10">
                </td>
                <td><input type="button" value="查詢" @click="condition(1)"></td>
            </tr>
        </table>

        <!-- 查詢串列 -->
        <table id="tid" border="1" width="800">
            <tr>
    
                <td>學生ID</td>
                <td>班級ID</td>
                <td>學生姓名</td>
                <td>年齡</td>
                <td>生日</td>
                <td>性別</td>
                <td>操作</td>
            </tr>
           <tr v-for="(student,index) in pageInfo.list" :key="index">
                <td>{{student.sid}}</td>
                <td>{{student.classes.cname}}</td>
                <td>{{student.sname}}</td>
                <td>{{student.age}}</td>
                <td>{{student.birthday}}</td>
                <td>{{student.gender == 1 ? "男" : "女"}}</td>
                <td>
                    <a href="">修改</a>
                    <a href="">洗掉</a>
                </td>
            </tr>
        </table>
    
        <!-- 分頁條 -->
        <div id="pageId">
            每頁
            <select v-model="pageSize" @change="condition(1)">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="5">5</option>
                <option value="10">10</option>
            </select>條，

            <a href="#" v-for="index in pageInfo.pages" :key="index" @click.prevent="condition(index)" >{{index}}</a> 
            ，跳轉到第 <input type="text" v-model="pageNum" size="5" @keydown.enter="go" />頁
        </div>

    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            pageSize: 2,        //每頁多少條
            pageNum: 1,         //第幾頁
            student: {          //表單物件
                cid: ''
            },
            pageInfo: {},       //分頁物件
            classesList: []     //班級串列
        },
        mounted() {
            // 查詢所有
            this.condition(1)

            // 查詢所有班級
            this.findAllClasses()
        },
        methods: {
            condition(pageNum) {
                var url = `/student/condition/${this.pageSize}/${pageNum}`;
                axios.post(url, this.student)
                .then( response => {
                    if(response.data.code == 1){
                        this.pageInfo = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                })
            },
            findAllClasses() {
                var url = `/classes`;
                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classesList = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            go() {
                if(parseInt(this.pageNum) == this.pageNum) {
                    this.condition(this.pageNum)
                }
            }
        },
    })
</script>

4.2.2 添加

image-20201012002004303

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班級串列</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

<body>
</head>
    <div id="app">

        <a href="student_list.html">回傳串列頁</a>
    
        <table id="tid" border="1">
            <tr>
                <td>學生</td>
                <td><input v-model="student.sid" /> </td>
            </tr>
            <tr>
                <td>班級ID</td>
                <td>
                    <!-- <input name="cId" /> -->
                    <select v-model="student.cid">
                        <option value="">--請選擇--</option>
                        <option v-for="(classes,index) in classesList" :key="index" :value="classes.cid">{{classes.cname}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>姓名</td>
                <td><input v-model="student.sname"/> </td>
            </tr>
            <tr>
                <td>年齡</td>
                <td><input v-model="student.age" /> </td>
            </tr>
            <tr>
                <td>生日</td>
                <td><input v-model="student.birthday"/> </td>
            </tr>
            <tr>
                <td>性別</td>
                <td>
                    <input type="radio" v-model="student.gender" value="1" />男
                    <input type="radio" v-model="student.gender" value="0" />女
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="添加" @click="addStudent"/></td>
            </tr>

        </table>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            student: {          //表單物件
                cid: ''
            },
            classesList: []     //班級串列
        },
        mounted() {

            // 查詢所有班級
            this.findAllClasses()
        },
        methods: {

            findAllClasses() {
                var url = `/classes`;
                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classesList = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            addStudent() {
                var url = `/student`;
                axios.post(url, this.student)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 跳轉
                        location.href = "student_list.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },

        },
    })
</script>

4.2.3 修改

image-20201012003133734

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>編輯學生</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

<body>
</head>
<div id="app">

    <a href="student_list.html">回傳串列頁</a>

    <table id="tid" border="1">
        <tr>
            <td>學生</td>
            <td><input v-model="student.sid" /> </td>
        </tr>
        <tr>
            <td>班級ID</td>
            <td>
                <!-- <input name="cId" /> -->
                <select v-model="student.cid">
                    <option value="">--請選擇--</option>
                    <option v-for="(classes,index) in classesList" :key="index" :value="classes.cid">{{classes.cname}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>姓名</td>
            <td><input v-model="student.sname"/> </td>
        </tr>
        <tr>
            <td>年齡</td>
            <td><input v-model="student.age" /> </td>
        </tr>
        <tr>
            <td>生日</td>
            <td><input v-model="student.birthday"/> </td>
        </tr>
        <tr>
            <td>性別</td>
            <td>
                <input type="radio" v-model="student.gender" value="1" />男
                <input type="radio" v-model="student.gender" value="0" />女
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="添加" @click="editStudent"/></td>
        </tr>

    </table>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            student: {          //表單物件
                cid: ''
            },
            classesList: []     //班級串列
        },
        mounted() {

            // 查詢所有班級
            this.findAllClasses()
        },
        methods: {

            findAllClasses() {
                var url = `/classes`;
                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classesList = response.data.data
                        // 查詢詳情
                        this.findById()
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            findById() {
                // 獲得id
                var arr = location.href.split("?id=")
                var id = arr[1]
                // 路徑
                var url = `/student/${id}`;

                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.student = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            editStudent() {
                var url = `/student`;
                axios.put(url, this.student)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 跳轉
                        location.href = "student_list.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },

        },
    })
</script>

4.2.4 洗掉

image-20201012003317024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班級串列</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

</head>
<body>
<div id="app">
    <a href="index.html">回傳首頁</a>
    <a href="student_add.html">添加學生</a> <br/>
    <!-- 查詢條件 -->
    <table>
        <tr>
            <td>班級</td>
            <td>
                <select v-model="student.cid">
                    <option value="">--選擇班級--</option>
                    <option v-for="(classes,index) in classesList" :key="index" :value="classes.cid">{{classes.cname}}</option>
                </select>
            </td>
            <td>姓名：</td>
            <td>
                <input type="text" placeholder="請輸入姓名" v-model="student.sname"size="10">
            </td>
            <td>年齡：</td>
            <td>
                <input type="text" placeholder="請輸入開始年齡" v-model="student.startAge" size="10">
                --
                <input type="text" placeholder="請輸入結束年齡" v-model="student.endAge" size="10">
            </td>
            <td><input type="button" value="查詢" @click="condition(1)"></td>
        </tr>
    </table>

    <!-- 查詢串列 -->
    <table id="tid" border="1" width="800">
        <tr>

            <td>學生ID</td>
            <td>班級ID</td>
            <td>學生姓名</td>
            <td>年齡</td>
            <td>生日</td>
            <td>性別</td>
            <td>操作</td>
        </tr>
        <tr v-for="(student,index) in pageInfo.list" :key="index">
            <td>{{student.sid}}</td>
            <td>{{student.classes.cname}}</td>
            <td>{{student.sname}}</td>
            <td>{{student.age}}</td>
            <td>{{student.birthday}}</td>
            <td>{{student.gender == 1 ? "男" : "女"}}</td>
            <td>
                <a :href="'student_edit.html?id='+student.sid">修改</a>
                <a href="#" @click.prevent="deleteStudent(student.sid)">洗掉</a>
            </td>
        </tr>
    </table>

    <!-- 分頁條 -->
    <div id="pageId">
        每頁
        <select v-model="pageSize" @change="condition(1)">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="5">5</option>
            <option value="10">10</option>
        </select>條，

        <a href="#" v-for="index in pageInfo.pages" :key="index" @click.prevent="condition(index)" >{{index}}</a>
        ，跳轉到第 <input type="text" v-model="pageNum" size="5" @keydown.enter="go" />頁
    </div>

</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            pageSize: 2,        //每頁多少條
            pageNum: 1,         //第幾頁
            student: {          //表單物件
                cid: ''
            },
            pageInfo: {},       //分頁物件
            classesList: []     //班級串列
        },
        mounted() {
            // 查詢所有
            this.condition(1)
            this.condition(1)
            this.condition(1)
            this.condition(1)
            // 查詢所有班級
            this.findAllClasses()
        },
        methods: {
            condition(pageNum) {
                var url = `/student/condition/${this.pageSize}/${pageNum}`;
                axios.post(url, this.student)
                    .then( response => {
                        if(response.data.code == 1){
                            this.pageInfo = response.data.data
                        } else {
                            alert(response.data.message)
                        }
                    })
                    .catch(error => {
                    })
            },
            findAllClasses() {
                var url = `/classes`;
                axios.get(url)
                    .then( response => {
                        if(response.data.code == 1){
                            this.classesList = response.data.data
                        } else {
                            alert(response.data.message)
                        }
                    })
                    .catch(error => {
                        alert(error)
                    })
            },
            go() {
                if(parseInt(this.pageNum) == this.pageNum) {
                    this.condition(this.pageNum)
                }
            },
            deleteStudent(id) {
                if(! confirm("您確定要洗掉么？")){
                    return
                }
                // 洗掉
                var url = `/student/${id}`;
                axios.delete(url)
                    .then( response => {
                        if(response.data.code == 1){
                            // 成功提示
                            alert(response.data.message)
                            // 跳轉
                            location.href = "student_list.html"
                        } else {
                            alert(response.data.message)
                        }
                    })
                    .catch(error => {
                        alert(error)
                    })
            }
        },
    })
</script>

5. 用戶操作

5.1 建表陳述句

create table tb_user(
  u_id varchar(32) primary key comment '用戶編號',
  user_name varchar(50) comment '用戶名',
  password varchar(32) comment '密碼',
  gender bit comment '性別,1表示男，0表示女'
);
insert into tb_user(u_id,user_name,password,gender) values('u001','jack','1234',1);
insert into tb_user(u_id,user_name,password,gender) values('u002','rose','1234',0);
insert into tb_user(u_id,user_name,password,gender) values('u003','張三','1234',1);

5.2 后端實作：domain、mapper

image-20201012110044974

  • domain

    package com.czxy.domain;

import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;

/**
 * @author manor
 *  
 */
@Table(name = "tb_user")
public class User {
    @Id
    @Column(name = "u_id")
    private String uid;         //用戶編號

    @Column(name = "user_name")
    private String username;     //用戶名

    @Column(name = "password")
    private String password;         //密碼

    @Column(name = "gender")
    private Integer gender;         //性別,1表示男，0表示女

    public String getUid() {
        return uid;
    }

    public void setUid(String uid) {
        this.uid = uid;
    }

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

    public Integer getGender() {
        return gender;
    }

    public void setGender(Integer gender) {
        this.gender = gender;
    }

    @Override
    public String toString() {
        return "User{" +
                "uid='" + uid + '\'' +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", gender=" + gender +
                '}';
    }
}

  • mapper

    package com.czxy.mapper;

import com.czxy.domain.User;
import tk.mybatis.mapper.common.Mapper;

/**
 * @author manor
 *  
 */
@org.apache.ibatis.annotations.Mapper
public interface UserMapper extends Mapper<User> {
}

5.3 用戶注冊

5.3.1 分析

  • 用戶注冊，其實就是添加功能

image-20201012113411402

5.3.2 后端實作

  • 撰寫service，用戶名存在不允許注冊

    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BvY3WRpL-1635379567699)(assets/image-20201012111842320.png)]

    package com.czxy.service;

import com.czxy.domain.User;
import com.czxy.mapper.UserMapper;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;

import javax.annotation.Resource;

/**
 * @author manor
 *  
 */
@Service
@Transactional
public class UserService {

    @Resource
    private UserMapper userMapper;

    /**
     * 用戶注冊
     * @param user
     * @return
     */
    public boolean register(User user){
        // 校驗：用戶名
        User findUser = findByUsername(user.getUsername());
        if(findUser != null){
            throw new RuntimeException("用戶名已存在");
        }

        // 添加
        int count = userMapper.insert(user);

        // 回傳
        return count == 1;
    }

    /**
     * 通過用戶名查詢
     * @param username
     * @return
     */
    public User findByUsername(String username){
        // 拼湊條件
        Example example = new Example(User.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("username", username);

        // 查詢
        User user = userMapper.selectOneByExample(example);
        return user;
    }

}

  • 撰寫controller

    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-EQSlLBvT-1635379567700)(assets/image-20201012112126781.png)]

    package com.czxy.controller;

import com.czxy.domain.User;
import com.czxy.service.UserService;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

/**
 * @author manor
 *  
 */
@RestController
@RequestMapping("/user")
public class UserController {

    @Resource
    private UserService userService;

    /**
     * 用戶注冊
     * @param user
     * @return
     */
    @PostMapping("/register")
    public BaseResult register(@RequestBody User user) {
        try {
            // 注冊
            boolean result = userService.register(user);

            // 回傳
            if(result){
                return BaseResult.ok("注冊成功");
            } else {
                return BaseResult.error("注冊失敗");
            }
        } catch (Exception e) {
            return BaseResult.error(e.getMessage());
        }
    }

}

5.3.3 前端實作

  • 修改首頁，跳轉到注冊頁面

    image-20201012113021509

<a href="user_register.html">注冊</a> |
  • 撰寫注冊功能：注冊成功跳轉到首頁
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶注冊</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

<body>
</head>
    <div id="app">
        <a href="index.html">回傳首頁</a>
    
        <table id="tid" border="1">
            <tr>
                <td>用戶名</td>
                <td><input v-model="user.username" /> </td>
            </tr>
            <tr>
                <td>密碼</td>
                <td><input type="password" v-model="user.password" /> </td>
            </tr>
            <tr>
                <td>性別</td>
                <td>
                    <input type="radio" v-model="user.gender" value="1"> 男
                    <input type="radio" v-model="user.gender" value="0"> 女
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="注冊" @click="register" /></td>
            </tr>
    
        </table>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {},       //用戶表單資料
        },
        methods: {
            register() {
                var url = `/user/register`;
                axios.post(url, this.user)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 跳轉
                        location.href = "index.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            }
        },
    })
</script>

5.4 用戶登錄

5.4.1 分析

  • 用戶登錄，也是就是一個通過用戶名和密碼的查詢功能

5.4.2 后端實作

  • 修改service，添加login方法

    image-20201012113845555

    /**
     * 用戶登錄
     * @param user
     * @return
     */
    public User login (User user){
        // 校驗：用戶名
        User findUser = findByUsername(user.getUsername());
        if(findUser == null){
            throw new RuntimeException("用戶名不存在");
        }

        // 登錄條件
        Example example = new Example(User.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("username", user.getUsername());
        criteria.andEqualTo("password", user.getPassword());

        // 查詢
        User loginUser = userMapper.selectOneByExample(example);
        return loginUser;
    }

  • 修改controller，添加login 方法

    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-G9lSq9bM-1635379567702)(assets/image-20201012113858143.png)]

        /**
     * 用戶注冊
     * @param user
     * @return
     */
    @PostMapping("/login")
    public BaseResult login(@RequestBody User user) {
        try {
            // 注冊
            User loginUser = userService.login(user);

            // 回傳
            if(loginUser != null ){
                // 需要將用戶資訊回應給瀏覽器
                return BaseResult.ok("登錄成功", loginUser);
            } else {
                return BaseResult.error("用戶名或密碼不匹配");
            }
        } catch (Exception e) {
            return BaseResult.error(e.getMessage());
        }
    }

5.4.3 localStorage&sessionStorage詳解

  • localStorage和sessionStorage都是window物件提供的全域屬性，在瀏覽器中存盤key/value對的資料
    • localStorage，本地存盤，瀏覽器視窗關閉后，資料保留，
    • sessionStorage，會話存盤，瀏覽器視窗關閉后，資料洗掉，
  • 基本操作：存盤資料、查詢資料、洗掉資料
功能實體
localStorage存盤資料localStorage.setItem(“鍵”,“值”)
查詢資料localStorage.getItem(“鍵”)
洗掉資料localStorage.removeItem(“鍵”)
sessionStorage存盤資料sessionStorage.setItem(“鍵”,“值”)
查詢資料sessionStorage.getItem(“鍵”)
洗掉資料sessionStorage.removeItem(“鍵”)

5.4.4 前端實作

  • 修改首頁

    image-20201012114341199

    <a href="user_login.html">注冊</a> |

  • 撰寫登錄頁面

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶登錄</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

<body>
</head>
    <div id="app">
        <a href="index.html">回傳首頁</a>
    
        <table id="tid" border="1">
            <tr>
                <td>用戶名</td>
                <td><input v-model="user.username" /> </td>
            </tr>
            <tr>
                <td>密碼</td>
                <td><input type="password" v-model="user.password" /> </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="登錄" @click="login" /></td>
            </tr>
    
        </table>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {},       //用戶表單資料
        },
        methods: {
            login() {
                var url = `/user/login`;
                axios.post(url, this.user)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 將用戶資訊記錄到瀏覽器
                        var userStr = JSON.stringify(response.data.data)
                        localStorage.setItem("loginUser", userStr)
                        // 跳轉
                        location.href = "index.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            }
        },
    })
</script>

5.4.5 首頁優化

  • 修改index.html頁面

    image-20201012120019158

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a href="classes_list.html">班級管理</a> |
        <a href="student_list.html">學生管理</a> |
        <span v-if="loginUser != null">
            <!-- 登錄后顯示內容 -->
            歡迎 {{loginUser.username}} ，
            <a href="#">退出</a> |
        </span>
        <span v-if="loginUser == null">
            <!-- 登錄前顯示內容 -->
            <a href="user_register.html">注冊</a> |
            <a href="user_login.html">登錄</a> |
        </span>
    </div>
    
</body>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            loginUser: null,       //登錄用戶資訊
        },
        mounted() {
            var userStr = localStorage.getItem("loginUser")
            if(userStr){
                this.loginUser = JSON.parse(userStr)
            }
        },
        
    })
</script>

5.5 用戶注銷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a href="classes_list.html">班級管理</a> |
        <a href="student_list.html">學生管理</a> |
        <span v-if="loginUser != null">
            <!-- 登錄后顯示內容 -->
            歡迎 {{loginUser.username}} ，
            <a href="#" @click.prevent="logout">退出</a> |
        </span>
        <span v-if="loginUser == null">
            <!-- 登錄前顯示內容 -->
            <a href="user_register.html">注冊</a> |
            <a href="user_login.html">登錄</a> |
        </span>
    </div>
    
</body>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            loginUser: null,       //登錄用戶資訊
        },
        mounted() {
            var userStr = localStorage.getItem("loginUser")
            if(userStr){
                this.loginUser = JSON.parse(userStr)
            }
        },
        methods: {
            logout() {
                localStorage.removeItem("loginUser")
                location.href = "index.html"
            }
        },
        
    })
</script>

5.6 用戶注冊前校驗

5.6.1 分析

image-20201012121858232

image-20201012121949717

image-20201012121957918

5.6.2 后端實作

  • 修改 UserController
   /**
     * 用戶名校驗
     * @param user
     * @return
     */
    @PostMapping("/checkname")
    public BaseResult checkname(@RequestBody User user) {
        try {
            // 注冊
            User findUser = userService.findByUsername(user.getUsername());

            // 回傳
            if(findUser == null ){
                return BaseResult.ok("用戶名可用");
            } else {
                return BaseResult.error("用戶名不可用");
            }
        } catch (Exception e) {
            return BaseResult.error(e.getMessage());
        }
    }

5.6.3 前端實作

  • 修改注冊頁面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶注冊</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

    <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
    </style>

<body>
</head>
<div id="app">
    <a href="index.html">回傳首頁</a>

    <table id="tid" border="1">
        <tr>
            <td>用戶名</td>
            <td>
                <input v-model="user.username" @blur="checkname" />
                <span :class="{'red': result.code == 0,'green': result.code == 1}" >{{result.message}}</span>
            </td>
        </tr>
        <tr>
            <td>密碼</td>
            <td><input type="password" v-model="user.password" /> </td>
        </tr>
        <tr>
            <td>性別</td>
            <td>
                <input type="radio" v-model="user.gender" value="1"> 男
                <input type="radio" v-model="user.gender" value="0"> 女
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" :disabled="result.code==0" value="注冊" @click="register" /></td>
        </tr>

    </table>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {},       //用戶表單資料
            result: {       //查詢結果
                code: 0
            }      
        },
        methods: {
            register() {
                var url = `/user/register`;
                axios.post(url, this.user)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 跳轉
                        location.href = "index.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            checkname() {
                var url = `/user/checkname`;
                axios.post(url, this.user)
                .then( response => {
                    // 記錄查詢結果
                    this.result = response.data
                })
                .catch(error => {
                    alert(error)
                })
            }
        },
    })
</script>

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

標籤：其他

上一篇：NodeJs - 原生 JavaScript 實作 Ajax 異步通信

下一篇：Java專案:個人博客系統設計和實作(java+Springboot+ssm+mysql+jsp+maven)

標籤雲
其他(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 有解無憂