【Nuxt.js】案例练习入门

简介: 【Nuxt.js】案例练习入门

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




相关文章
|
21天前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
19 1
|
21天前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门:变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识,包括变量(var、let、const)、数据类型(Number、String、Boolean、Undefined、Null及Object、Array)和运算符(算术、赋值、比较、逻辑)。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要,是进阶学习JavaScript的关键。
|
1天前
|
JavaScript 前端开发 Serverless
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
17 2
|
13天前
|
JavaScript 前端开发
JavaScript-jQuery的使用 + JS的案例
JavaScript-jQuery的使用 + JS的案例
21 0
|
14天前
|
JavaScript
学习Node.js入门范例
然后,cmd中运行命令node E:/Test/server.js
18 2
|
14天前
|
IDE JavaScript 开发工具
Auto.js 开发入门
Auto.js 开发入门
|
19天前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
19天前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
19天前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
20天前
|
JavaScript 前端开发 程序员
javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍
javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍