【Nuxt.js】案例练习入门

柔光的暖阳◎ 2024-04-03 11:06 19阅读 0赞

SQL表

/*
     Navicat Premium Data Transfer
    
     Source Server         : localhost_3306
     Source Server Type    : MySQL
     Source Server Version : 50549
     Source Host           : localhost:3306
     Source Schema         : vue02
    
     Target Server Type    : MySQL
     Target Server Version : 50549
     File Encoding         : 65001
    
     Date: 10/10/2022 11:30:26
    */
    
    SET NAMES utf8mb4;
    SET FOREIGN_KEY_CHECKS = 0;
    
    -- ----------------------------
    -- Table structure for t_book
    -- ----------------------------
    DROP TABLE IF EXISTS `t_book`;
    CREATE TABLE `t_book`  (
      `bid` int(11) NOT NULL AUTO_INCREMENT,
      `title` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      `price` double(6, 2) NULL DEFAULT NULL,
      `category_id` int(11) NULL DEFAULT NULL,
      `createid` int(11) NULL DEFAULT NULL,
      `updateid` int(11) NULL DEFAULT NULL,
      PRIMARY KEY (`bid`) USING BTREE,
      INDEX `category_id`(`category_id`) USING BTREE,
      CONSTRAINT `t_book_ibfk_1` FOREIGN KEY (`category_id`) REFERENCES `t_category` (`cid`) ON DELETE RESTRICT ON UPDATE RESTRICT
    ) ENGINE = InnoDB AUTO_INCREMENT = 9 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = COMPACT;
    
    -- ----------------------------
    -- Records of t_book
    -- ----------------------------
    INSERT INTO `t_book` VALUES (1, '坏蛋是怎么练成的', 19.90, 1, 1, 1);
    INSERT INTO `t_book` VALUES (2, '武将是怎么练成的', 29.90, 1, 1, 1);
    INSERT INTO `t_book` VALUES (3, '斗破苍穹', 39.90, 2, 1, 1);
    INSERT INTO `t_book` VALUES (4, '凡人修仙传', 49.90, 2, 1, 1);
    INSERT INTO `t_book` VALUES (5, '仙逆', 59.90, 2, 2, 2);
    INSERT INTO `t_book` VALUES (6, '了不起的张焰烽', 69.90, 3, 2, 2);
    INSERT INTO `t_book` VALUES (7, '田企锐那些年', 79.90, 3, 3, 3);
    INSERT INTO `t_book` VALUES (8, '谢明安幸福生活III', 89.90, 3, 3, 3);
    
    -- ----------------------------
    -- Table structure for t_category
    -- ----------------------------
    DROP TABLE IF EXISTS `t_category`;
    CREATE TABLE `t_category`  (
      `cid` int(11) NOT NULL AUTO_INCREMENT,
      `cname` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      PRIMARY KEY (`cid`) USING BTREE
    ) ENGINE = InnoDB AUTO_INCREMENT = 8 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = COMPACT;
    
    -- ----------------------------
    -- Records of t_category
    -- ----------------------------
    INSERT INTO `t_category` VALUES (1, '小说');
    INSERT INTO `t_category` VALUES (2, '玄幻');
    INSERT INTO `t_category` VALUES (3, '人物传记');
    INSERT INTO `t_category` VALUES (4, '散文');
    INSERT INTO `t_category` VALUES (5, '诗');
    INSERT INTO `t_category` VALUES (6, '文言文');
    INSERT INTO `t_category` VALUES (7, '广告');
    
    -- ----------------------------
    -- Table structure for t_user
    -- ----------------------------
    DROP TABLE IF EXISTS `t_user`;
    CREATE TABLE `t_user`  (
      `uid` int(11) NOT NULL AUTO_INCREMENT,
      `username` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      `password` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      `age` int(11) NULL DEFAULT NULL,
      `sex` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      `email` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      PRIMARY KEY (`uid`) USING BTREE
    ) ENGINE = InnoDB AUTO_INCREMENT = 7 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = COMPACT;
    
    -- ----------------------------
    -- Records of t_user
    -- ----------------------------
    INSERT INTO `t_user` VALUES (1, 'xixi', '123', 12, '男', 'xixi@126.com');
    INSERT INTO `t_user` VALUES (2, 'lucy', '123', 13, '女', 'lucy@163.com');
    INSERT INTO `t_user` VALUES (3, 'jack', '123', 13, '男', 'jack@126.com');
    INSERT INTO `t_user` VALUES (4, 'jack', '123', NULL, '男', 'jack@126.com');
    INSERT INTO `t_user` VALUES (5, 'jack123', '123', NULL, '男', 'jack123@126.com');
    
    SET FOREIGN_KEY_CHECKS = 1;

项目目录结构：

![dad777eeaf87459cbc48e2fc6a85e210.png][]

实现功能：

1 书籍多条件分页查找

![ea9819f529244768b413fbfdd7e59bc7.png][]

2 新增书籍

分类下来列表框，（创建者id和更新者id先不填写）

3 修改书籍

4 批量删除书籍

![d3303053c8de498aa97adf412e136dd0.png][]

[dad777eeaf87459cbc48e2fc6a85e210.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/cd905f4ee9364e6eb70196120c2a5097.png
[ea9819f529244768b413fbfdd7e59bc7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e7d075c1826e47eeaf92d41e62dde2d3.png
[d3303053c8de498aa97adf412e136dd0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3783d709720f4ddeb404cebe0b3fa5f4.png